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

package/src/components/post/index.tsx

@@ -1,43 +1,120 @@
-
 import * as React from 'react';
-import { PostView } from './post_view';
-import { useFela } from 'react-fela';
-import { styleSheet2 } from './style';
-import { AiOutlineSearch, AiOutlineStar, AiOutlineQuestionCircle } from 'react-icons/ai';
-import {RiPushpinLine } from 'react-icons/ri';
-import {BsAt } from 'react-icons/bs';
-import {IoBookmarkOutline } from 'react-icons/io5';
+import {PostView} from './post_view';
+import {css} from '@emotion/css';
+import {styleSheet2} from './style';
+import {AiOutlineSearch, AiOutlineStar, AiOutlineQuestionCircle} from 'react-icons/ai';
+import {RiPushpinLine} from 'react-icons/ri';
+import {BsAt, BsChevronDown} from 'react-icons/bs';
+import {IoBookmarkOutline} from 'react-icons/io5';
+import {useEffect, useState} from "react";
+import {Menu, Dropdown} from 'antd';
+import {useDeleteChannelMutation} from '@messenger-box/platform-client';
+import {useHistory} from "react-router-dom";
+
+export const PostViewPage = ({channel, currentUsrId}) => {
+    const his = useHistory()
+
+    const [deleteChannel, deleteChannelResponse] = useDeleteChannelMutation({
+        // update: (cache, mutationResult) => {
+        //     const normalizedId = cache.identify({ ChannelId, __typename: 'Channel' });
+        //     cache.evict({ id: normalizedId });
+        //     cache.gc();
+        //     cache.modify({
+        //         fields: {
+        //             channels(existingChannels, {toReference}) {
+        //                 return [...existingChannels.filter(i => i !== mutationResult.data.deleteChannel)]
+        //             }
+        //         }
+        //     })
+        // },
+    })
+
+    const hendleDelete = async () => {
+        await deleteChannel({
+            variables: {
+                ChannelId: channel.id
+            },
+            update(cache) {
+                cache.modify({
+                    fields: {
+                        channels(existingChannels = [], {readField}) {
+                            return existingChannels.filter(
+                                postRef => channel.id !== readField('id', postRef)
+                            );
+                        },
+                    },
+                });
+                his.push(`/o/${his.location.pathname.split('/')[2]}/dashboard`)
+            }
+        })
+    }
+
+    const menu = (
+        <Menu>
+            <Menu.Item key="0">
+                <div style={{cursor: 'pointer'}} onClick={hendleDelete}>Delete Channel</div>
+            </Menu.Item>
+            {/*<Menu.Divider />*/}
+        </Menu>
+    );
 
-export const PostViewPage = (pros) => {
-    const {css} = useFela();
     return (
         <div>
-            <div className={css(styleSheet2.customStyle as any)}>
+            {channel ? <div className={css(styleSheet2.customStyle)}>
                 <div className="top-bar">
-                    <div className="top-left">
-                        <div className="text-nav">
-                            <button style={{border:'0px', background:'white'}}>
-                                <AiOutlineStar className="icon ml-0"/>
-                            </button>
-                            <h5>surveybot</h5>
-                            <span>BOT</span>
+                    {channel ?
+                        <div className="top-left">
+                            <div className="text-nav">
+                                <button style={{border: '0px', background: 'white'}}>
+                                    <AiOutlineStar className="icon ml-0"/>
+                                </button>
+                                <h5>{
+                                    channel.type !== "DIRECT" ?
+                                        channel.title :
+                                        channel.displayName.split('_').length === 2 ?
+                                            channel.displayName.split('_')[0].split('-')[0] !== currentUsrId ?
+                                                channel.displayName.split('_')[0].split('-')[1] :
+                                                channel.displayName.split('_')[1].split('-')[1] : channel.displayName
+                                }</h5>
+                                <Dropdown overlay={menu} trigger={['click']} className='down_menu'>
+                                    <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
+                                        <BsChevronDown className='down_menu'/>
+                                    </a>
+                                </Dropdown>
+                            </div>
+                            <p>{channel.description ? channel.description : "Add a channel description"}<a> Edit
+                                Description</a>
+                            </p>
                         </div>
-                        <p>Surveybot collects user feedback to improve Mattermost.<a href="#">Learn more.</a></p>
-                    </div>
+                        :
+                        <div className="top-left">
+                            <div className="text-nav">
+                                <button style={{border: '0px', background: 'white'}}>
+                                    <AiOutlineStar className="icon ml-0"/>
+                                </button>
+                                <h5>surveybot</h5>
+                                <span>BOT</span>
+                            </div>
+                            <p>Surveybot collects user feedback to improve Mattermost.<a href="#">Learn more.</a></p>
+                        </div>
+                    }
                     <div className="top-right">
-                        <button style={{border:'0px', background:'white'}}><RiPushpinLine className='icon'/></button>
+                        <button style={{border: '0px', background: 'white'}}><RiPushpinLine className='icon'/></button>
                         <div className="searchbar">
                             <AiOutlineSearch className='icon'/>
                             <input type='search' name="text" placeholder="search"/>
                         </div>
                         <div className="icons-nav">
-                            <button style={{border:'0px', background:'white'}}><BsAt className='icon'/></button>
-                            <button style={{border:'0px', background:'white'}}><IoBookmarkOutline className='icon-m' color='gray'/></button>
-                            <button style={{border:'0px', background:'white'}}><AiOutlineQuestionCircle className='icon'/></button>
+                            <button style={{border: '0px', background: 'white'}}><BsAt className='icon'/></button>
+                            <button style={{border: '0px', background: 'white'}}><IoBookmarkOutline className='icon-m'
+                                                                                                    color='gray'/>
+                            </button>
+                            <button style={{border: '0px', background: 'white'}}><AiOutlineQuestionCircle
+                                className='icon'/></button>
                         </div>
                     </div>
                 </div>
-            </div>
+            </div> : ''}
         </div>
     );
 };

package/src/components/post/post/post.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import PostContext from '../post_context';
 import PostAriaLabelDiv from '../post_aria_label_div';
 import { PostPreHeader } from '../post_pre_header/post_pre_header';
+import { useSetting } from '@adminide-stack/platform-client';
 import { PostHeader } from '../post_header/post_header';
 import { PostProfilePicture } from '../post_profile_picture/post_profile_picture';
 import * as PostUtils from '../../../utils/post_utils';
@@ -19,7 +20,9 @@ export const Post = (props) => {
     const [fadeOutHighlight, setFadeOutHighlight] = useState(false);
     const [isPinned, setIsPinned] = useState(true);
     const [isFlagged, setIsFlagged] = useState(true);
-
+    // const externalResource = generateUri('posts' as any, { _id: src.id }, 'props');
+    // const { updateConfiguration, loading, } = useSetting({ configKey: 'isPinned', overrides: { externalResource: externalResource }})
+    // updateConfiguration({ updateKey: 'isPInned', value: 'false', target: ConfigureationTarget.Machine, updateOverrides: { externalResource }})
     const post = {
         edit_at: 0,
         original_id: '',
@@ -261,3 +264,7 @@ export const Post = (props) => {
         </PostContext.Provider>
     );
 };
+function generateUri(arg0: any, arg1: { _id: any; }, arg2: string) {
+    throw new Error('Function not implemented.');
+}
+

package/src/components/post/post_header/post_header_custom_status.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import EmojiIcon from '../../../widgets/icons/emoji_icon';
-import { useFela } from 'react-fela';
+import { css } from '@emotion/css';
 import { styleSheet } from './style';
 
 export const PostHeaderCustomStatus = (props) => {
-    const { css } = useFela();
     const { userId, isSystemMessage, isBot } = props;
 
     // const isCustomStatusSet = userCustomStatus && userCustomStatus.emoji;

package/src/components/post/post_header/style.ts

@@ -1,9 +1,7 @@
 import { inherits } from 'util';
 
 export const styleSheet = {
-    postHeaderStyle: ({ theme }) => {
-        const { primaryColor } = theme;
-        return {
+    postHeaderStyle:  {
             display: 'inherit',
             '& .post__header-set-custom-status': {
                 // display: 'none',
@@ -52,6 +50,5 @@ export const styleSheet = {
                 {
                     // color: var(--button-bg);
                 },
-        };
-    },
-};
+        }
+} as any;

package/src/components/post/style.ts

@@ -1,7 +1,7 @@
 export const styleSheet2 = {
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 
-    customStyle: () => ({
+    customStyle: {
         '& .top-bar': {
             padding: '15px 15px',
             display: 'flex',
@@ -27,7 +27,7 @@ export const styleSheet2 = {
             },
         },
         '& .icon-popover': {
-            border: '1px solid red'
+            border: '1px solid red',
         },
         '& .top-right': {
             width: '50%',
@@ -55,6 +55,11 @@ export const styleSheet2 = {
                 backgroundColor: 'lightgray',
                 marginLeft: '10px',
             },
+            '& .down_menu': {
+                marginLeft: '5px',
+                color: '#808080',
+                cursor: 'pointer',
+            },
         },
         '& .main_avatar': {
             backgroundColor: 'black',
@@ -87,12 +92,21 @@ export const styleSheet2 = {
                 outline: 'none',
             },
         },
-        
         padding: '0px 15px',
-        '& .icon-pencil-outline:before': { content: "'\\fc92'"},
-    }),
+        '& .icon-pencil-outline:before': { content: "'\\fc92'" },
+        '& .di_chat_head': {
+            color: '#4b4a4e',
+            display: 'flex',
+            '> a': {
+                display: 'inline-block',
+                '> h5': {
+                    display: 'inline-block',
+                },
+            },
+        },
+    },
 
-    /* postStyles: () => ({
+    /* postStyles: {
         display: 'inharit',
         '& .d-flex': {
             display: ['-webkit-box !important', '-ms-flexbox !important', 'flex !important'],
@@ -20083,5 +20097,5 @@ export const styleSheet2 = {
         ],
         '& .LoadingBars.with-text .spinner': { marginRight: '5px' },
         '& .LoadingSpinner.with-text .spinner': { marginRight: '5px' },
-    }), */
-};
+    }, */
+} as any;

package/src/components/post/tutorial/tutorial_tip/tutorial_tip.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 

package/src/components/post/user_profile/user_profile.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { useState } from 'react';
 import OverlayTrigger, { BaseOverlayTrigger } from '../../../widgets/overlay_trigger';
 import { isMobile, isGuest } from '../../../utils/utils';

package/src/compute.tsx

@@ -1,53 +1,74 @@
 import * as React from 'react';
 import { IMenuPosition } from '@common-stack/client-react';
-import { FileOutlined } from '@ant-design/icons';
-import { userIsAuthenticatedRedir } from '@adminide-stack/user-auth0-browser';
-import { DashboardFill } from '@adminide-stack/platform-browser';
-import { IPreDefineAccountPermissions, ConfigurationTarget } from '@adminide-stack/core';
-import { getFilteredRoutes } from './utils';
-import { IntlProvider } from 'react-intl';
-import {PostViewPage} from "./components/post";
-import {useFela} from 'react-fela';
-import {styleSheet} from './style';
-
+import { MessageOutlined } from '@ant-design/icons';
+import { getFilteredMenus, getFilteredRoutes } from './utils';
 const Dashboard = React.lazy(() => import('./containers/Dashboard'));
 const Messenger = React.lazy(() => import('./containers/Messenger'));
+const Inbox = React.lazy(() => import('./containers/Inbox'))
+const DirectChannelView = React.lazy(() => import('./components/channel_view/DirectChannelView'))
+const PublicChannelView = React.lazy(() => import('./components/channel_view/PublicChannelView'))
 
-export const DashboardProvider = () => {
-    document.body.style.color = 'black'
-    document.body.style.background = 'white'
-    const {css} = useFela();
+// export const DashboardProvider = () => {
+//     document.body.style.color = 'black'
+//     document.body.style.background = 'white'
 
-    return (
-        <DashboardFill>
-            {/* <Dashboard/> */}
-            <div className={css(styleSheet.customStyle as any)}>
-                <div className="main_wraper">
-                    <IntlProvider locale="en">
-                        <PostViewPage/>
-                        <Messenger/>
-                    </IntlProvider>
-                </div>
-            </div>
-        </DashboardFill>
-    );
-};
+//     return (
+//         <DashboardFill>
+//             <Dashboard />
+//         </DashboardFill>
+//     );
+// };
 
 export const messengerPageStore: any[] = [
+    {
+        exact: false,
+        icon: <MessageOutlined/>,
+        key: 'dashboard',
+        component: Dashboard,
+        tab: 'Messenger',
+        position: IMenuPosition.MIDDLE,
+        name: 'Messenger',
+        path: '/o/:orgName/dashboard',
+    },
     // {
     //     exact: false,
-    //     icon: <FileOutlined />,
-    //     key: 'dashboard',
-    //     component: userIsAuthenticatedRedir(Dashboard),
+    //     icon: <MessageOutlined />,
+    //     key: 'messenger-chat',
+    //     component: Dashboard,
+    //     tab: 'Messenger',
     //     position: IMenuPosition.MIDDLE,
-    //     tab: 'Dashboard',
-    //     name: 'Dashboard',
-    //     path: '/:orgName/o/dashboard',
-    //     priority: 1,
+    //     name: 'Messenger',
+    //     path: '/o/:orgName/dashboard',
+    // },
+    // {
+    //     exact: false,
+    //     icon: <WechatOutlined/>,
+    //     key: 'inbox',
+    //     component: Inbox,
+    //     tab: 'Chat App',
+    //     position: IMenuPosition.MIDDLE,
+    //     name: 'Chat App',
+    //     path: '/o/:orgName/inbox',
     // },
 ];
 
-const selectedRoutesAndMenus = ['dashboard'];
+const selectedRoutesAndMenus = ['dashboard', 'inbox'];
+// get menus
+const filteredMenus = getFilteredMenus(messengerPageStore, selectedRoutesAndMenus);
 
+// get routes
 const filteredRoutes = getFilteredRoutes(messengerPageStore, selectedRoutesAndMenus);
-export { filteredRoutes };
+
+export {filteredRoutes, filteredMenus};
+export const dashboardRoutes = [
+    {
+        path: `/o/:orgName/dashboard/message/:channelName`,
+        exact: true,
+        component: DirectChannelView
+    },
+    {
+        path: `/o/:orgName/dashboard/channel/:channelName`,
+        exact: true,
+        component: PublicChannelView
+    }
+];