Merge pull request #225 from mgilangjanuar/staging

Release v1.8.3

package.json

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

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "1.8.0",
+  "version": "1.8.3",
   "main": "dist/index.js",
   "license": "MIT",
   "private": true,

server/src/api/v1/Files.ts

@@ -18,7 +18,7 @@ export class Files {
 
   @Endpoint.GET('/', { middlewares: [AuthMaybe] })
   public async find(req: Request, res: Response): Promise<any> {
-    const { sort, offset, limit, shared, t: _t, ...filters } = req.query
+    const { sort, offset, limit, shared, exclude_parts: excludeParts, t: _t, ...filters } = req.query
     const parent = filters?.parent_id ? await Model.findOne(filters.parent_id as string) : null
     if (filters?.parent_id && !parent) {
       throw { status: 404, body: { error: 'Parent not found' } }
@@ -39,6 +39,9 @@ export class Files {
       .where(where, {
         user: shared ? req.user?.username : req.user?.id  })
       .andWhere(buildWhereQuery(filters, 'files.') || 'true')
+    if (excludeParts === 'true' || excludeParts === '1') {
+      query = query.andWhere('(files.name ~ \'.part0*1$\' or files.name !~ \'.part[0-9]+$\')')
+    }
     if (shared && where !== 'true') {
       query = query.leftJoin('files.parent', 'parent')
     }

server/src/api/v1/Users.ts

@@ -65,7 +65,7 @@ export class Users {
   @Endpoint.PATCH('/me/settings', { middlewares: [Auth] })
   public async settings(req: Request, res: Response): Promise<any> {
     const { settings } = req.body
-    if (settings.theme === 'dark' && (!req.user.plan || req.user.plan === 'free')) {
+    if (settings.theme === 'dark' && (!req.user.plan || req.user.plan === 'free') && moment().format('l') !== '2/2/2022') {
       throw { status: 402, body: { error: 'You need to upgrade your plan to use dark theme' } }
     }
     req.user.settings = {

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "1.8.0",
+  "version": "1.8.3",
   "private": true,
   "dependencies": {
     "@ideasio/add-to-homescreen-react": "^1.0.10",

web/public/index.html

@@ -31,7 +31,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>TeleDrive - The Free Unlimited Cloud Storage</title>
-    <script async src="https://cdn.splitbee.io/sb.js"></script>
+    <script async defer data-website-id="d189cc62-88d7-46dd-897c-5d5c88e4085b" src="https://analytics.teledriveapp.com/umami.js"></script>
     <style>
       @font-face { font-family: 'Plus Jakarta Display Medium'; src: url('PlusJakartaDisplay-Medium.woff'); }
       @font-face { font-family: 'Plus Jakarta Display Medium'; src: url('PlusJakartaDisplay-Medium.woff2'); }

web/src/App.tsx

@@ -12,6 +12,7 @@ import Navbar from './pages/components/Navbar'
 import { fetcher } from './utils/Fetcher'
 
 import 'antd-country-phone-input/dist/index.css'
+import moment from 'moment'
 
 const Dashboard = lazy(
   () => import(/* webpackChunkName: 'DashboardPage' */ './pages/dashboard')
@@ -23,7 +24,7 @@ const Home = lazy(
   () => import(/* webpackChunkName: 'HomePage' */ './pages/Home')
 )
 const View = lazy(
-  () => import(/* webpackChunkName: 'ViewPage' */ './pages/View')
+  () => import(/* webpackChunkName: 'ViewPage' */ './pages/view/index')
 )
 const Login = lazy(
   () => import(/* webpackChunkName: 'LoginPage' */ './pages/Login')
@@ -59,10 +60,12 @@ function App(): React.ReactElement {
   useEffect(() => document.querySelector('.App')?.scrollIntoView(), [pathname])
 
   useEffect(() => {
-    if (me?.user.settings?.theme === 'dark') {
+    if (me?.user.settings?.theme === 'dark' && (moment().format('l') === '2/2/2022' || me?.user.plan && me?.user.plan !== 'free')) {
       switcher({ theme: 'dark' })
-    } else {
+    } else if (me?.user.settings?.theme === 'light') {
       switcher({ theme: 'light' })
+    } else {
+      switcher({ theme: moment().format('l') === '2/2/2022' ? 'dark' : 'light' })
     }
   }, [me])
 

web/src/pages/Home.tsx

@@ -2,6 +2,7 @@ import { ArrowRightOutlined, CloudOutlined, DollarCircleOutlined, SecurityScanOu
 import { Avatar, Button, Card, Carousel, Col, Image, Layout, Row, Space, Tooltip, Typography } from 'antd'
 import millify from 'millify'
 import React, { useEffect, useState } from 'react'
+import { useThemeSwitcher } from 'react-css-theme-switcher'
 import GitHubButton from 'react-github-btn'
 import { useHistory } from 'react-router-dom'
 import { Follow, Tweet } from 'react-twitter-widgets'
@@ -17,6 +18,7 @@ const Home: React.FC<Props> = ({ me }) => {
   const { data } = useSWRImmutable('/github/contributors', fetcher)
   const { data: dataAnalytics } = useSWRImmutable('/utils/simpleAnalytics', fetcher)
   const [visiblePreview, setVisiblePreview] = useState<boolean>()
+  const { currentTheme } = useThemeSwitcher()
   const history = useHistory()
 
   useEffect(() => {
@@ -177,7 +179,7 @@ const Home: React.FC<Props> = ({ me }) => {
                 <Space wrap size={30}>
                   <Tooltip placement="bottom" title="Bahasa.ai - Chatbot Which Serves Customers Fully" key="bahasa-ai">
                     <a href="https://bahasa.ai" target="_blank">
-                      <img style={{ width: '100%', maxWidth: '212px' }} src={me?.user.settings?.theme === 'dark' ? 'https://uploads-ssl.webflow.com/5fb8f118741e70818f103554/5fefb0768f76054a6f40c1e5_Bahasa-ai%20white%20(logo).svg' : 'https://uploads-ssl.webflow.com/5fb8f118741e70818f103554/5feefbc08ef40333bbd2f92e_bahasa-ai-logo-blue%20(2021)%404x-p-500.png'} />
+                      <img style={{ width: '100%', maxWidth: '212px' }} src={currentTheme === 'dark' ? 'https://uploads-ssl.webflow.com/5fb8f118741e70818f103554/5fefb0768f76054a6f40c1e5_Bahasa-ai%20white%20(logo).svg' : 'https://uploads-ssl.webflow.com/5fb8f118741e70818f103554/5feefbc08ef40333bbd2f92e_bahasa-ai-logo-blue%20(2021)%404x-p-500.png'} />
                     </a>
                   </Tooltip>
                   <Tooltip  placement="bottom" title="DigitalOcean – The developer cloud" key="digitalocean">

web/src/pages/Login.tsx

@@ -1,9 +1,10 @@
-import { ArrowRightOutlined, CheckCircleTwoTone, LoginOutlined, GlobalOutlined } from '@ant-design/icons'
+import { ArrowRightOutlined, CheckCircleTwoTone, GlobalOutlined, LoginOutlined } from '@ant-design/icons'
 import { Button, Card, Col, Collapse, Form, Input, Layout, notification, Row, Spin, Steps, Typography } from 'antd'
 import CountryPhoneInput, { ConfigProvider } from 'antd-country-phone-input'
 import { useForm } from 'antd/lib/form/Form'
 import JSCookie from 'js-cookie'
 import React, { useEffect, useState } from 'react'
+import { useThemeSwitcher } from 'react-css-theme-switcher'
 import OtpInput from 'react-otp-input'
 import QRCode from 'react-qr-code'
 import { useHistory } from 'react-router'
@@ -31,6 +32,7 @@ const Login: React.FC<Props> = ({ me }) => {
   const [method, setMethod] = useState<'phoneNumber' | 'qrCode'>('phoneNumber')
   const { data: _ } = useSWRImmutable('/utils/ipinfo', fetcher, { onSuccess: ({ ipinfo }) => setPhoneData(phoneData?.short ? phoneData : { short: ipinfo?.country || 'ID' }) })
   const [qrCode, setQrCode] = useState<{ loginToken: string, accessToken: string, session?: string }>()
+  const { currentTheme } = useThemeSwitcher()
 
   useEffect(() => {
     if (window.location.host === 'ge.teledriveapp.com') {
@@ -322,7 +324,7 @@ const Login: React.FC<Props> = ({ me }) => {
                       margin: '0 0.3rem 1rem 0',
                       borderRadius: '4px',
                       fontSize: '1.2rem',
-                      background: me?.user.settings?.theme === 'dark' ? 'rgba(255, 255, 255, 0.04)' : undefined,
+                      background: currentTheme === 'dark' ? 'rgba(255, 255, 255, 0.04)' : undefined,
                       border: '1px solid rgba(0, 0, 0, 0.3)' }} />
                     {countdown ? <Typography.Paragraph type="secondary">Re-send in {countdown}s...</Typography.Paragraph> : <Typography.Paragraph>
                       <Button type="link" onClick={() => sendCode()}>Re-send code</Button>

web/src/pages/Settings.tsx

@@ -3,6 +3,7 @@ import { Avatar, Button, Card, Col, Form, Input, Layout, List, Modal, notificati
 import { useForm } from 'antd/es/form/Form'
 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 useSWRImmutable from 'swr/immutable'
 import * as serviceWorkerRegistration from '../serviceWorkerRegistration'
@@ -22,6 +23,7 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
   const [pwa, setPwa] = useState<{ canInstall: boolean, install: () => Promise<boolean> }>()
   const [formRemoval] = useForm()
   const { data: respVersion } = useSWRImmutable('/utils/version', fetcher)
+  const { currentTheme } = useThemeSwitcher()
 
   const save = async (settings: any): Promise<void> => {
     try {
@@ -112,7 +114,7 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
                 </List.Item>
 
                 <List.Item key="dark-mode" actions={[<Form.Item name="dark_mode">
-                  <Switch onChange={(val: boolean) => save({ theme: val ? 'dark' : 'light' }).then(window.location.reload)} checked={me?.user.settings?.theme === 'dark'} defaultChecked={me?.user.settings?.theme === 'dark'} />
+                  <Switch onChange={(val: boolean) => save({ theme: val ? 'dark' : 'light' }).then(window.location.reload)} checked={currentTheme === 'dark'} defaultChecked={currentTheme === 'dark'} />
                 </Form.Item>]}>
                   <List.Item.Meta title="Dark Mode" description="Join the dark side" />
                 </List.Item>

web/src/pages/components/Footer.tsx

@@ -1,13 +1,15 @@
 import { GithubOutlined, TwitterOutlined } from '@ant-design/icons'
 import { Button, Col, Divider, Layout, Row, Space, Typography } from 'antd'
 import React from 'react'
+import { useThemeSwitcher } from 'react-css-theme-switcher'
 import { Link } from 'react-router-dom'
 
 interface Props {
   me?: any
 }
 
-const Footer: React.FC<Props> = ({ me }) => {
+const Footer: React.FC<Props> = () => {
+  const { currentTheme } = useThemeSwitcher()
   return <>
     <Layout.Footer style={{ background: '#f0f2f5', paddingTop: '50px' }}>
       <Row>
@@ -16,7 +18,7 @@ const Footer: React.FC<Props> = ({ me }) => {
             <Col md={6} sm={12} span={24} style={{ marginBottom: '30px' }}>
               <Typography.Paragraph>
                 <Button type="link" href="/" style={{ fontSize: '20px', fontWeight: 'bolder' }}
-                  icon={<img src={me?.user.settings?.theme === 'dark' ? '/teledrive-logo/logoteledrive-white.png' : '/teledrive-logo/logoteledrive.png'} style={{ height: '24px' }} />}>
+                  icon={<img src={currentTheme === 'dark' ? '/teledrive-logo/logoteledrive-white.png' : '/teledrive-logo/logoteledrive.png'} style={{ height: '24px' }} />}>
                 </Button>
               </Typography.Paragraph>
               <Typography.Paragraph type="secondary">

web/src/pages/components/Navbar.tsx

@@ -1,8 +1,9 @@
-import { CrownOutlined, DashboardOutlined, LoginOutlined, LogoutOutlined, MenuOutlined, SettingOutlined, UserOutlined, WarningOutlined } from '@ant-design/icons'
+import { CrownOutlined, LoginOutlined, LogoutOutlined, MenuOutlined, SettingOutlined, UserOutlined, WarningOutlined } from '@ant-design/icons'
 import { Button, Layout, Menu, Modal, Popover, Progress, Tag, Tooltip, Typography } from 'antd'
 import moment from 'moment'
 import prettyBytes from 'pretty-bytes'
 import React, { useState } from 'react'
+import { useThemeSwitcher } from 'react-css-theme-switcher'
 import { useHistory } from 'react-router'
 import { Link } from 'react-router-dom'
 import useSWR from 'swr'
@@ -15,6 +16,7 @@ interface Props {
 
 const Navbar: React.FC<Props> = ({ user }) => {
   const history = useHistory()
+  const { currentTheme } = useThemeSwitcher()
   const [logoutConfirmation, setLogoutConfirmation] = useState<boolean>(false)
   const [popoverVisibility, setPopoverVisibility] = useState<boolean>(false)
   const { data: usage } = useSWR('/users/me/usage', fetcher)
@@ -25,7 +27,7 @@ const Navbar: React.FC<Props> = ({ user }) => {
   }
 
   return <>
-    <Layout.Header style={{ background: user?.settings?.theme === 'dark' ? '#1f1f1f' : '#0088CC', padding: '0 30px' }}>
+    <Layout.Header style={{ background: currentTheme === 'dark' ? '#1f1f1f' : '#0088CC', padding: '0 30px' }}>
       <div key="logo" className="logo" style={{ marginRight: '30px' }}>
         <Link to="/" style={{ color: '#fff' }}>
           <img src="/teledrive-logo/logoteledrive-white.png" style={{ height: '24px' }} /> {user?.plan === 'premium' && <Popover placement="bottom" content={<Layout style={{ padding: '7px 13px' }}>Premium</Layout>}>
@@ -39,7 +41,7 @@ const Navbar: React.FC<Props> = ({ user }) => {
               ? <Tag color="blue">Staging</Tag> : !/^(\w*\.)?teledriveapp\.com$/.test(location.host) && <Tag color="red">Unofficial</Tag>}
         </span>
       </div>
-      {user ?
+      {user ? <>
         <Popover visible={popoverVisibility} onVisibleChange={setPopoverVisibility} placement="bottomRight" trigger={['click']} content={<div>
           <div style={{ padding: '10px' }}>
             Bandwidth usage: { }
@@ -49,24 +51,23 @@ const Navbar: React.FC<Props> = ({ user }) => {
           </div>
           <Menu selectable={false} triggerSubMenuAction="click" onClick={({ key }) => {
             setPopoverVisibility(false)
-            if (key === 'dashboard') {
-              history.push('/dashboard')
-            } else if (key === 'settings') {
+            if (key === 'settings') {
               history.push('/settings')
             } else if (key === 'logout') {
               setLogoutConfirmation(true)
             }
           }}>
-            <Menu.Item key="dashboard" icon={<DashboardOutlined />}>Dashboard</Menu.Item>
             <Menu.Item key="settings" icon={<SettingOutlined />}>Settings</Menu.Item>
             <Menu.Item danger key="logout" icon={<LogoutOutlined />}>Logout</Menu.Item>
           </Menu>
         </div>}>
           <Button type="link" style={{ color: '#ffff', float: 'right', top: '16px' }} icon={<UserOutlined />} />
-        </Popover> :
+        </Popover>
+      </> :
         <Button onClick={() => history.push('/login')} type="link" style={{ color: '#ffff', float: 'right', top: '16px' }} icon={<LoginOutlined />}>Login</Button>}
-      <Menu selectable={false} overflowedIndicator={<MenuOutlined />} mode="horizontal" triggerSubMenuAction="click" theme={user?.settings?.theme === 'dark' ? 'light' : 'dark'}
-        style={{ background: user?.settings?.theme === 'dark' ? '#1f1f1f' : '#0088CC', position: 'relative', display: 'flex', justifyContent: 'right' }}>
+      <Menu selectable={false} overflowedIndicator={<MenuOutlined />} mode="horizontal" triggerSubMenuAction="click" theme={currentTheme === 'dark' ? 'light' : 'dark'}
+        style={{ background: currentTheme === 'dark' ? '#1f1f1f' : '#0088CC', position: 'relative', display: 'flex', justifyContent: 'right' }}>
+        {user && <Menu.Item onClick={() => history.push('/dashboard')} key="dashboard">Dashboard</Menu.Item>}
         <Menu.Item onClick={() => history.push('/pricing')} key="pricing">Pricing</Menu.Item>
         <Menu.Item onClick={() => history.push('/faq')} key="faq">FAQ</Menu.Item>
         <Menu.Item onClick={() => history.push('/contact')} key="contact">Contact Us</Menu.Item>

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

@@ -26,6 +26,7 @@ import {
 } from 'antd'
 import prettyBytes from 'pretty-bytes'
 import React, { useEffect, useRef, useState } from 'react'
+import { useThemeSwitcher } from 'react-css-theme-switcher'
 import { ChatItem, ChatList, MessageBox } from 'react-chat-elements'
 import ReactMarkdown from 'react-markdown'
 import { useHistory, useLocation } from 'react-router'
@@ -64,6 +65,7 @@ const Messaging: React.FC<Props> = ({ me, collapsed, parent, setCollapsed }) =>
   const inputSend = useRef<any | null>()
   const history = useHistory()
   const { search: searchParams } = useLocation()
+  const { currentTheme } = useThemeSwitcher()
 
   const { data: dialogs, mutate: refetchDialogs } = useSWR(!collapsed && !q && !message ? `/dialogs?limit=10${chatListOffset ? `&offset=${chatListOffset}` : ''}` : null, fetcher, { onSuccess: data => {
     setChatListOffset(undefined)
@@ -437,7 +439,7 @@ const Messaging: React.FC<Props> = ({ me, collapsed, parent, setCollapsed }) =>
   }
 
   return <Layout.Sider
-    theme={me?.user.settings?.theme === 'dark' ? 'dark' : 'light'}
+    theme={currentTheme === 'dark' ? 'dark' : 'light'}
     className="messaging"
     trigger={null}
     collapsedWidth={0}
@@ -446,7 +448,7 @@ const Messaging: React.FC<Props> = ({ me, collapsed, parent, setCollapsed }) =>
     style={{
       overflowX: 'hidden',
       boxShadow: '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
-      background: me?.user.settings?.theme === 'dark' ? undefined : 'rgb(240, 242, 245) none repeat scroll 0% 0%',
+      background: currentTheme === 'dark' ? undefined : 'rgb(240, 242, 245) none repeat scroll 0% 0%',
       position: 'absolute',
       right: 0,
       top: 0,
@@ -455,7 +457,7 @@ const Messaging: React.FC<Props> = ({ me, collapsed, parent, setCollapsed }) =>
       overflowY: 'auto',
       zIndex: 1,
       marginBottom: 0 }}>
-    <Layout.Header style={{ background: me?.user.settings?.theme === 'dark' ? '#1f1f1f' : '#0088CC', position: 'fixed', zIndex: 2, padding: '0 15px', width: width || '100%' }}>
+    <Layout.Header style={{ background: currentTheme === 'dark' ? '#1f1f1f' : '#0088CC', position: 'fixed', zIndex: 2, padding: '0 15px', width: width || '100%' }}>
       <div key="logo" className="logo" style={{ display: 'inline', width: '100%' }}>
         <div style={{ float: 'left' }}>
           <Button icon={<ArrowLeftOutlined />} size="large" type="link" style={{ color: '#fff' }} onClick={back} />