@messenger-box/platform-browser 0.0.1-alpha.134 → 0.0.1-alpha.137

package/lib/temp/index.d.ts

@@ -0,0 +1,2 @@
+export * from './use-upload-file.hook';
+export * from './use-upload-files.hook';

package/lib/temp/use-upload-file.hook.d.ts

@@ -0,0 +1,26 @@
+import { IFileInfo } from '@messenger-box/core';
+import { ApolloError } from '@apollo/client';
+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;
+}
+export declare const useUploadFile: (options: IUseUploadFileOptions) => IUseUploadFileResponse;

package/lib/temp/use-upload-files.hook.d.ts

@@ -0,0 +1,10 @@
+import { IStartUploadResponse, IUseUploadFileOptions, useUploadFile } from './use-upload-file.hook';
+export interface IStartUploadsOptions {
+    files: File[];
+    ref: string;
+    refName: string;
+}
+export interface IUseUploadFilesHookResponse extends Omit<ReturnType<typeof useUploadFile>, 'startUpload'> {
+    startUploads: (options: IStartUploadsOptions) => Promise<IStartUploadResponse[]>;
+}
+export declare const useUploadFiles: (options: IUseUploadFileOptions) => IUseUploadFilesHookResponse;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@messenger-box/platform-browser",
-  "version": "0.0.1-alpha.134",
+  "version": "0.0.1-alpha.137",
   "description": "Sample core for higher packages to depend on",
   "license": "ISC",
   "author": "CDMBase LLC",
@@ -21,10 +21,11 @@
   "dependencies": {
     "@chakra-ui/icons": "^1.0.16",
     "@chakra-ui/react": "~1.6.12",
+    "@container-stack/file-info-client": "^0.0.26-96",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
-    "@messenger-box/core": "0.0.1-alpha.127",
-    "@messenger-box/platform-client": "0.0.1-alpha.134",
+    "@messenger-box/core": "0.0.1-alpha.137",
+    "@messenger-box/platform-client": "0.0.1-alpha.137",
     "bootstrap": "3.4.1",
     "css-vars-ponyfill": "2.4.5",
     "dynamic-virtualized-list": "github:mattermost/dynamic-virtualized-list#119db968c96643c7106d4d2c965f05b2e251bc83",
@@ -57,5 +58,5 @@
   "typescript": {
     "definition": "lib/index.d.ts"
   },
-  "gitHead": "c573ab335ea48becde0a1efe8ffd3edac7848e72"
+  "gitHead": "9cac9c1317e3081e9cc4efd54be348c988f581b5"
 }

package/src/components/messenger/index.tsx

@@ -1,38 +1,30 @@
-import React, {FC, useCallback, useEffect, useRef, useState} from 'react';
-import {Col, Row, Input, Divider} from 'antd';
-// import { MessagesList, ThreadMessagesList } from './messagesList';
-import {MessagesList} from './messagesList';
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { Col, Row, Input } from 'antd';
 import {
     useGetMessagesQuery,
     useSendMessagesMutation,
     useDeleteMessageMutation,
     useEditMessageMutation,
-    useUploadImgMutation, Exact,
 } from '@messenger-box/core';
-import {messagesData} from './mock';
-import {IMessageList} from './types/message';
 import {
-    BiDotsHorizontalRounded,
     HiOutlinePaperClip,
-    IoIosClose,
-    IoMdClose,
     MdOutlineEmojiEmotions,
 } from 'react-icons/all';
-import {styleSheet3} from './messagesList/style';
-import {useFela} from 'react-fela';
-import {Picker} from 'emoji-mart';
+import { useFela } from 'react-fela';
+import { Picker } from 'emoji-mart';
 import 'emoji-mart/css/emoji-mart.css';
-import Moment from 'moment';
-import {Button, Modal} from 'react-bootstrap';
+import { useUploadFiles } from '../../hooks';
+import { styleSheet3 } from './messagesList/style';
+import { MessagesList } from './messagesList';
 
 interface PropsTypes {
     channel: any;
     currentUsrId: string;
 }
 
