112 lines
2.5 KiB
TypeScript
112 lines
2.5 KiB
TypeScript
|
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 (
|
||
|
|
<Touchable
|
||
|
|
onPress={() => onPress(item)}
|
||
|
|
testID={`discussions-view-${item.msg}`}
|
||
|
|
style={{ backgroundColor: themes[theme!].backgroundColor }}>
|
||
|
|
<View style={styles.container}>
|
||
|
|
<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} theme={theme} />
|
||
|
|
<View style={styles.contentContainer}>
|
||
|
|
<View style={styles.titleContainer}>
|
||
|
|
<Text style={[styles.title, { color: themes[theme!].titleText }]} numberOfLines={1}>
|
||
|
|
{username}
|
||
|
|
</Text>
|
||
|
|
<Text style={[styles.time, { color: themes[theme!].auxiliaryText }]}>{date}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.messageContainer}>
|
||
|
|
{/* @ts-ignore */}
|
||
|
|
<Markdown
|
||
|
|
msg={makeThreadName(item)}
|
||
|
|
baseUrl={baseUrl}
|
||
|
|
username={username}
|
||
|
|
theme={theme!}
|
||
|
|
numberOfLines={2}
|
||
|
|
style={[styles.markdown]}
|
||
|
|
preview
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<DiscussionDetails item={item} user={user} time={date} style={styles.discussionDetails} />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</Touchable>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Item;
|