* refactor: started with draft, done until new tabs for draft
* refactor: change the query and added the screen for draft
* added condition for fetching draft for channel delete or not
* refactor: added draft screen
* linter fixes
* Added draft post component
* added avatar and header display name for the draft post list
* added channel info component
* channel info completed
* proper naming
* added image file markdown acknowledgement support
* draft actions
* Fix the draft receiver in drafts
* separated send message handler
* Done with send drafts
* done with delete drafts
* change save to send draft
* handle lengthy message with show more button
* done with persistent message edit, send and delete drafts
* added alert for sending message
* added update at time for the drafts
* en.json extract fix
* Updated dependencies for useCallback
* refactor: added drafts list to animated list
* added swipeable component and delete conformation for drafts
* done with rendering of images in markdown for drafts
* en.json issue fixed
* fix en.json issue
* refactor: en.json fix
* addressed review comments
* updated image metadata handling code
* linter fixes
* added the empty draft screen
* linter fix
* style fix
* back button an android takes to the channel list page
* en.json fix
* draft actions theme compatible
* CSS fix for draft channel_info and avatar component
* removed the badge icon and change font style drafts
* fix send alert sender name for GMs
* updated snapshot
* added testId to the drafts components
* updated send draft test id
* clicking on draft takes to the channel
* Added toptip for draft tours
* intl extract
* Rebase to main and reverted local testing changes
* Added tooltip for drafts
* addressed review comments
* reset navigation when click on a draft in draft tabs
* fix the theme issue and navigation issue
* reverted back the draft click navigation changes
* observing draft when hitting back button
* removed the unwanted animiation
* updated regex for parsing markdown
* removed unnecessary checks and change folder name
* removed react memo and merge unwanted observes function
* removed unnecessary comments
* changed the name for observing and querying draft function
* removed memo from component level
* Text to FormattedText component
* Text to formatted text, change image name
* added confirmation modal for deleting draft from bottomsheet
* using common send_handler for both draft and post
* removed magic number for tooltip and bottomsheet
* renamed channel_info to draft_post_header
* text to formattedText for Edit drafts
* removed unnecessary changes
* minor fixes
* mounting draft only when there is draft
* map to reduce
* renamed SwipeableDraft to DraftSwipeAction
* name fixes
* isValidUrl to isParsableUrl and added test
* added test and addressed minor review comments
* added inline component for the duplicate code
* inlt fixes
* clearDraft is not optional
* optimised categories_list.tsx component
* Swipeable to ReanimatedSwipeable, TouchableWithoutFeedback to Pressable and folder name changes
* Added comment and disabled eslint rule for showing warning
* fixed component file name
* minor'
* Removed deprecated Animated createAnimatedComponent flatlist
* added test for missing protocol check
* import change for SwipeableMethod
* active tab for tablet view
* Updated the drafts icons
* Updated compass-icon version to v0.1.48
---------
Co-authored-by: Mattermost Build <build@mattermost.com>
(cherry picked from commit 84eded1bde)
Co-authored-by: Rajat Dabade <rajatdabade1997@gmail.com>
316 lines
10 KiB
TypeScript
316 lines
10 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import {DeviceEventEmitter, Image} from 'react-native';
|
|
|
|
import {Navigation, Screens} from '@constants';
|
|
import DatabaseManager from '@database/manager';
|
|
import {getDraft} from '@queries/servers/drafts';
|
|
import {goToScreen} from '@screens/navigation';
|
|
import {isTablet} from '@utils/helpers';
|
|
import {logError} from '@utils/log';
|
|
import {isParsableUrl} from '@utils/url';
|
|
|
|
export const switchToGlobalDrafts = async () => {
|
|
const isTablelDevice = isTablet();
|
|
if (isTablelDevice) {
|
|
DeviceEventEmitter.emit(Navigation.NAVIGATION_HOME, Screens.GLOBAL_DRAFTS);
|
|
} else {
|
|
goToScreen(Screens.GLOBAL_DRAFTS, '', {}, {topBar: {visible: false}});
|
|
}
|
|
};
|
|
|
|
export async function updateDraftFile(serverUrl: string, channelId: string, rootId: string, file: FileInfo, prepareRecordsOnly = false) {
|
|
try {
|
|
const {database, operator} = DatabaseManager.getServerDatabaseAndOperator(serverUrl);
|
|
const draft = await getDraft(database, channelId, rootId);
|
|
if (!draft) {
|
|
return {error: 'no draft'};
|
|
}
|
|
|
|
const i = draft.files.findIndex((v) => v.clientId === file.clientId);
|
|
if (i === -1) {
|
|
return {error: 'file not found'};
|
|
}
|
|
|
|
// We create a new list to make sure we re-render the draft input.
|
|
const newFiles = [...draft.files];
|
|
newFiles[i] = file;
|
|
draft.prepareUpdate((d) => {
|
|
d.files = newFiles;
|
|
d.updateAt = Date.now();
|
|
});
|
|
|
|
if (!prepareRecordsOnly) {
|
|
await operator.batchRecords([draft], 'updateDraftFile');
|
|
}
|
|
|
|
return {draft};
|
|
} catch (error) {
|
|
logError('Failed updateDraftFile', error);
|
|
return {error};
|
|
}
|
|
}
|
|
|
|
export async function removeDraftFile(serverUrl: string, channelId: string, rootId: string, clientId: string, prepareRecordsOnly = false) {
|
|
try {
|
|
const {database, operator} = DatabaseManager.getServerDatabaseAndOperator(serverUrl);
|
|
const draft = await getDraft(database, channelId, rootId);
|
|
if (!draft) {
|
|
return {error: 'no draft'};
|
|
}
|
|
|
|
const i = draft.files.findIndex((v) => v.clientId === clientId);
|
|
if (i === -1) {
|
|
return {error: 'file not found'};
|
|
}
|
|
|
|
if (draft.files.length === 1 && !draft.message) {
|
|
draft.prepareDestroyPermanently();
|
|
} else {
|
|
draft.prepareUpdate((d) => {
|
|
d.files = draft.files.filter((v, index) => index !== i);
|
|
d.updateAt = Date.now();
|
|
});
|
|
}
|
|
|
|
if (!prepareRecordsOnly) {
|
|
await operator.batchRecords([draft], 'removeDraftFile');
|
|
}
|
|
|
|
return {draft};
|
|
} catch (error) {
|
|
logError('Failed removeDraftFile', error);
|
|
return {error};
|
|
}
|
|
}
|
|
|
|
export async function updateDraftMessage(serverUrl: string, channelId: string, rootId: string, message: string, prepareRecordsOnly = false) {
|
|
try {
|
|
const {database, operator} = DatabaseManager.getServerDatabaseAndOperator(serverUrl);
|
|
const draft = await getDraft(database, channelId, rootId);
|
|
if (!draft) {
|
|
if (!message) {
|
|
return {};
|
|
}
|
|
|
|
const newDraft: Draft = {
|
|
channel_id: channelId,
|
|
root_id: rootId,
|
|
message,
|
|
update_at: Date.now(),
|
|
};
|
|
|
|
return operator.handleDraft({drafts: [newDraft], prepareRecordsOnly});
|
|
}
|
|
|
|
if (draft.message === message) {
|
|
return {draft};
|
|
}
|
|
|
|
if (draft.files.length === 0 && !message) {
|
|
draft.prepareDestroyPermanently();
|
|
} else {
|
|
draft.prepareUpdate((d) => {
|
|
d.message = message;
|
|
d.updateAt = Date.now();
|
|
});
|
|
}
|
|
|
|
if (!prepareRecordsOnly) {
|
|
await operator.batchRecords([draft], 'updateDraftMessage');
|
|
}
|
|
|
|
return {draft};
|
|
} catch (error) {
|
|
logError('Failed updateDraftMessage', error);
|
|
return {error};
|
|
}
|
|
}
|
|
|
|
export async function addFilesToDraft(serverUrl: string, channelId: string, rootId: string, files: FileInfo[], prepareRecordsOnly = false) {
|
|
try {
|
|
const {database, operator} = DatabaseManager.getServerDatabaseAndOperator(serverUrl);
|
|
const draft = await getDraft(database, channelId, rootId);
|
|
if (!draft) {
|
|
const newDraft: Draft = {
|
|
channel_id: channelId,
|
|
root_id: rootId,
|
|
files,
|
|
message: '',
|
|
update_at: Date.now(),
|
|
};
|
|
|
|
return operator.handleDraft({drafts: [newDraft], prepareRecordsOnly});
|
|
}
|
|
|
|
draft.prepareUpdate((d) => {
|
|
d.files = [...draft.files, ...files];
|
|
d.updateAt = Date.now();
|
|
});
|
|
|
|
if (!prepareRecordsOnly) {
|
|
await operator.batchRecords([draft], 'addFilesToDraft');
|
|
}
|
|
|
|
return {draft};
|
|
} catch (error) {
|
|
logError('Failed addFilesToDraft', error);
|
|
return {error};
|
|
}
|
|
}
|
|
|
|
export const removeDraft = async (serverUrl: string, channelId: string, rootId = '') => {
|
|
try {
|
|
const {database} = DatabaseManager.getServerDatabaseAndOperator(serverUrl);
|
|
const draft = await getDraft(database, channelId, rootId);
|
|
if (draft) {
|
|
await database.write(async () => {
|
|
await draft.destroyPermanently();
|
|
});
|
|
}
|
|
|
|
return {draft};
|
|
} catch (error) {
|
|
logError('Failed removeDraft', error);
|
|
return {error};
|
|
}
|
|
};
|
|
|
|
export async function updateDraftPriority(serverUrl: string, channelId: string, rootId: string, postPriority: PostPriority, prepareRecordsOnly = false) {
|
|
try {
|
|
const {database, operator} = DatabaseManager.getServerDatabaseAndOperator(serverUrl);
|
|
const draft = await getDraft(database, channelId, rootId);
|
|
if (!draft) {
|
|
const newDraft: Draft = {
|
|
channel_id: channelId,
|
|
root_id: rootId,
|
|
metadata: {
|
|
priority: postPriority,
|
|
},
|
|
update_at: Date.now(),
|
|
};
|
|
|
|
return operator.handleDraft({drafts: [newDraft], prepareRecordsOnly});
|
|
}
|
|
|
|
draft.prepareUpdate((d) => {
|
|
d.metadata = {
|
|
...d.metadata,
|
|
priority: postPriority,
|
|
};
|
|
d.updateAt = Date.now();
|
|
});
|
|
|
|
if (!prepareRecordsOnly) {
|
|
await operator.batchRecords([draft], 'updateDraftPriority');
|
|
}
|
|
|
|
return {draft};
|
|
} catch (error) {
|
|
logError('Failed updateDraftPriority', error);
|
|
return {error};
|
|
}
|
|
}
|
|
|
|
export async function updateDraftMarkdownImageMetadata({
|
|
serverUrl,
|
|
channelId,
|
|
rootId,
|
|
imageMetadata,
|
|
prepareRecordsOnly = false,
|
|
}: {
|
|
serverUrl: string;
|
|
channelId: string;
|
|
rootId: string;
|
|
imageMetadata: Dictionary<PostImage | undefined>;
|
|
prepareRecordsOnly?: boolean;
|
|
}) {
|
|
try {
|
|
const {database, operator} = DatabaseManager.getServerDatabaseAndOperator(serverUrl);
|
|
const draft = await getDraft(database, channelId, rootId);
|
|
if (draft) {
|
|
draft.prepareUpdate((d) => {
|
|
d.metadata = {
|
|
...d.metadata,
|
|
images: imageMetadata,
|
|
};
|
|
d.updateAt = Date.now();
|
|
});
|
|
if (!prepareRecordsOnly) {
|
|
await operator.batchRecords([draft], 'updateDraftImageMetadata');
|
|
}
|
|
}
|
|
return {draft};
|
|
} catch (error) {
|
|
logError('Failed updateDraftMarkdownImageMetadata', error);
|
|
return {error};
|
|
}
|
|
}
|
|
|
|
async function getImageMetadata(url: string) {
|
|
let height = 0;
|
|
let width = 0;
|
|
let format;
|
|
await new Promise((resolve) => {
|
|
Image.getSize(
|
|
url,
|
|
(imageWidth, imageHeight) => {
|
|
width = imageWidth;
|
|
height = imageHeight;
|
|
resolve(null);
|
|
},
|
|
(error) => {
|
|
logError('Failed getImageMetadata to get image size', error);
|
|
},
|
|
);
|
|
});
|
|
|
|
/**
|
|
* Regex Explanation:
|
|
* \. - Matches a literal period (e.g., before "jpg").
|
|
* (\w+) - Captures the file extension (letters, digits, or underscores).
|
|
* (?=\?|$) - Ensures the extension is followed by "?" or the end of the URL.
|
|
*
|
|
* * Example Matches:
|
|
* "https://example.com/image.jpg" -> Matches "jpg"
|
|
* "https://example.com/image.png?size=1" -> Matches "png"
|
|
* "https://example.com/file" -> No match (no file extension).
|
|
*/
|
|
const match = url.match(/\.(\w+)(?=\?|$)/);
|
|
if (match) {
|
|
format = match[1];
|
|
}
|
|
return {
|
|
height,
|
|
width,
|
|
format,
|
|
frame_count: 1,
|
|
url,
|
|
};
|
|
}
|
|
|
|
export async function parseMarkdownImages(markdown: string, imageMetadata: Dictionary<PostImage | undefined>) {
|
|
// Regex break down
|
|
// ([a-zA-Z][a-zA-Z\d+\-.]*):\/\/ - Matches any valid scheme (protocol), such as http, https, ftp, mailto, file, etc.
|
|
// [^\s()<>]+ - Matches the main part of the URL, excluding spaces, parentheses, and angle brackets.
|
|
// (?:\([^\s()<>]+\))* - Allows balanced parentheses inside the URL path or query parameters.
|
|
// !\[.*?\]\((...)\) - Matches an image markdown syntax 
|
|
const imageRegex = /!\[.*?\]\((([a-zA-Z][a-zA-Z\d+\-.]*):\/\/[^\s()<>]+(?:\([^\s()<>]+\))*)\)/g;
|
|
const matches = Array.from(markdown.matchAll(imageRegex));
|
|
|
|
const promises = matches.reduce<Array<Promise<PostImage & {url: string}>>>((result, match) => {
|
|
const imageUrl = match[1];
|
|
if (isParsableUrl(imageUrl)) {
|
|
result.push(getImageMetadata(imageUrl));
|
|
}
|
|
return result;
|
|
}, []);
|
|
|
|
const metadataArray = await Promise.all(promises);
|
|
metadataArray.forEach((metadata) => {
|
|
if (metadata) {
|
|
imageMetadata[metadata.url] = metadata;
|
|
}
|
|
});
|
|
}
|