-export const MessengerComponent: FC<PropsTypes> = ({channel, currentUsrId}) => {
+export const MessengerComponent: FC<PropsTypes> = ({ channel, currentUsrId }) => {
     document.getElementsByClassName('demo')[0].setAttribute('style', `{{overflow: 'hidden'}}`);
-    const {css} = useFela();
+    const { css } = useFela();
     const [enterValue, setEnterValue] = useState<string>('');
     const [showThread, setShowThread] = useState<boolean>(false);
     const [flag, setFlag] = useState<boolean>(false);
@@ -42,16 +34,17 @@ export const MessengerComponent: FC<PropsTypes> = ({channel, currentUsrId}) => {
     const [day, setDay] = useState<string>('Today');
     const [threadEmoji, setThreadEmoji] = useState(false);
     const [files, setFiles] = useState([])
+    const { startUploads } = useUploadFiles();
 
     // let token;
     // useEffect(() => {
     //     token = window.localStorage.getItem('access_token');
     // }, []);
-    const {data, loading, error, refetch} = useGetMessagesQuery({
+    const { data, loading, error, refetch } = useGetMessagesQuery({
         variables: {
             channelId: channel.id,
         },
-        fetchPolicy: "cache-first"
+        fetchPolicy: 'cache-first'
     });
     // useEffect(() => {
     //     if (isRefetch) {
@@ -71,8 +64,8 @@ export const MessengerComponent: FC<PropsTypes> = ({channel, currentUsrId}) => {
             setFiles([])
             cache.modify({
                 fields: {
-                    messages(existingMessages, {toReference}) {
-                        return {...existingMessages, data: toReference(mutationResult.data.sendMessage)}
+                    messages(existingMessages, { toReference }) {
+                        return { ...existingMessages, data: toReference(mutationResult.data.sendMessage) }
                     }
                 }
             })
@@ -80,20 +73,36 @@ export const MessengerComponent: FC<PropsTypes> = ({channel, currentUsrId}) => {
         // context: {headers: {Authorization: token}},
         // refetchQueries: ['GetMessages']
     });
-    const handleEnterButton = (e) => {
-        if (enterValue) {
-            sendMsg({
-                variables: {
-                    channelId: channel.id,
-                    content: enterValue,
-                    files: files
-                },
-            })
-            setEnterValue('');
-            scrollToBottom();
-            setFlag(true);
+
+    const handleEnterButton = useCallback(async (e) => {
+        if (!enterValue) {
+            return;
         }
-    };
+        const { data } = await sendMsg({
+            variables: {
+                channelId: channel.id,
+                content: enterValue,
+                files: []
+            },
+        });
+        const uploadedFiles = await startUploads({
+            files,
+            ref: data.sendMessage.id,
+            refName: 'postId'
+        });
+        await editMessage({
+            variables: {
+                channelId: channel.id,
+                messageId: data.sendMessage.id,
+                files: uploadedFiles.map(i => i.data.id),
+                content: enterValue
+            }
+        })
+        setEnterValue('');
+        scrollToBottom();
+        setFlag(true);
+    }, [channel, files, enterValue]);
+
     const [deleteMsg, {}] = useDeleteMessageMutation({
         // context: {headers: {Authorization: token}},
         // refetchQueries: ['GetMessages']
@@ -146,7 +155,7 @@ export const MessengerComponent: FC<PropsTypes> = ({channel, currentUsrId}) => {
     };
     const messagesEndRef = useRef(null);
     const scrollToBottom = () => {
-        messagesEndRef.current?.scrollIntoView({behavior: 'smooth'});
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     };
 
     const fileUploader = useRef(null);
@@ -157,18 +166,22 @@ export const MessengerComponent: FC<PropsTypes> = ({channel, currentUsrId}) => {
     const handleShowSideBar = () => {
         setShowThread(!showThread);
     };
-    const handleEditMessage = (id, msg) => {
-        editMessage({
+    const handleEditMessage = useCallback(async (id, msg) => {
+        const uploadedFiles = await startUploads({
+            files,
+            ref: id,
+            refName: 'postId'
+        });
+        return editMessage({
             variables: {
                 channelId: channel.id,
                 messageId: id,
                 content: msg,
-                files: files
+                files: uploadedFiles.map(i => i.data.id),
             },
         })
-    };
+    }, [files, channel]);
 
-    const [fileUpload, uploadedRes] = useUploadImgMutation()
     const handleFileChange = (e) => {
         let inputFiles: any = []
         Object.keys(e.target.files).map((key) => inputFiles.push(e.target.files[key]));
@@ -182,14 +195,14 @@ export const MessengerComponent: FC<PropsTypes> = ({channel, currentUsrId}) => {
         let imgs = document.getElementById('preview_img')
         imgs.innerHTML = ''
         files.forEach((f, index) => {
-            let childDiv = document.createElement("div")
-            childDiv.className = "child_div"
-            let childImg = document.createElement("img")
+            let childDiv = document.createElement('div')
+            childDiv.className = 'child_div'
+            let childImg = document.createElement('img')
             childImg.src = URL.createObjectURL(f)
-            let childClose = document.createElement("i")
-            childClose.className = "fa fa-times"
+            let childClose = document.createElement('i')
+            childClose.className = 'fa fa-times'
             let overLayDiv = document.createElement('div')
-            overLayDiv.className = "overlay"
+            overLayDiv.className = 'overlay'
             childClose.onclick = () => previewClose(f)
             childDiv.appendChild(overLayDiv)
             childDiv.appendChild(childImg)
@@ -240,7 +253,7 @@ export const MessengerComponent: FC<PropsTypes> = ({channel, currentUsrId}) => {
                                     ''
                                 )}
                                 <div className="input_msg">
-                                    <div style={{display: 'flex', position: 'relative'}}>
+                                    <div style={{ display: 'flex', position: 'relative' }}>
                                         <Input
                                             value={enterValue}
                                             onChange={(e: any) => setEnterValue(e?.target?.value)}
@@ -251,13 +264,13 @@ export const MessengerComponent: FC<PropsTypes> = ({channel, currentUsrId}) => {
                                         <div className="icon_box">
                                             <div className="icon_style">
                                                 <input type="file" onChange={handleFileChange} ref={fileUploader}
-                                                       style={{display: 'none'}} multiple={true}/>
-                                                <button style={{border: '0px'}} onClick={fileClick}>
+                                                       style={{ display: 'none' }} multiple={true}/>
+                                                <button style={{ border: '0px' }} onClick={fileClick}>
                                                     <HiOutlinePaperClip/>
                                                 </button>
                                             </div>
                                             <div className="icon_style">
-                                                <button style={{border: '0px'}} onClick={(e) => emojiClick('main')}>
+                                                <button style={{ border: '0px' }} onClick={(e) => emojiClick('main')}>
                                                     <MdOutlineEmojiEmotions/>
                                                 </button>
                                             </div>

package/src/graphql/fragments/file-info.gql

@@ -0,0 +1,12 @@
+fragment FileInfo on FileInfo{
+    id
+    name
+    extension
+    mimeType
+    width
+    height
+    url
+    ref
+    size
+    refType
+}

package/src/graphql/mutations/messages-mutation.gql

@@ -1,7 +1,7 @@
 mutation SendMessages(
     $channelId:String!,
     $content:String!,
-    $files:[Upload!]!
+    $files:[ID!]
 ){
     sendMessage(
         channelId: $channelId,
@@ -31,7 +31,7 @@ mutation EditMessage(
     $messageId:String!,
     $channelId:String!,
     $content:String!,
-    $files:[Upload!]!
+    $files:[ID!]!
 ){
     editMessage(
         messageId: {
@@ -47,10 +47,21 @@ mutation EditMessage(
     }
 }
 
-mutation UploadImg($files:[Upload!]!, $postId: String!){
-    uploadFile(files: $files, postId: $postId)
+mutation CreateMessageFileUploadLink($filename:String!, $postId: ID!){
+    createMessageFileUploadLink(postId:$postId, filename: $filename )
 }
 
+mutation AttachUploadedFileToMessage($postId:ID!, $file: UploadedFileInput!){
+    attachUploadedFileToMessage(postId: $postId, file: $file){
+        ...FileInfo
+    }
+}
+
+mutation DeleteMessageFile($url:String!){
+    deleteMessageFile(url:$url)
+}
+
+
 #mutation PinMessage($messageId:String! , $messageInput:String! , $content:String!) {
 #	pinMessage(
 #        messageId: {

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './use-upload-file.hook';
+export * from './use-upload-files.hook';

package/src/hooks/use-upload-file.hook.ts

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

package/src/hooks/use-upload-files.hook.ts

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

package/src/temp/index.ts

@@ -0,0 +1,2 @@
+export * from './use-upload-file.hook';
+export * from './use-upload-files.hook';

package/src/temp/use-upload-file.hook.ts

@@ -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/temp/use-upload-files.hook.ts

@@ -0,0 +1,22 @@
+import { IStartUploadResponse, IUseUploadFileOptions, useUploadFile } from './use-upload-file.hook';
+
+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/lib/components/messenger/mock.d.ts

@@ -1,50 +0,0 @@
-export declare const messagesData: ({
-    id: number;
-    loginUser: boolean;
-    message: string;
-    time: string;
-    timeIsToday: boolean;
-    isReply: boolean;
-    thread: {
-        threadId: number;
-        message: string;
-        time: string;
-        timeIsToday: boolean;
-        loginUser: boolean;
-    }[];
-} | {
-    id: number;
-    loginUser: boolean;
-    message: string;
-    time: string;
-    timeIsToday: boolean;
-    isReply: boolean;
-    thread?: undefined;
-})[];
-export declare const userProfile: ({
-    displayName: string;
-    isBusy: boolean;
-    user: {
-        username: string;
-    };
-    isShared: boolean;
-    disablePopover: boolean;
-    url: string;
-    displayUsername: boolean;
-    hasMention: boolean;
-    message: any[];
-    hideStatus: boolean;
-} | {
-    displayName: string;
-    isBusy: boolean;
-    user: {
-        username: string;
-    };
-    isShared: boolean;
-    disablePopover: boolean;
-    url: string;
-    displayUsername: boolean;
-    hasMention: boolean;
-    hideStatus: boolean;
-    message?: undefined;
-})[];

package/lib/components/messenger/types/message.d.ts

@@ -1,15 +0,0 @@
-export interface IMessageList {
-    id: number;
-    loginUser: boolean;
-    message: string;
-    timeIsToday: boolean;
-    isReply: boolean;
-    thread?: IMessageReplyList[];
-    isPin?: boolean;
-}
-export interface IMessageReplyList {
-    threadId: number;
-    message: string;
-    time: string;
-    timeIsToday: boolean;
-}