Merge pull request #365 from mgilangjanuar/staging

Release v2.5.0

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "api",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "main": "dist/index.js",
   "license": "MIT",
   "private": true,
@@ -48,7 +48,7 @@
     "serialize-error": "^8.1.0",
     "serverless-http": "^3.0.1",
     "source-map-support": "^0.5.19",
-    "teledrive-client": "^2.7.23",
+    "teledrive-client": "^2.8.2",
     "uuid-random": "^1.3.2"
   },
   "devDependencies": {

api/src/api/v1/Files.ts

@@ -996,7 +996,7 @@ export class Files {
           AND: [
             { name: file.name },
             { type: file.type },
-            { size: file.size || null },
+            { size: Number(file.size) || null },
             {
               parent_id: file.parent_id ? { not: null } : null
             }
@@ -1008,6 +1008,7 @@ export class Files {
           await prisma.files.create({
             data: {
               ...file,
+              size: Number(file.size),
               user_id: req.user.id,
             }
           })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "teledrive",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "repository": "git@github.com:mgilangjanuar/teledrive.git",
   "author": "M Gilang Januar <mgilangjanuar@teledriveapp.com>",
   "license": "MIT",

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "private": true,
   "dependencies": {
     "@ideasio/add-to-homescreen-react": "^1.0.10",
@@ -44,7 +44,7 @@
     "streamsaver": "^2.0.5",
     "sw-precache-cra": "^1.0.0",
     "swr": "^1.0.0",
-    "teledrive-client": "^2.7.23",
+    "teledrive-client": "^2.8.2",
     "through2": "^4.0.2",
     "typescript": "^4.0.3",
     "use-debounce": "^7.0.1",
@@ -109,4 +109,4 @@
     "workbox-strategies": "^5.1.3",
     "workbox-streams": "^5.1.3"
   }
-}
+}

web/src/pages/Settings.tsx

@@ -1,24 +1,26 @@
 import {
   ArrowLeftOutlined,
   BugOutlined,
+  CloudDownloadOutlined,
   CloudUploadOutlined,
   CrownOutlined,
   DeleteOutlined,
   DownloadOutlined,
   ExpandAltOutlined,
   ExperimentOutlined,
   FrownOutlined,
-  LoginOutlined,
   InfoOutlined,
+  ImportOutlined,
+  LoginOutlined,
   LogoutOutlined,
   MobileOutlined,
   MonitorOutlined,
   ReloadOutlined,
+  ExportOutlined,
   SkinOutlined,
   SyncOutlined,
   WarningOutlined
 } from '@ant-design/icons'
-import { Api } from 'teledrive-client'
 import {
   Avatar,
   Button,
@@ -38,19 +40,21 @@ import {
   Space,
   Switch,
   Tooltip,
-  Typography
+  Typography,
+  Upload
 } from 'antd'
 import { useForm } from 'antd/es/form/Form'
+import prettyBytes from 'pretty-bytes'
 import pwaInstallHandler from 'pwa-install-handler'
 import React, { useEffect, useState } from 'react'
 import { useThemeSwitcher } from 'react-css-theme-switcher'
 import { useHistory } from 'react-router-dom'
 import useSWR from 'swr'
+import { Api } from 'teledrive-client'
 import * as serviceWorkerRegistration from '../serviceWorkerRegistration'
 import { VERSION } from '../utils/Constant'
 import { apiUrl, fetcher, req } from '../utils/Fetcher'
 import { telegramClient } from '../utils/Telegram'
-import prettyBytes from 'pretty-bytes'
 
 interface Props {
   me?: any,
@@ -64,7 +68,6 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
   const [logoutConfirmation, setLogoutConfirmation] = useState<boolean>(false)
   const [removeConfirmation, setRemoveConfirmation] = useState<boolean>(false)
   const [expFeatures, setExpFeatures] = useState<boolean>(false)
-  const [changeDCConfirmation, setChangeDCConfirmation] = useState<string>()
   const [loadingChangeServer, setLoadingChangeServer] = useState<boolean>(false)
   const [loadingRemove, setLoadingRemove] = useState<boolean>(false)
   const [destroySession, setDestroySession] = useState<boolean>(false)
@@ -156,7 +159,7 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
     }
   }
 
-  const changeServer = async () => {
+  const exportFilesData = async () => {
     setLoadingChangeServer(true)
     const { data } = await req.get('/files', { params: {
       full_properties: 1,
@@ -174,20 +177,15 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
       } })
       files.push(...data.files)
     }
-    const frame = document.createElement('iframe')
-    frame.style.display = 'none'
-    frame.src = `https://${changeDCConfirmation === 'sg' ? '' : `${changeDCConfirmation}.`}teledriveapp.com`
-    document.body.appendChild(frame)
-
-    await new Promise(res => setTimeout(res, 5000))
-    frame.contentWindow?.postMessage({
-      type: 'files',
-      files
-    }, '*')
-
-    await req.post('/auth/logout', {}, { params: { destroySession: 1 } })
+
+    const hiddenElement = document.createElement('a')
+
+    hiddenElement.href = 'data:attachment/text,' + encodeURI(JSON.stringify(files) || '')
+    hiddenElement.target = '_blank'
+    hiddenElement.download = 'files.json'
+    hiddenElement.click()
+
     setLoadingChangeServer(false)
-    return window.location.replace(`https://${changeDCConfirmation === 'sg' ? '' : `${changeDCConfirmation}.`}teledriveapp.com/login`)
   }
 
   const downloadLogs = async () => {
@@ -236,18 +234,25 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
           </Row>]}>
             <Form form={form} layout="horizontal" labelAlign="left" labelCol={{ span: 12 }} wrapperCol={{ span: 12 }}>
               {stats?.stats && <List header="Stats Info" bordered={false}>
+                <List.Item key="fileTotalSize">
+                  <List.Item.Meta title="Uploaded Files" description={<Space direction="horizontal" align="center" style={{ marginTop: '13px' }}>
+                    <Progress width={150} type="circle" status="active" format={() => <>
+                      <Typography.Title level={3}>{prettyBytes(Number(stats.stats.totalUserFilesSize))}</Typography.Title>
+                      <Typography.Paragraph style={{ fontSize: '12px' }} type="secondary">User Files Size</Typography.Paragraph>
+                    </>} percent={Number((Number(stats.stats.totalUserFilesSize) / Number(stats.stats.totalFilesSize) * 100).toFixed(1))} />
+                    <Progress width={150} type="circle" status="success" format={() => <>
+                      <Typography.Title level={3}>{prettyBytes(Number(stats.stats.totalFilesSize))}</Typography.Title>
+                      <Typography.Paragraph style={{ fontSize: '12px' }} type="secondary">Total Files Size</Typography.Paragraph>
+                    </>} percent={100} />
+                  </Space>} />
+                </List.Item>
+
                 <List.Item key="system">
                   <List.Item.Meta title="System Disk Usage" description={<Tooltip title={`Available ${prettyBytes(stats.stats.system.free)}/${prettyBytes(stats.stats.system.size)}`}>
                     <Progress status="active" percent={Number((stats.stats.system.free / stats.stats.system.size * 100).toFixed(1))} />
                   </Tooltip>} />
                 </List.Item>
 
-                <List.Item key="fileTotalSize">
-                  <List.Item.Meta title="Files Uploaded Size" description={<Tooltip title={`You take ${prettyBytes(Number(stats.stats.totalUserFilesSize))}/${prettyBytes(Number(stats.stats.totalFilesSize))} from total uploaded files`}>
-                    <Progress status="active" percent={Number((Number(stats.stats.totalUserFilesSize) / Number(stats.stats.totalFilesSize) * 100).toFixed(1))} />
-                  </Tooltip>} />
-                </List.Item>
-
                 <List.Item key="cached">
                   <List.Item.Meta title="Cached Total Size" description={<Tooltip title={prettyBytes(stats.stats.cachedSize)}>
                     <Progress status="active" percent={Number((stats.stats.cachedSize / stats.stats.system.size * 100).toFixed(1))} />
@@ -305,6 +310,32 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
                 </List.Item>
               </List>
 
+              <List header="Data">
+                <List.Item key="export" actions={[<Form.Item>
+                  <Button shape="round" loading={loadingChangeServer} icon={<CloudDownloadOutlined />} onClick={exportFilesData}>Export</Button>
+                </Form.Item>]}>
+                  <List.Item.Meta title={<Space><ExportOutlined /><>Save Data</></Space>} description="Export your files ref data as JSON" />
+                </List.Item>
+
+                <List.Item key="import" actions={[<Form.Item>
+                  <Button shape="round" icon={<CloudUploadOutlined />}>
+                    <Upload name="upload" fileList={[]} multiple={false} beforeUpload={file => {
+                      const fileReader = new FileReader()
+                      fileReader.readAsText(file, 'UTF-8')
+                      fileReader.onload = async ({ target }) => {
+                        await req.post('/files/filesSync', { files: JSON.parse(target?.result as string || '[]') })
+                        notification.success({
+                          message: 'Import Successfully',
+                          description: 'Your files has been imported successfully but you need to reshare your files again to update your shared files',
+                        })
+                      }
+                    }}>Import</Upload>
+                  </Button>
+                </Form.Item>]}>
+                  <List.Item.Meta title={<Space><ImportOutlined /><>Import Data</></Space>} description="Import your files ref data" />
+                </List.Item>
+              </List>
+
               <List header="Danger Zone">
                 <List.Item key="join-exp" actions={[<Form.Item>
                   <Button shape="round" icon={localStorage.getItem('experimental') && localStorage.getItem('session') ? <LogoutOutlined /> : <LoginOutlined />} onClick={async () => {
@@ -325,15 +356,6 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
                 </Form.Item>]}>
                   <List.Item.Meta title={<Space><ExperimentOutlined /><>Experimental</></Space>} description="Join to the experimental features" />
                 </List.Item>
-                {/* <List.Item key="change-server" actions={[<Form.Item name="change_server">
-                  {dc && <Select className="change-server ghost" onChange={server => dc !== server ? setChangeDCConfirmation(server) : undefined}>
-                    <Select.Option value="sg">&#127480;&#127468; Singapore</Select.Option>
-                    <Select.Option value="ge">&#127465;&#127466; Frankfurt</Select.Option>
-                    <Select.Option value="us">&#127482;&#127480; New York</Select.Option>
-                  </Select>}
-                </Form.Item>]}>
-                  <List.Item.Meta title={<Space><GlobalOutlined /><>Change Server</></Space>} description="Migrate to another datacenter" />
-                </List.Item> */}
 
                 <List.Item key="delete-account" actions={[<Form.Item>
                   <Button shape="round" danger type="primary" icon={<FrownOutlined />} onClick={() => setRemoveConfirmation(true)}>Delete</Button>
@@ -384,7 +406,7 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
       </Form>
     </Modal>
 
-    <Modal title={<Typography.Text>
+    {/* <Modal title={<Typography.Text>
       <Typography.Text type="warning"><WarningOutlined /></Typography.Text> Change Server Confirmation
     </Typography.Text>}
     visible={!!changeDCConfirmation}
@@ -398,7 +420,7 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
       <Typography.Paragraph type="secondary">
         You'll be logged out and redirected to the new server. Please login again to that new server.
       </Typography.Paragraph>
-    </Modal>
+    </Modal> */}
 
     <Modal title={<Typography.Text>
       <Typography.Text><InfoOutlined /></Typography.Text> Report Bugs

web/src/pages/dashboard/components/TableFiles.tsx

@@ -246,7 +246,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).local().format('llll')
+      render: (value: any, row: any) => row.upload_progress !== null ? <>Uploading...</> : moment(value).local().format('llll')
     }
   ]
 

web/src/pages/dashboard/components/Upload.tsx

@@ -73,7 +73,7 @@ const Upload: React.FC<Props> = ({ dataFileList: [fileList, setFileList], parent
 
       if (localStorage.getItem('experimental')) {
         let client = await telegramClient.connect()
-        await Promise.all(Array.from(Array(fileParts).keys()).map(async j => {
+        for (let j = 0; j < fileParts; j++) {
           const fileBlob = file.slice(j * MAX_UPLOAD_SIZE, Math.min(j * MAX_UPLOAD_SIZE + MAX_UPLOAD_SIZE, file.size))
           const parts = Math.ceil(fileBlob.size / CHUNK_SIZE)
 
@@ -186,10 +186,9 @@ const Upload: React.FC<Props> = ({ dataFileList: [fileList, setFileList], parent
               await retry(async () => await uploadPart(parts - 1), async () => client = await telegramClient.connect())
             }
           }
-
-        }))
+        }
       } else {
-        await Promise.all(Array.from(Array(fileParts).keys()).map(async j => {
+        for (let j = 0; j < fileParts; j++) {
           const fileBlob = file.slice(j * MAX_UPLOAD_SIZE, Math.min(j * MAX_UPLOAD_SIZE + MAX_UPLOAD_SIZE, file.size))
           const parts = Math.ceil(fileBlob.size / CHUNK_SIZE)
 
@@ -255,7 +254,7 @@ const Upload: React.FC<Props> = ({ dataFileList: [fileList, setFileList], parent
               await uploadPart(parts - 1)
             }
           }
-        }))
+        }
       }
 
       // notification.close(`upload-${file.uid}`)

web/src/pages/dashboard/index.tsx

@@ -69,6 +69,7 @@ const Dashboard: React.FC<PageProps & { me?: any, errorMe?: any }> = ({ match })
   const [syncConfirmation, setSyncConfirmation] = useState<boolean>()
   const [collapsedMessaging, setCollapsedMessaging] = useState<boolean>(true)
   const [collapsedView, setCollapsedView] = useState<string>()
+  const [init, setInit] = useState<boolean>()
 
   const { data: me, error: errorMe } = useSWR('/users/me', fetcher)
   const { data: filesUpload } = useSWR(fileList?.filter(file => file.response?.file)?.length
@@ -105,8 +106,11 @@ const Dashboard: React.FC<PageProps & { me?: any, errorMe?: any }> = ({ match })
 
   useEffect(() => {
     // init config
-    req.get('/config')
-  }, [])
+    if (!init) {
+      req.get('/config')
+      setInit(true)
+    }
+  }, [init])
 
   useEffect(() => {
     if (window.localStorage.getItem('session')) {

web/src/utils/Constant.ts

@@ -1,4 +1,4 @@
-export const VERSION = '2.4.0'
+export const VERSION = '2.5.0'
 export const MAX_UPLOAD_SIZE = 2_000_000_000
 export const CHUNK_SIZE = 512 * 1024
 export const RETRY_COUNT = 50

yarn.lock

@@ -14663,10 +14663,10 @@ tar@^6.0.2:
     mkdirp "^1.0.3"
     yallist "^4.0.0"
 
-teledrive-client@^2.7.23:
-  version "2.7.23"
-  resolved "https://registry.yarnpkg.com/teledrive-client/-/teledrive-client-2.7.23.tgz#fa3de27188d1f242ca5b531b532b8470f037d955"
-  integrity sha512-++Z1rhUxiBJCulLLhspTZz70oVv0JDxacjKy3rne+a5vihG1RvR2Jb+6wE9qY/PMPI8WTjsHNwclVgVXgDB8/w==
+teledrive-client@^2.8.2:
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/teledrive-client/-/teledrive-client-2.8.2.tgz#825ff5353a5a8f05460665a440068ed3d06d3e58"
+  integrity sha512-tsbrqFEHurYepyvBCw3fh3/lXzTT1PDy2jcyqr8b4wh6QHbfgRYAJw9J2r/DLRSzL9wahcLlgyn3WYXczxfmCQ==
   dependencies:
     "@cryptography/aes" "^0.1.1"
     async-mutex "^0.3.0"