Minor tweaks

This commit is contained in:
Gerzon Z 2021-09-17 15:55:06 -04:00
parent 88dbf345ea
commit 9473bf4024
4 changed files with 34 additions and 14 deletions

View File

@ -53,11 +53,12 @@ interface IThreadDetails {
badgeColor: string; badgeColor: string;
toggleFollowThread: Function; toggleFollowThread: Function;
thread: boolean; thread: boolean;
time: string;
style: object; style: object;
theme: string; theme: string;
} }
const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, thread, style, theme }: IThreadDetails) => { const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, thread, time, style, theme }: IThreadDetails) => {
let { tcount, dcount } = item; let { tcount, dcount } = item;
if (thread) { if (thread) {
if (tcount! >= 1000) { if (tcount! >= 1000) {
@ -99,7 +100,14 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, thread, sty
{replies} {replies}
</Text> </Text>
</View> </View>
) : null} ) : (
<View style={styles.detailContainer}>
<CustomIcon name='clock' size={24} color={themes[theme].auxiliaryText} />
<Text style={[styles.detailText, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
{time}
</Text>
</View>
)}
</View> </View>
{thread ? ( {thread ? (

View File

@ -28,20 +28,20 @@ interface IMarkdownProps {
username: string; username: string;
tmid?: string; tmid?: string;
isEdited?: boolean; isEdited?: boolean;
numberOfLines?: number; numberOfLines: number;
customEmojis?: boolean; customEmojis?: boolean;
useRealName?: boolean; useRealName: boolean;
channels?: { channels: {
name: string; name: string;
_id: number; _id: number;
}[]; }[];
mentions?: object[]; mentions?: object[];
navToRoomInfo?: Function; navToRoomInfo: Function;
preview?: boolean; preview?: boolean;
theme?: string; theme: string;
testID?: string; testID?: string;
style?: any; style?: any;
onLinkPress?: Function; onLinkPress: Function;
} }
type TLiteral = { type TLiteral = {

View File

@ -63,6 +63,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
const user = useSelector((state: IState) => state.login?.user); const user = useSelector((state: IState) => state.login?.user);
const baseUrl = useSelector((state: IState) => state.server?.server); const baseUrl = useSelector((state: IState) => state.server?.server);
const useRealName = useSelector((state: IState) => state.settings?.UI_Use_Real_Name); const useRealName = useSelector((state: IState) => state.settings?.UI_Use_Real_Name);
const timeFormat = useSelector((state: IState) => state.settings?.Message_TimeFormat);
const isMasterDetail = useSelector((state: IState) => state.app?.isMasterDetail); const isMasterDetail = useSelector((state: IState) => state.app?.isMasterDetail);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@ -199,6 +200,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
baseUrl, baseUrl,
useRealName useRealName
}} }}
timeFormat={timeFormat}
onPress={onDiscussionPress} onPress={onDiscussionPress}
/> />
); );

View File

@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { StyleSheet, Text, View } from 'react-native'; import { StyleSheet, Text, View } from 'react-native';
import Touchable from 'react-native-platform-touchable'; import Touchable from 'react-native-platform-touchable';
import moment from 'moment';
import { withTheme } from '../../theme'; import { withTheme } from '../../theme';
import Avatar from '../../containers/Avatar'; import Avatar from '../../containers/Avatar';
@ -25,6 +26,11 @@ const styles = StyleSheet.create({
marginBottom: 2, marginBottom: 2,
alignItems: 'center' alignItems: 'center'
}, },
discussionTitleContainer: {
flexDirection: 'row',
marginBottom: 2,
justifyContent: 'space-between'
},
title: { title: {
flexShrink: 1, flexShrink: 1,
fontSize: 18, fontSize: 18,
@ -56,11 +62,13 @@ const styles = StyleSheet.create({
} }
}); });
const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, toggleFollowThread, thread }) => { const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, toggleFollowThread, timeFormat, thread }) => {
const username = (useRealName && item?.u?.name) || item?.u?.username; const username = (useRealName && item?.u?.name) || item?.u?.username;
let time; let date;
let hour;
if (item?.ts) { if (item?.ts) {
time = formatDateThreads(item.ts); date = formatDateThreads(item.ts);
hour = moment(item.ts).format(timeFormat);
} }
return ( return (
@ -71,11 +79,11 @@ const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, to
<View style={styles.container}> <View style={styles.container}>
<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} user={user} theme={theme} /> <Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} user={user} theme={theme} />
<View style={styles.contentContainer}> <View style={styles.contentContainer}>
<View style={styles.titleContainer}> <View style={thread ? styles.titleContainer : styles.discussionTitleContainer}>
<Text style={[styles.title, { color: themes[theme].titleText }]} numberOfLines={1}> <Text style={[styles.title, { color: themes[theme].titleText }]} numberOfLines={1}>
{username} {username}
</Text> </Text>
<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text> <Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{thread ? date : hour}</Text>
</View> </View>
<View style={styles.messageContainer}> <View style={styles.messageContainer}>
<Markdown <Markdown
@ -92,6 +100,7 @@ const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, to
<ThreadDetails <ThreadDetails
item={item} item={item}
user={user} user={user}
time={date}
toggleFollowThread={toggleFollowThread} toggleFollowThread={toggleFollowThread}
thread={thread} thread={thread}
style={styles.threadDetails} style={styles.threadDetails}
@ -111,7 +120,8 @@ Item.propTypes = {
badgeColor: PropTypes.string, badgeColor: PropTypes.string,
onPress: PropTypes.func, onPress: PropTypes.func,
toggleFollowThread: PropTypes.func, toggleFollowThread: PropTypes.func,
thread: PropTypes.bool thread: PropTypes.bool,
timeFormat: PropTypes.string
}; };
export default withTheme(Item); export default withTheme(Item);