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

package/src/containers/Dashboard.tsx

@@ -1,527 +0,0 @@
-import * as React from 'react';
-import { styleSheet } from '../style';
-import { IntlProvider } from 'react-intl';
-import {
-    useAddChannelMutation,
-    useAddDirectChannelMutation,
-    useAddMemberToChannelMutation,
-    useSendMessagesMutation,
-} from 'common/graphql';
-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 { useTranslation } from 'react-i18next';
-import { RiAdminFill } from 'react-icons/ri';
-import { useEffect, useState } from 'react';
-import { Avatar } from 'antd';
-import { Comment } from '@ant-design/compatible';
-import { indexOf } from 'lodash-es';
-import { useSelector } from 'react-redux';
-import { Routes, Route, Link, useNavigate, useLocation } from '@remix-run/react';
-import { dashboardRoutes } from '../compute';
-
-const Messenger = React.lazy(() => import('./Messenger'));
-
-const Dashboard: React.FC = (props: any) => {
-    const [allUsers, usersToChat, currentUserRes, allChannels, getChannel] = props?.data;
-    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.authUserId);
-
-    const navigate = useNavigate();
-    const location = useLocation();
-    const { t } = useTranslation();
-
-    // const allUsers = useGetAllUsersQuery()
-    // const usersToChat = useUsersToChatQuery({ variables: { auth0Id: currentUserAuth0Id } })
-    // const currentUserRes = useCurrentUserQuery({ variables: { auth0Id: currentUserAuth0Id } })
-    const { data, loading, error, refetch } = getChannel;
-    // 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) => {
-            navigate(
-                `/o/${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
-                }`,
-                {
-                    state: {
-                        channel: mutationResult.data.createDirectChannel,
-                        currentUser: currentUserRes.data.currentUser,
-                    },
-                },
-            );
-            cache.modify({
-                fields: {
-                    channels(existingChannels, { toReference }) {
-                        return [...existingChannels, mutationResult];
-                    },
-                },
-            });
-        },
-    });
-
-    const [createChannel, createdChannel] = useAddChannelMutation({
-        update: (cache, mutationResult) => {
-            navigate(
-                `/o/${location.pathname.split('/')[2]}/dashboard/channel/${mutationResult.data.createChannel.title}`,
-                {
-                    state: {
-                        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: t('messenger_box_browser.username_joined_the_channel', { username: currentUser.username }),
-                    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 (
-        <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>{t('messenger_box_browser.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/${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>{t('messenger_box_browser.more')}</span>
-                                    </button>
-                                </li>
-                            </ul>
-                            <ul>
-                                <li className="sidebar-section__header">
-                                    <h4>
-                                        <span>{t('messenger_box_browser.PRIVATE_CHANNELS')}</span>
-                                    </h4>
-                                    <button className="add-channel-btn">
-                                        <span>+</span>
-                                    </button>
-                                </li>
-                            </ul>
-                            <ul>
-                                <li className="sidebar-section__header">
-                                    <h4>
-                                        <span>{t('messenger_box_browser.DIRECT_MESSAGES')}</span>
-                                    </h4>
-                                    <button className="add-channel-btn" onClick={() => handleShow('directChannel')}>
-                                        <span>+</span>
-                                    </button>
-                                </li>
-                                {directChannels.map((cnl) => {
-                                    return (
-                                        <Link
-                                            to={{
-                                                pathname: `/o/${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">
-                        <Routes>
-                            {dashboardRoutes.map((route, index) => (
-                                <Route key={index} path={route.path} children={<route.component />} />
-                            ))}
-                        </Routes>
-                    </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>
-    );
-};
-
-export default Dashboard;

package/src/containers/DashboardWithLoader.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import { Await } from '@remix-run/react';
-import { Spinner } from '@admin-layout/chakra-ui';
-import { Alert } from '@chakra-ui/react';
-import {
-    useGetChannelsByUserQuery,
-    useGetAllChannelQuery,
-    useUsersToChatQuery,
-    useCurrentUserQuery,
-    useGetAllUsersQuery,
-} from 'common/graphql';
-import { useSelector } from 'react-redux';
-import Dashboard from './Dashboard';
-
-const DashboardWithLoader = (props) => {
-    const currentUserAuth0Id = useSelector((state: any) => state.user.authUserId);
-
-    const allUsers = useGetAllUsersQuery({ variables: {}, fetchPolicy: 'cache-only' });
-    const usersToChat = useUsersToChatQuery({ variables: { auth0Id: currentUserAuth0Id }, fetchPolicy: 'cache-only' });
-    const currentUserRes = useCurrentUserQuery({
-        variables: { auth0Id: currentUserAuth0Id },
-        fetchPolicy: 'cache-only',
-    });
-    const getChannel = useGetChannelsByUserQuery({ variables: {}, fetchPolicy: 'cache-only' });
-    const allChannels = useGetAllChannelQuery({ variables: {}, fetchPolicy: 'cache-only' });
-
-    return (
-        <React.Suspense fallback={<Spinner></Spinner>}>
-            <Await
-                resolve={Promise.all([allUsers, usersToChat, currentUserRes, allChannels, getChannel])}
-                errorElement={<Alert>Error loading Dashboard page!</Alert>}
-            >
-                <Dashboard data={[allUsers, usersToChat, currentUserRes, allChannels, getChannel]} {...props} />
-            </Await>
-        </React.Suspense>
-    );
-};
-export default DashboardWithLoader;

package/src/containers/Inbox.tsx

@@ -1,13 +0,0 @@
-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

@@ -1,12 +0,0 @@
-import * as React from 'react';
-
-interface Props {}
-
-const Loading: React.FC<Props> = () => (
-    <div>Loading</div>
-);
-
-// export const displayLoadingState = branch(
-//     props => props.data.loading,
-//     renderComponent(Loading)
-// );

package/src/containers/Messenger.tsx

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

package/src/containers/__tests__/ApolloProvider.test.tsx

@@ -1,48 +0,0 @@
-// import * as React from 'react';
-// import { shallow } from 'enzyme';
-// import { createStore } from 'redux';
-// import * as PropTypes from 'prop-types';
-
-// declare function require(name: string);
-// import * as TestUtils from 'react-addons-test-utils';
-
-// import ApolloClient from 'apollo-client';
-// import { ApolloProvider } from 'react-apollo';
-// import { InMemoryCache } from 'apollo-cache-inmemory';
-// import { ApolloLink, Observable } from 'apollo-link';
-// import { addTypenameToDocument } from 'apollo-utilities';
-
-// interface ChildContext {
-//     store: Object;
-//     client: Object;
-// }
-
-// describe('<ApolloProvider /> Component', () => {
-
-//     class Child extends React.Component<any, { store: any, client: any }> {
-//         public static contextTypes: React.ValidationMap<any> = {
-//             client: PropTypes.object.isRequired,
-//             store: PropTypes.object.isRequired,
-//         };
-
-//         public context: ChildContext;
-
-//         public render() {
-//             return <div />;
-//         }
-//     }
-
-//     const cache = new InMemoryCache();
-//     const client = new ApolloClient();
-//     const store = createStore(() => ({}));
-
-//     it('should render children components', () => {
-//         const wrapper = shallow(
-//             <ApolloProvider store={store} client={client}>
-//                 <div className="unique" />
-//             </ApolloProvider>,
-//         );
-
-//         expect(wrapper.contains(<div className="unique" />)).toBe(true);
-//     });
-// });