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 { CustomIcon } from '../../lib/Icons';
import { themes } from '../../lib/constants';
import sharedStyles from '../Styles';
import { useTheme } from '../../theme';
import { IMessageFromServer } from '../../definitions';
@ -35,8 +34,8 @@ interface IDiscussionDetails {
date: string;
}
const DiscussionDetails = ({ item, date }: IDiscussionDetails): JSX.Element => {
const { theme } = useTheme();
const DiscussionDetails = ({ item, date }: IDiscussionDetails): React.ReactElement => {
const { colors } = useTheme();
let count: string | number | undefined = item.dcount;
if (count && count >= 1000) {
count = '+999';
@ -46,15 +45,15 @@ const DiscussionDetails = ({ item, date }: IDiscussionDetails): JSX.Element => {
<View style={[styles.container]}>
<View style={styles.detailsContainer}>
<View style={styles.detailContainer}>
<CustomIcon name={'discussions'} size={24} color={themes[theme!].auxiliaryText} />
<Text style={[styles.detailText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
<CustomIcon name={'discussions'} size={24} color={colors.auxiliaryText} />
<Text style={[styles.detailText, { color: colors.auxiliaryText }]} numberOfLines={1}>
{count}
</Text>
</View>
<View style={styles.detailContainer}>
<CustomIcon name={'clock'} size={24} color={themes[theme!].auxiliaryText} />
<Text style={[styles.detailText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
<CustomIcon name={'clock'} size={24} color={colors.auxiliaryText} />
<Text style={[styles.detailText, { color: colors.auxiliaryText }]} numberOfLines={1}>
{date}
</Text>
</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 * as List from '../../containers/List';
import { themes } from '../../lib/constants';
import { themes, colors } from '../../lib/constants';
import { ThemeContext } from '../../theme';
import { store } from '../../../storybook/stories';
import Item from './Item';
@ -82,7 +82,7 @@ stories.add('content', () => (
));
const ThemeStory = ({ theme }) => (
<ThemeContext.Provider value={{ theme }}>
<ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
<BaseItem badgeColor={themes[theme].mentionMeColor} />
</ThemeContext.Provider>
);

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

@ -6,7 +6,6 @@ import moment from 'moment';
import { useTheme } from '../../theme';
import Avatar from '../../containers/Avatar';
import sharedStyles from '../Styles';
import { themes } from '../../lib/constants';
import { MarkdownPreview } from '../../containers/markdown';
import { formatDateThreads, makeThreadName } from '../../utils/room';
import DiscussionDetails from './DiscussionDetails';
@ -55,15 +54,14 @@ interface IItem {
};
}
const Item = ({ item, onPress }: IItem): JSX.Element => {
const { theme } = useTheme();
const Item = ({ item, onPress }: IItem): React.ReactElement => {
const { colors } = useTheme();
const username = item?.u?.username;
let messageTime = '';
let messageDate = '';
if (item?.ts) {
messageTime = moment(item.ts).format('LT');
// @ts-ignore TODO: Unify IMessage
messageDate = formatDateThreads(item.ts);
}
@ -71,15 +69,15 @@ const Item = ({ item, onPress }: IItem): JSX.Element => {
<Touchable
onPress={() => onPress(item)}
testID={`discussions-view-${item.msg}`}
style={{ backgroundColor: themes[theme].backgroundColor }}>
style={{ backgroundColor: colors.backgroundColor }}>
<View style={styles.container}>
<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} />
<View style={styles.contentContainer}>
<View style={styles.titleContainer}>
<Text style={[styles.title, { color: themes[theme].titleText }]} numberOfLines={1}>
<Text style={[styles.title, { color: colors.titleText }]} numberOfLines={1}>
{username}
</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 style={styles.messageContainer}>
{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 log from '../../utils/log';
import debounce from '../../utils/debounce';
import { themes } from '../../lib/constants';
import SafeAreaView from '../../containers/SafeAreaView';
import * as HeaderButton from '../../containers/HeaderButton';
import * as List from '../../containers/List';
@ -39,7 +38,7 @@ interface IDiscussionsViewProps {
item: TThreadModel;
}
const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Element => {
const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.ReactElement => {
const rid = route.params?.rid;
const t = route.params?.t;
@ -53,7 +52,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
const [total, setTotal] = useState(0);
const [searchTotal, setSearchTotal] = useState(0);
const { theme } = useTheme();
const { colors } = useTheme();
const insets = useSafeAreaInsets();
const load = async (text = '') => {
@ -126,7 +125,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
options = {
headerLeft: () => (
<HeaderBackButton labelVisible={false} onPress={() => navigation.pop()} tintColor={themes[theme].headerTintColor} />
<HeaderBackButton labelVisible={false} onPress={() => navigation.pop()} tintColor={colors.headerTintColor} />
),
headerTitleAlign: 'center',
headerTitle: I18n.t('Discussions'),
@ -192,7 +191,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
data={isSearching ? search : discussions}
renderItem={renderItem}
keyExtractor={(item: any) => item.msg}
style={{ backgroundColor: themes[theme].backgroundColor }}
style={{ backgroundColor: colors.backgroundColor }}
contentContainerStyle={styles.contentContainer}
onEndReachedThreshold={0.5}
removeClippedSubviews={isIOS}