@messenger-box/chakra-ui-inbox 0.0.1-alpha.168

package/src/components/inbox/MessageItem.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { format } from 'date-fns';
+import { BsFlag } from '@react-icons/all-files/bs/BsFlag';
+import { Avatar, Box, Flex, Icon, Text } from '@chakra-ui/react';
+
+export function MessageItem({ message }: { message: any }) {
+    
+}
+
+MessageItem.Plain = function PlainMessageItem({ message, index }) {
+    return (
+        <Flex w="full" key={`msgList_${index}`} justifyContent={'center'} mb="7">
+            <Text fontSize="14px" color="gray.600" fontWeight={'bold'}>
+                {message}
+            </Text>
+        </Flex>
+    );
+};
+
+MessageItem.Dialog = function DialogMessageItem({ message, currentUser, index, onOpen }) {
+    return (
+        <Flex w="full" key={`msgList_${index}`} justifyContent={'flex-start'} mb="7">
+            <Flex flexGrow={1}>
+                <Avatar
+                    width="60px"
+                    height="60px"
+                    backgroundColor="grey"
+                    borderRadius="50%"
+                    src={message?.imageUrl ? message?.imageUrl : ''}
+                    marginRight="15px"
+                    onClick={onOpen}
+                ></Avatar>
+                <Box flexGrow={1}>
+                    <Flex flexGrow={1} mt="5px">
+                        <Text fontSize="14px" color="gray.600" fontWeight={'bold'}>
+                            {message?.author?.familyName && message?.author?.givenName
+                                ? message?.author?.givenName + ' ' + message?.author?.familyName
+                                : message?.author?.username}
+                        </Text>
+                        <Text fontSize="14px" color="gray.500" ml="10px">
+                            {format(new Date(message?.createdAt), 'MMM dd, yyyy hh:mm aaa')}
+                        </Text>
+                    </Flex>
+                    <Text fontSize="14px" mt="5px" color="gray.600" whiteSpace={'pre-line'}>
+                        {message?.message}
+                    </Text>
+                </Box>
+            </Flex>
+            {currentUser?.id !== message?.author?.id && (
+                <Box ml="8px">
+                    <Icon as={BsFlag} color="gray.600" width={'24px'} height={'24px'} />
+                </Box>
+            )}
+        </Flex>
+    );
+};

package/src/compute.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { IPreDefineAccountPermissions } from '@adminide-stack/core';
+import { IMenuPosition, IRouteData } from '@common-stack/client-react';
+import {
+    getFilteredRoutes,
+    IPageStore,
+} from '@adminide-stack/core';
+import { AiOutlineInbox } from '@react-icons/all-files/ai/AiOutlineInbox';
+import { Inbox } from './container';
+
+export const messengerPageStore: IPageStore[] | { [key: string]: any } = [
+    {
+        exact: false,
+        icon: <AiOutlineInbox/>,
+        key: 'inbox',
+        component: Inbox,
+        tab: 'Chat App',
+        position: IMenuPosition.MIDDLE,
+        authority: [IPreDefineAccountPermissions.secureUser],
+        name: 'Inbox',
+        path: '//inbox/:id?',
+        // path: '/o/:orgName/inbox',
+    },
+];
+
+// get only selected Routes to work
+const selectedRoutes = [
+    'inbox',
+];
+
+const filteredRoutes: IRouteData[] = getFilteredRoutes(messengerPageStore, selectedRoutes);
+
+export { filteredRoutes };

package/src/constants/index.ts

@@ -0,0 +1,4 @@
+export const logoURL = 'https://cdmbase.s3.ca-central-1.amazonaws.com/favicon-new-128.svg';
+// export default {
+//     logoURL: 'https://cdmbase.s3.ca-central-1.amazonaws.com/favicon-new-128.svg',
+// };

package/src/container/Inbox.tsx

