@messenger-box/platform-browser 0.0.1-alpha.42 → 0.0.1-alpha.420

package/src/components/messenger/index.tsx

@@ -1,96 +1,245 @@
-import React, {FC, useCallback, useEffect, useRef, useState} from 'react';
-import {Col, Row, Input} from 'antd';
-import {MessagesList, ThreadMessagesList} from './messagesList';
-import {messagesData} from './mock';
-import {IMessageList} from './types/message';
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { Col, Row, Input } from 'antd';
 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 {Emoji, emojiIndex} from 'emoji-mart';
-import {ThreadSidebar} from './threadSidebar';
+    useGetMessagesQuery,
+    useSendMessagesMutation,
+    useDeleteMessageMutation,
+    useEditMessageMutation,
+} from '@messenger-box/platform-client';
+import {
+    IFileInfo,
+} from '@messenger-box/core';
+import { HiOutlinePaperClip } from 'react-icons/hi';
+import { MdOutlineEmojiEmotions } from 'react-icons/md';
+import { css } from '@emotion/css';
+import { Picker } from 'emoji-mart';
 import 'emoji-mart/css/emoji-mart.css';
+import { useUploadFiles } from '@messenger-box/platform-client';
+import { styleSheet3 } from './messagesList/style';
+import { MessagesList } from './messagesList';
+
+interface PropsTypes {
+    channel: any;
+    currentUsrId: string;
+}
 
