@messenger-box/platform-mobile 9.0.4-alpha.17 → 9.0.4-alpha.21

package/src/screens/inbox/containers/ThreadsView.tsx

@@ -16,6 +16,11 @@ import { config } from '../config';
 const { MESSAGES_PER_PAGE } = config;
 
 export interface ThreadsViewProps {
+    data: any;
+    loading: boolean;
+    refetch: any;
+    subscribeToMore: any;
+    error: any;
     channelId?: string;
     role?: string;
     channelsDetail?: any;
@@ -27,7 +32,17 @@ interface IThreadSubscriptionHandlerProps {
     channelId: string | undefined;
 }
 
-const ThreadsViewComponent = ({ channelId, role, channelsDetail, refetchChannelDetail }: ThreadsViewProps) => {
+const ThreadsViewComponent = ({
+    data,
+    loading: threadLoading,
+    refetch,
+    subscribeToMore,
+    error,
+    channelId,
+    role,
+    channelsDetail,
+    refetchChannelDetail,
+}: ThreadsViewProps) => {
     const { params } = useRoute<any>();
     const auth = useSelector(userSelector);
     const dispatch = useDispatch();
@@ -36,21 +51,21 @@ const ThreadsViewComponent = ({ channelId, role, channelsDetail, refetchChannelD
     const [refreshing, setRefresh] = useState<boolean>(false);
     const [threadData, setThreadsData] = useState<any>([]);
 
-    const {
-        data,
-        loading: threadLoading,
-        error,
-        refetch,
-        subscribeToMore,
-    } = useThreadMessagesQuery({
-        variables: {
-            channelId: channelId?.toString(),
-            role: role?.toString(),
-            limit: MESSAGES_PER_PAGE,
-            repliesLimit2: 5,
-        },
-        fetchPolicy: 'cache-and-network',
-    });
+    // const {
+    //     data,
+    //     loading: threadLoading,
+    //     error,
+    //     refetch,
+    //     subscribeToMore,
+    // } = useThreadMessagesQuery({
+    //     variables: {
+    //         channelId: channelId?.toString(),
+    //         role: role?.toString(),
+    //         limit: MESSAGES_PER_PAGE,
+    //         repliesLimit2: 5,
+    //     },
+    //     // fetchPolicy: 'cache-and-network',
+    // });
 
     // const { data: threadCreatedUpdated } = useOnThreadCreatedUpdatedSubscription({
     //     variables: { channelId: channelId?.toString() },
@@ -64,6 +79,7 @@ const ThreadsViewComponent = ({ channelId, role, channelsDetail, refetchChannelD
                 channelId: channelId?.toString(),
                 role: role?.toString(),
                 limit: MESSAGES_PER_PAGE,
+                repliesLimit2: 5,
             });
             // .then(({ data }) => {
             //     if (!data?.threadMessages?.data) {
@@ -80,7 +96,7 @@ const ThreadsViewComponent = ({ channelId, role, channelsDetail, refetchChannelD
                 // Do something when the screen is unfocused
                 // Useful for cleanup functions
             };
-        }, [channelId]),
+        }, []),
     );
 
     // React.useEffect(() => {
@@ -121,9 +137,12 @@ const ThreadsViewComponent = ({ channelId, role, channelsDetail, refetchChannelD
     // }, [threadData]);
 
     const threads = React.useMemo(() => {
-        if (!data?.threadMessages?.data?.length) return null;
-        const { data: newThreads } = data?.threadMessages;
-        const threadsFiltered = newThreads ? uniqBy([...newThreads], ({ id }: any) => id) : [];
+        // if (!data?.threadMessages?.data?.length) return null;
+        // const { data: newThreads } = data?.threadMessages;
+        if (data?.threadMessages?.data?.length == 0) return [];
+        const threadsFiltered = data?.threadMessages?.data
+            ? uniqBy([...data?.threadMessages?.data], ({ id }: any) => id)
+            : [];
         return orderBy(threadsFiltered, ['updatedAt'], ['desc']) || [];
     }, [data]);
 
@@ -163,6 +182,7 @@ const ThreadsViewComponent = ({ channelId, role, channelsDetail, refetchChannelD
             channelId: channelId?.toString(),
             role: role?.toString(),
             limit: MESSAGES_PER_PAGE,
+            repliesLimit2: 5,
         });
         // .then(({ data }) => {
         //     if (!data?.threadMessages?.data) {
@@ -191,6 +211,7 @@ const ThreadsViewComponent = ({ channelId, role, channelsDetail, refetchChannelD
     //         </Center>
     //     );
     // }
+    console.log('threadLoading', threadLoading, ' threads?.length=', threads?.length);
 
     return (
         <Box
@@ -220,13 +241,15 @@ const ThreadsViewComponent = ({ channelId, role, channelsDetail, refetchChannelD
                 )}
                 ListEmptyComponent={() => (
                     <>
-                        {!threadLoading || threads?.length == 0}
-                        <Box p={'$5'}>
-                            <Center mt={'$6'}>
-                                <Ionicons name="chatbubbles" size={50} />
-                                <Text>You don't have any message yet!</Text>
-                            </Center>
-                        </Box>
+                        {/* {!threadLoading || threads?.length == 0} */}
+                        {!threadLoading && threads?.length == 0 && (
+                            <Box p={'$5'}>
+                                <Center mt={'$6'}>
+                                    <Ionicons name="chatbubbles" size={50} />
+                                    <Text>You don't have any message yet!</Text>
+                                </Center>
+                            </Box>
+                        )}
                     </>
                 )}
                 ListFooterComponent={() => (
@@ -284,4 +307,6 @@ const SubscriptionHandler = ({ subscribeToNewMessages, channelId }: IThreadSubsc
     return <></>;
 };
 
-export const ThreadsView = React.memo(ThreadsViewComponent);
+export const ThreadsView = ThreadsViewComponent;
+
+// export const ThreadsView = React.memo(ThreadsViewComponent);