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 cfb4a276a4..7ded6863bd 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 cc6452f239..0e0ddf2958 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 10d4592321..944a166d0a 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 6ffb5fb51d..97c7e7e696 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 fafe6035bc..7b9eaab895 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 a1e6f1107a..a177816680 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 3432b65540..e9aeedd1d5 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 9de0b58d0c..48c51e60a1 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 c36824e4f5..51da8a0bfb 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 = {