@messenger-box/platform-browser 10.0.3-alpha.17 → 10.0.3-alpha.171

package/src/components/messenger/index.tsx

@@ -1,382 +0,0 @@
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Col, Row, Input } from 'antd';
-import {
-    useGetMessagesQuery,
-    useSendMessagesMutation,
-    useDeleteMessageMutation,
-    useEditMessageMutation,
-} from 'common/graphql';
-import { IFileInfo } from 'common';
-import { HiOutlinePaperClip } from '@react-icons/all-files/hi/HiOutlinePaperClip';
-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<PropsTypes> = ({ channel, currentUsrId }) => {
-    document.getElementsByClassName('demo')[0].setAttribute('style', `{{overflow: 'hidden'}}`);
-    const [enterValue, setEnterValue] = useState<string>('');
-    const [showThread, setShowThread] = useState<boolean>(false);
-    const [flag, setFlag] = useState<boolean>(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();
-    const { t } = useTranslation();
-
-    // 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);
-        },
-        [channel, files, enterValue],
-    );
-
-    const [deleteMsg, {}] = useDeleteMessageMutation({
-        // context: {headers: {Authorization: token}},
-        // refetchQueries: ['GetMessages']
-    });
-    const handleDeleteMessage = (id) => {
-        deleteMsg({
-            variables: {
-                channelId: channel.id,
-                messageId: id,
-            },
-        });
-    };
-    const onEmojiClick = (event, emojiObject) => {
-        setChosenEmoji(emojiObject);
-    };
-    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' });
-    };
-
-    const fileUploader = useRef(null);
-    const fileClick = () => {
-        fileUploader.current.click();
-    };
-
-    const handleShowSideBar = () => {
-        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)} ref={clickRef}>
-            <div className="chat_container">
-                <div className="left_chat_box">
-                    <div className="msg_list">
-                        <Row gutter={[24, 6]} className="msg_row">
-                            <Col>
-                                <MessagesList
-                                    channel={channel}
-                                    userMessagesList={userMessagesList}
-                                    handleShowSideBar={handleShowSideBar}
-                                    handleDeleteMessage={handleDeleteMessage}
-                                    handleEditMessage={handleEditMessage}
-                                    currentUsrId={currentUsrId}
-                                />
-                                <div ref={messagesEndRef} />
-                            </Col>
-                        </Row>
-                    </div>
-                    <Row>
-                        <Col className="input_row">
-                            <div className="input_class">
-                                {displayEmoji ? (
-                                    <Picker
-                                        onSelect={handleOnSelect}
-                                        native={true}
-                                        set="apple"
-                                        emoji="point_up"
-                                        title={t('messenger_box_browser.pick_your_emoji')}
-                                        emojiSize={24}
-                                        perLine={6}
-                                        color="#ae65c5"
-                                        sheetSize={16}
-                                        showPreview={true}
-                                        showSkinTones={false}
-                                        notFoundEmoji="sleuth_or_spy"
-                                    />
-                                ) : (
-                                    ''
-                                )}
-                                <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={t('messenger_box_browser.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 ? (
-                    <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>
-                        </div>
-                        <div className="msg_list">
-                            <Row gutter={[24, 6]} className="msg_row">
-                                <Col>
-                                    <ThreadMessagesList
-                                        userMessagesList={userMessagesList}
-                                        handleShowSideBar={handleShowSideBar}
-                                        handleDeleteMessage={handleDeleteMessage}
-                                        handleEditMessage={{}}
-                                        channel={channel}
-                                    />
-                                    <div ref={messagesEndRef} />
-                                </Col>
-                                <Col className="thread_input_row">
-                                    <div className="input_class">
-                                        {threadEmoji ? (
-                                            <Picker
-                                                onSelect={handleOnSelect}
-                                                native={true}
-                                                set="apple"
-                                                emoji="point_up"
-                                                title={t('messenger_box_browser.pick_your_emoji')}
-                                                emojiSize={24}
-                                                perLine={6}
-                                                color="#ae65c5"
-                                                sheetSize={16}
-                                                showPreview={true}
-                                                showSkinTones={false}
-                                                notFoundEmoji="sleuth_or_spy"
-                                            />
-                                        ) : (
-                                            ''
-                                        )}
-                                        <Input
-                                            value={enterValue}
-                                            onChange={(e: any) => setEnterValue(e?.target?.value)}
-                                            onPressEnter={(e) => handleEnterButton(e)}
-                                            placeholder={t('messenger_box_browser.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={(e) => emojiClick('thread')}>
-                                                    <MdOutlineEmojiEmotions />
-                                                </button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </Col>
-                            </Row>
-                        </div>
-                    </div>
-                ) : (
-                    ''
-                )}*/}
-            </div>
-        </div>
-    );
-};