@messenger-box/platform-mobile 0.0.1-alpha.310 → 0.0.1-alpha.314

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

@@ -2,10 +2,10 @@ import React, { useCallback, useMemo, useEffect, useState } from 'react';
 import { FlatList, Box, Heading, Input, Text, Icon, Center } from 'native-base';
 import { Ionicons } from '@expo/vector-icons';
 import { useSelector, useDispatch } from 'react-redux';
-import { useNavigation, useRoute, useIsFocused } from '@react-navigation/native';
+import { useNavigation, useRoute, useIsFocused, useFocusEffect } from '@react-navigation/native';
 
 import { DialogsListItem } from '../components/DialogsListItem';
-import { useGetAllUsersQuery, useGetChannelsByUserQuery } from '@messenger-box/platform-client';
+import { useGetChannelsByUserQuery } 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';
@@ -15,7 +15,7 @@ export interface InboxProps {
     channelRole?: string;
 }
 
-export function Dialogs(props: InboxProps) {
+export const Dialogs = (props: InboxProps) => {
     const { channelFilters, channelRole } = props;
     const { params } = useRoute<any>();
     const auth = useSelector(userSelector);
@@ -35,17 +35,18 @@ export function Dialogs(props: InboxProps) {
         },
     });
 
-    const { data: users } = useGetAllUsersQuery();
+    useFocusEffect(
+        React.useCallback(() => {
+            // Do something when the screen is focused
+            getChannelsRefetch({ role: channelRole, criteria: channelFilters });
 
-    const currentUser = useMemo(
-        () => users?.getUsers?.find(({ alias }: any) => alias?.includes(auth?.auth0UserId)),
-        [users, auth],
+            return () => {
+                // Do something when the screen is unfocused
+                // Useful for cleanup functions
+            };
+        }, [channelFilters]),
     );
 
-    useEffect(() => {
-        getChannelsRefetch();
-    }, [isFocused, navigation]);
-
     useEffect(() => {
         setTimeout(() => {
             dispatch({
@@ -67,11 +68,13 @@ export function Dialogs(props: InboxProps) {
 
     useEffect(() => {
         if (userChannels?.channelsByUser) {
-            //Direct channel Memebers
+            //Direct channel
             let userDirectChannels: any =
                 userChannels?.channelsByUser
                     ?.filter((i: any) => i.type == 'DIRECT')
-                    ?.filter((c: any) => c.members.some((u: any) => u.user.__typename == 'UserAccount')) ?? [];
+                    ?.filter((c: any) =>
+                        c.members.some((u: any) => u?.user?.id != auth?.id && u.user.__typename == 'UserAccount'),
+                    ) ?? [];
 
             if (userDirectChannels?.length > 0) setUserDirectChannel(userDirectChannels);
         }
@@ -93,49 +96,41 @@ export function Dialogs(props: InboxProps) {
         }
     }, []);
 
-    //let cuc = userChannels?.channelsByUser?.filter((i:any)=>i.type=='DIRECT')?.map((k:any) => k?.members?.filter((e:any) => e?.user?.id != currentUser?.id))??[];
-    let cuc = userDirectChannel?.map((k: any) => k?.members?.filter((e: any) => e?.user?.id != currentUser?.id)) ?? [];
-    cuc = cuc.filter((e: any) => e.length);
     return (
         <Box p={2}>
-            {/* {!userChannels?.channelsByUser?.filter((i:any)=>i.type=='DIRECT')?.length || cuc && cuc.length == 0 ? ( */}
-            {!userDirectChannel || userDirectChannel?.length == 0 || (cuc && cuc.length == 0) ? (
-                <Box p={5}>
-                    <Heading>Chat</Heading>
-                    <Input
-                        height={50}
-                        mt={3}
-                        placeholder="Search"
-                        borderRadius={50}
-                        borderColor={'gray.200'}
-                        borderWidth={2}
+            <FlatList
+                data={userDirectChannel?.length > 0 ? userDirectChannel : []}
+                onRefresh={getChannelsRefetch}
+                refreshing={userChannelsLoading}
+                contentContainerStyle={{ minHeight: '100%' }}
+                ItemSeparatorComponent={() => <Box height="0.5" backgroundColor="gray.200" />}
+                renderItem={({ item: channel }) => (
+                    <DialogsListItem
+                        onOpen={handleSelectChannel}
+                        currentUser={auth}
+                        channel={channel}
+                        selectedChannelId={params?.channelId}
                     />
-                    <Center mt={6}>
-                        <Icon as={Ionicons} name="chatbubbles" size={'xl'} />
-                        <Text>You don't have any messages yet!</Text>
-                    </Center>
-                </Box>
-            ) : (
-                <>
-                    <FlatList
-                        // data={userChannels?.channelsByUser?.filter((i:any)=>i.type=='DIRECT')??[]}
-                        data={userDirectChannel?.length > 0 ? userDirectChannel : []}
-                        onRefresh={getChannelsRefetch}
-                        refreshing={userChannelsLoading}
-                        contentContainerStyle={{ minHeight: '100%' }}
-                        ItemSeparatorComponent={() => <Box height="0.5" backgroundColor="gray.200" />}
-                        renderItem={({ item: channel }) => (
-                            <DialogsListItem
-                                users={users?.getUsers}
-                                onOpen={handleSelectChannel}
-                                currentUser={currentUser}
-                                channel={channel}
-                                selectedChannelId={params?.channelId}
-                            />
-                        )}
-                    />
-                </>
-            )}
+                )}
+                ListEmptyComponent={() => (
+                    <Box p={5}>
+                        <Heading>Chat</Heading>
+                        <Input
+                            height={50}
+                            mt={3}
+                            placeholder="Search"
+                            borderRadius={50}
+                            borderColor={'gray.200'}
+                            borderWidth={2}
+                        />
+                        <Center mt={6}>
+                            <Icon as={Ionicons} name="chatbubbles" size={'xl'} />
+                            <Text>You don't have any messages yet!</Text>
+                        </Center>
+                    </Box>
+                )}
+                keyExtractor={(item, index) => 'key' + index}
+            />
         </Box>
     );
-}
+};