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

package/src/containers/Dashboard.tsx

@@ -1,7 +1,494 @@
 import * as React from 'react';
+import { styleSheet } from "../style";
+import { IntlProvider } from "react-intl";
+import {
+    useAddChannelMutation,
+    useGetChannelsByUserQuery,
+    useGetAllChannelQuery,
+    useAddDirectChannelMutation,
+    useAddMemberToChannelMutation,
+    useSendMessagesMutation,
+    useUsersToChatQuery,
+    useCurrentUserQuery,
+    useGetAllUsersQuery,
+} from '@messenger-box/platform-client';
+import { PostViewPage } from "../components/post";
+import { MenuHeader } from "../components/dashboard/menu_header";
+import { Modals } from "../components/dashboard/modals";
+import { DirectModal } from "../components/dashboard/modals/direct_modal";
+import { css } from "@emotion/css";
+import { BsGlobe2 } from "react-icons/bs";
+import { FaRobot } from "react-icons/fa";
+import { RiAdminFill } from "react-icons/ri";
+import { Button, Modal } from "react-bootstrap";
+import { useEffect, useState } from "react";
+import { Popover, Avatar, Drawer } from 'antd';
+import { Comment } from '@ant-design/compatible'
+import Select from 'react-select';
+import { indexOf } from "lodash-es";
+import { useSelector } from "react-redux";
+import {
+    BrowserRouter as Router,
+    Switch,
+    Route,
+    Link, useHistory
+} from "react-router-dom";
+import { dashboardRoutes } from "../compute";
+
+const Messenger = React.lazy(() => import('./Messenger'));
 
 const Dashboard: React.FC = () => {
-    return <> This is Dashboard page </>;
+    const [channelInput, setChannelInput] = useState<any>({});
+    // const [channels, setChannels] = useState([]);
+    const [publicChannels, setPublicChannels] = useState([]);
+    const [directChannels, setDirectChannels] = useState([]);
+    const [clickedChannel, setClickedChannel] = useState<any>({});
+    const [currentUser, setCurrentUser] = useState<any>();
+    const [options, setOptions] = useState([]);
+    const [showDirectChl, setShowDirectChl] = useState(false);
+    const [selectedValues, setSelectedValues] = useState<any>([]);
+    const [directMoreModal, setDirectMoreModal] = useState<any>({ showDirectMore: false, modalPublicChannels: [] })
+    const [publicChlModal, setPublicChlModal] = useState<any>({ show: false })
+    const [classes, setClasses] = useState({
+        left_bar: 'left_bar',
+        root_div: 'root_div'
+    });
+
+    const currentUserAuth0Id = useSelector((state: any) => state.user.auth0UserId)
+
+    const his = useHistory()
+
+    const allUsers = useGetAllUsersQuery()
+    const usersToChat = useUsersToChatQuery({ variables: { auth0Id: currentUserAuth0Id } })
+    const currentUserRes = useCurrentUserQuery({ variables: { auth0Id: currentUserAuth0Id } })
+    const { data, loading, error, refetch } = useGetChannelsByUserQuery()
+    const allChannels = useGetAllChannelQuery()
+    const [addMemberToChannelMutationInput, addMemberToChannelMutationResponse] = useAddMemberToChannelMutation({
+        update: (cache, mutationResult) => {
+            cache.modify({
+                fields: {
+                    channels(existingChannels, { toReference }) {
+                        return [...existingChannels, mutationResult]
+                    }
+                }
+            })
+        },
+    })
+
+    const [sendMessagesMutationInput, sendMessagesMutationResponase] = useSendMessagesMutation({
+        update: (cache, mutationResult) => {
+            cache.modify({
+                fields: {
+                    messages(existingMessages, { toReference }) {
+                        return { ...existingMessages, data: toReference(mutationResult.data.sendMessage) }
+                    }
+                }
+            })
+        },
+    });
+
+    const [createDirectChannel, addedDirectChannel] = useAddDirectChannelMutation({
+        update: (cache, mutationResult) => {
+            his.push(`/o/${his.location.pathname.split('/')[2]}/dashboard/message/${mutationResult.data.createDirectChannel.displayName.split('_').length === 2 ?
+                mutationResult.data.createDirectChannel.displayName.split('_')[0].split('-')[0] !== currentUser.id ?
+                    mutationResult.data.createDirectChannel.displayName.split('_')[0].split('-')[1] :
+                    mutationResult.data.createDirectChannel.displayName.split('_')[1].split('-')[1] : mutationResult.data.createDirectChannel.title}`,
+                {
+                    channel: mutationResult.data.createDirectChannel,
+                    currentUser: currentUserRes.data.currentUser
+                }
+            )
+            cache.modify({
+                fields: {
+                    channels(existingChannels, { toReference }) {
+                        return [...existingChannels, mutationResult]
+                    }
+                }
+            })
+        },
+    })
+
+    const [createChannel, createdChannel] = useAddChannelMutation({
+        update: (cache, mutationResult) => {
+            his.push(`/o/${his.location.pathname.split('/')[2]}/dashboard/channel/${mutationResult.data.createChannel.title}`,
+                {
+                    channel: mutationResult.data.createChannel,
+                    currentUser: currentUserRes.data.currentUser
+                }
+            )
+        },
+    })
+
+    useEffect(() => {
+        if (!currentUserRes.loading) {
+            setCurrentUser(currentUserRes.data.currentUser)
+        }
+    }, [currentUserRes.data, currentUserRes.loading])
+
+    const handleJoin = (channelId) => {
+        addMemberToChannelMutationInput({
+            variables: {
+                channelId: channelId,
+                memberId: currentUser.id
+            }
+        }).then(response => {
+            setClickedChannel(response.data.addMemberToChannel)
+            // setShowDirectMore(false)
+            setDirectMoreModal({ ...directMoreModal, showDirectMore: false })
+            sendMessagesMutationInput({
+                variables: {
+                    channelId: channelId,
+                    content: `@${currentUser.username} joined the channel`,
+                    files: []
+                },
+            })
+        });
+        // refetch().then((value => {
+        //     setChannels(value.data.channelsByUser)
+        //     setChannelInput({})
+        // }))
+        // allChannels.refetch()
+    }
+
+    const handleGo = () => {
+        // console.log('------directModal------', directModal)
+        if (selectedValues) {
+            let uids = []
+            let dName = currentUser.username + ','
+            if (selectedValues.length > 1) {
+                selectedValues.forEach(i => {
+                    uids.push(i.value.uid)
+                    dName += i.value.username
+                    if ((indexOf(selectedValues, i) + 1) !== selectedValues.length) {
+                        dName += ','
+                    }
+                })
+            } else {
+                uids.push(selectedValues[0].value.uid)
+                dName = `${selectedValues[0].value.uid}-${selectedValues[0].value.username}_${currentUser.id}-${currentUser.username}`
+            }
+            createDirectChannel({
+                variables: {
+                    receiver: uids,
+                    displayName: dName
+                }
+            })
+            handleClose('directChannel')
+        }
+    }
+
+    useEffect(() => {
+        if (!addedDirectChannel.loading && addedDirectChannel.data) {
+            setClickedChannel(addedDirectChannel.data.createDirectChannel)
+            setSelectedValues([])
+        }
+    }, [addedDirectChannel.loading, addedDirectChannel.data])
+
+    useEffect(() => {
+        if (!usersToChat.loading) {
+            let tempOpt = []
+            usersToChat.data.usersToChat.map(usr => {
+                tempOpt.push({
+                    value: { username: `${usr.username}`, uid: `${usr.id}` },
+                    label: <div style={{ cursor: 'pointer' }}>
+                        <Comment
+                            className="cmt_cls"
+                            author={'@' + usr.username}
+                            avatar={
+                                <Avatar
+                                    style={{ backgroundColor: `#${Math.floor(Math.random() * 16777215).toString(16)}` }}>
+                                    {usr.username.match(/\b(\w)/g).join('').toUpperCase()}
+                                </Avatar>
+                            }
+                            content={usr.email}
+                        />
+                    </div>
+                })
+            })
+            setOptions(tempOpt)
+        }
+    }, [usersToChat.data, usersToChat.loading])
+
+    const refetchCall = () => {
+        // setClickedChannel({})
+    }
+
+    useEffect(() => {
+        if (!loading) {
+            let diChal = []
+            let fChannel = []
+            let joinedChannel = []
+            let modelChannel = []
+
+            if (!currentUserRes.loading && !allChannels.loading) {
+                let uc = []
+                data.channelsByUser.forEach(u => uc.push(u.id))
+                let ac = []
+                allChannels.data.channels.forEach(a => ac.push(a.id))
+                diChal = ac.filter(t => !uc.includes(t))
+                allChannels.data.channels.filter(dc => {
+                    if (diChal.includes(dc.id)) {
+                        dc.members.forEach(m => {
+                            if (m.user === currentUser.id) {
+                                fChannel.push(dc)
+                            }
+                        })
+                    }
+                })
+                allChannels.data.channels.filter(async chl => {
+                    if (chl.type !== "DIRECT") {
+                        let isMember = false
+                        await chl.members.forEach(c => {
+                            if (c.user === currentUser.id) {
+                                joinedChannel.push(chl)
+                                isMember = true
+                            }
+                        })
+                        if (isMember === false) {
+                            modelChannel.push(chl)
+                        }
+                    }
+                })
+            }
+            // setChannels([...data.channelsByUser, ...fChannel])
+            setPublicChannels(joinedChannel)
+            // setModalPublicChannels(modelChannel)
+            setDirectMoreModal({ ...directMoreModal, modalPublicChannels: modelChannel })
+            setDirectChannels([
+                ...data.channelsByUser.filter(chl => chl.type === "DIRECT"),
+                ...fChannel.filter(chl => chl.type === "DIRECT")
+            ])
+        }
+    }, [loading, data, allChannels.loading, allChannels.data, currentUser, currentUserRes.loading])
+
+
+    const handleCreate = () => {
+        createChannel({
+            variables: {
+                name: channelInput.name,
+                description: channelInput.description
+            }
+        })
+        setPublicChlModal({ ...publicChlModal, show: false })
+    }
+
+    useEffect(() => {
+        if (!createdChannel.loading && createdChannel.data) {
+            setClickedChannel(createdChannel.data.createChannel)
+        }
+    }, [createdChannel.loading, createdChannel.data])
+
+    const handleClose = (name) => {
+        if (name === "publicChannel") {
+            setPublicChlModal({ ...publicChlModal, show: false })
+        } else if (name === "directChannel") {
+            setShowDirectChl(false)
+        } else if (name === "publicMore") {
+            setDirectMoreModal({ ...directMoreModal, showDirectMore: false })
+        }
+    }
+    const handleShow = (name, type?) => {
+        if (name === "publicChannel") {
+            setPublicChlModal({ ...publicChlModal, show: true })
+            handleClose('publicMore')
+        } else if (name === "directChannel") {
+            setShowDirectChl(true)
+        }
+    };
+
+    const handleChange = (e) => {
+        setChannelInput({ ...channelInput, [e.target.name]: e.target.value })
+    }
+    const handleChannelClick = (channel) => {
+        setClickedChannel(channel)
+    }
+
+
+    useEffect(() => {
+        if (!addedDirectChannel.loading && addedDirectChannel.data) {
+            setClickedChannel(addedDirectChannel.data.createDirectChannel)
+        }
+    }, [addedDirectChannel.loading, addedDirectChannel.data])
+
+    const handleClass = () => {
+        const oldClasses = classes
+        if (!oldClasses.left_bar.split(' ').includes('drawer_style')) {
+            setClasses({
+                left_bar: `${oldClasses.left_bar} drawer_style`,
+                root_div: `${oldClasses.root_div} clicked_class`
+            })
+        } else {
+            setClasses({ left_bar: 'left_bar', root_div: 'root_div' })
+        }
+    };
+
+    const handleSelect = (selectedOption) => {
+        setSelectedValues(selectedOption)
+    };
+
+    useEffect(() => {
+        setDirectMoreModal({ ...directMoreModal, ...{ handleJoin: handleJoin, handleShow: handleShow } })
+    }, []);
+
+    return (
+        <Router>
+            <div className={css(styleSheet.customStyle)}>
+                <div className={classes.root_div}>
+                    <DirectModal
+                        handleClose={handleClose}
+                        handleGo={handleGo}
+                        handleSelect={handleSelect}
+                        selectedValues={selectedValues}
+                        showDirectChl={showDirectChl}
+                        options={options}
+                    />
+                    <Modals
+                        directMoreModal={directMoreModal}
+                        publicChlModal={publicChlModal}
+                        handleChange={handleChange}
+                        handleClose={handleClose}
+                        handleCreate={handleCreate}
+                    />
+                    <MenuHeader clickedChannel={clickedChannel} handleClass={handleClass} />
+                    <div className='dashboard_window' onClick={() => {
+                        if (classes.root_div.split(' ').length > 1) {
+                            handleClass()
+                        }
+                    }}>
+                        <div className={classes.left_bar}>
+                            <div className="nav-pills__container">
+                                <ul>
+                                    <li id="li1" className="sidebar-section__header">
+                                        <h4><span>PUBLIC CHANNELS</span></h4>
+                                        <button className="add-channel-btn"
+                                            onClick={() => handleShow('publicChannel', 'Public Channel')}>
+                                            <span>+</span></button>
+                                    </li>
+                                    {/*{publicChannels.filter((item, index) => index < 3).map((chl, index) => {*/}
+                                    {publicChannels.map((chl, index) => {
+                                        return (
+                                            <Link
+                                                to={{
+                                                    pathname: `/o/${his.location.pathname.split('/')[2]}/dashboard/channel/${chl.title}`,
+                                                    state: { channel: chl, currentUser: currentUserRes.data.currentUser }
+                                                }}>
+                                                <li className="">
+                                                    <a className="sidebar-item" onClick={() => handleChannelClick(chl)}>
+                                                        <span className="icon icon__globe"><BsGlobe2 /></span>
+                                                        <span
+                                                            className="sidebar-item__name"><span>{chl.title}</span></span>
+                                                    </a>
+                                                </li>
+                                            </Link>
+                                        )
+                                    })}
+                                    <li>
+                                        <button id="sidebarPublicChannelsMore"
+                                            className="nav-more"
+                                            onClick={() => setDirectMoreModal({
+                                                ...directMoreModal,
+                                                showDirectMore: true
+                                            })}
+                                        >
+                                            <span>More...</span>
+                                        </button>
+                                    </li>
+                                </ul>
+                                <ul>
+                                    <li className="sidebar-section__header">
+                                        <h4><span>PRIVATE CHANNELS</span></h4>
+                                        <button className="add-channel-btn">
+                                            <span>+</span></button>
+                                    </li>
+                                </ul>
+                                <ul>
+                                    <li className="sidebar-section__header">
+                                        <h4><span>DIRECT MESSAGES</span></h4>
+                                        <button className="add-channel-btn" onClick={() => handleShow("directChannel")}>
+                                            <span>+</span></button>
+                                    </li>
+                                    {directChannels.map(cnl => {
+                                        return (
+                                            <Link
+                                                to={{
+                                                    pathname: `/o/${his.location.pathname.split('/')[2]}/dashboard/message/${cnl.displayName.split('_').length === 2 ?
+                                                        cnl.displayName.split('_')[0].split('-')[0] !== currentUser.id ?
+                                                            cnl.displayName.split('_')[0].split('-')[1] :
+                                                            cnl.displayName.split('_')[1].split('-')[1] : cnl.title}`,
+                                                    state: {
+                                                        channel: cnl,
+                                                        currentUser: currentUserRes.data.currentUser
+                                                    }
+                                                }}>
+                                                {/*{cnl.displayName === 'surveybot' ?*/}
+                                                {/*    <li className="active">*/}
+                                                {/*        <a className="sidebar-item has-close"*/}
+                                                {/*           onClick={() => handleChannelClick(cnl)}>*/}
+                                                {/*            <span className="icon icon__globe"><FaRobot/></span>*/}
+                                                {/*            <span*/}
+                                                {/*                className="sidebar-item__name"><span>surveybot</span></span>*/}
+                                                {/*        </a>*/}
+                                                {/*    </li> :*/}
+                                                <li className="active">
+                                                    <a className="sidebar-item has-close"
+                                                        onClick={() => handleChannelClick(cnl)}>
+                                                        {cnl.displayName.split(',').length > 1 ?
+                                                            <span
+                                                                className="num_style">{cnl.displayName.split(',').length}</span> :
+                                                            <span className="icon icon__globe"
+                                                                color="white"><RiAdminFill /></span>}
+                                                        <span className="sidebar-item__name">
+                                                            {/*<span>*/}
+                                                            {cnl.displayName.split('_').length === 2 ?
+                                                                cnl.displayName.split('_')[0].split('-')[0] !== currentUser.id ?
+                                                                    cnl.displayName.split('_')[0].split('-')[1] :
+                                                                    cnl.displayName.split('_')[1].split('-')[1] : cnl.displayName
+                                                            }
+                                                            {/*</span>*/}
+                                                        </span>
+                                                    </a>
+                                                </li>
+
+                                                {/*}*/}
+                                            </Link>
+                                        )
+                                    })}
+                                </ul>
+                            </div>
+                        </div>
+                        <div className="route_view">
+                            <Switch>
+                                {dashboardRoutes.map((route, index) => (
+                                    <Route
+                                        key={index}
+                                        path={route.path}
+                                        exact={route.exact}
+                                        children={<route.component />}
+                                    />
+                                ))}
+                            </Switch>
+                        </div>
+                        {/*Add channel Modal*/}
+
+                        {/*{clickedChannel.id ? <div className="main_wraper">*/}
+                        {/*        <IntlProvider locale="en">*/}
+                        {/*            <div className='chat_head_mid'>*/}
+                        {/*                <PostViewPage channel={clickedChannel}*/}
+                        {/*                              currentUsrId={currentUser.id}/>*/}
+                        {/*            </div>*/}
+                        {/*            <Messenger channel={clickedChannel} isRefetch={isRefetch}*/}
+                        {/*                       currentUsrId={currentUser.id}/>*/}
+                        {/*        </IntlProvider>*/}
+                        {/*    </div>*/}
+                        {/*    : <h2 style={{display: 'flex', alignItems: 'center', margin: '0 auto', color: 'gray'}}>*/}
+                        {/*        Please select any channel*/}
+                        {/*    </h2>*/}
+                        {/*}*/}
+                    </div>
+                </div>
+            </div>
+        </Router>
+    );
 };
 
 export default Dashboard;

