* 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>
223 lines
7.7 KiB
TypeScript
223 lines
7.7 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import {useCallback, useEffect, useMemo, useState} from 'react';
|
|
import {useIntl} from 'react-intl';
|
|
import {DeviceEventEmitter} from 'react-native';
|
|
|
|
import {getChannelTimezones} from '@actions/remote/channel';
|
|
import {executeCommand, handleGotoLocation} from '@actions/remote/command';
|
|
import {createPost} from '@actions/remote/post';
|
|
import {handleReactionToLatestPost} from '@actions/remote/reactions';
|
|
import {setStatus} from '@actions/remote/user';
|
|
import {handleCallsSlashCommand} from '@calls/actions';
|
|
import {Events, Screens} from '@constants';
|
|
import {NOTIFY_ALL_MEMBERS} from '@constants/post_draft';
|
|
import {useServerUrl} from '@context/server';
|
|
import DraftUploadManager from '@managers/draft_upload_manager';
|
|
import * as DraftUtils from '@utils/draft';
|
|
import {isReactionMatch} from '@utils/emoji/helpers';
|
|
import {getFullErrorMessage} from '@utils/errors';
|
|
import {preventDoubleTap} from '@utils/tap';
|
|
import {confirmOutOfOfficeDisabled} from '@utils/user';
|
|
|
|
import type CustomEmojiModel from '@typings/database/models/servers/custom_emoji';
|
|
|
|
type Props = {
|
|
value: string;
|
|
channelId: string;
|
|
rootId: string;
|
|
maxMessageLength: number;
|
|
files: FileInfo[];
|
|
customEmojis: CustomEmojiModel[];
|
|
enableConfirmNotificationsToChannel?: boolean;
|
|
useChannelMentions: boolean;
|
|
membersCount: number;
|
|
userIsOutOfOffice: boolean;
|
|
currentUserId: string;
|
|
channelType: ChannelType | undefined;
|
|
postPriority: PostPriority;
|
|
clearDraft: () => void;
|
|
}
|
|
|
|
export const useHandleSendMessage = ({
|
|
value,
|
|
channelId,
|
|
rootId,
|
|
files,
|
|
maxMessageLength,
|
|
customEmojis,
|
|
enableConfirmNotificationsToChannel,
|
|
useChannelMentions,
|
|
membersCount = 0,
|
|
userIsOutOfOffice,
|
|
currentUserId,
|
|
channelType,
|
|
postPriority,
|
|
clearDraft,
|
|
}: Props) => {
|
|
const intl = useIntl();
|
|
const serverUrl = useServerUrl();
|
|
const [sendingMessage, setSendingMessage] = useState(false);
|
|
const [channelTimezoneCount, setChannelTimezoneCount] = useState(0);
|
|
|
|
const canSend = useMemo(() => {
|
|
if (sendingMessage) {
|
|
return false;
|
|
}
|
|
|
|
const messageLength = value.trim().length;
|
|
|
|
if (messageLength > maxMessageLength) {
|
|
return false;
|
|
}
|
|
|
|
if (files.length) {
|
|
const loadingComplete = !files.some((file) => DraftUploadManager.isUploading(file.clientId!));
|
|
return loadingComplete;
|
|
}
|
|
|
|
return messageLength > 0;
|
|
}, [sendingMessage, value, files, maxMessageLength]);
|
|
|
|
const handleReaction = useCallback((emoji: string, add: boolean) => {
|
|
handleReactionToLatestPost(serverUrl, emoji, add, rootId);
|
|
clearDraft();
|
|
setSendingMessage(false);
|
|
}, [serverUrl, rootId, clearDraft]);
|
|
|
|
const doSubmitMessage = useCallback(() => {
|
|
const postFiles = files.filter((f) => !f.failed);
|
|
const post = {
|
|
user_id: currentUserId,
|
|
channel_id: channelId,
|
|
root_id: rootId,
|
|
message: value,
|
|
} as Post;
|
|
|
|
if (!rootId && (
|
|
postPriority.priority ||
|
|
postPriority.requested_ack ||
|
|
postPriority.persistent_notifications)
|
|
) {
|
|
post.metadata = {
|
|
priority: postPriority,
|
|
};
|
|
}
|
|
|
|
createPost(serverUrl, post, postFiles);
|
|
|
|
clearDraft();
|
|
setSendingMessage(false);
|
|
DeviceEventEmitter.emit(Events.POST_LIST_SCROLL_TO_BOTTOM, rootId ? Screens.THREAD : Screens.CHANNEL);
|
|
}, [files, currentUserId, channelId, rootId, value, postPriority, serverUrl, clearDraft]);
|
|
|
|
const showSendToAllOrChannelOrHereAlert = useCallback((calculatedMembersCount: number, atHere: boolean) => {
|
|
const notifyAllMessage = DraftUtils.buildChannelWideMentionMessage(intl, calculatedMembersCount, channelTimezoneCount, atHere);
|
|
const cancel = () => {
|
|
setSendingMessage(false);
|
|
};
|
|
|
|
DraftUtils.alertChannelWideMention(intl, notifyAllMessage, doSubmitMessage, cancel);
|
|
}, [intl, channelTimezoneCount, doSubmitMessage]);
|
|
|
|
const sendCommand = useCallback(async () => {
|
|
if (value.trim().startsWith('/call')) {
|
|
const {handled, error} = await handleCallsSlashCommand(value.trim(), serverUrl, channelId, channelType ?? '', rootId, currentUserId, intl);
|
|
if (handled) {
|
|
setSendingMessage(false);
|
|
clearDraft();
|
|
return;
|
|
}
|
|
if (error) {
|
|
setSendingMessage(false);
|
|
DraftUtils.alertSlashCommandFailed(intl, error);
|
|
return;
|
|
}
|
|
}
|
|
|
|
const status = DraftUtils.getStatusFromSlashCommand(value);
|
|
if (userIsOutOfOffice && status) {
|
|
const updateStatus = (newStatus: string) => {
|
|
setStatus(serverUrl, {
|
|
status: newStatus,
|
|
last_activity_at: Date.now(),
|
|
manual: true,
|
|
user_id: currentUserId,
|
|
});
|
|
};
|
|
confirmOutOfOfficeDisabled(intl, status, updateStatus);
|
|
setSendingMessage(false);
|
|
return;
|
|
}
|
|
|
|
const {data, error} = await executeCommand(serverUrl, intl, value, channelId, rootId);
|
|
setSendingMessage(false);
|
|
|
|
if (error) {
|
|
const errorMessage = getFullErrorMessage(error);
|
|
DraftUtils.alertSlashCommandFailed(intl, errorMessage);
|
|
return;
|
|
}
|
|
|
|
clearDraft();
|
|
|
|
if (data?.goto_location && !value.startsWith('/leave')) {
|
|
handleGotoLocation(serverUrl, intl, data.goto_location);
|
|
}
|
|
}, [value, userIsOutOfOffice, serverUrl, intl, channelId, rootId, clearDraft, channelType, currentUserId]);
|
|
|
|
const sendMessage = useCallback(() => {
|
|
const notificationsToChannel = enableConfirmNotificationsToChannel && useChannelMentions;
|
|
const toAllOrChannel = DraftUtils.textContainsAtAllAtChannel(value);
|
|
const toHere = DraftUtils.textContainsAtHere(value);
|
|
|
|
if (value.indexOf('/') === 0) {
|
|
sendCommand();
|
|
} else if (notificationsToChannel && membersCount > NOTIFY_ALL_MEMBERS && (toAllOrChannel || toHere)) {
|
|
showSendToAllOrChannelOrHereAlert(membersCount, toHere && !toAllOrChannel);
|
|
} else {
|
|
doSubmitMessage();
|
|
}
|
|
}, [enableConfirmNotificationsToChannel, useChannelMentions, value, membersCount, sendCommand, showSendToAllOrChannelOrHereAlert, doSubmitMessage]);
|
|
|
|
const handleSendMessage = useCallback(preventDoubleTap(() => {
|
|
if (!canSend) {
|
|
return;
|
|
}
|
|
|
|
setSendingMessage(true);
|
|
|
|
const match = isReactionMatch(value, customEmojis);
|
|
if (match && !files.length) {
|
|
handleReaction(match.emoji, match.add);
|
|
return;
|
|
}
|
|
|
|
const hasFailedAttachments = files.some((f) => f.failed);
|
|
if (hasFailedAttachments) {
|
|
const cancel = () => {
|
|
setSendingMessage(false);
|
|
};
|
|
const accept = () => {
|
|
// Files are filtered on doSubmitMessage
|
|
sendMessage();
|
|
};
|
|
|
|
DraftUtils.alertAttachmentFail(intl, accept, cancel);
|
|
} else {
|
|
sendMessage();
|
|
}
|
|
}), [canSend, value, handleReaction, files, sendMessage, customEmojis]);
|
|
|
|
useEffect(() => {
|
|
getChannelTimezones(serverUrl, channelId).then(({channelTimezones}) => {
|
|
setChannelTimezoneCount(channelTimezones?.length || 0);
|
|
});
|
|
}, [serverUrl, channelId]);
|
|
|
|
return {
|
|
handleSendMessage,
|
|
canSend,
|
|
};
|
|
};
|