@messenger-box/platform-mobile 0.0.1-alpha.362 → 0.0.1-alpha.365

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

@@ -0,0 +1,205 @@
+import React, { useCallback, useMemo, useEffect, useState } from 'react';
+import { FlatList, Box, Heading, Input, Text, Icon, Center, Spinner, Button } from 'native-base';
+import { Ionicons } from '@expo/vector-icons';
+import { useSelector, useDispatch } from 'react-redux';
+import { useNavigation, useRoute, useIsFocused, useFocusEffect } from '@react-navigation/native';
+import { orderBy, uniqBy, startCase } from 'lodash';
+import { ThreadViewItem } from '../components/ThreadsViewItem';
+import { useThreadMessagesQuery,useOnThreadCreatedUpdatedSubscription } from '@messenger-box/platform-client';
+import { userSelector } from '@adminide-stack/user-auth0-client';
+import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';
+import { config } from '../config';
+const { MESSAGES_PER_PAGE } = config;
+
+export interface ThreadsViewProps {
+    channelId?: string;
+    role?: string;
+    channelsDetail?: any;
+    refetchChannelDetail: (id: any) => Promise<any>;
+}
+
+const ThreadsViewComponent = ({ channelId,role, channelsDetail, refetchChannelDetail }: ThreadsViewProps) => {
+    const { params } = useRoute<any>();
+    const auth = useSelector(userSelector);
+    const dispatch = useDispatch();
+    const navigation = useNavigation<any>();
+    const isFocused = useIsFocused();
+    const [refreshing, setRefresh] = useState<boolean>(false);
+    const [threadData, setThreadsData] = useState<any>([]);
+
+    const {
+        data,
+        loading: threadLoading,
+        error,
+        refetch,
+    } = useThreadMessagesQuery({
+        variables: {
+            channelId: channelId?.toString(),
+            role:role?.toString(),
+            limit: MESSAGES_PER_PAGE,
+        },
+        fetchPolicy: 'cache-and-network',
+    });
+
+
+    const { data:threadCreatedUpdated} = useOnThreadCreatedUpdatedSubscription();
+
+    useFocusEffect(
+        React.useCallback(() => {
+            // Do something when the screen is focused
+            navigation?.setOptions({ title: params?.title ?? 'Thread' });
+            refetch({
+                channelId: channelId?.toString(),
+                role:role?.toString(),
+                limit: MESSAGES_PER_PAGE,
+            }).then(({ data }) => {
+                if (!data?.threadMessages?.data) {
+                    return;
+                }
+
+                if(data?.threadMessages?.data?.length){
+                    const { data:newThreads} = data?.threadMessages
+                    setThreadsData((oldThreads: any) => uniqBy([...oldThreads, ...newThreads], ({ id }) => id));
+                }
+            });
+
+            return () => {
+                // Do something when the screen is unfocused
+                // Useful for cleanup functions
+            };
+        }, []),
+    );
+
+    React.useEffect(()=>{
+        if(data?.threadMessages?.data?.length){
+            const { data:newThreads} = data?.threadMessages
+            setThreadsData((oldThreads: any) => uniqBy([...oldThreads, ...newThreads], ({ id }) => id));
+        }
+
+    },[data])
+
+
+    React.useEffect(()=>{
+        if(threadCreatedUpdated?.threadCreatedUpdated?.data){
+            const { data:newThreads} = threadCreatedUpdated?.threadCreatedUpdated;
+            
+            setThreadsData((oldThreads: any) => {
+                const i = oldThreads.findIndex((el:any) => el.id === newThreads?.id);
+                if (i > -1) oldThreads[i] = newThreads; // (2)
+                else oldThreads.push(newThreads);
+                return oldThreads;
+            });
+           // setThreadsData((oldThreads: any) => uniqBy([...oldThreads, newThreads], ({ id }) => id));
+        }
+
+    },[threadCreatedUpdated])
+
+    const threads = React.useMemo(() => {
+        if (!threadData?.length) return null;
+        return threadData || [];
+    }, [threadData]);
+
+    // const threads = React.useMemo(() => {
+    //     if (!data?.threadMessages?.data?.length) return null;
+    //     return data?.threadMessages?.data || [];
+    // }, [data]);
+
+    const handleSelectThread = useCallback((id: any, title: any, postParentId: any) => {
+        navigation.navigate(config.THREAD_MESSEGE_PATH as any, {
+            channelId: id,
+            role:role?.toString(),
+            title: title,
+            postParentId: postParentId,
+            hideTabBar: true,
+        });
+        // if (params?.channelId) {
+        //     navigation.navigate(config.THREAD_MESSEGE_PATH as any, {
+        //         channelId: params?.channelId,
+        //         title: params?.title ?? null,
+        //         postParentId: postParentId,
+        //         hideTabBar: true,
+        //     });
+        // } else {
+        //     navigation.navigate(config.THREAD_MESSEGE_PATH as any, {
+        //         channelId: id,
+        //         title: title,
+        //         postParentId: postParentId,
+        //         hideTabBar: true,
+        //     });
+        // }
+    }, []);
+
+    const handleRefresh = useCallback(() => {
+        refetch({
+            channelId: channelId?.toString(),
+            role:role?.toString(),
+            limit: MESSAGES_PER_PAGE,
+        }).then(({ data }) => {
+            if (!data?.threadMessages?.data) {
+                return;
+            }
+
+            if(data?.threadMessages?.data?.length){
+                const { data:newThreads} = data?.threadMessages
+                setThreadsData((oldThreads: any) => uniqBy([...oldThreads, ...newThreads], ({ id }) => id));
+            }
+        });
+    }, []);
+
+    const fetchMoreThreads = useCallback(() => {
+        refetch({
+            channelId: channelId?.toString(),
+            role:role?.toString(),
+            skip: threads?.length,
+        });
+    }, []);
+
+    
+
+    return (
+        <Box
+            flex={1}
+            p={2}
+            pb={0}
+            _dark={{
+                borderColor: 'coolGray.600',
+                backgroundColor: 'gray.700',
+            }}
+            _web={{
+                shadow: 2,
+                borderWidth: 0,
+            }}
+            _light={{
+                backgroundColor: 'gray.50',
+            }}
+        >
+            <FlatList
+                style={{flex:1}}
+                data={threads && threads?.length > 0 ? threads : []}
+                onRefresh={handleRefresh}
+                refreshing={threadLoading}
+                contentContainerStyle={{ paddingBottom:60 }}
+                ItemSeparatorComponent={() => <Box height="0.5" backgroundColor="gray.200" />}
+                renderItem={({ item: thread }) => (
+                    <ThreadViewItem onOpen={handleSelectThread} currentUser={auth} thread={thread} />
+                )}
+                ListEmptyComponent={() => (
+                    <>
+                    {!threadLoading || threads?.length == 0}
+                    <Box p={5}>
+                    <Center mt={6}>
+                        <Icon as={Ionicons} name="chatbubbles" size={'xl'} />
+                        <Text>You don't have any message yet!</Text>
+                    </Center>
+                </Box>
+                </>
+                )}
+                keyExtractor={(item, index) => 'threads-view-key' + index}
+                onEndReached={fetchMoreThreads}
+                onEndReachedThreshold={0.1}
+            />
+        </Box>
+    );
+};
+
+export const ThreadsView = React.memo(ThreadsViewComponent);

package/src/screens/index.ts

@@ -1,2 +1,4 @@
 export * from './inbox/Inbox';
-export * from './inbox/DialogMessages';
+export * from './inbox/DialogMessages';
+export * from './inbox/DialogThreads';
+export * from './inbox/DialogThreadMessages'