package/src/containers/Inbox.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { PostViewPage } from './../components/post/index';
+import InboxMessage from '../components/InboxMessage';
+
+const Inbox= () => {
+    return (
+        <>
+            <InboxMessage />
+        </>
+    );
+};
+
+export default Inbox;

package/src/containers/Loading.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 interface Props {}
 
-const Loading: React.SFC<Props> = () => (
+const Loading: React.FC<Props> = () => (
     <div>Loading</div>
 );
 

package/src/containers/Messenger.tsx

@@ -1,11 +1,16 @@
 import * as React from 'react';
-import { PostViewPage } from './../components/post/index';
-import { MessengerComponent } from './../components/messenger'
+import {PostViewPage} from './../components/post/index';
+import {MessengerComponent} from './../components/messenger'
 
-const Messenger: React.FC = () => {
+interface ChannelProps {
+    channel: any
+    currentUsrId: string
+}
+
+const Messenger: React.FC<ChannelProps> = ({channel, currentUsrId}) => {
     return (
         <>
-            <MessengerComponent />
+            {channel ? <MessengerComponent channel={channel} currentUsrId={currentUsrId}/> : ''}
         </>
     );
 };

package/src/module.ts

@@ -1,18 +1,21 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { Feature } from '@common-stack/client-react';
-import { filteredRoutes, DashboardProvider } from './compute';
+import { filteredRoutes, filteredMenus } from './compute';
+import { schema, typePolicies, dataIdFromObject }  from '@messenger-box/platform-client';
 
 export default new Feature({
     routeConfig: filteredRoutes,
+    dataIdFromObject,
+    clientStateParams: { typeDefs: schema, typePolicies },
     stylesInsert: [
         'bootstrap/dist/css/bootstrap.css',
         'jasny-bootstrap/dist/css/jasny-bootstrap.css',
         'font-awesome/css/font-awesome.css',
     ],
-    componentFillPlugins: [
-        {
-            name: 'report-fill-component',
-            render: DashboardProvider,
-        },
-    ],
+    // componentFillPlugins: [
+    //     {
+    //         name: 'report-fill-component',
+    //         render: messengerPageStore,
+    //     },
+    // ],
 });