-export const MessengerComponent: FC = () => {
+export const MessengerComponent: FC<PropsTypes> = ({ channel, currentUsrId }) => {
     document.getElementsByClassName('demo')[0].setAttribute('style', `{{overflow: 'hidden'}}`);
-    const {css} = useFela();
     const [enterValue, setEnterValue] = useState<string>('');
     const [showThread, setShowThread] = useState<boolean>(false);
     const [flag, setFlag] = useState<boolean>(false);
-    const [userMessagesList, setUserMessagesList] = useState<IMessageList[]>([]);
-    const handleEnterButton = (e) => {
-        setUserMessagesList([
-            ...userMessagesList,
-            {
-                id: Math.random(),
-                loginUser: true,
-                message: enterValue,
-                timeIsToday: true,
-                isReply: false,
+    const [userMessagesList, setUserMessagesList] = useState<any>([]);
+    const [chosenEmoji, setChosenEmoji] = useState(null);
+    const [displayEmoji, setDisplayEmoji] = useState(false);
+    const [day, setDay] = useState<string>('Today');
+    const [threadEmoji, setThreadEmoji] = useState(false);
+    const [files, setFiles] = useState([])
+    const { startUpload } = useUploadFiles();
+
+    // let token;
+    // useEffect(() => {
+    //     token = window.localStorage.getItem('access_token');
+    // }, []);
+    const { data, loading, error, refetch } = useGetMessagesQuery({
+        variables: {
+            channelId: channel.id,
+        },
+        fetchPolicy: 'cache-first'
+    });
+    // useEffect(() => {
+    //     if (isRefetch) {
+    //         refetch().then((value) => {
+    //             setUserMessagesList(value.data.messages.data);
+    //             scrollToBottom();
+    //         });
+    //     }
+    // }, [isRefetch])
+    useEffect(() => {
+        if (!loading) {
+            setUserMessagesList(data?.messages?.data);
+        }
+    }, [loading, data]);
+    const [sendMsg, sentMessage] = useSendMessagesMutation({
+        update: (cache, mutationResult) => {
+            setFiles([])
+            cache.modify({
+                fields: {
+                    messages(existingMessages, { toReference }) {
+                        return { ...existingMessages, data: toReference(mutationResult.data.sendMessage) }
+                    }
+                }
+            })
+        },
+        // context: {headers: {Authorization: token}},
+        // refetchQueries: ['GetMessages']
+    });
+
+    const handleEnterButton = useCallback(async (e) => {
+        if (!enterValue) {
+            return;
+        }
+        const { data } = await sendMsg({
+            variables: {
+                channelId: channel.id,
+                content: enterValue,
+                files: []
+            },
+        });
+        const { data: uploadedFiles } = await startUpload({
+            file: files,
+            saveUploadedFile: {
+                variables: {
+                    postId: data.sendMessage.id
+                }
             },
-        ]);
+            createUploadLink: {
+                variables: {
+                    postId: data.sendMessage.id
+                }
+            }
+        });
+        await editMessage({
+            variables: {
+                channelId: channel.id,
+                messageId: data.sendMessage.id,
+                files: (uploadedFiles as unknown as IFileInfo[]).map(i => i.id),
+                content: enterValue
+            }
+        })
         setEnterValue('');
+        scrollToBottom();
         setFlag(true);
-        const [chosenEmoji, setChosenEmoji] = useState(null);
-        const onEmojiClick = (event, emojiObject) => {
-            setChosenEmoji(emojiObject);
-        };
+    }, [channel, files, enterValue]);
+
+    const [deleteMsg, { }] = useDeleteMessageMutation({
+        // context: {headers: {Authorization: token}},
+        // refetchQueries: ['GetMessages']
+    });
+    const handleDeleteMessage = (id) => {
+        deleteMsg({
+            variables: {
+                channelId: channel.id,
+                messageId: id,
+            },
+        })
     };
-    document.body.onclick = () => {
-        setDisplayEmoji(false);
+    const onEmojiClick = (event, emojiObject) => {
+        setChosenEmoji(emojiObject);
     };
-    const [displayEmoji, setDisplayEmoji] = useState(false);
-    const emojiClick = () => {
-        setDisplayEmoji(true);
+    const [editMessage, { }] = useEditMessageMutation({
+        // refetchQueries: ['GetMessages']
+    });
+    const clickRef = useRef();
+    const checkIfClickedOutside = (e) => {
+        const node = clickRef.current as any;
+        if (node && node.contains(e.target)) {
+            setDisplayEmoji(false);
+            setThreadEmoji(false);
+        } else {
+            return;
+        }
+    };
+    useEffect(() => {
+        if (displayEmoji || threadEmoji) {
+            document.addEventListener('click', checkIfClickedOutside, false);
+        } else {
+            document.removeEventListener('click', checkIfClickedOutside, false);
+        }
+        return () => {
+            document.removeEventListener('click', checkIfClickedOutside, false);
+        };
+    }, [displayEmoji, threadEmoji]);
+    const handleOnSelect = (emoji) => {
+        setEnterValue(enterValue + emoji.native);
+        // setDisplayEmoji(false);
+    };
+    const emojiClick = (type) => {
+        if (type === 'main') {
+            setDisplayEmoji(true);
+        }
+        if (type === 'thread') {
+            setThreadEmoji(true);
+        }
     };
     const messagesEndRef = useRef(null);
     const scrollToBottom = () => {
-        messagesEndRef.current?.scrollIntoView({behavior: 'smooth'});
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     };
-    useEffect(() => {
-        if (flag === true) {
-            setTimeout(() => {
-                setUserMessagesList([
-                    ...userMessagesList,
-                    {
-                        id: Math.random(),
-                        loginUser: false,
-                        message: 'Thank for chatting with us',
-                        timeIsToday: true,
-                        isReply: false,
-                    },
-                ]);
-                setFlag(false);
-            }, 200);
-        }
-        scrollToBottom();
-    }, [flag]);
+
     const fileUploader = useRef(null);
     const fileClick = () => {
         fileUploader.current.click();
     };
 
     const handleShowSideBar = () => {
-        setShowThread(!showThread)
+        setShowThread(!showThread);
+    };
+    const handleEditMessage = useCallback(async (id, msg) => {
+        const { data: uploadedFiles } = await startUpload({
+            file: files,
+            saveUploadedFile: {
+                variables: {
+                    ref: id,
+                    refName: 'postId'
+                }
+            }
+        });
+        return editMessage({
+            variables: {
+                channelId: channel.id,
+                messageId: id,
+                content: msg,
+                files: (uploadedFiles as unknown as IFileInfo[]).map(i => i.id),
+            },
+        })
+    }, [files, channel]);
+
+    const handleFileChange = (e) => {
+        let inputFiles: any = []
+        Object.keys(e.target.files).map((key) => inputFiles.push(e.target.files[key]));
+        setFiles([...inputFiles])
+    }
+    const previewClose = (file) => {
+        setFiles([...files.filter(f => f !== file)])
     }
 
+    useEffect(() => {
+        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')
+            childImg.src = URL.createObjectURL(f)
+            let childClose = document.createElement('i')
+            childClose.className = 'fa fa-times'
+            let overLayDiv = document.createElement('div')
+            overLayDiv.className = 'overlay'
+            childClose.onclick = () => previewClose(f)
+            childDiv.appendChild(overLayDiv)
+            childDiv.appendChild(childImg)
+            childDiv.appendChild(childClose)
+            imgs.appendChild(childDiv)
+        })
+    }, [files])
 
+    console.log(channel)
     return (
-        <div className={css(styleSheet3.customInputStyle as any)}>
+        <div className={css(styleSheet3.customInputStyle)} ref={clickRef}>
             <div className="chat_container">
                 <div className="left_chat_box">
                     <div className="msg_list">
                         <Row gutter={[24, 6]} className="msg_row">
                             <Col>
-                                <MessagesList userMessagesList={userMessagesList}
-                                              handleShowSideBar={handleShowSideBar}/>
-                                <div ref={messagesEndRef}/>
+                                <MessagesList
+                                    channel={channel}
+                                    userMessagesList={userMessagesList}
+                                    handleShowSideBar={handleShowSideBar}
+                                    handleDeleteMessage={handleDeleteMessage}
+                                    handleEditMessage={handleEditMessage}
+                                    currentUsrId={currentUsrId}
+                                />
+                                <div ref={messagesEndRef} />
                             </Col>
                         </Row>
                     </div>
@@ -99,6 +248,7 @@ export const MessengerComponent: FC = () => {
                             <div className="input_class">
                                 {displayEmoji ? (
                                     <Picker
+                                        onSelect={handleOnSelect}
                                         native={true}
                                         set="apple"
                                         emoji="point_up"
@@ -114,52 +264,64 @@ export const MessengerComponent: FC = () => {
                                 ) : (
                                     ''
                                 )}
-                                <Input
-                                    value={enterValue}
-                                    onChange={(e: any) => setEnterValue(e?.target?.value)}
-                                    onPressEnter={(e) => handleEnterButton(e)}
-                                    placeholder="Please Enter"
-                                    className="msg_input"
-                                />
-                                <div className="icon_box">
-                                    <div className="icon_style">
-                                        <input type="file" ref={fileUploader} style={{display: 'none'}}/>
-                                        <button style={{border: '0px'}} onClick={fileClick}>
-                                            <HiOutlinePaperClip/>
-                                        </button>
-                                    </div>
-                                    <div className="icon_style">
-                                        <button style={{border: '0px'}} onClick={emojiClick}>
-                                            <MdOutlineEmojiEmotions/>
-                                        </button>
+                                <div className="input_msg">
+                                    <div style={{ display: 'flex', position: 'relative' }}>
+                                        <Input
+                                            value={enterValue}
+                                            onChange={(e: any) => setEnterValue(e?.target?.value)}
+                                            onPressEnter={(e) => handleEnterButton(e)}
+                                            placeholder="Please Enter"
+                                            className="msg_input"
+                                        />
+                                        <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}>
+                                                    <HiOutlinePaperClip />
+                                                </button>
+                                            </div>
+                                            <div className="icon_style">
+                                                <button style={{ border: '0px' }} onClick={(e) => emojiClick('main')}>
+                                                    <MdOutlineEmojiEmotions />
+                                                </button>
+                                            </div>
+                                        </div>
                                     </div>
+                                    <div id="preview_img" className="preview_imgs"></div>
                                 </div>
                             </div>
                         </Col>
                     </Row>
                 </div>
-                {showThread ?
+                {/*{showThread ? (
                     <div className="right_chat_box">
                         <div className="thread_head">
                             <div>
                                 <span>Thread</span>
                                 <button>surveybot</button>
                             </div>
-                            <button onClick={handleShowSideBar} style={{border: '0px', fontSize: '20px'}}>
-                                <IoIosClose/>
+                            <button onClick={handleShowSideBar} style={{ border: '0px', fontSize: '20px' }}>
+                                <IoIosClose />
                             </button>
                         </div>
                         <div className="msg_list">
                             <Row gutter={[24, 6]} className="msg_row">
                                 <Col>
-                                    <ThreadMessagesList userMessagesList={userMessagesList}
-                                                        handleShowSideBar={handleShowSideBar}/>
-                                    <div ref={messagesEndRef}/>
+                                    <ThreadMessagesList
+                                        userMessagesList={userMessagesList}
+                                        handleShowSideBar={handleShowSideBar}
+                                        handleDeleteMessage={handleDeleteMessage}
+                                        handleEditMessage={{}}
+                                        channel={channel}
+                                    />
+                                    <div ref={messagesEndRef} />
                                 </Col>
                                 <Col className="thread_input_row">
                                     <div className="input_class">
-                                        {displayEmoji ? (
+                                        {threadEmoji ? (
                                             <Picker
+                                                onSelect={handleOnSelect}
                                                 native={true}
                                                 set="apple"
                                                 emoji="point_up"
@@ -184,14 +346,14 @@ export const MessengerComponent: FC = () => {
                                         />
                                         <div className="icon_box">
                                             <div className="icon_style">
-                                                <input type="file" ref={fileUploader} style={{display: 'none'}}/>
-                                                <button style={{border: '0px'}} onClick={fileClick}>
-                                                    <HiOutlinePaperClip/>
+                                                <input type="file" ref={fileUploader} style={{ display: 'none' }} />
+                                                <button style={{ border: '0px' }} onClick={fileClick}>
+                                                    <HiOutlinePaperClip />
                                                 </button>
                                             </div>
                                             <div className="icon_style">
-                                                <button style={{border: '0px'}} onClick={emojiClick}>
-                                                    <MdOutlineEmojiEmotions/>
+                                                <button style={{ border: '0px' }} onClick={(e) => emojiClick('thread')}>
+                                                    <MdOutlineEmojiEmotions />
                                                 </button>
                                             </div>
                                         </div>
@@ -199,8 +361,10 @@ export const MessengerComponent: FC = () => {
                                 </Col>
                             </Row>
                         </div>
-                    </div> : ''
-                }
+                    </div>
+                ) : (
+                    ''
+                )}*/}
             </div>
         </div>
     );