Release v1.3.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "teledrive",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "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.2.0",
+  "version": "1.3.0",
   "main": "dist/index.js",
   "license": "MIT",
   "private": true,
@@ -9,7 +9,7 @@
     "build": "rimraf dist && eslint --fix -c .eslintrc.js --ext .ts . && tsc"
   },
   "dependencies": {
-    "@mgilangjanuar/telegram": "2.1.0",
+    "@mgilangjanuar/telegram": "2.2.1",
     "@sentry/node": "^6.14.1",
     "@sentry/tracing": "^6.14.1",
     "@types/moment": "^2.13.0",

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.3.0",

web/src/App.dark.less

@@ -0,0 +1,33 @@
+@import '~antd/dist/antd.dark.less';
+
+.ant-row, .ant-layout, footer, .ant-layout-footer {
+  background: #141414 !important;
+}
+
+.rce-container-citem, .rce-citem {
+  background: #141414 !important;
+}
+
+.rce-mbox, .rce-smsg {
+  background: rgba(255, 255, 255, 0.04) !important;
+}
+
+.rce-mbox-left-notch, .rce-mbox-right-notch {
+  fill: rgba(255, 255, 255, 0.04) !important;
+}
+
+.rce-mbox-time {
+  color: rgba(255, 255, 255, 0.45) !important;
+}
+
+.rce-mbox-reply, .rce-mbox-file > button {
+  background: #141414 !important;
+}
+
+.ant-list-split .ant-list-item {
+  border-bottom: none;
+}
+
+.rce-citem-body--bottom-title {
+  color: rgba(255, 255, 255, 0.45) !important;
+}

web/src/App.less

@@ -1 +1,5 @@
-@import '~antd/dist/antd.less';
+@import '~antd/dist/antd.less';
+
+.ant-layout, footer, .ant-layout-footer {
+  background: #fff;
+}

web/src/App.tsx

@@ -3,11 +3,9 @@ import { Button, Layout, Result } from 'antd'
 import React, { lazy, Suspense, useEffect } from 'react'
 import { Redirect, Route, Switch, useLocation } from 'react-router-dom'
 import useSWR from 'swr'
+import useSWRImmutable from 'swr/immutable'
 import { fetcher } from './utils/Fetcher'
 
-import './App.less'
-import 'antd-country-phone-input/dist/index.css'
-
 const Dashboard = lazy(
   () => import(/* webpackChunkName: 'DashboardPage' */ './pages/dashboard')
 )
@@ -47,6 +45,16 @@ function App(): React.ReactElement {
   const { pathname } = useLocation()
   useEffect(() => document.querySelector('.App')?.scrollIntoView(), [pathname])
   const { data } = useSWR('/utils/maintenance', fetcher)
+  const { data: me, error: errorMe, mutate: mutateMe } = useSWRImmutable('/users/me', fetcher)
+
+  useEffect(() => {
+    if (me?.user.plan === 'premium' && localStorage.getItem('theme') === 'dark') {
+      require('./App.dark.less')
+    } else {
+      require('./App.less')
+    }
+    require('antd-country-phone-input/dist/index.css')
+  }, [me])
 
   return (
     <Layout className="App">
@@ -61,18 +69,20 @@ function App(): React.ReactElement {
         }
       /> : <Suspense fallback={<></>}>
         <Switch>
-          <Route path="/dashboard/:type?" exact component={Dashboard} />
-          <Route path="/settings" exact component={Settings} />
-          <Route path="/view/:id" exact component={View} />
-          <Route path="/login" exact component={Login} />
-          <Route path="/terms" exact component={Terms} />
-          <Route path="/refund" exact component={Refund} />
-          <Route path="/privacy" exact component={Privacy} />
-          <Route path="/pricing" exact component={Pricing} />
-          <Route path="/contact" exact component={Contact} />
-          <Route path="/faq" exact component={Faq} />
+          <Route path="/dashboard/:type?" exact component={(props: any) => <Dashboard {...props} me={me} errorMe={errorMe} />} />
+          <Route path="/settings" exact component={() => <Settings me={me} error={errorMe} mutate={mutateMe} />} />
+          <Route path="/view/:id" exact component={(props: any) => <View {...props} me={me} errorMe={errorMe} />} />
+          <Route path="/login" exact>
+            {me?.user ? <Redirect to="/dashboard" /> : <Login me={me} />}
+          </Route>
+          <Route path="/terms" exact component={() => <Terms me={me} />} />
+          <Route path="/refund" exact component={() => <Refund me={me} />} />
+          <Route path="/privacy" exact component={() => <Privacy me={me} />} />
+          <Route path="/pricing" exact component={() => <Pricing me={me} />} />
+          <Route path="/contact" exact component={() => <Contact me={me} />} />
+          <Route path="/faq" exact component={() => <Faq me={me} />} />
           <Route path="/" exact>
-            {new URLSearchParams(window.location.search).get('source') === 'pwa' ? <Redirect to="/dashboard" /> : <Home />}
+            {new URLSearchParams(window.location.search).get('source') === 'pwa' ? <Redirect to="/dashboard" /> : <Home me={me} />}
           </Route>
           <Route component={NotFound} />
         </Switch>

web/src/index.css

@@ -24,10 +24,6 @@ html, body {
   padding: 0 30px;
 }
 
-.ant-layout, footer, .ant-layout-footer {
-  background: #fff;
-}
-
 .container {
   min-height: 79vh;
   padding: 24px 12px;
@@ -94,5 +90,5 @@ html, body {
 }
 
 .ant-popover-inner-content {
-  padding: 0;
+  padding: 0 !important;
 }

web/src/pages/Contact.tsx

@@ -2,17 +2,21 @@ import { SendOutlined } from '@ant-design/icons'
 import { Button, Card, Col, Form, Input, Layout, notification, Row, Typography } from 'antd'
 import { useForm } from 'antd/lib/form/Form'
 import React, { useEffect, useState } from 'react'
-import useSWR from 'swr'
-import { fetcher, req } from '../utils/Fetcher'
+import { req } from '../utils/Fetcher'
 import Footer from './components/Footer'
 import Navbar from './components/Navbar'
 
-const Contact: React.FC = () => {
+interface Props {
+  me?: any
+}
+
+const Contact: React.FC<Props> = ({ me }) => {
   const [form] = useForm()
   const [loading, setLoading] = useState<boolean>()
-  const { data: me } = useSWR('/users/me', fetcher, {
-    onSuccess: ({ user }) => form.setFieldsValue({ from: user.username })
-  })
+
+  useEffect(() => {
+    form.setFieldsValue({ from: me?.user.username })
+  }, [me])
 
   useEffect(() => {
     const intent = new URLSearchParams(location.search).get('intent')

web/src/pages/Faq.tsx

@@ -5,8 +5,11 @@ import { fetcher } from '../utils/Fetcher'
 import Footer from './components/Footer'
 import Navbar from './components/Navbar'
 
-const Faq: React.FC = () => {
-  const { data: me } = useSWRImmutable('/users/me', fetcher)
+interface Props {
+  me?: any
+}
+
+const Faq: React.FC<Props> = ({ me }) => {
   const { data: contributors } = useSWRImmutable('/github/contributors', fetcher)
 
   return <>

web/src/pages/Home.tsx

@@ -1,17 +1,21 @@
 import { ArrowRightOutlined, CloudOutlined, DollarCircleOutlined, SecurityScanOutlined } from '@ant-design/icons'
 import { Avatar, Button, Carousel, Col, Image, Layout, Row, Space, Tooltip, Typography } from 'antd'
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import GitHubButton from 'react-github-btn'
 import { Follow, Tweet } from 'react-twitter-widgets'
 import useSWRImmutable from 'swr/immutable'
-import { ReactComponent as UploadingAnimate } from '../svg/Uploading-amico.svg'
+import { ReactComponent as UploadingAnimate } from '../svg/Uploading-amico-new.svg'
 import { fetcher } from '../utils/Fetcher'
 import Footer from './components/Footer'
 import Navbar from './components/Navbar'
 
-const Home: React.FC = () => {
+interface Props {
+  me?: any
+}
+
+const Home: React.FC<Props> = ({ me }) => {
   const { data } = useSWRImmutable('/github/contributors', fetcher)
-  const { data: me } = useSWRImmutable('/users/me', fetcher)
+  // const { data: me } = useSWRImmutable('/users/me', fetcher)
   const [visiblePreview, setVisiblePreview] = useState<boolean>()
 
   useEffect(() => {
@@ -173,7 +177,7 @@ const Home: React.FC = () => {
                 <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="https://uploads-ssl.webflow.com/5fb8f118741e70818f103554/5feefbc08ef40333bbd2f92e_bahasa-ai-logo-blue%20(2021)%404x-p-500.png" />
+                      <img style={{ width: '100%', maxWidth: '212px' }} src={localStorage.getItem('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'} />
                     </a>
                   </Tooltip>
                   <Tooltip  placement="bottom" title="DigitalOcean – The developer cloud" key="digitalocean">

web/src/pages/Login.tsx

@@ -12,7 +12,11 @@ import { fetcher, req } from '../utils/Fetcher'
 import Footer from './components/Footer'
 import Navbar from './components/Navbar'
 
-const Login: React.FC = () => {
+interface Props {
+  me?: any
+}
+
+const Login: React.FC<Props> = ({ me }) => {
   const history = useHistory()
   const [formLogin] = useForm()
   const [dc, setDc] = useState<string>()
@@ -24,7 +28,6 @@ const Login: React.FC = () => {
   const [countdown, setCountdown] = useState<number>()
   const [phoneCodeHash, setPhoneCodeHash] = useState<string>()
   const [needPassword, setNeedPassword] = useState<boolean>()
-  const { data: me } = useSWRImmutable('/users/me', fetcher)
   const { data: _ } = useSWRImmutable('/utils/ipinfo', fetcher, { onSuccess: ({ ipinfo }) => setPhoneData(phoneData?.short ? phoneData : { short: ipinfo?.country || 'ID' }) })
 
   useEffect(() => {
@@ -233,6 +236,7 @@ const Login: React.FC = () => {
                     margin: '0 0.3rem 1rem 0',
                     borderRadius: '4px',
                     fontSize: '1.2rem',
+                    background: localStorage.getItem('theme') === '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/Pricing.tsx

@@ -3,14 +3,16 @@ import { Button, Card, Col, Divider, Form, Input, Layout, notification, Row, Swi
 import React, { useState } from 'react'
 import { useHistory } from 'react-router'
 import { Link } from 'react-router-dom'
-import useSWRImmutable from 'swr/immutable'
-import { fetcher, req } from '../utils/Fetcher'
+import { req } from '../utils/Fetcher'
 import Footer from './components/Footer'
 import Navbar from './components/Navbar'
 
-const Pricing: React.FC = () => {
+interface Props {
+  me?: any
+}
+
+const Pricing: React.FC<Props> = ({ me }) => {
   const history = useHistory()
-  const { data: me } = useSWRImmutable('/users/me', fetcher)
   const [loading, setLoading] = useState<boolean>()
   const [email, setEmail] = useState<string>()
   const [isIDR, setIsIDR] = useState<boolean>(false)

web/src/pages/Privacy.tsx

@@ -7,9 +7,12 @@ import { fetcher } from '../utils/Fetcher'
 import Footer from './components/Footer'
 import Navbar from './components/Navbar'
 
-const Privacy: React.FC = () => {
+interface Props {
+  me?: any
+}
+
+const Privacy: React.FC<Props> = ({ me }) => {
   const { data } = useSWRImmutable('/documents/privacy', fetcher)
-  const { data: me } = useSWRImmutable('/users/me', fetcher)
 
   return <>
     <Navbar page="privacy" user={me?.user} />

web/src/pages/Refund.tsx

@@ -7,9 +7,12 @@ import { fetcher } from '../utils/Fetcher'
 import Footer from './components/Footer'
 import Navbar from './components/Navbar'
 
-const Refund: React.FC = () => {
+interface Props {
+  me?: any
+}
+
+const Refund: React.FC<Props> = ({ me }) => {
   const { data } = useSWRImmutable('/documents/refund', fetcher)
-  const { data: me } = useSWRImmutable('/users/me', fetcher)
 
   return <>
     <Navbar page="refund" user={me?.user} />

web/src/pages/Settings.tsx

@@ -8,16 +8,22 @@ import { apiUrl, fetcher, req } from '../utils/Fetcher'
 import Footer from './components/Footer'
 import Navbar from './components/Navbar'
 
-const Settings: React.FC = () => {
+interface Props {
+  me?: any,
+  mutate?: any,
+  error?: any
+}
+
+const Settings: React.FC<Props> = ({ me, mutate, error }) => {
   const history = useHistory()
   const [expandableRows, setExpandableRows] = useState<boolean>()
   const [logoutConfirmation, setLogoutConfirmation] = useState<boolean>(false)
   const [removeConfirmation, setRemoveConfirmation] = useState<boolean>(false)
   const [formRemoval] = useForm()
   const { data: respVersion } = useSWRImmutable('/utils/version', fetcher)
-  const { data: me, mutate, error } = useSWRImmutable('/users/me', fetcher, {
-    onError: () => history.push('/login')
-  })
+  // const { data: me, mutate, error } = useSWRImmutable('/users/me', fetcher, {
+  //   onError: () => history.push('/login')
+  // })
 
   const save = (settings: any) => {
     req.patch('/users/me/settings', { settings })
@@ -35,6 +41,12 @@ const Settings: React.FC = () => {
     }
   }, [me])
 
+  useEffect(() => {
+    if (error) {
+      return history.push('/login')
+    }
+  }, [error])
+
   const logout = async () => {
     await req.post('/auth/logout')
     return window.location.replace('/')
@@ -70,6 +82,18 @@ const Settings: React.FC = () => {
                   save({ expandable_rows: val })
                 }} checked={expandableRows} defaultChecked={expandableRows} />
               </Form.Item>
+              <Form.Item label="Dark Mode" name="expandable_rows">
+                <Switch onChange={val => {
+                  if (me?.user.plan !== 'premium') {
+                    return notification.error({
+                      message: 'Premium Feature',
+                      description: 'Please upgrade your plan for using this feature'
+                    })
+                  }
+                  localStorage.setItem('theme', val ? 'dark' : 'light')
+                  return window.location.reload()
+                }} checked={localStorage.getItem('theme') === 'dark'} defaultChecked={localStorage.getItem('theme') === 'dark'} />
+              </Form.Item>
               <Form.Item label="Check Updates">
                 <Button shape="round" icon={<ReloadOutlined />} onClick={() => window.location.reload()}>Reload</Button>
               </Form.Item>

web/src/pages/Terms.tsx

@@ -7,9 +7,12 @@ import { fetcher } from '../utils/Fetcher'
 import Footer from './components/Footer'
 import Navbar from './components/Navbar'
 
-const Terms: React.FC = () => {
+interface Props {
+  me?: any
+}
+
+const Terms: React.FC<Props> = ({ me }) => {
   const { data } = useSWRImmutable('/documents/tos', fetcher)
-  const { data: me } = useSWRImmutable('/users/me', fetcher)
 
   return <>
     <Navbar page="terms" user={me?.user} />