From bf5783252ea45463c02ffb1a9e43c69ccd969724 Mon Sep 17 00:00:00 2001 From: Kyriakos Z <3829551+koox00@users.noreply.github.com> Date: Tue, 20 Dec 2022 21:54:25 +0200 Subject: [PATCH] MM-49219: fixes post priority (#6880) We have changed how priority gets saved in the server, so now instead of post.props we are using post.metadata.priority. This commit adds the relevant changes for posts' priority to work in the mobile app. --- .../post_draft/draft_input/index.tsx | 16 +++++++------- .../post_priority_action/index.tsx | 21 ++++++++---------- .../quick_actions/quick_actions.tsx | 12 +++++----- .../post_draft/send_handler/send_handler.tsx | 22 ++++++++++++------- .../post_list/post/header/header.tsx | 4 ++-- app/components/post_list/post/post.tsx | 2 +- .../post_priority/post_priority_label.tsx | 4 ++-- .../post_priority_picker/index.tsx | 8 ++----- types/api/posts.d.ts | 5 +++++ 9 files changed, 49 insertions(+), 45 deletions(-) diff --git a/app/components/post_draft/draft_input/index.tsx b/app/components/post_draft/draft_input/index.tsx index cfb4a276a..7ded6863b 100644 --- a/app/components/post_draft/draft_input/index.tsx +++ b/app/components/post_draft/draft_input/index.tsx @@ -24,8 +24,8 @@ type Props = { canShowPostPriority?: boolean; // Post Props - postProps: Post['props']; - updatePostProps: (postProps: Post['props']) => void; + postPriority: PostPriorityData; + updatePostPriority: (postPriority: PostPriorityData) => void; // Cursor Position Handler updateCursorPosition: React.Dispatch>; @@ -110,8 +110,8 @@ export default function DraftInput({ updateCursorPosition, cursorPosition, updatePostInputTop, - postProps, - updatePostProps, + postPriority, + updatePostPriority, setIsFocused, }: Props) { const theme = useTheme(); @@ -155,9 +155,9 @@ export default function DraftInput({ overScrollMode={'never'} disableScrollViewPanResponder={true} > - {Boolean(postProps.priority) && ( + {Boolean(postPriority?.priority) && ( - + )} diff --git a/app/components/post_draft/quick_actions/post_priority_action/index.tsx b/app/components/post_draft/quick_actions/post_priority_action/index.tsx index cc6452f23..0e0ddf295 100644 --- a/app/components/post_draft/quick_actions/post_priority_action/index.tsx +++ b/app/components/post_draft/quick_actions/post_priority_action/index.tsx @@ -6,7 +6,7 @@ import {useIntl} from 'react-intl'; import {StyleSheet} from 'react-native'; import CompassIcon from '@components/compass_icon'; -import PostPriorityPicker, {PostPriorityData} from '@components/post_priority/post_priority_picker'; +import PostPriorityPicker from '@components/post_priority/post_priority_picker'; import TouchableWithFeedback from '@components/touchable_with_feedback'; import {ICON_SIZE} from '@constants/post_draft'; import {useTheme} from '@context/theme'; @@ -15,8 +15,8 @@ import {changeOpacity} from '@utils/theme'; type Props = { testID?: string; - postProps: Post['props']; - updatePostProps: (postProps: Post['props']) => void; + postPriority: PostPriorityData; + updatePostPriority: (postPriority: PostPriorityData) => void; } const style = StyleSheet.create({ @@ -29,30 +29,27 @@ const style = StyleSheet.create({ export default function PostPriorityAction({ testID, - postProps, - updatePostProps, + postPriority, + updatePostPriority, }: Props) { const intl = useIntl(); const theme = useTheme(); const handlePostPriorityPicker = useCallback((postPriorityData: PostPriorityData) => { - updatePostProps((oldPostProps: Post['props']) => ({ - ...oldPostProps, - ...postPriorityData, - })); + updatePostPriority(postPriorityData); dismissBottomSheet(); - }, [updatePostProps]); + }, [updatePostPriority]); const renderContent = useCallback(() => { return ( ); - }, [handlePostPriorityPicker, postProps]); + }, [handlePostPriorityPicker, postPriority]); const onPress = useCallback(() => { bottomSheet({ diff --git a/app/components/post_draft/quick_actions/quick_actions.tsx b/app/components/post_draft/quick_actions/quick_actions.tsx index 10d459232..944a166d0 100644 --- a/app/components/post_draft/quick_actions/quick_actions.tsx +++ b/app/components/post_draft/quick_actions/quick_actions.tsx @@ -22,8 +22,8 @@ type Props = { value: string; updateValue: (value: string) => void; addFiles: (file: FileInfo[]) => void; - postProps: Post['props']; - updatePostProps: (postProps: Post['props']) => void; + postPriority: PostPriorityData; + updatePostPriority: (postPriority: PostPriorityData) => void; focus: () => void; } @@ -45,8 +45,8 @@ export default function QuickActions({ maxFileCount, updateValue, addFiles, - postProps, - updatePostProps, + postPriority, + updatePostPriority, focus, }: Props) { const atDisabled = value[value.length - 1] === '@'; @@ -101,8 +101,8 @@ export default function QuickActions({ {isPostPriorityEnabled && canShowPostPriority && ( )} diff --git a/app/components/post_draft/send_handler/send_handler.tsx b/app/components/post_draft/send_handler/send_handler.tsx index 6ffb5fb51..97c7e7e69 100644 --- a/app/components/post_draft/send_handler/send_handler.tsx +++ b/app/components/post_draft/send_handler/send_handler.tsx @@ -13,6 +13,7 @@ import {setStatus} from '@actions/remote/user'; import {canEndCall, endCall, getEndCallMessage} from '@calls/actions/calls'; import ClientError from '@client/rest/error'; import {Events, Screens} from '@constants'; +import {PostPriorityType} from '@constants/post'; import {NOTIFY_ALL_MEMBERS} from '@constants/post_draft'; import {useServerUrl} from '@context/server'; import DraftUploadManager from '@managers/draft_upload_manager'; @@ -54,6 +55,10 @@ type Props = { uploadFileError: React.ReactNode; } +const INITIAL_PRIORITY = { + priority: PostPriorityType.STANDARD, +}; + export default function SendHandler({ testID, channelId, @@ -83,8 +88,7 @@ export default function SendHandler({ const [channelTimezoneCount, setChannelTimezoneCount] = useState(0); const [sendingMessage, setSendingMessage] = useState(false); - - const [postProps, setPostProps] = useState({}); + const [postPriority, setPostPriority] = useState(INITIAL_PRIORITY); const canSend = useCallback(() => { if (sendingMessage) { @@ -120,17 +124,19 @@ export default function SendHandler({ message: value, } as Post; - if (Object.keys(postProps).length) { - post.props = postProps; + if (Object.keys(postPriority).length) { + post.metadata = { + priority: postPriority, + }; } createPost(serverUrl, post, postFiles); clearDraft(); setSendingMessage(false); - setPostProps({}); + setPostPriority(INITIAL_PRIORITY); DeviceEventEmitter.emit(Events.POST_LIST_SCROLL_TO_BOTTOM, rootId ? Screens.THREAD : Screens.CHANNEL); - }, [files, currentUserId, channelId, rootId, value, clearDraft, postProps]); + }, [files, currentUserId, channelId, rootId, value, clearDraft, postPriority]); const showSendToAllOrChannelOrHereAlert = useCallback((calculatedMembersCount: number, atHere: boolean) => { const notifyAllMessage = DraftUtils.buildChannelWideMentionMessage(intl, calculatedMembersCount, Boolean(isTimezoneEnabled), channelTimezoneCount, atHere); @@ -297,8 +303,8 @@ export default function SendHandler({ canSend={canSend()} maxMessageLength={maxMessageLength} updatePostInputTop={updatePostInputTop} - postProps={postProps} - updatePostProps={setPostProps} + postPriority={postPriority} + updatePostPriority={setPostPriority} setIsFocused={setIsFocused} /> ); diff --git a/app/components/post_list/post/header/header.tsx b/app/components/post_list/post/header/header.tsx index fafe6035b..7b9eaab89 100644 --- a/app/components/post_list/post/header/header.tsx +++ b/app/components/post_list/post/header/header.tsx @@ -132,10 +132,10 @@ const Header = (props: HeaderProps) => { style={style.time} testID='post_header.date_time' /> - {showPostPriority && ( + {showPostPriority && post.metadata?.priority?.priority && ( )} diff --git a/app/components/post_list/post/post.tsx b/app/components/post_list/post/post.tsx index a1e6f1107..a17781668 100644 --- a/app/components/post_list/post/post.tsx +++ b/app/components/post_list/post/post.tsx @@ -226,7 +226,7 @@ const Post = ({ // If the post is a priority post: // 1. Show the priority label in channel screen // 2. Show the priority label in thread screen for the root post - const showPostPriority = Boolean(isPostPriorityEnabled && post.props?.priority) && (location !== Screens.THREAD || !post.rootId); + const showPostPriority = Boolean(isPostPriorityEnabled && post.metadata?.priority?.priority) && (location !== Screens.THREAD || !post.rootId); const sameSequence = hasReplies ? (hasReplies && post.rootId) : !post.rootId; if (!showPostPriority && hasSameRoot && isConsecutivePost && sameSequence) { diff --git a/app/components/post_priority/post_priority_label.tsx b/app/components/post_priority/post_priority_label.tsx index 3432b6554..e9aeedd1d 100644 --- a/app/components/post_priority/post_priority_label.tsx +++ b/app/components/post_priority/post_priority_label.tsx @@ -35,7 +35,7 @@ const style = StyleSheet.create({ }); type Props = { - label: PostPriorityType; + label: PostPriorityData['priority']; }; const PostPriorityLabel = ({label}: Props) => { @@ -48,7 +48,7 @@ const PostPriorityLabel = ({label}: Props) => { containerStyle.push(style.urgent); iconName = 'alert-outline'; labelText = intl.formatMessage({id: 'post_priority.label.urgent', defaultMessage: 'URGENT'}); - } else { + } else if (label === PostPriorityType.IMPORTANT) { containerStyle.push(style.important); iconName = 'alert-circle-outline'; labelText = intl.formatMessage({id: 'post_priority.label.important', defaultMessage: 'IMPORTANT'}); diff --git a/app/components/post_priority/post_priority_picker/index.tsx b/app/components/post_priority/post_priority_picker/index.tsx index 9de0b58d0..48c51e60a 100644 --- a/app/components/post_priority/post_priority_picker/index.tsx +++ b/app/components/post_priority/post_priority_picker/index.tsx @@ -14,10 +14,6 @@ import {typography} from '@utils/typography'; import PostPriorityPickerItem from './post_priority_picker_item'; -export type PostPriorityData = { - priority: PostPriorityType; -}; - type Props = { data: PostPriorityData; onSubmit: (data: PostPriorityData) => void; @@ -61,8 +57,8 @@ const PostPriorityPicker = ({data, onSubmit}: Props) => { // For now, we just have one option but the spec suggest we have more in the next phase // const [data, setData] = React.useState(defaultData); - const handleUpdatePriority = React.useCallback((priority: PostPriorityType) => { - onSubmit({priority}); + const handleUpdatePriority = React.useCallback((priority: PostPriorityData['priority']) => { + onSubmit({priority: priority || ''}); }, [onSubmit]); return ( diff --git a/types/api/posts.d.ts b/types/api/posts.d.ts index c36824e4f..51da8a0bf 100644 --- a/types/api/posts.d.ts +++ b/types/api/posts.d.ts @@ -20,6 +20,10 @@ type PostType = type PostEmbedType = 'image' | 'message_attachment' | 'opengraph'; +type PostPriorityData = { + priority: ''|'urgent'|'important'; +}; + type PostEmbed = { type: PostEmbedType; url: string; @@ -39,6 +43,7 @@ type PostMetadata = { files?: FileInfo[]; images?: Dictionary; reactions?: Reaction[]; + priority?: PostPriorityData; }; type Post = {