From 89ae4304c489262bcadaeb1128bcb0a6d932df11 Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Mon, 17 Jan 2022 15:55:33 -0400 Subject: [PATCH] add storybooks, update snapshots and DiscussionsView --- .../__snapshots__/Storyshots.test.js.snap | 2432 +++++++++++++++++ app/stacks/types.ts | 4 +- app/views/DiscussionsView/Item.stories.js | 97 + app/views/DiscussionsView/Item.tsx | 8 +- app/views/DiscussionsView/index.tsx | 31 +- app/views/ThreadMessagesView/Item.stories.js | 24 +- storybook/stories/index.js | 1 + 7 files changed, 2549 insertions(+), 48 deletions(-) create mode 100644 app/views/DiscussionsView/Item.stories.js diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index f85a69ddf..d0a5647d5 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -1928,6 +1928,2438 @@ Array [ ] `; +exports[`Storyshots Discussions.Item content 1`] = ` + + + + + + + + + + + + + + rocket.cat + + + 10:00 AM + + + + + Message content + + + + + + +  + + + + + +  + + + November 10, 2020 + + + + + + + + + + + + + + + + + + + rocket.cat + + + 10:00 AM + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + +  + + + + + +  + + + November 10, 2020 + + + + + + + + + + + + + + + + + + + rocket.cat + + + 10:00 AM + + + + + Message content + + + + + + +  + + + +999 + + + + +  + + + November 10, 2020 + + + + + + + + + + + + + + + + + + + rocket.cat + + + 10:00 AM + + + + + Attachment title + + + + + + +  + + + + + +  + + + November 10, 2020 + + + + + + + + + + + + + + + + + + + rocket.cat + + + 10:00 AM + + + + + Message content + + + + + + +  + + + + + +  + + + November 10, 2020 + + + + + + + + + + +`; + +exports[`Storyshots Discussions.Item themes 1`] = ` + + + + + + + + + + + + + + rocket.cat + + + 10:00 AM + + + + + Message content + + + + + + +  + + + + + +  + + + November 10, 2020 + + + + + + + + + + + + + + + + + + rocket.cat + + + 10:00 AM + + + + + Message content + + + + + + +  + + + + + +  + + + November 10, 2020 + + + + + + + + + + + + + + + + + + rocket.cat + + + 10:00 AM + + + + + Message content + + + + + + +  + + + + + +  + + + November 10, 2020 + + + + + + + + + + +`; + exports[`Storyshots Header Buttons badge 1`] = ` ( + alert('pressed')} + {...props} + /> +); + +const listDecorator = story => ( + + + {story()} + + +); + +const stories = storiesOf('Discussions.Item', module) + .addDecorator(listDecorator) + .addDecorator(story => {story()}); + +stories.add('content', () => ( + <> + + + + + + + + + + +)); + +const ThemeStory = ({ theme }) => ( + + + +); + +stories.add('themes', () => ( + <> + + + + +)); diff --git a/app/views/DiscussionsView/Item.tsx b/app/views/DiscussionsView/Item.tsx index 612629cf9..4370042ed 100644 --- a/app/views/DiscussionsView/Item.tsx +++ b/app/views/DiscussionsView/Item.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import Touchable from 'react-native-platform-touchable'; +import moment from 'moment'; import { useTheme } from '../../theme'; import Avatar from '../../containers/Avatar'; @@ -65,7 +66,8 @@ interface IItem { const Item = ({ item, baseUrl, user, onPress }: IItem): JSX.Element => { const { theme } = useTheme(); const username = item?.u?.username; - const date = formatDateThreads(item.ts); + const messageTime = moment(item.ts).format('LT'); + const messageDate = formatDateThreads(item.ts); return ( { {username} - {date} + {messageTime} {/* @ts-ignore */} @@ -93,7 +95,7 @@ const Item = ({ item, baseUrl, user, onPress }: IItem): JSX.Element => { preview /> - + diff --git a/app/views/DiscussionsView/index.tsx b/app/views/DiscussionsView/index.tsx index a1aa1a511..90a4ee132 100644 --- a/app/views/DiscussionsView/index.tsx +++ b/app/views/DiscussionsView/index.tsx @@ -5,6 +5,8 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { HeaderBackButton, StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack'; import { RouteProp } from '@react-navigation/core'; +import { SubscriptionType } from '../../definitions'; +import { ChatsStackParamList } from '../../stacks/types'; import ActivityIndicator from '../../containers/ActivityIndicator'; import I18n from '../../i18n'; import StatusBar from '../../containers/StatusBar'; @@ -20,29 +22,16 @@ import { getHeaderTitlePosition } from '../../containers/Header'; import { useTheme } from '../../theme'; import RocketChat from '../../lib/rocketchat'; import SearchHeader from '../../containers/SearchHeader'; +import { TThreadModel } from '../../definitions/IThread'; 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: IItem; + navigation: StackNavigationProp; + route: RouteProp; + item: TThreadModel; } interface IDiscussionsViewState { @@ -187,19 +176,19 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem }, [navigation, isSearching]); const onDiscussionPress = debounce( - (item: IItem) => { + (item: TThreadModel) => { navigation.push('RoomView', { - rid: item.drid, + rid: item.drid!, prid: item.rid, name: item.msg, - t: item.rid === 'GENERAL' ? 'c' : 'p' + t: item.rid! === 'GENERAL' ? SubscriptionType.CHANNEL : SubscriptionType.GROUP }); }, 1000, true ); - const renderItem = ({ item }: { item: IItem }) => ( + const renderItem = ({ item }: { item: TThreadModel }) => ( ( }} onPress={() => alert('pressed')} {...props} - thread /> ); @@ -50,28 +50,6 @@ const listDecorator = story => ( ); -const reducers = combineReducers({ - login: () => ({ - user: { - id: 'abc', - username: 'rocket.cat', - name: 'Rocket Cat' - } - }), - server: () => ({ - server: 'https://open.rocket.chat', - version: '3.7.0' - }), - share: () => ({ - server: 'https://open.rocket.chat', - version: '3.7.0' - }), - settings: () => ({ - blockUnauthenticatedAccess: false - }) -}); -const store = createStore(reducers); - const stories = storiesOf('Thread Messages.Item', module) .addDecorator(listDecorator) .addDecorator(story => {story()}); diff --git a/storybook/stories/index.js b/storybook/stories/index.js index c8209d6f6..da4d1c7dd 100644 --- a/storybook/stories/index.js +++ b/storybook/stories/index.js @@ -11,6 +11,7 @@ import './Markdown'; import './HeaderButtons'; import './UnreadBadge'; import '../../app/views/ThreadMessagesView/Item.stories.js'; +import '../../app/views/DiscussionsView/Item.stories.js'; import './Avatar'; import './NewMarkdown'; import '../../app/containers/BackgroundContainer/index.stories.js';