diff --git a/app/containers/BackgroundContainer/index.tsx b/app/containers/BackgroundContainer/index.tsx
index fbe5d307..1c4ed396 100644
--- a/app/containers/BackgroundContainer/index.tsx
+++ b/app/containers/BackgroundContainer/index.tsx
@@ -35,7 +35,7 @@ const styles = StyleSheet.create({
const BackgroundContainer = ({ theme, text, loading }: IBackgroundContainer) => (
- {text ? {text} : null}
+ {text && !loading ? {text} : null}
{loading ? : null}
);
diff --git a/app/containers/ThreadDetails.tsx b/app/containers/ThreadDetails.tsx
index 9275019d..ada6d12d 100644
--- a/app/containers/ThreadDetails.tsx
+++ b/app/containers/ThreadDetails.tsx
@@ -1,11 +1,11 @@
import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, ViewStyle } from 'react-native';
import Touchable from 'react-native-platform-touchable';
import { CustomIcon } from '../lib/Icons';
import { themes } from '../constants/colors';
import sharedStyles from '../views/Styles';
-import { withTheme } from '../theme';
+import { useTheme } from '../theme';
const styles = StyleSheet.create({
container: {
@@ -41,8 +41,7 @@ const styles = StyleSheet.create({
interface IThreadDetails {
item: {
- tcount?: number | string;
- dcount?: number | string;
+ tcount: number | string;
replies?: any;
id: string;
};
@@ -53,25 +52,20 @@ interface IThreadDetails {
toggleFollowThread: Function;
thread: boolean;
time: string;
- style: object;
- theme: string;
+ style: ViewStyle;
}
-const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, thread, time, style, theme }: IThreadDetails) => {
- const { tcount, dcount } = item;
- let count = tcount || dcount;
+const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IThreadDetails) => {
+ const { theme } = useTheme();
+ let { tcount } = item;
- if (count! >= 1000) {
- count = '+999';
- } else if (count! >= 100) {
- count = '+99';
+ if (tcount >= 1000) {
+ tcount = '+999';
}
let replies = item?.replies?.length ?? 0;
if (replies >= 1000) {
replies = '+999';
- } else if (replies >= 100) {
- replies = '+99';
}
const isFollowing = item.replies?.find((u: any) => u === user?.id);
@@ -80,34 +74,31 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, thread, tim
-
-
- {count}
+
+
+ {tcount}
-
-
- {thread ? replies : time}
+
+
+ {replies}
-
- {thread ? (
-
- {badgeColor ? : null}
- toggleFollowThread?.(isFollowing, item.id)}>
-
-
-
- ) : null}
+
+ {badgeColor ? : null}
+ toggleFollowThread?.(isFollowing, item.id)}>
+
+
+
);
};
-export default withTheme(ThreadDetails);
+export default ThreadDetails;
diff --git a/app/views/DiscussionsView/DiscussionDetails.tsx b/app/views/DiscussionsView/DiscussionDetails.tsx
new file mode 100644
index 00000000..6e36f6b6
--- /dev/null
+++ b/app/views/DiscussionsView/DiscussionDetails.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { StyleSheet, Text, View, ViewStyle } from 'react-native';
+
+import { CustomIcon } from '../../lib/Icons';
+import { themes } from '../../constants/colors';
+import sharedStyles from '../Styles';
+import { useTheme } from '../../theme';
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ flexDirection: 'row',
+ alignItems: 'center'
+ },
+ detailsContainer: {
+ flex: 1,
+ flexDirection: 'row'
+ },
+ detailContainer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginRight: 8
+ },
+ detailText: {
+ fontSize: 10,
+ marginLeft: 2,
+ ...sharedStyles.textSemibold
+ }
+});
+
+interface IDiscussionDetails {
+ item: {
+ dcount: number | string;
+ replies?: any;
+ id: string;
+ };
+ user: {
+ id: string;
+ };
+ time: string;
+ style: ViewStyle;
+}
+
+const DiscussionDetails = ({ item, time, style }: IDiscussionDetails) => {
+ const { theme } = useTheme();
+ let { dcount } = item;
+
+ if (dcount >= 1000) {
+ dcount = '+999';
+ }
+
+ return (
+
+
+
+
+
+ {dcount}
+
+
+
+
+
+
+ {time}
+
+
+
+
+ );
+};
+
+export default DiscussionDetails;
diff --git a/app/views/DiscussionsView/Item.tsx b/app/views/DiscussionsView/Item.tsx
new file mode 100644
index 00000000..a92b4c6c
--- /dev/null
+++ b/app/views/DiscussionsView/Item.tsx
@@ -0,0 +1,111 @@
+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 (
+ onPress(item)}
+ testID={`discussions-view-${item.msg}`}
+ style={{ backgroundColor: themes[theme!].backgroundColor }}>
+
+
+
+
+
+ {username}
+
+ {date}
+
+
+ {/* @ts-ignore */}
+
+
+
+
+
+
+ );
+};
+
+export default Item;
diff --git a/app/views/DiscussionsView/index.tsx b/app/views/DiscussionsView/index.tsx
index efee9b0a..a1aa1a51 100644
--- a/app/views/DiscussionsView/index.tsx
+++ b/app/views/DiscussionsView/index.tsx
@@ -20,22 +20,37 @@ import { getHeaderTitlePosition } from '../../containers/Header';
import { useTheme } from '../../theme';
import RocketChat from '../../lib/rocketchat';
import SearchHeader from '../../containers/SearchHeader';
-import Item from '../ThreadMessagesView/Item';
+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: {
- msg: string;
- };
+ item: IItem;
}
interface IDiscussionsViewState {
- login?: {
- user: object;
+ login: {
+ user: {
+ id: string;
+ token: string;
+ };
};
server: {
server: string;
@@ -54,8 +69,6 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
const user = useSelector((state: IDiscussionsViewState) => state.login?.user);
const baseUrl = useSelector((state: IDiscussionsViewState) => state.server?.server);
- const useRealName = useSelector((state: IDiscussionsViewState) => state.settings?.UI_Use_Real_Name);
- const timeFormat = useSelector((state: IDiscussionsViewState) => state.settings?.Message_TimeFormat);
const isMasterDetail = useSelector((state: IDiscussionsViewState) => state.app?.isMasterDetail);
const [loading, setLoading] = useState(false);
@@ -174,7 +187,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
}, [navigation, isSearching]);
const onDiscussionPress = debounce(
- (item: any) => {
+ (item: IItem) => {
navigation.push('RoomView', {
rid: item.drid,
prid: item.rid,
@@ -186,16 +199,14 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
true
);
- const renderItem = ({ item }: any) => (
+ const renderItem = ({ item }: { item: IItem }) => (