@@ -0,0 +1,283 @@
+import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';
+import { userSelector } from '@adminide-stack/user-auth0-client';
+import { Box, Container, Spinner, useMenuState } from '@chakra-ui/react';
+import {
+    useEditMessageMutation,
+    useGetAllChannelQuery,
+    useGetAllUsersQuery,
+    useGetChannelsByUserQuery,
+    useGetMessagesQuery,
+    useSendMessagesMutation,
+} from '@messenger-box/platform-client';
+// import { useSendMessagesMutation } from '@messenger-box/platform-client';
+import { push } from 'connected-react-router';
+import React, { useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { LeftSidebar, MessageInput, Messages } from '../components/InboxMessage';
+import { useMsgUploadFiles } from '../hooks/upload-msg-files';
+
+const MESSAGES_PER_PAGE = 10;
+
+const Inbox = () => {
+    const path: any = useParams();
+
+    const { id: channelId } = path || {};
+    const dispatch = useDispatch();
+    const [count, setCount] = useState(0);
+    const [channelToTop, setChannelToTop] = useState(0);
+    // channels
+    const {
+        data: userChannels,
+        loading: userChannelsLoading,
+        refetch: getChannelsRefetch,
+    } = useGetChannelsByUserQuery();
+    const { data: allChannels, loading: allChannelsLoading } = useGetAllChannelQuery();
+    const [totalCount, setTotalCount] = useState(0);
+    const messageListRef = useRef(null);
+    const { startUploads } = useMsgUploadFiles();
+    const [editMessage, {}] = useEditMessageMutation({ });
+
+    useEffect(() => {
+        const footerElement: any = document.querySelector('#nav-footer');
+        if (footerElement) {
+            footerElement.style.display = 'none';
+        }
+        const nkqmc7: any = document.querySelector('.css-nkqmc7'); // temp, check paddingBottom needed
+        if (nkqmc7) {
+            nkqmc7.style.paddingBottom = '0px';
+            nkqmc7.style.minHeight = '0px';
+        }
+
+        return () => {
+            footerElement.style.display = 'block';
+        };
+    }, []);
+
+    const {
+        data,
+        loading: messageLoading,
+        error,
+        refetch,
+    } = useGetMessagesQuery({
+        variables: {
+            channelId: channelId?.toString(),
+            // skip: count,
+            limit: MESSAGES_PER_PAGE,
+        },
+        skip: !channelId,
+        fetchPolicy: 'network-only',
+    });
+
+    const [sendMsg, {}] = useSendMessagesMutation({
+        context: {},
+    });
+
+    const [currentUser, setCurrentUser] = useState<any>(null);
+    const [channelMessages, setChannelMessages] = useState([]);
+
+    const [updateMsg, setUpdateMsg] = useState(true);
+    const currentUserAuth0Id = useSelector((state: any) => state.user.auth0UserId);
+    const auth = useSelector(userSelector);
+
+    const usersRes = useGetAllUsersQuery();
+
+    useEffect(() => {
+        setTimeout(() => {
+            dispatch({
+                type: CHANGE_SETTINGS_ACTION,
+                payload: {
+                    footerRender: false,
+                },
+            } as any);
+        }, 0);
+        return () => {
+            console.log('unmounted');
+            dispatch({
+                type: CHANGE_SETTINGS_ACTION,
+                payload: {
+                    footerRender: true,
+                },
+            } as any);
+        };
+    }, []);
+
+    useEffect(() => {
+        if (updateMsg) {
+            refetch({ skip: channelMessages.length });
+        }
+    }, [updateMsg]);
+
+    useEffect(() => {
+        if (data?.messages?.data && updateMsg) {
+            setChannelMessages([...data.messages.data.reverse(), ...channelMessages]);
+            setTotalCount(data?.messages?.totalCount);
+            setUpdateMsg(false);
+        }
+    }, [data]);
+
+    useEffect(() => {
+        if (!usersRes.loading && usersRes.data) {
+            setCurrentUser(usersRes.data?.getUsers?.find((i) => i.alias[0] === currentUserAuth0Id));
+        }
+    }, [usersRes.loading, usersRes.data]);
+
+    const handleSelectChannel = (cId: any) => {
+        setChannelMessages([]);
+        dispatch(push(`/inbox/${cId}`));
+        setUpdateMsg(true);
+    };
+
+    const onFetchMore = () => {
+        if (totalCount > channelMessages.length) {
+            setUpdateMsg(true);
+        }
+    };
+
+    const onMessagesScroll = (e) => {
+        if (messageListRef.current) {
+            const { scrollTop, scrollHeight, clientHeight } = messageListRef.current;
+            console.log(scrollTop);
+            console.log(scrollHeight);
+            console.log(clientHeight);
+            if (clientHeight - scrollTop > scrollHeight - 50 && !messageLoading) {
+                onFetchMore();
+            }
+        }
+    };
+
+    const handleSend = async (message: string, files?: File[]) => {
+        if (message && channelId) {
+            const { data } = await sendMsg({
+                variables: {
+                    channelId,
+                    content: message,
+                    // files: [], // files: uploadedFiles.map(i => i.data.id)
+                },
+                update: (cache, { data, errors }) => {
+                    if (!data || errors) {
+                        return;
+                    }
+                    setChannelMessages([...channelMessages, { ...data?.sendMessage }]);
+                    setTotalCount(channelMessages.length + 1);
+                    setChannelToTop(channelToTop + 1);
+                },
+            });
+
+            if(files?.length) {
+                const uploadedFiles = await startUploads({
+                    files,
+                    refName: 'postId',
+                    ref: data.sendMessage.id,
+                });
+
+                await editMessage({
+                    variables: {
+                        channelId,
+                        content: message,
+                        messageId: data.sendMessage.id,
+                        files: uploadedFiles.map(i => i.data.id),
+                    }
+                })
+            }
+        }
+    };
+
+    const clearMessages = () => {
+        setChannelMessages([]);
+        setTotalCount(0);
+    };
+
+    return (
+        <Container
+            maxW="full"
+            h={'calc(100vh - 82px)'}
+            p="0"
+            borderTopWidth="1px"
+            borderTopColor="gray.300"
+            display="flex"
+        >
+            <Box
+                top="82px"
+                w={{ base: '100%', md: '320px', lg: '420px' }}
+                h={{ base: 'calc(100vh - 100px)', md: 'calc(100vh - 82px)' }}
+                display="flex"
+                flexDirection="row"
+            >
+                <LeftSidebar
+                    currentUser={currentUser}
+                    allChannels={allChannels}
+                    allChannelsLoading={allChannelsLoading}
+                    userChannels={userChannels}
+                    userChannelsLoading={userChannelsLoading}
+                    users={usersRes?.data?.getUsers}
+                    handleSelectChannel={handleSelectChannel}
+                    clearMessages={clearMessages}
+                    selectedChannelId={channelId}
+                    channelToTop={channelToTop}
+                    getChannelsRefetch={getChannelsRefetch}
+                />
+            </Box>
+            <Box
+                d="flex"
+                flexDirection={'column'}
+                w={{ base: '100%', md: 'calc(100% - 320px)', lg: 'calc(100% - 420px)' }}
+                h={'100%'}
+            >
+                {messageLoading && (
+                    <Box
+                        d="flex"
+                        flexDirection="column"
+                        w="100%"
+                        flexGrow={1}
+                        flexBasis={0}
+                        justifyContent={'center'}
+                        alignItems="center"
+                        padding="10px"
+                    >
+                        <Spinner thickness="4px" speed="0.65s" emptyColor="gray.200" color="blue.500" size="xl" />
+                    </Box>
+                )}
+                {channelId && (
+                    <React.Fragment>
+                        <Box
+                            ref={messageListRef}
+                            d="flex"
+                            flexDirection="column-reverse"
+                            flexGrow={1}
+                            flexShrink={1}
+                            overflowY={'auto'}
+                            onScroll={onMessagesScroll}
+                            p={4}
+                            px={{ base: 0, md: '80px', lg: '150px' }}
+                        >
+                            <Messages
+                                channelId={channelId}
+                                currentUser={currentUser}
+                                channelMessages={channelMessages}
+                                totalCount={totalCount}
+                            />
+                        </Box>
+                        <MessageInput channelId={channelId} handleSend={handleSend} />
+                    </React.Fragment>
+                )}
+            </Box>
+        </Container>
+    );
+};
+
+export default Inbox;
+
+// const VerticalSeparator = ({ loc }) => {
+//     return (
+//         <Center pos="absolute" w="full" h="full" x="0" y="0" zIndex="-1">
+//             <Flex w="full" h="80%" justifyContent={loc === 'right' ? 'flex-end' : 'flex-start'}>
+//                 <Box
+//                     w="1px"
+//                     h="full"
+//                     bg="linear-gradient(0deg, rgba(224, 225, 226, 0) 0%, #E0E1E2 49.52%, rgba(224, 225, 226, 0) 100%)"
+//                 ></Box>
+//             </Flex>
+//         </Center>
+//     );
+// };

package/src/container/index.ts

@@ -0,0 +1,3 @@
+import Inbox from './Inbox';
+
+export { Inbox };

package/src/hooks/upload-file.tsx

@@ -0,0 +1,92 @@
+import { IFileInfo } from '@messenger-box/core';
+import { imageSize } from '@container-stack/file-info-client';
+import axios from 'axios';
+import { ApolloError } from '@apollo/client';
+import { useCallback } from 'react';
+import { GraphQLError } from 'graphql';
+
+export interface IMutationOptions {
+    name: string;
+    mutation: any;
+}
+
+export interface IUseUploadFileOptions {
+    createUploadLink: IMutationOptions;
+    saveUploadedFile: IMutationOptions;
+}
+
+export interface IStartUploadOptions {
+    file: File;
+    ref: string;
+    refName: string;
+}
+
+export interface IStartUploadResponse {
+    data?: Omit<IFileInfo, 'createdAt' | 'updatedAt'>;
+    error: GraphQLError;
+}
+
+export interface IUseUploadFileResponse {
+    startUpload: (options: IStartUploadOptions) => Promise<IStartUploadResponse>;
+    loading: boolean;
+    error: ApolloError;
+}
+
+function isFileImage(file: File): boolean {
+    return file && file.type?.split('/')[0] === 'image';
+}
+
+export const useUploadFile = (options: IUseUploadFileOptions): IUseUploadFileResponse => {
+    const { createUploadLink: createLink, saveUploadedFile } = options;
+    const [createUploadLink, { loading: linkLoading, error: linkError }] = createLink.mutation();
+    const [attachFile, { loading: fileSaving, error: fileSaveError }] = saveUploadedFile.mutation();
+
+    const startUpload = useCallback(async (options: IStartUploadOptions): Promise<IStartUploadResponse> => {
+        try {
+            const { file, ref, refName } = options;
+            const { data: link, errors: linkErrors } = await createUploadLink({
+                variables: {
+                    filename: file.name,
+                    [refName]: ref,
+                },
+            });
+            if (linkErrors) {
+                return { error: linkErrors[0] };
+            }
+            const { width, height } = isFileImage
+                ? await imageSize(await file.arrayBuffer())
+                : { width: null, height: null };
+            const url = link[createLink.name];
+            const { status } = await axios.put(url, file);
+            if (status !== 200) {
+                return;
+            }
+            const { data: attachedFile, errors: attachFileErrors } = await attachFile({
+                variables: {
+                    [refName]: ref,
+                    file: {
+                        name: file.name,
+                        size: file.size,
+                        mimeType: file.type,
+                        url,
+                        width,
+                        height,
+                    },
+                },
+            });
+
+            return {
+                data: attachedFile[saveUploadedFile.name],
+                error: attachFileErrors ? attachFileErrors[0] : null,
+            };
+        } catch (e) {
+            console.error(e);
+        }
+    }, []);
+
+    return {
+        startUpload,
+        loading: linkLoading || fileSaving,
+        error: linkError || fileSaveError,
+    };
+};

package/src/hooks/upload-filex.tsx

@@ -0,0 +1,22 @@
+import { IStartUploadResponse, IUseUploadFileOptions, useUploadFile } from "./upload-file";
+
+export interface IStartUploadsOptions {
+    files: File[];
+    ref: string;
+    refName: string;
+}
+
+export interface IUseUploadFilesHookResponse extends Omit<ReturnType<typeof useUploadFile>, 'startUpload'> {
+    startUploads: (options: IStartUploadsOptions) => Promise<IStartUploadResponse[]>;
+}
+
+export const useUploadFiles = (options: IUseUploadFileOptions): IUseUploadFilesHookResponse => {
+    const { startUpload: startUploadSingle, ...rest } = useUploadFile(options);
+    const startUploads = async ({ files, ref, refName }: IStartUploadsOptions): Promise<IStartUploadResponse[]> =>
+        Promise.all(files.map((file) => startUploadSingle({ file, ref, refName })));
+
+    return {
+        ...rest,
+        startUploads,
+    };
+};

package/src/hooks/upload-msg-files.tsx

@@ -0,0 +1,14 @@
+import { useAttachUploadedFileToMessageMutation, useCreateMessageFileUploadLinkMutation } from '@messenger-box/core';
+import { useUploadFiles } from './upload-filex';
+
+export const useMsgUploadFiles = (): ReturnType<typeof useUploadFiles> =>
+    useUploadFiles({
+        createUploadLink: {
+            name: 'createMessageFileUploadLink',
+            mutation: useCreateMessageFileUploadLinkMutation,
+        },
+        saveUploadedFile: {
+            name: 'attachUploadedFileToMessage',
+            mutation: useAttachUploadedFileToMessageMutation,
+        },
+    });

package/src/index.ts

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

package/src/module.tsx

@@ -0,0 +1,9 @@
+import { Feature } from '@common-stack/client-react';
+import { schema, typePolicies, dataIdFromObject }  from '@messenger-box/platform-client';
+import { filteredRoutes } from './compute';
+
+export default new Feature({
+    routeConfig: filteredRoutes,
+    dataIdFromObject,
+    clientStateParams: { typeDefs: schema, typePolicies },
+});

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "rootDir": "./src",
+    "outDir": "lib",
+    "declarationDir": "lib",
+    "declaration": true,
+    "declarationMap": true
+  },
+  "exclude": [
+    "../../../node_modules",
+    "node_modules",
+    "lib",
+    "dist",
+    "webpack.config.js",
+    "rollup.config.js"
+  ],
+  "include": [
+    "src",
+    "./typings/*.d.ts"
+  ]
+}

