From dc70bf617b1ddafbff37f07c3faea9b5462c6174 Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Fri, 14 Jan 2022 13:38:08 -0400 Subject: [PATCH] Add DiscussionDetails and Item for DiscussionsView; update ThreadDetails, BackgroundContainer and DiscussionsView --- app/containers/BackgroundContainer/index.tsx | 2 +- app/containers/ThreadDetails.tsx | 61 ++++------ .../DiscussionsView/DiscussionDetails.tsx | 73 ++++++++++++ app/views/DiscussionsView/Item.tsx | 111 ++++++++++++++++++ app/views/DiscussionsView/index.tsx | 39 +++--- ios/RocketChatRN.xcodeproj/project.pbxproj | 4 +- 6 files changed, 238 insertions(+), 52 deletions(-) create mode 100644 app/views/DiscussionsView/DiscussionDetails.tsx create mode 100644 app/views/DiscussionsView/Item.tsx diff --git a/app/containers/BackgroundContainer/index.tsx b/app/containers/BackgroundContainer/index.tsx index fbe5d3077..1c4ed3963 100644 --- a/app/containers/BackgroundContainer/index.tsx +++ b/app/containers/BackgroundContainer/index.tsx @@ -35,7 +35,7 @@ const styles = StyleSheet.create({ const BackgroundContainer = ({ theme, text, loading }: IBackgroundContainer) => ( - {text ? {text} : null} + {text && !loading ? {text} : null} {loading ? : null} ); diff --git a/app/containers/ThreadDetails.tsx b/app/containers/ThreadDetails.tsx index 9275019dd..ada6d12d5 100644 --- a/app/containers/ThreadDetails.tsx +++ b/app/containers/ThreadDetails.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import { StyleSheet, Text, View } from 'react-native'; +import { StyleSheet, Text, View, ViewStyle } from 'react-native'; import Touchable from 'react-native-platform-touchable'; import { CustomIcon } from '../lib/Icons'; import { themes } from '../constants/colors'; import sharedStyles from '../views/Styles'; -import { withTheme } from '../theme'; +import { useTheme } from '../theme'; const styles = StyleSheet.create({ container: { @@ -41,8 +41,7 @@ const styles = StyleSheet.create({ interface IThreadDetails { item: { - tcount?: number | string; - dcount?: number | string; + tcount: number | string; replies?: any; id: string; }; @@ -53,25 +52,20 @@ interface IThreadDetails { toggleFollowThread: Function; thread: boolean; time: string; - style: object; - theme: string; + style: ViewStyle; } -const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, thread, time, style, theme }: IThreadDetails) => { - const { tcount, dcount } = item; - let count = tcount || dcount; +const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IThreadDetails) => { + const { theme } = useTheme(); + let { tcount } = item; - if (count! >= 1000) { - count = '+999'; - } else if (count! >= 100) { - count = '+99'; + if (tcount >= 1000) { + tcount = '+999'; } let replies = item?.replies?.length ?? 0; if (replies >= 1000) { replies = '+999'; - } else if (replies >= 100) { - replies = '+99'; } const isFollowing = item.replies?.find((u: any) => u === user?.id); @@ -80,34 +74,31 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, thread, tim - - - {count} + + + {tcount} - - - {thread ? replies : time} + + + {replies} - - {thread ? ( - - {badgeColor ? : null} - toggleFollowThread?.(isFollowing, item.id)}> - - - - ) : null} + + {badgeColor ? : null} + toggleFollowThread?.(isFollowing, item.id)}> + + + ); }; -export default withTheme(ThreadDetails); +export default ThreadDetails; diff --git a/app/views/DiscussionsView/DiscussionDetails.tsx b/app/views/DiscussionsView/DiscussionDetails.tsx new file mode 100644 index 000000000..6e36f6b6b --- /dev/null +++ b/app/views/DiscussionsView/DiscussionDetails.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import { StyleSheet, Text, View, ViewStyle } from 'react-native'; + +import { CustomIcon } from '../../lib/Icons'; +import { themes } from '../../constants/colors'; +import sharedStyles from '../Styles'; +import { useTheme } from '../../theme'; + +const styles = StyleSheet.create({ + container: { + flex: 1, + flexDirection: 'row', + alignItems: 'center' + }, + detailsContainer: { + flex: 1, + flexDirection: 'row' + }, + detailContainer: { + flexDirection: 'row', + alignItems: 'center', + marginRight: 8 + }, + detailText: { + fontSize: 10, + marginLeft: 2, + ...sharedStyles.textSemibold + } +}); + +interface IDiscussionDetails { + item: { + dcount: number | string; + replies?: any; + id: string; + }; + user: { + id: string; + }; + time: string; + style: ViewStyle; +} + +const DiscussionDetails = ({ item, time, style }: IDiscussionDetails) => { + const { theme } = useTheme(); + let { dcount } = item; + + if (dcount >= 1000) { + dcount = '+999'; + } + + return ( + + + + + + {dcount} + + + + + + + {time} + + + + + ); +}; + +export default DiscussionDetails; diff --git a/app/views/DiscussionsView/Item.tsx b/app/views/DiscussionsView/Item.tsx new file mode 100644 index 000000000..a92b4c6c4 --- /dev/null +++ b/app/views/DiscussionsView/Item.tsx @@ -0,0 +1,111 @@ +import React from 'react'; +import { StyleSheet, Text, View } from 'react-native'; +import Touchable from 'react-native-platform-touchable'; + +import { useTheme } from '../../theme'; +import Avatar from '../../containers/Avatar'; +import sharedStyles from '../Styles'; +import { themes } from '../../constants/colors'; +import Markdown from '../../containers/markdown'; +import { formatDateThreads, makeThreadName } from '../../utils/room'; +import DiscussionDetails from './DiscussionDetails'; + +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + padding: 16 + }, + contentContainer: { + flexDirection: 'column', + flex: 1 + }, + titleContainer: { + flexDirection: 'row', + marginBottom: 2, + justifyContent: 'space-between' + }, + title: { + flexShrink: 1, + fontSize: 18, + ...sharedStyles.textMedium + }, + time: { + fontSize: 14, + marginLeft: 4, + ...sharedStyles.textRegular + }, + avatar: { + marginRight: 8 + }, + discussionDetails: { + marginTop: 8 + }, + messageContainer: { + flexDirection: 'row' + }, + markdown: { + flex: 1 + } +}); + +interface IItem { + item: { + id: string; + u: { + username: string; + }; + dcount: string | number; + replies?: any; + msg: string; + ts: string; + }; + baseUrl: string; + user: { + id: string; + token: string; + }; + onPress: { + (...args: any[]): void; + stop(): void; + }; +} + +const Item = ({ item, baseUrl, user, onPress }: IItem): JSX.Element => { + const { theme } = useTheme(); + const username = item?.u?.username; + const date = formatDateThreads(item.ts); + + return ( + onPress(item)} + testID={`discussions-view-${item.msg}`} + style={{ backgroundColor: themes[theme!].backgroundColor }}> + + + + + + {username} + + {date} + + + {/* @ts-ignore */} + + + + + + + ); +}; + +export default Item; diff --git a/app/views/DiscussionsView/index.tsx b/app/views/DiscussionsView/index.tsx index efee9b0a8..a1aa1a511 100644 --- a/app/views/DiscussionsView/index.tsx +++ b/app/views/DiscussionsView/index.tsx @@ -20,22 +20,37 @@ import { getHeaderTitlePosition } from '../../containers/Header'; import { useTheme } from '../../theme'; import RocketChat from '../../lib/rocketchat'; import SearchHeader from '../../containers/SearchHeader'; -import Item from '../ThreadMessagesView/Item'; +import Item from './Item'; import styles from './styles'; const API_FETCH_COUNT = 50; +interface IItem { + rid: string; + drid: string; + prid: string; + id: string; + u: { + username: string; + }; + dcount: string | number; + replies?: any; + msg: string; + ts: string; +} + interface IDiscussionsViewProps { navigation: StackNavigationProp; route: RouteProp; - item: { - msg: string; - }; + item: IItem; } interface IDiscussionsViewState { - login?: { - user: object; + login: { + user: { + id: string; + token: string; + }; }; server: { server: string; @@ -54,8 +69,6 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem const user = useSelector((state: IDiscussionsViewState) => state.login?.user); const baseUrl = useSelector((state: IDiscussionsViewState) => state.server?.server); - const useRealName = useSelector((state: IDiscussionsViewState) => state.settings?.UI_Use_Real_Name); - const timeFormat = useSelector((state: IDiscussionsViewState) => state.settings?.Message_TimeFormat); const isMasterDetail = useSelector((state: IDiscussionsViewState) => state.app?.isMasterDetail); const [loading, setLoading] = useState(false); @@ -174,7 +187,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem }, [navigation, isSearching]); const onDiscussionPress = debounce( - (item: any) => { + (item: IItem) => { navigation.push('RoomView', { rid: item.drid, prid: item.rid, @@ -186,16 +199,14 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem true ); - const renderItem = ({ item }: any) => ( + const renderItem = ({ item }: { item: IItem }) => ( ); @@ -218,7 +229,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem windowSize={10} initialNumToRender={7} removeClippedSubviews={isIOS} - onEndReached={() => (isSearching ? searchTotal > API_FETCH_COUNT ?? load() : total > API_FETCH_COUNT ?? load())} + onEndReached={() => (searchTotal || total) > API_FETCH_COUNT ?? load()} ItemSeparatorComponent={List.Separator} ListFooterComponent={loading ? : null} scrollIndicatorInsets={{ right: 1 }} diff --git a/ios/RocketChatRN.xcodeproj/project.pbxproj b/ios/RocketChatRN.xcodeproj/project.pbxproj index d9ff1460e..65ed76c1b 100644 --- a/ios/RocketChatRN.xcodeproj/project.pbxproj +++ b/ios/RocketChatRN.xcodeproj/project.pbxproj @@ -1869,7 +1869,7 @@ COPY_PHASE_STRIP = NO; ENABLE_STRICT_OBJC_MSGSEND = YES; ENABLE_TESTABILITY = YES; - "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 i386"; + "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386; GCC_C_LANGUAGE_STANDARD = gnu99; GCC_DYNAMIC_NO_PIC = NO; GCC_NO_COMMON_BLOCKS = YES; @@ -1924,7 +1924,7 @@ COPY_PHASE_STRIP = YES; ENABLE_NS_ASSERTIONS = NO; ENABLE_STRICT_OBJC_MSGSEND = YES; - "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 i386"; + "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386; GCC_C_LANGUAGE_STANDARD = gnu99; GCC_NO_COMMON_BLOCKS = YES; GCC_WARN_64_TO_32_BIT_CONVERSION = YES;