sergiodt
/
vn-verdnaturachat
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chore: Evaluate DiscussionsView - TypeScript (#4129)

This commit is contained in:
Reinaldo Neto 2022-05-02 09:23:57 -03:00 committed by GitHub
parent a1e672df0e
commit 8896370a6c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/views/DiscussionsView/DiscussionDetails.tsx
View File

@ -2,7 +2,6 @@ import React from 'react';
import { StyleSheet, Text, View } from 'react-native'; import { StyleSheet, Text, View } from 'react-native';
import { CustomIcon } from '../../lib/Icons'; import { CustomIcon } from '../../lib/Icons';
import { themes } from '../../lib/constants';
import sharedStyles from '../Styles'; import sharedStyles from '../Styles';
import { useTheme } from '../../theme'; import { useTheme } from '../../theme';
import { IMessageFromServer } from '../../definitions'; import { IMessageFromServer } from '../../definitions';
@ -35,8 +34,8 @@ interface IDiscussionDetails {
date: string; date: string;
} }
const DiscussionDetails = ({ item, date }: IDiscussionDetails): JSX.Element => { const DiscussionDetails = ({ item, date }: IDiscussionDetails): React.ReactElement => {
const { theme } = useTheme(); const { colors } = useTheme();
let count: string | number | undefined = item.dcount; let count: string | number | undefined = item.dcount;
if (count && count >= 1000) { if (count && count >= 1000) {
count = '+999'; count = '+999';
@ -46,15 +45,15 @@ const DiscussionDetails = ({ item, date }: IDiscussionDetails): JSX.Element => {
<View style={[styles.container]}> <View style={[styles.container]}>
<View style={styles.detailsContainer}> <View style={styles.detailsContainer}>
<View style={styles.detailContainer}> <View style={styles.detailContainer}>
<CustomIcon name={'discussions'} size={24} color={themes[theme!].auxiliaryText} /> <CustomIcon name={'discussions'} size={24} color={colors.auxiliaryText} />
<Text style={[styles.detailText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}> <Text style={[styles.detailText, { color: colors.auxiliaryText }]} numberOfLines={1}>
{count} {count}
</Text> </Text>
</View> </View>
<View style={styles.detailContainer}> <View style={styles.detailContainer}>
<CustomIcon name={'clock'} size={24} color={themes[theme!].auxiliaryText} /> <CustomIcon name={'clock'} size={24} color={colors.auxiliaryText} />
<Text style={[styles.detailText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}> <Text style={[styles.detailText, { color: colors.auxiliaryText }]} numberOfLines={1}>
{date} {date}
</Text> </Text>
</View> </View>

4
app/views/DiscussionsView/Item.stories.js
View File

@ -5,7 +5,7 @@ import { ScrollView } from 'react-native';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import * as List from '../../containers/List'; import * as List from '../../containers/List';
import { themes } from '../../lib/constants'; import { themes, colors } from '../../lib/constants';
import { ThemeContext } from '../../theme'; import { ThemeContext } from '../../theme';
import { store } from '../../../storybook/stories'; import { store } from '../../../storybook/stories';
import Item from './Item'; import Item from './Item';
@ -82,7 +82,7 @@ stories.add('content', () => (
)); ));
const ThemeStory = ({ theme }) => ( const ThemeStory = ({ theme }) => (
<ThemeContext.Provider value={{ theme }}> <ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
<BaseItem badgeColor={themes[theme].mentionMeColor} /> <BaseItem badgeColor={themes[theme].mentionMeColor} />
</ThemeContext.Provider> </ThemeContext.Provider>
); );

12
app/views/DiscussionsView/Item.tsx
View File

@ -6,7 +6,6 @@ import moment from 'moment';
import { useTheme } from '../../theme'; import { useTheme } from '../../theme';
import Avatar from '../../containers/Avatar'; import Avatar from '../../containers/Avatar';
import sharedStyles from '../Styles'; import sharedStyles from '../Styles';
import { themes } from '../../lib/constants';
import { MarkdownPreview } from '../../containers/markdown'; import { MarkdownPreview } from '../../containers/markdown';
import { formatDateThreads, makeThreadName } from '../../utils/room'; import { formatDateThreads, makeThreadName } from '../../utils/room';
import DiscussionDetails from './DiscussionDetails'; import DiscussionDetails from './DiscussionDetails';
@ -55,15 +54,14 @@ interface IItem {
}; };
} }
const Item = ({ item, onPress }: IItem): JSX.Element => { const Item = ({ item, onPress }: IItem): React.ReactElement => {
const { theme } = useTheme(); const { colors } = useTheme();
const username = item?.u?.username; const username = item?.u?.username;
let messageTime = ''; let messageTime = '';
let messageDate = ''; let messageDate = '';
if (item?.ts) { if (item?.ts) {
messageTime = moment(item.ts).format('LT'); messageTime = moment(item.ts).format('LT');
// @ts-ignore TODO: Unify IMessage
messageDate = formatDateThreads(item.ts); messageDate = formatDateThreads(item.ts);
} }
@ -71,15 +69,15 @@ const Item = ({ item, onPress }: IItem): JSX.Element => {
<Touchable <Touchable
onPress={() => onPress(item)} onPress={() => onPress(item)}
testID={`discussions-view-${item.msg}`} testID={`discussions-view-${item.msg}`}
style={{ backgroundColor: themes[theme].backgroundColor }}> style={{ backgroundColor: colors.backgroundColor }}>
<View style={styles.container}> <View style={styles.container}>
<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} /> <Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} />
<View style={styles.contentContainer}> <View style={styles.contentContainer}>
<View style={styles.titleContainer}> <View style={styles.titleContainer}>
<Text style={[styles.title, { color: themes[theme].titleText }]} numberOfLines={1}> <Text style={[styles.title, { color: colors.titleText }]} numberOfLines={1}>
{username} {username}
</Text> </Text>
{messageTime ? <Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{messageTime}</Text> : null} {messageTime ? <Text style={[styles.time, { color: colors.auxiliaryText }]}>{messageTime}</Text> : null}
</View> </View>
<View style={styles.messageContainer}> <View style={styles.messageContainer}>
{username ? <MarkdownPreview msg={makeThreadName(item)} numberOfLines={2} style={[styles.markdown]} /> : null} {username ? <MarkdownPreview msg={makeThreadName(item)} numberOfLines={2} style={[styles.markdown]} /> : null}

9
app/views/DiscussionsView/index.tsx
View File

@ -12,7 +12,6 @@ import I18n from '../../i18n';
import StatusBar from '../../containers/StatusBar'; import StatusBar from '../../containers/StatusBar';
import log from '../../utils/log'; import log from '../../utils/log';
import debounce from '../../utils/debounce'; import debounce from '../../utils/debounce';
import { themes } from '../../lib/constants';
import SafeAreaView from '../../containers/SafeAreaView'; import SafeAreaView from '../../containers/SafeAreaView';
import * as HeaderButton from '../../containers/HeaderButton'; import * as HeaderButton from '../../containers/HeaderButton';
import * as List from '../../containers/List'; import * as List from '../../containers/List';
@ -39,7 +38,7 @@ interface IDiscussionsViewProps {
item: TThreadModel; item: TThreadModel;
} }
const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Element => { const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.ReactElement => {
const rid = route.params?.rid; const rid = route.params?.rid;
const t = route.params?.t; const t = route.params?.t;
@ -53,7 +52,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
const [total, setTotal] = useState(0); const [total, setTotal] = useState(0);
const [searchTotal, setSearchTotal] = useState(0); const [searchTotal, setSearchTotal] = useState(0);
const { theme } = useTheme(); const { colors } = useTheme();
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const load = async (text = '') => { const load = async (text = '') => {
@ -126,7 +125,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
options = { options = {
headerLeft: () => ( headerLeft: () => (
<HeaderBackButton labelVisible={false} onPress={() => navigation.pop()} tintColor={themes[theme].headerTintColor} /> <HeaderBackButton labelVisible={false} onPress={() => navigation.pop()} tintColor={colors.headerTintColor} />
), ),
headerTitleAlign: 'center', headerTitleAlign: 'center',
headerTitle: I18n.t('Discussions'), headerTitle: I18n.t('Discussions'),
@ -192,7 +191,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
data={isSearching ? search : discussions} data={isSearching ? search : discussions}
renderItem={renderItem} renderItem={renderItem}
keyExtractor={(item: any) => item.msg} keyExtractor={(item: any) => item.msg}
style={{ backgroundColor: themes[theme].backgroundColor }} style={{ backgroundColor: colors.backgroundColor }}
contentContainerStyle={styles.contentContainer} contentContainerStyle={styles.contentContainer}
onEndReachedThreshold={0.5} onEndReachedThreshold={0.5}
removeClippedSubviews={isIOS} removeClippedSubviews={isIOS}