@messenger-box/platform-mobile 0.0.1-alpha.190 → 0.0.1-alpha.197

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

@@ -1,8 +1,8 @@
-import { first } from 'lodash';
-import React, { useEffect, useMemo } from 'react';
-import { Text, Box, Image, Pressable, HStack, VStack } from 'native-base';
+import React, { useMemo } from 'react';
+import { Text, Image, Pressable, HStack, Box } from 'native-base';
 import { format, isToday, isYesterday } from 'date-fns';
-import { IChannel, IUserAccount, useGetMessagesQuery } from '@messenger-box/platform-client';
+
+import { IChannel, IUserAccount, useMessagesQuery, useUserAccountQuery } from '@messenger-box/platform-client';
 
 const createdAtText = (value: string) => {
     if (!value) return '';
@@ -17,10 +17,11 @@ export interface IDialogListChannel extends IChannel {
 }
 
 export interface IDialogListItemProps {
-    refreshKey?: number;
-    currentUserId: string;
-    channel: IDialogListChannel;
-    onOpen: (channel: IChannel, options?: any) => void;
+    currentUser?: any;
+    users?: any;
+    selectedChannelId?: any;
+    channel?: any;
+    onOpen: (id: any) => void;
 }
 
 /**
@@ -29,61 +30,79 @@ export interface IDialogListItemProps {
  * - Add ability to get property information: name, logo
  */
 export const DialogsListItem: React.FC<IDialogListItemProps> = function DialogsListItem({
-    refreshKey,
+    currentUser,
+    users,
+    selectedChannelId,
     channel,
-    currentUserId,
     onOpen,
 }) {
-    const message$ = useGetMessagesQuery({
-        fetchPolicy: 'network-only',
-        variables: { limit: 1, channelId: channel.id },
+    const { data: messagesQuery, loading: messageLoading } = useMessagesQuery({
+        variables: {
+            channelId: channel?.id?.toString(),
+            limit: 1,
+        },
+        fetchPolicy: 'cache-and-network',
     });
 
-    // Workaround for messages refresh: update latest messages view after list refresh
-    useEffect(() => {
-        message$.refetch();
-    }, [refreshKey]);
-
-    const users = useMemo(() => channel.users.filter(({ alias }) => !alias?.includes(currentUserId)), [currentUserId]);
-
-    const message = useMemo(() => first(message$.data?.messages.data), [message$.data?.messages]);
-    const title = useMemo(
-        () => users.map(({ givenName, familyName }) => `${givenName} ${familyName}`).join(','),
-        [users],
+    const chatUser = useMemo(
+        () =>
+            users?.find(({ id }) => {
+                const isNotCurrentUser = id !== currentUser?.id;
+                if (isNotCurrentUser) {
+                    return channel?.members?.find(({ user }: any) => user.id === id);
+                }
+                return isNotCurrentUser;
+            }),
+        [users, currentUser, channel],
     );
 
-    const text = message?.message;
-    const date = createdAtText(message?.createdAt);
+    const { data: userQuery } = useUserAccountQuery({
+        variables: {
+            userId: chatUser?.id,
+        },
+        skip: !chatUser?.id,
+    });
+
+    const lastMessage = useMemo(() => {
+        if (!messagesQuery?.messages?.data?.length) {
+            return null;
+        }
+        const { data } = messagesQuery.messages;
+        return data[data.length - 1];
+    }, [messagesQuery]);
 
-    const onOpenChannel = () => onOpen(channel, { title, users });
+    const channelType = useMemo(() => {
+        return channel?.type;
+    }, [channel]);
 
     return (
-        <Pressable onPress={onOpenChannel} borderWidth={'1'} borderRadius="md" borderColor={'gray.200'} shadow={'6'}>
-            <HStack m={3} space={2} alignItems="center">
+        <Pressable
+            onPress={() => channel?.id !== selectedChannelId && onOpen(channel?.id)}
+            borderWidth={'1'}
+            borderRadius={10}
+            borderColor={'gray.200'}
+            shadow={'6'}
+        >
+            <HStack m={3} space={2}>
                 <Image
                     alt={'image'}
                     width={16}
-                    borderRadius="full"
+                    borderRadius={10}
                     height={16}
-                    source={{ uri: 'https://picsum.photos/220' }}
+                    source={{ uri: userQuery?.getUserAccount?.picture || 'https://picsum.photos/220' }}
                 />
-                <VStack space={1}>
+                <Box width={'80%'}>
                     <HStack alignItems="center" justifyContent="space-between">
-                        {/* TODO: change to valid status */}
                         <Text fontSize="xs" color="red.500">
-                            Request withdrawal
+                            {channelType}
                         </Text>
-                        <Text color="gray.500">{date}</Text>
+                        <Text color="gray.500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
                     </HStack>
-                    {title !== '' ? (
-                        <Text color="gray.600" fontSize="lg" fontWeight="semibold">
-                            {title}
-                        </Text>
-                    ) : null}
-                    <Text color="gray.600">{text}</Text>
-                    {/* TODO: change to valid reservation date */}
-                    <Text>Sep 12-16, 2019. Private room fully furnis...</Text>
-                </VStack>
+                    <Text color="gray.600" fontSize="lg" fontWeight="semibold">
+                        {chatUser?.givenName + ' ' + chatUser?.familyName}
+                    </Text>
+                    <Text color="gray.600">{lastMessage?.message}</Text>
+                </Box>
             </HStack>
         </Pressable>
     );

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

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import { Image, HStack, Box } from 'native-base';
+
+interface FilesListProps {
+    files: any;
+    uploaded?: boolean;
+}
+
+export function FilesList({ files, uploaded = false }: FilesListProps) {
+    return (
+        <HStack space={2} mt={2}>
+            <FilesList.FilesView files={files} uploaded={uploaded} />
+        </HStack>
+    );
+}
+
+FilesList.FilesView = function MessageItemFiles({ files = [], uploaded }: { files: any[]; uploaded?: boolean }) {
+    if (!files.length) {
+        return null;
+    }
+
+    return (
+        <Box>
+            {files.map((file) => {
+                const url = useMemo(() => (uploaded ? file.url : URL.createObjectURL(file)), [file, uploaded]);
+                return (
+                    <Image
+                        alt={'image'}
+                        mr={2}
+                        height="16"
+                        width="16"
+                        source={{
+                            uri: url,
+                            scale: 0.2,
+                        }}
+                    />
+                );
+            })}
+        </Box>
+    );
+};

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

@@ -1,23 +1,29 @@
-import { TextField, View, Image, Pressable, HStack, VStack } from 'native-base';
+import { TextField, View, Image, Pressable, HStack, VStack, Toast } from 'native-base';
 import { FontAwesome } from '@expo/vector-icons';
 import * as ImagePicker from 'expo-image-picker';
-import React, { forwardRef, useImperativeHandle, useState } from 'react';
+import React, { forwardRef, useImperativeHandle, useState, useCallback } from 'react';
+import { FilesList } from './FilesList';
 
-export const MessageInput = forwardRef(function MessageInput({ onSend }: any, ref) {
-    const [text, setText] = useState('');
-    const [files, setFiles] = useState<string[]>([]);
+type MessageInputProps = {
+    channelId?: string;
+    handleSend: (message: string, files: any) => Promise<void>;
+};
 
-    const reset = () => {
-        setText('');
-        setFiles([]);
-    };
+export const MessageInput = forwardRef(function MessageInput({ handleSend: handleSendProp }: MessageInputProps) {
+    const [message, setMessage] = useState('');
+    const [sending, setSending] = useState(false);
+    const [files, setFiles] = useState<File[]>([]);
 
-    useImperativeHandle(ref, () => ({ reset, text, files }));
+    const handleSend = useCallback(() => {
+        setSending(true);
+        handleSendProp(message, files)
+            .then(() => {
+                setMessage('');
+                setFiles([]);
+            })
+            .finally(() => setSending(false));
+    }, [files, handleSendProp, message]);
 
-    const onSendMessage = () => {
-        onSend(text, files);
-    };
-    const onRemoveImage = (url: string) => setFiles((files) => files.filter((file) => file !== url));
     const onSelectImages = async () => {
         // No permissions request is necessary for launching the image library
         await ImagePicker.requestMediaLibraryPermissionsAsync();
@@ -38,23 +44,19 @@ export const MessageInput = forwardRef(function MessageInput({ onSend }: any, re
                 <TextField
                     placeholder="Message..."
                     borderColor="gray.400"
-                    value={text}
-                    onChange={(e) => setText(e.nativeEvent.text)}
+                    value={sending ? '' : message}
+                    onChange={(e) => setMessage(e.nativeEvent.text)}
                     fontSize={14}
                 />
             </View>
             {files.length ? (
                 <View mb={4} flexDirection="row">
-                    {files.map((file, index) => (
-                        <Pressable onPress={() => onRemoveImage(file)} key={index}>
-                            <Image alt={'image'} mr={2} height={10} width={10} source={{ uri: file }} />
-                        </Pressable>
-                    ))}
+                    <FilesList files={files} />
                 </View>
             ) : null}
             <HStack alignContent="center" justifyContent="space-between">
                 <FontAwesome onPress={onSelectImages} size={20} style={{ marginRight: 5 }} name="file-image-o" />
-                <FontAwesome onPress={onSendMessage} size={20} name="send" />
+                <FontAwesome onPress={handleSend} size={20} name="send" />
             </HStack>
         </VStack>
     );

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

@@ -1,62 +1,41 @@
-import React, { useMemo } from 'react';
-import { Text, Box, Image, HStack } from 'native-base';
-import { format, isToday, isYesterday } from 'date-fns';
-import { IFileInfo, IPost } from '@messenger-box/platform-client';
+import React from 'react';
+import { Box } from 'native-base';
+import { IPost, IPostTypeEnum } from '@messenger-box/platform-client';
+import { PlainMessage } from './PlainMessage';
+import { CommonMessage } from './CommonMessage';
+import { Slot } from '@common-stack/components-pro';
 
-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 function MessageItem({
+    message,
+    channelId,
+    currentUser,
+    totalCount,
+}: {
+    message: IPost;
+    channelId: number;
+    currentUser: any;
+    totalCount: number;
+}) {
+    if (typeof message === 'string') {
+        return <PlainMessage message={message} />;
+    }
 
-export function MessageItem({ message, userId }: { message: IPost; userId: string }) {
-    const isOwnMessage = useMemo(() => message.editedBy?.alias?.includes(userId) || false, [message.author, userId]);
-    const author = useMemo(
-        () => (message.author ? `${message.author?.givenName} ${message.author?.familyName}` : null),
-        [message.author],
-    );
+    const { type } = message;
 
-    return (
-        <HStack mb={4} alignItems="center">
-            {isOwnMessage ? <Box flexGrow={1} /> : null}
-            <Box borderRadius="md" backgroundColor="gray.200" paddingX={3} paddingY="1.5" flexGrow={3}>
-                <Box flexDirection="row" alignContent="flex-start" mb={1}>
-                    <Text flexGrow={1} fontWeight="semibold">
-                        {author}
-                    </Text>
-                    <Text fontSize="xs" color="gray.500">
-                        {createdAtText(message.createdAt)}
-                    </Text>
-                </Box>
-                <Text flexGrow={1}>{message.message}</Text>
-                <MessageItem.FilesView files={message.files?.data as IFileInfo[]} />
-            </Box>
-            {!isOwnMessage ? <Box flexGrow={1} /> : null}
-        </HStack>
-    );
-}
-
-MessageItem.FilesView = function MessageItemFiles({ files = [] }: { files: IFileInfo[] }) {
-    if (!files.length) {
-        return null;
+    if (!type || type === IPostTypeEnum.Simple) {
+        return <CommonMessage message={message} currentUser={currentUser} />;
     }
 
     return (
-        <HStack space={2} mt={2}>
-            {files.map((file) => (
-                <Image
-                    alt={'image'}
-                    mr={2}
-                    height="16"
-                    width="16"
-                    source={{
-                        uri: 'https://preview.keenthemes.com/metronic-v4/theme/assets/pages/media/profile/profile_user.jpg',
-                        scale: 0.2,
-                    }}
-                />
-            ))}
-        </HStack>
+        <Slot
+            name={(type as string)?.toLowerCase()}
+            fillProps={{
+                active: true,
+                message,
+                currentUser,
+            }}
+        >
+            {(item) => <Box>{item}</Box>}
+        </Slot>
     );
-};
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Flex, Text } from 'native-base';
+
+interface IPlainMessageProps {
+    message: string;
+}
+
+export const PlainMessage = ({ message }: IPlainMessageProps) => {
+    return (
+        <Flex w="full" justifyContent={'center'} mb="7">
+            <Text fontSize="14px" fontWeight={'bold'}>
+                {message}
+            </Text>
+        </Flex>
+    );
+};

package/src/screens/inbox/config/config.ts

@@ -0,0 +1,6 @@
+import { cleanEnv, num } from 'envalid';
+
+export const config = cleanEnv(process.env, {
+    MESSAGES_PER_PAGE: num({ devDefault: 20, default: 50 }),
+    FILES_PER_MESSAGE: num({ default: 10 }),
+});

package/src/screens/inbox/config/index.ts

@@ -0,0 +1 @@
+export { config } from './config';