initiate messaging sidebar

mgilangjanuar · Oct 1, 2021 · 462d87a · 462d87a
1 parent b2d250b
commit 462d87a
Show file tree

Hide file tree

Showing 7 changed files with 553 additions and 15 deletions.
diff --git a/web/package.json b/web/package.json
@@ -13,6 +13,7 @@
     "pretty-bytes": "^5.6.0",
     "qs": "^6.10.1",
     "react": "^17.0.2",
+    "react-chat-elements": "^10.16.0",
     "react-dom": "^17.0.2",
     "react-github-btn": "^1.2.1",
     "react-markdown": "^7.0.1",

diff --git a/web/src/pages/View.tsx b/web/src/pages/View.tsx
@@ -133,7 +133,7 @@ const View: React.FC<PageProps> = ({ match }) => {
   return <>
     <Layout style={{ minHeight: '100vh', overflow: 'hidden', background: '#2a2a2a', color: 'rgb(251,251,254)' }}>
       <Layout.Content>
-        {data?.file.type === 'image' ? <img style={{ maxHeight: '100%', position: 'absolute', margin: 'auto', top: 0, right: 0, bottom: 0, left: 0, imageOrientation: 'from-image' }} src={links?.raw} /> : <iframe onLoad={(e: any) => {
+        {data?.file.type === 'image' ? <img style={{ maxHeight: '100%', maxWidth: '100%', position: 'absolute', margin: 'auto', top: 0, right: 0, bottom: 0, left: 0, imageOrientation: 'from-image' }} src={links?.raw} /> : <iframe onLoad={(e: any) => {
           try {
             e.target.contentWindow.document.body.style.margin = 0
             e.target.contentWindow.document.body.style.color = 'rgb(251,251,254)'
@@ -164,7 +164,7 @@ const View: React.FC<PageProps> = ({ match }) => {
             labelStyle={{ color: '#fff' }} column={1}>
 
             <Descriptions.Item label="Size">{data?.file?.size && prettyBytes(data?.file?.size)}</Descriptions.Item>
-            <Descriptions.Item label="Uploaded At">{moment(data?.file.uploaded_at).format('llll')}</Descriptions.Item>
+            <Descriptions.Item label="Uploaded At">{moment(data?.file.uploaded_at).local().format('llll')}</Descriptions.Item>
             {user?.user && <Descriptions.Item label="Uploaded By">
               <a href={`https://t.me/${user?.user.username}`} target="_blank">@{user?.user.username}</a>
             </Descriptions.Item>}

diff --git a/web/src/pages/dashboard/components/Messaging.tsx b/web/src/pages/dashboard/components/Messaging.tsx
@@ -0,0 +1,246 @@
+import { ArrowLeftOutlined } from '@ant-design/icons'
+import { Button, Layout } from 'antd'
+import React, { useState, useEffect } from 'react'
+import { useDebounce } from 'use-debounce/lib'
+import { ChatList } from 'react-chat-elements'
+
+import 'react-chat-elements/dist/main.css'
+
+interface Props {
+  collapsed?: boolean,
+  setCollapsed: (data: boolean) => void
+}
+
+const Messaging: React.FC<Props> = ({ collapsed, setCollapsed }) => {
+  const [contentStyle, setContentStyle] = useState<{ display: string } | undefined>()
+  const [showContent] = useDebounce(collapsed, 250)
+
+  useEffect(() => {
+    if (collapsed) {
+      setContentStyle({ display: 'none' })
+    }
+  }, [collapsed])
+
+  useEffect(() => {
+    if (!showContent) {
+      setContentStyle(undefined)
+    }
+  }, [showContent])
+
+  return <Layout.Sider
+    theme="light"
+    width={340}
+    trigger={null}
+    collapsedWidth={0}
+    collapsed={collapsed}
+    onCollapse={setCollapsed}
+    style={{ background: 'rgb(240, 242, 245) none repeat scroll 0% 0%' }}>
+    <Layout.Header style={{ background: '#0088CC' }}>
+      <div key="logo" className="logo">
+        <Button icon={<ArrowLeftOutlined />} size="large" type="link" style={{ color: '#fff' }} onClick={() => setCollapsed(true)} />
+        Messages
+      </div>
+    </Layout.Header>
+    <Layout.Content className="container" style={{ ...contentStyle || {} }}>
+      <ChatList
+        className='chat-list'
+        dataSource={[
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+          {
+            avatar: 'https://facebook.github.io/react/img/logo.svg',
+            alt: 'Reactjs',
+            title: 'Facebook',
+            subtitle: 'What are you doing?',
+            date: new Date(),
+            unread: 0,
+          },
+        ]}
+      />
+    </Layout.Content>
+  </Layout.Sider>
+}
+
+export default Messaging
diff --git a/web/src/pages/dashboard/components/TableFiles.tsx b/web/src/pages/dashboard/components/TableFiles.tsx
@@ -212,7 +212,7 @@ const TableFiles: React.FC<Props> = ({
       responsive: ['md'],
       width: 250,
       align: 'center',
-      render: (value: any, row: any) => row.upload_progress !== null ? <>Uploading {Number((row.upload_progress * 100).toFixed(2))}%</> : moment(value).format('llll')
+      render: (value: any, row: any) => row.upload_progress !== null ? <>Uploading {Number((row.upload_progress * 100).toFixed(2))}%</> : moment(value).local().format('llll')
     }
   ]
 

diff --git a/web/src/pages/dashboard/index.tsx b/web/src/pages/dashboard/index.tsx
@@ -1,4 +1,4 @@
-import { FolderAddOutlined, HomeOutlined } from '@ant-design/icons'
+import { CommentOutlined, FolderAddOutlined, HomeOutlined } from '@ant-design/icons'
 import {
   Alert,
   Button,
@@ -24,6 +24,7 @@ import Footer from '../components/Footer'
 import Navbar from '../components/Navbar'
 import AddFolder from './components/AddFolder'
 import Breadcrumb from './components/Breadcrumb'
+import Messaging from './components/Messaging'
 import Remove from './components/Remove'
 import Rename from './components/Rename'
 import Share from './components/Share'
@@ -58,6 +59,7 @@ const Dashboard: React.FC<PageProps> = ({ match }) => {
   const [scrollTop, setScrollTop] = useState<number>(0)
   const [fileList, setFileList] = useState<any[]>([])
   const [loading, setLoading] = useState<boolean>()
+  const [collapsedMessaging, setCollapsedMessaging] = useState<boolean>(true)
 
   const { data: me, error: errorMe } = useSWRImmutable('/users/me', fetcher)
   const { data: filesUpload } = useSWR(fileList?.filter(file => file.response?.file)?.length
@@ -275,10 +277,10 @@ const Dashboard: React.FC<PageProps> = ({ match }) => {
     setAction(undefined)
   }
 
-  return <>
-    <Navbar user={me?.user} />
-    <Layout.Content className="container" style={{ paddingTop: 0 }}>
-      <Row>
+  return <Layout>
+    <Layout.Content>
+      <Navbar user={me?.user} />
+      <Row style={{ minHeight: '80vh' }}>
         <Col lg={{ span: 18, offset: 3 }} md={{ span: 20, offset: 2 }} span={24}>
           <Typography.Paragraph>
             <Menu mode="horizontal" selectedKeys={[params?.shared ? 'shared' : 'mine']} onClick={({ key }) => changeTab(key)}>
@@ -306,6 +308,7 @@ const Dashboard: React.FC<PageProps> = ({ match }) => {
               {tab === 'mine' ? <>
                 <Button shape="circle" icon={<FolderAddOutlined />} onClick={() => setAddFolder(true)} />
               </> : ''}
+              <Button shape="circle" icon={<CommentOutlined />} onClick={() => setCollapsedMessaging(!collapsedMessaging)} />
               <Input.Search className="input-search-round" placeholder="Search..." enterButton onSearch={setKeyword} allowClear />
             </Space>
           </Typography.Paragraph>
@@ -388,9 +391,10 @@ const Dashboard: React.FC<PageProps> = ({ match }) => {
         me={me}
         dataSource={[data, setData]}
         dataSelect={[selectShare, setSelectShare]} />
+      <Footer />
     </Layout.Content>
-    <Footer />
-  </>
+    <Messaging collapsed={collapsedMessaging} setCollapsed={setCollapsedMessaging} />
+  </Layout>
 }
 
 export default Dashboard
diff --git a/web/tsconfig.json b/web/tsconfig.json
@@ -18,7 +18,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "noImplicitAny": false
   },
   "include": [
     "src"