Merge pull request #164 from mgilangjanuar/staging

suplement: minor styling

web/public/app.css

@@ -1,5 +1,5 @@
 @import '/antd.css';
 
 .ant-layout, footer, .ant-layout-footer {
-  background: #fff !important;
+  background: #fff;
 }

web/public/app.dark.css

@@ -30,4 +30,12 @@
 
 .rce-citem-body--bottom-title {
   color: rgba(255, 255, 255, 0.45) !important;
+}
+
+.ant-modal-body .ant-form-item-label {
+  background: #1f1f1f !important;
+}
+
+.ant-menu.ant-menu-sub.ant-menu-vertical {
+  background: #141414 !important;
 }

web/src/App.tsx

@@ -7,6 +7,9 @@ import useSWR from 'swr'
 import useSWRImmutable from 'swr/immutable'
 import { fetcher } from './utils/Fetcher'
 
+import Navbar from './pages/components/Navbar'
+import Footer from './pages/components/Footer'
+
 import 'antd-country-phone-input/dist/index.css'
 
 const Dashboard = lazy(
@@ -39,7 +42,9 @@ const Pricing = lazy(
 const Contact = lazy(
   () => import(/* webpackChunkName: 'ContactPage'  */ './pages/Contact')
 )
-const Faq = lazy(() => import(/* webpackChunkName: 'FaqPage' */ './pages/Faq'))
+const Faq = lazy(
+  () => import(/* webpackChunkName: 'FaqPage' */ './pages/Faq')
+)
 const NotFound = lazy(
   () => import(/* webpackChunkName: 'NotFoundPage' */ './pages/errors/NotFound')
 )
@@ -52,6 +57,7 @@ function App(): React.ReactElement {
 
   useEffect(() => document.querySelector('.App')?.scrollIntoView(), [pathname])
 
+
   useEffect(() => {
     if (me?.user.settings?.theme === 'dark') {
       switcher({ theme: 'dark' })
@@ -63,6 +69,7 @@ function App(): React.ReactElement {
 
   return (
     <Layout className="App">
+      {!/^\/view\/.*/gi.test(window.location.pathname) && <Navbar user={me?.user} />}
       {data?.maintenance ? <Result
         status="warning"
         title="This site is under maintenance"
@@ -74,24 +81,25 @@ function App(): React.ReactElement {
         }
       /> : <Suspense fallback={<></>}>
         <Switch>
-          <Route path="/dashboard/:type?" exact component={(props: any) => <Dashboard {...props} me={me} errorMe={errorMe} />} />
+          <Route path="/dashboard/:type?" exact component={Dashboard} />
           <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="/terms" exact component={Terms} />
+          <Route path="/refund" exact component={Refund} />
+          <Route path="/privacy" exact component={Privacy} />
           <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="/faq" exact component={Faq} />
           <Route path="/" exact>
             {new URLSearchParams(window.location.search).get('source') === 'pwa' ? <Redirect to="/dashboard" /> : <Home me={me} />}
           </Route>
           <Route component={NotFound} />
         </Switch>
       </Suspense>}
+      {!/^\/view\/.*/gi.test(window.location.pathname) && <Footer me={me} />}
     </Layout>
   )
 }

web/src/index.css

@@ -21,7 +21,7 @@ html, body {
 }
 
 .ant-layout-header {
-  padding: 0 30px;
+  padding: 0 30px !important;
 }
 
 .container {
@@ -37,7 +37,7 @@ html, body {
   font-size: 1.2em;
 }
 
-.input-search-round input, .input-search-round .ant-input-affix-wrapper {
+.input-search-round input::before, .input-search-round .ant-input-affix-wrapper {
   border-radius: 32px 0 0 32px !important;
   padding: 4px 16px;
 }

web/src/index.tsx

@@ -20,7 +20,9 @@ ReactDOM.render(
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://cra.link/PWA
-serviceWorkerRegistration.register()
+serviceWorkerRegistration.register({
+  onUpdate: () => (window.location as any).reload(true)
+})
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

web/src/pages/Contact.tsx

@@ -3,8 +3,6 @@ import { Button, Card, Col, Form, Input, Layout, notification, Row, Typography }
 import { useForm } from 'antd/lib/form/Form'
 import React, { useEffect, useState } from 'react'
 import { req } from '../utils/Fetcher'
-import Footer from './components/Footer'
-import Navbar from './components/Navbar'
 
 interface Props {
   me?: any
@@ -51,7 +49,6 @@ const Contact: React.FC<Props> = ({ me }) => {
   }
 
   return <>
-    <Navbar user={me?.user} page="contact" />
     <Layout.Content className="container">
       <Row style={{ marginTop: '80px' }}>
         <Col lg={{ span: 10, offset: 7 }} md={{ span: 14, offset: 5 }} span={20} offset={2}>
@@ -77,7 +74,6 @@ const Contact: React.FC<Props> = ({ me }) => {
         </Col>
       </Row>
     </Layout.Content>
-    <Footer me={me} />
   </>
 }
 

web/src/pages/Faq.tsx

@@ -2,18 +2,11 @@ import { Col, Divider, Layout, Row, Typography } from 'antd'
 import React from 'react'
 import useSWRImmutable from 'swr/immutable'
 import { fetcher } from '../utils/Fetcher'
-import Footer from './components/Footer'
-import Navbar from './components/Navbar'
 
-interface Props {
-  me?: any
-}
-
-const Faq: React.FC<Props> = ({ me }) => {
+const Faq: React.FC = () => {
   const { data: contributors } = useSWRImmutable('/github/contributors', fetcher)
 
   return <>
-    <Navbar user={me?.user} page="faq" />
     <Layout.Content className="container">
       <Row>
         <Col lg={{ span: 18, offset: 3 }} md={{ span: 20, offset: 2 }} span={24}>
@@ -112,7 +105,6 @@ const Faq: React.FC<Props> = ({ me }) => {
         </Col>
       </Row>
     </Layout.Content>
-    <Footer me={me} />
   </>
 }
 

web/src/pages/Home.tsx

@@ -7,16 +7,13 @@ import { Follow, Tweet } from 'react-twitter-widgets'
 import useSWRImmutable from 'swr/immutable'
 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'
 
 interface Props {
   me?: any
 }
 
 const Home: React.FC<Props> = ({ me }) => {
   const { data } = useSWRImmutable('/github/contributors', fetcher)
-  // const { data: me } = useSWRImmutable('/users/me', fetcher)
   const [visiblePreview, setVisiblePreview] = useState<boolean>()
   const history = useHistory()
 
@@ -30,7 +27,6 @@ const Home: React.FC<Props> = ({ me }) => {
   }, [])
 
   return <div id="top">
-    <Navbar user={me?.user} page="home" />
     <Layout.Content style={{ fontSize: '1.125rem' }}>
       <Row align="middle" style={{ marginTop: '50px' }}>
         <Col lg={{ span: 10, offset: 2 }} md={{ span: 20, offset: 2 }} span={22} offset={1}>
@@ -206,8 +202,6 @@ const Home: React.FC<Props> = ({ me }) => {
       </Row>
 
     </Layout.Content>
-    <Footer me={me} />
-    <script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="mgilangjanuar" data-description="Support me on Buy me a coffee!" data-message="" data-color="#FFDD00" data-position="Right" data-x_margin="18" data-y_margin="18"></script>
   </div>
 }
 

web/src/pages/Login.tsx

@@ -9,8 +9,6 @@ import { useHistory } from 'react-router'
 import useSWRImmutable from 'swr/immutable'
 import en from 'world_countries_lists/data/en/world.json'
 import { fetcher, req } from '../utils/Fetcher'
-import Footer from './components/Footer'
-import Navbar from './components/Navbar'
 
 interface Props {
   me?: any
@@ -133,7 +131,6 @@ const Login: React.FC<Props> = ({ me }) => {
   }, [countdown])
 
   return <>
-    <Navbar />
     <Layout.Content className="container">
       <Row style={{ marginTop: '30px' }}>
         <Col lg={{ span: 10, offset: 7 }} md={{ span: 14, offset: 5 }} span={20} offset={2}>
@@ -270,7 +267,6 @@ const Login: React.FC<Props> = ({ me }) => {
         </Col>
       </Row>
     </Layout.Content>
-    <Footer me={me} />
   </>
 }
 

web/src/pages/Pricing.tsx

@@ -4,8 +4,6 @@ import React, { useState } from 'react'
 import { useHistory } from 'react-router'
 import { Link } from 'react-router-dom'
 import { req } from '../utils/Fetcher'
-import Footer from './components/Footer'
-import Navbar from './components/Navbar'
 
 interface Props {
   me?: any
@@ -103,7 +101,6 @@ const Pricing: React.FC<Props> = ({ me }) => {
   </div>
 
   return <>
-    <Navbar user={me?.user} page="pricing" />
     <Layout.Content className="container" style={{ marginTop: '80px' }}>
       <Row>
         <Col md={{ span: 20, offset: 2 }} span={24}>
@@ -130,7 +127,6 @@ const Pricing: React.FC<Props> = ({ me }) => {
         </Col>
       </Row>
     </Layout.Content>
-    <Footer me={me} />
   </>
 }
 

web/src/pages/Privacy.tsx

@@ -4,18 +4,12 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import useSWRImmutable from 'swr/immutable'
 import { fetcher } from '../utils/Fetcher'
-import Footer from './components/Footer'
-import Navbar from './components/Navbar'
 
-interface Props {
-  me?: any
-}
 
-const Privacy: React.FC<Props> = ({ me }) => {
+const Privacy: React.FC = () => {
   const { data } = useSWRImmutable('/documents/privacy', fetcher)
 
   return <>
-    <Navbar page="privacy" user={me?.user} />
     <Layout.Content className="container">
       <Row>
         <Col lg={{ span: 18, offset: 3 }} md={{ span: 20, offset: 2 }} span={24}>
@@ -25,7 +19,6 @@ const Privacy: React.FC<Props> = ({ me }) => {
         </Col>
       </Row>
     </Layout.Content>
-    <Footer me={me} />
   </>
 }
 

web/src/pages/Refund.tsx

@@ -4,18 +4,11 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import useSWRImmutable from 'swr/immutable'
 import { fetcher } from '../utils/Fetcher'
-import Footer from './components/Footer'
-import Navbar from './components/Navbar'
 
-interface Props {
-  me?: any
-}
-
-const Refund: React.FC<Props> = ({ me }) => {
+const Refund: React.FC = () => {
   const { data } = useSWRImmutable('/documents/refund', fetcher)
 
   return <>
-    <Navbar page="refund" user={me?.user} />
     <Layout.Content className="container">
       <Row>
         <Col lg={{ span: 18, offset: 3 }} md={{ span: 20, offset: 2 }} span={24}>
@@ -25,7 +18,6 @@ const Refund: React.FC<Props> = ({ me }) => {
         </Col>
       </Row>
     </Layout.Content>
-    <Footer me={me} />
   </>
 }
 

web/src/pages/Settings.tsx

@@ -5,8 +5,6 @@ import React, { useEffect, useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import useSWRImmutable from 'swr/immutable'
 import { apiUrl, fetcher, req } from '../utils/Fetcher'
-import Footer from './components/Footer'
-import Navbar from './components/Navbar'
 
 interface Props {
   me?: any,
@@ -21,26 +19,21 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
   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 save = (settings: any) => {
-    return req.patch('/users/me/settings', { settings })
-      .then(() => {
-        notification.success({  message: 'Settings saved' })
-        // setExpandableRows(!expandableRows)
-        mutate()
-      })
-      .catch(({ response }) => {
-        if (response.status === 402) {
-          return notification.error({
-            message: 'Premium Feature',
-            description: 'Please upgrade your plan for using this feature'
-          })
-        }
-        return notification.error({ message: 'Something error. Please try again.' })
-      })
+  const save = async (settings: any): Promise<void> => {
+    try {
+      await req.patch('/users/me/settings', { settings })
+      notification.success({ message: 'Settings saved' })
+      mutate()
+    } catch ({ response }) {
+      if ((response as any).status === 402) {
+        return notification.error({
+          message: 'Premium Feature',
+          description: 'Please upgrade your plan for using this feature'
+        })
+      }
+      return notification.error({ message: 'Something error. Please try again.' })
+    }
   }
 
   useEffect(() => {
@@ -71,11 +64,10 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
   }
 
   return <>
-    <Navbar page="settings" user={me?.user} />
     <Layout.Content className="container">
-      <Row style={{ marginTop: '30px' }}>
+      <Row style={{ marginTop: '80px' }}>
         <Col lg={{ span: 10, offset: 7 }} md={{ span: 14, offset: 5 }} span={20} offset={2}>
-          <Typography.Title level={2}>
+          <Typography.Title>
             Settings
           </Typography.Title>
           <Card loading={!me && !error}>
@@ -96,7 +88,7 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
                 }} checked={me?.user.settings?.theme === 'dark'} defaultChecked={me?.user.settings?.theme === 'dark'} />
               </Form.Item>
               <Form.Item label="Check Updates">
-                <Button shape="round" icon={<ReloadOutlined />} onClick={() => window.location.reload()}>Reload</Button>
+                <Button shape="round" icon={<ReloadOutlined />} onClick={() => (window.location as any).reload(true)}>Reload</Button>
               </Form.Item>
               <Form.Item label={<Typography.Text type="danger">Delete Account</Typography.Text>}>
                 <Button shape="round" danger type="primary" icon={<FrownOutlined />} onClick={() => setRemoveConfirmation(true)}>Delete</Button>
@@ -155,8 +147,6 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
         </Form.Item>
       </Form>
     </Modal>
-
-    <Footer me={me} />
   </>
 }