package/webpack.config.js

@@ -0,0 +1,97 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+const nodeExternals = require('webpack-node-externals');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const webpack = require('webpack');
+const path = require('path');
+
+const webpackOpts = {
+    mode: 'development',
+    entry: {
+        index: './src/index.ts',
+    },
+    target: 'node',
+    output: {
+        path: path.join(__dirname, 'lib'),
+        filename: '[name].js',
+        libraryTarget: 'commonjs2',
+    },
+    resolve: {
+        extensions: [
+            '.js',
+            '.jsx',
+            '.ts',
+            '.tsx',
+            '.graphql',
+            '.graphqls',
+            '.gql',
+            '.native.tsx',
+            '.native.ts',
+            '.json',
+        ],
+    },
+    plugins: [
+        new webpack.LoaderOptionsPlugin({
+            options: {
+                test: /\.tsx?$/,
+                ts: {
+                    compiler: 'typescript',
+                    configFile: 'tsconfig.json',
+                },
+                tslint: {
+                    emitErrors: true,
+                    failOnHint: true,
+                },
+            },
+        }),
+    ],
+    devtool: 'source-map',
+    module: {
+        rules: [
+            {
+                test: /\.(tsx)?$/,
+                loaders: 'ts-loader',
+                options: {
+                    compilerOptions: {
+                        outDir: path.join(),
+                    },
+                },
+            },
+            {
+                test: /\.mjs$/,
+                include: /node_modules/,
+                type: 'javascript/auto',
+            },
+            {
+                test: /\.(gql)$/,
+                exclude: /node_modules/,
+                use: ['graphql-tag/loader'],
+            },
+            {
+                test: /\.graphql?/,
+                exclude: /node_modules/,
+                use: 'raw-loader',
+            },
+            {
+                test: /\.(png|jpg|gif|webp)$/i,
+                use: {
+                    loader: 'url-loader',
+                    options: {
+                        limit: 8192,
+                        name: 'static/media/[name].[hash:8].[ext]',
+                    },
+                },
+            },
+            {
+                test: /\.svg$/,
+                use: ['@svgr/webpack'],
+            },
+            {
+                test: /\.json$/,
+                loader: 'json-loader',
+            },
+        ],
+    },
+    externals: [nodeExternals({ modulesDir: '../../../node_modules' }), nodeExternals()],
+};
+
+module.exports = webpackOpts;