@messenger-box/platform-mobile 10.0.3-alpha.18 → 10.0.3-alpha.180

package/src/screens/inbox/components/ServiceDialogsListItem.tsx

@@ -1,287 +0,0 @@
-import React, { useMemo } from 'react';
-import {
-    Text,
-    Image,
-    Pressable,
-    HStack,
-    Box,
-    AvatarGroup,
-    Avatar,
-    AvatarFallbackText,
-    AvatarImage,
-    AvatarBadge,
-    View,
-} from '@admin-layout/gluestack-ui-mobile';
-import { format, isToday, isYesterday } from 'date-fns';
-import { useFocusEffect } from '@react-navigation/native';
-import { IChannel, IUserAccount } from 'common';
-import {
-    useOnThreadCreatedUpdatedSubscription,
-    useOnThreadChatMessageAddedSubscription,
-    useThreadMessagesQuery,
-    OnThreadCreatedUpdatedDocument as THREAD_CHAT_ADDED,
-    OnThreadChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
-} from 'common/graphql';
-import { startCase } from 'lodash-es';
-import colors from 'tailwindcss/colors';
-
-const createdAtText = (value: string) => {
-    if (!value) return '';
-    let date = new Date(value);
-    if (isToday(date)) return 'Today';
-    if (isYesterday(date)) return 'Yesterday';
-    return format(new Date(value), 'MMM dd, yyyy');
-};
-
-export interface IDialogListChannel extends IChannel {
-    users: IUserAccount[];
-}
-
-export interface IDialogListItemProps {
-    currentUser?: any;
-    users?: any;
-    selectedChannelId?: any;
-    channel?: any;
-    onOpen: (id: any, title: any, postParentId?: any) => void;
-    refreshing: boolean;
-    role: any;
-}
-
-/**
- * TODO:
- * - Get Reservation info: reservation date, status
- * - Add ability to get property information: name, logo
- */
-export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = function DialogsListItem({
-    currentUser,
-    // users,
-    selectedChannelId,
-    channel,
-    onOpen,
-    refreshing,
-    role,
-}) {
-    const [servicePostParentId, setServicePostParentId] = React.useState(null);
-    const {
-        data: threadMessages,
-        loading: threadMessageLoading,
-        error,
-        refetch: refetchThreadMessages,
-        subscribeToMore,
-    } = useThreadMessagesQuery({
-        variables: {
-            channelId: channel?.id?.toString(),
-            role,
-            limit: 2,
-        },
-        fetchPolicy: 'cache-and-network',
-    });
-
-    useFocusEffect(
-        React.useCallback(() => {
-            // Do something when the screen is focused
-            //  refetchMessages({ channelId: channel?.id?.toString(), limit: 25 });
-            refetchThreadMessages({ channelId: channel?.id?.toString(), role, limit: 2 });
-            return () => {
-                // Do something when the screen is unfocused
-                // Useful for cleanup functions
-            };
-        }, [refreshing]),
-    );
-
-    const lastMessage = useMemo(() => {
-        if (!threadMessages?.threadMessages?.data?.length) {
-            return null;
-        }
-        const { data }: any = threadMessages.threadMessages;
-        const replies =
-            data
-                ?.map((t: any) => t?.replies)
-                ?.flat(1)
-                ?.filter((p: any) => p?.message !== '') ?? [];
-        if (replies?.length) {
-            return replies[0];
-            // return replies[replies.length - 1];
-        } else {
-            const post =
-                data?.find((t: any) => {
-                    return t?.post?.message !== '';
-                }) ??
-                data?.find((t: any) => {
-                    return t?.post;
-                }) ??
-                null;
-            return post ? post?.post : null;
-        }
-    }, [threadMessages]);
-
-    React.useEffect(() => {
-        if (lastMessage) {
-            const sParentId = lastMessage?.parentId ? lastMessage?.parentId : lastMessage?.id;
-            setServicePostParentId(sParentId);
-        }
-    }, [lastMessage]);
-
-    const creatorAndMembersId = React.useMemo(() => {
-        if (!channel?.members) return null;
-        const membersIds: any =
-            channel?.members
-                ?.filter((m: any) => m !== null && m?.user?.id !== currentUser?.id)
-                ?.map((mu: any) => mu?.user?.id) ?? [];
-        const creatorId: any = channel?.creator?.id;
-        const mergedIds: any = [].concat(membersIds, creatorId) ?? [];
-        return mergedIds?.filter((m: any, pos: any) => mergedIds?.indexOf(m) === pos) ?? [];
-    }, [channel]);
-
-    const postParentId = React.useMemo(() => {
-        if (!creatorAndMembersId?.length) return null;
-
-        return creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
-            ? null
-            : lastMessage?.parentId
-            ? lastMessage?.parentId
-            : lastMessage?.id ?? 0;
-    }, [creatorAndMembersId, lastMessage]);
-
-    // const { data: threadCreatedUpdated } = useOnThreadCreatedUpdatedSubscription({
-    //     variables: {
-    //         channelId: channel?.id?.toString(),
-    //         postParentId:
-    //             postParentId == null
-    //                 ? null
-    //                 : lastMessage?.parentId
-    //                 ? lastMessage?.parentId ?? null
-    //                 : lastMessage?.id ?? null,
-    //     },
-    // });
-
-    // React.useEffect(() => {
-    //     if (threadCreatedUpdated?.threadCreatedUpdated?.data) {
-    //         refetchThreadMessages({ channelId: channel?.id?.toString(), role, limit: 2 });
-    //     }
-    // }, [threadCreatedUpdated]);
-
-    return (
-        <Pressable
-            onPress={() => channel?.id !== selectedChannelId && onOpen(channel?.id, channel?.title, postParentId)}
-            className="flex-1  rounded-md border-gray-200 dark:border-gray-600 dark:bg-gray-700"
-            style={{ borderBottomWidth: 1, borderColor: '#e5e7eb', marginVertical: 0 }}
-        >
-            <HStack space={'md'} className="flex-1 w-[100%] px-2 py-3  items-center">
-                <Box className="flex-[0.1] items-start pl-3">
-                    <Avatar
-                        key={'service-channels-key-' + channel?.id}
-                        size={'sm'}
-                        className="bg-transparent top-0 right-0 z-[1]"
-                    >
-                        <AvatarFallbackText> {startCase(channel?.creator?.username?.charAt(0))}</AvatarFallbackText>
-                        <AvatarImage
-                            alt="user image"
-                            style={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
-                            source={{
-                                uri: channel?.creator?.picture,
-                            }}
-                        />
-                    </Avatar>
-                </Box>
-                <Box className="flex-1">
-                    <ServiceChannelWithLastMessage
-                        channel={channel}
-                        lastMessage={lastMessage}
-                        subscribeToNewMessages={() =>
-                            subscribeToMore({
-                                document: THREAD_CHAT_ADDED,
-                                variables: {
-                                    channelId: channel?.id?.toString(),
-                                    postParentId: postParentId ? servicePostParentId : null,
-                                },
-                                updateQuery: (prev, { subscriptionData }: any) => {
-                                    if (!subscriptionData.data) return prev;
-
-                                    const newPostThreadData: any = subscriptionData?.data?.threadCreatedUpdated?.data;
-                                    const newMessage: any = subscriptionData?.data?.threadCreatedUpdated?.lastMessage;
-                                    const data =
-                                        prev?.threadMessages?.data?.map((t: any) =>
-                                            t.id === newPostThreadData?.id
-                                                ? {
-                                                      ...t,
-                                                      replies: [...t?.replies, newMessage],
-                                                      replyCount: newPostThreadData?.replyCount,
-                                                      lastReplyAt: newPostThreadData?.lastReplyAt,
-                                                      updatedAt: newPostThreadData?.updatedAt,
-                                                  }
-                                                : t,
-                                        ) ?? [];
-
-                                    return Object.assign({}, prev, {
-                                        threadMessages: {
-                                            ...prev?.threadMessages,
-                                            totalCount: newPostThreadData?.totalCount ?? 0,
-                                            data: data?.length > 0 ? data : [newPostThreadData],
-                                            //  totalCount: prev?.threadMessages?.totalCount + 1,
-                                            //data: data,
-                                        },
-                                    });
-                                },
-                            })
-                        }
-                    />
-                    {/* <Text
-                        flex={1}
-                        color="gray.600"
-                        p={0}
-                        m={0}
-                        w={'100%'}
-                        justifyContent={''}
-                        fontSize="lg"
-                        fontWeight="semibold"
-                    >
-                        {title}
-                    </Text> */}
-                    {/* <Text flex={0.1} color="gray.600">
-                        {lastMessage?.message ?? ''}
-                    </Text> */}
-                </Box>
-                {/* <Text flex={0.2} color="gray.500">
-                    {lastMessage ? createdAtText(lastMessage?.createdAt) : ''}
-                </Text> */}
-            </HStack>
-        </Pressable>
-    );
-};
-
-const ServiceChannelWithLastMessage = React.memo(({ channel, lastMessage, subscribeToNewMessages }: any) => {
-    React.useEffect(() => subscribeToNewMessages(), []);
-    const count = 20;
-    const title = channel?.title.slice(0, count) + (channel?.title.length > count ? '...' : '');
-    return (
-        <HStack space={'sm'} className="flex-1 justify-between">
-            <Box className="flex-[0.8]">
-                <Text color={colors.gray[600]} className="text-base text-wrap flex-wrap font-semibold">
-                    {title}
-                </Text>
-                <Text color={colors.gray[600]} numberOfLines={1}>
-                    {/* {creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
-                    ? lastMessageCreatorAndMembers?.message ?? ''
-                    : lastMessage?.message ?? ''} */}
-                    {lastMessage?.message ?? ''}
-                </Text>
-            </Box>
-
-            <Box className="flex-[0.2]">
-                {/* {creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id) ? (
-                <Text color="gray.500">
-                    {lastMessageCreatorAndMembers
-                        ? createdAtText(lastMessageCreatorAndMembers?.createdAt)
-                        : ''}
-                </Text>
-            ) : (
-                <Text color="gray.500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-            )} */}
-                <Text color={colors.gray[500]}>{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-            </Box>
-        </HStack>
-    );
-});
-
-export const ServiceDialogsListItem = React.memo(ServiceDialogsListItemComponent);

package/src/screens/inbox/components/SlackMessageContainer/ImageViewerModal.tsx

@@ -1,113 +0,0 @@
-import React, {useState} from 'react';
-import {Alert, Modal, StyleSheet, Text, Pressable, View,SafeAreaView,StatusBar} from 'react-native';
-
-const ImageViewerModal = ({children,isVisible=false,setVisible,modalContent=null}:any) => {
-  
-  return (
-      <Modal
-        animationType="slide"
-       // transparent={true}
-        visible={isVisible}
-        presentationStyle={'fullScreen'}
-        style={{flex:1}}
-        onRequestClose={() => {
-          setVisible(false);
-        }}>
-        <View style={styles.container}> 
-        <View style={styles.headerView}>
-          {/* <View><Text></Text></View>
-          <View><Text></Text></View> */}
-          <View style={{alignSelf:'flex-end',paddingRight:5}} > 
-            <Pressable
-              style={[styles.button, styles.buttonClose]}
-              onPress={() => setVisible(false)}>
-              <Text style={styles.headerTextStyle}>X</Text>
-            </Pressable></View>
-        </View>
-        <View style={styles.centeredView}>
-            {modalContent ? modalContent : children}
-        </View>
-        <View style={styles.footerView}>
-
-        </View>
-        </View>
-      </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  container:{
-   flex:1,
-  },
-  headerView:{
-   width:'100%',
-   alignItems: 'center',
-   justifyContent:'space-between',
-  // backgroundColor:'rgba(r, g, b, a)',
-   backgroundColor:'#000',
-   paddingTop:50,
-   paddingBottom:10,
-  },
-  centeredView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white',
-
-    borderRadius: 20,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  footerView:{
-   minHeight:100,
-   backgroundColor:'#000'
-  },
-  modalView: {
-    flex:1,
-    backgroundColor: 'white',
-    borderRadius: 20,
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  button: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2,
-  },
-  buttonOpen: {
-    backgroundColor: '#F194FF',
-  },
-  buttonClose: {
-    backgroundColor: 'transparent',
-  },
-  textStyle: {
-    color: 'white',
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  headerTextStyle:{
-    color: '#fff',
-    // fontWeight: 'bold',
-    textAlign: 'center',
-    fontSize:20,
-  },
-  modalText: {
-    marginBottom: 15,
-    textAlign: 'center',
-  },
-});
-
-export default ImageViewerModal;