From 10231df5f3a1fdaf51b35bf8371bc70a1f2393bb Mon Sep 17 00:00:00 2001
From: Boming Zhang <bz14520@uga.edu>
Date: Fri, 9 Feb 2024 23:38:27 -0500
Subject: [PATCH] refactor: move components to pages

---
 src/components/Header/index.tsx          | 34 +++++----
 src/components/Login/index.tsx           | 81 --------------------
 src/components/Logout/index.tsx          | 31 --------
 src/components/SignUp/index.tsx          |  5 --
 src/pages/Login/index.tsx                | 96 +++++++++++++++++++++++-
 src/pages/Logout/index.tsx               | 32 +++++++-
 src/pages/{SignUp => Register}/index.tsx |  3 +-
 src/routes.tsx                           |  6 +-
 src/utils/theme.ts                       |  6 --
 9 files changed, 148 insertions(+), 146 deletions(-)
 delete mode 100644 src/components/Login/index.tsx
 delete mode 100644 src/components/Logout/index.tsx
 delete mode 100644 src/components/SignUp/index.tsx
 rename src/pages/{SignUp => Register}/index.tsx (73%)

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index a784eef..0d570fc 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -4,11 +4,13 @@ import Nav from 'react-bootstrap/Nav'
 import Navbar from 'react-bootstrap/Navbar'
 import { Link, useLocation } from 'react-router-dom'
 import { initTheme, toggleTheme } from 'utils/theme'
+import { useAuth } from 'hooks/useAuth'
 
 initTheme()
 
 const Index: React.FC = () => {
   const location = useLocation()
+  const { user } = useAuth()
   return (
     <header className='border-bottom'>
       <Navbar expand='lg' className='bg-body-tertiary'>
@@ -38,25 +40,27 @@ const Index: React.FC = () => {
               >
                 Toggle Theme
               </Button>
-              <Link to={`/login?from=${location.pathname}`}>
-                <Button type='button' className='btn my-2 my-sm-0 mx-1'>
-                  Login
-                </Button>
-              </Link>
-              <Link to='/logout'>
-                <Button
-                  type='button'
-                  className='btn btn-danger my-2 my-sm-0 mx-1'
-                >
-                  Logout
-                </Button>
-              </Link>
-              <Link to='/signup'>
+              {user ? (
+                <Link to='/logout'>
+                  <Button
+                    type='button'
+                    className='btn btn-danger my-2 my-sm-0 mx-1'
+                  >
+                    Logout
+                  </Button>
+                </Link>)
+                : (
+                  <Link to={`/login?from=${location.pathname}`}>
+                    <Button type='button' className='btn my-2 my-sm-0 mx-1'>
+                      Login
+                    </Button>
+                  </Link>)}
+              <Link to='/register'>
                 <Button
                   type='button'
                   className='btn btn-warning my-2 my-sm-0 mx-1'
                 >
-                  Sign-up
+                  Register
                 </Button>
               </Link>
             </Nav>
diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx
deleted file mode 100644
index bf974f1..0000000
--- a/src/components/Login/index.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { useRequest } from 'ahooks'
-import { useAuth } from 'hooks/useAuth'
-import { useState } from 'react'
-import Button from 'react-bootstrap/Button'
-import Form from 'react-bootstrap/Form'
-import { Navigate, useSearchParams } from 'react-router-dom'
-import { DOMAIN_HOST } from 'utils/constants'
-import Backend from 'utils/service'
-
-const Index: React.FC = () => {
-  const { user } = useAuth()
-  const [searchParams] = useSearchParams()
-  const [username, setUsername] = useState('demo')
-  const [password, setPassword] = useState('123456')
-  const { run: login } = useRequest(
-    async () => {
-      const from = searchParams.get('from') ?? '/'
-      return Backend.auth.v1AuthLoginCreate(
-        {
-          username,
-          password
-        },
-        {
-          redirect_url: `${DOMAIN_HOST}${from}`
-        }
-      )
-    },
-    {
-      manual: true,
-      onSuccess: res => {
-        if (res.data.redirect_url) {
-          window.location.href = res.data.redirect_url
-        }
-      }
-    }
-  )
-  return user ? (
-    <Navigate to='/' />
-  ) : (
-    <>
-      <div className='text-center'>
-        <h1>Login</h1>
-      </div>
-      <Form>
-        <Form.Group className='mb-3' controlId='formBasicEmail'>
-          <Form.Label>Username</Form.Label>
-          <Form.Control
-            type='text'
-            placeholder='Username'
-            defaultValue={username}
-            onChange={e => {
-              setUsername(e.target.value)
-            }}
-          />
-        </Form.Group>
-        <Form.Group className='mb-3' controlId='formBasicPassword'>
-          <Form.Label>Password</Form.Label>
-          <Form.Control
-            type='password'
-            placeholder='Password'
-            defaultValue={username}
-            onChange={e => {
-              setPassword(e.target.value)
-            }}
-          />
-        </Form.Group>
-        <Button
-          variant='primary'
-          type='button'
-          onClick={(): void => {
-            login()
-          }}
-        >
-          Submit
-        </Button>
-      </Form>
-    </>
-  )
-}
-
-export default Index
diff --git a/src/components/Logout/index.tsx b/src/components/Logout/index.tsx
deleted file mode 100644
index acdb46a..0000000
--- a/src/components/Logout/index.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useRequest } from 'ahooks'
-import { useAuth } from 'hooks/useAuth'
-import type React from 'react'
-import { Navigate, useNavigate } from 'react-router-dom'
-import Backend from 'utils/service'
-
-const Index: React.FC = () => {
-  const navigate = useNavigate()
-  const { user, refreshAsync } = useAuth()
-
-  useRequest(
-    async () => {
-      if (user) {
-        return Backend.auth.v1AuthLogoutCreate()
-      }
-      return {}
-    },
-    {
-      onSuccess: () => {
-        refreshAsync?.().then(() => {
-          navigate('/login', { replace: true })
-        })
-      },
-      onError: () => {}
-    }
-  )
-
-  return user ? <div>Logging out</div> : <Navigate to='/login' replace />
-}
-
-export default Index
diff --git a/src/components/SignUp/index.tsx b/src/components/SignUp/index.tsx
deleted file mode 100644
index d7c02d2..0000000
--- a/src/components/SignUp/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-// TODO: finish it
-
-const Index: React.FC = () => <div>Sign up Page</div>
-
-export default Index
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index c750545..62c94b0 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -1,9 +1,101 @@
-import Login from 'components/Login'
 import PageContainer from 'components/PageContainer'
 
+import { useRequest } from 'ahooks'
+import { useAuth } from 'hooks/useAuth'
+import { useState } from 'react'
+import { Col, Row } from 'react-bootstrap'
+import Button from 'react-bootstrap/Button'
+import Form from 'react-bootstrap/Form'
+import { Navigate, useSearchParams } from 'react-router-dom'
+import { DOMAIN_HOST } from 'utils/constants'
+import Backend from 'utils/service'
+
+const LoginForm: React.FC = () => {
+  const { user } = useAuth()
+  const [searchParams] = useSearchParams()
+  const [username, setUsername] = useState('demo')
+  const [password, setPassword] = useState('123456')
+  const { run: login } = useRequest(
+    async () => {
+      const from = searchParams.get('from') ?? '/'
+      return Backend.auth.v1AuthLoginCreate(
+        {
+          username,
+          password
+        },
+        {
+          redirect_url: `${DOMAIN_HOST}${from}`
+        }
+      )
+    },
+    {
+      manual: true,
+      onSuccess: res => {
+        if (res.data.redirect_url) {
+          window.location.href = res.data.redirect_url
+        }
+      }
+    }
+  )
+  return user ? (
+    <Navigate to='/' />
+  ) : (
+    <>
+      <div className='text-center'>
+        <h1>Login</h1>
+      </div>
+      <Col xs={12} md={8} className="mx-auto mt-3">
+        <Form>
+          <Form.Group as={Row} className='mb-3' controlId='formBasicEmail'>
+            <Form.Label column sm={2}>Username</Form.Label>
+            <Col sm={10}>
+              <Form.Control
+                required
+                type='text'
+                placeholder='Username'
+                defaultValue={username}
+                onChange={e => {
+                  setUsername(e.target.value)
+                }}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className='mb-3' controlId='formBasicPassword'>
+            <Form.Label column sm={2}>Password</Form.Label>
+            <Col sm={10}>
+              <Form.Control
+                required
+                type='password'
+                placeholder='Password'
+                defaultValue={username}
+                onChange={e => {
+                  setPassword(e.target.value)
+                }}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className="mb-3">
+            <Col sm={{ span: 10, offset: 2 }}>
+              <Button
+                variant='primary'
+                type='button'
+                onClick={(): void => {
+                  login()
+                }}
+              >
+                Submit
+              </Button>
+            </Col>
+          </Form.Group>
+        </Form>
+      </Col>
+    </>
+  )
+}
+
 const Index: React.FC = () => (
   <PageContainer>
-    <Login />
+    <LoginForm />
   </PageContainer>
 )
 
diff --git a/src/pages/Logout/index.tsx b/src/pages/Logout/index.tsx
index 7d6238f..59092fb 100644
--- a/src/pages/Logout/index.tsx
+++ b/src/pages/Logout/index.tsx
@@ -1,6 +1,36 @@
-import Logout from 'components/Logout'
 import PageContainer from 'components/PageContainer'
 
+import { useRequest } from 'ahooks'
+import { useAuth } from 'hooks/useAuth'
+import type React from 'react'
+import { Navigate, useNavigate } from 'react-router-dom'
+import Backend from 'utils/service'
+
+const Logout: React.FC = () => {
+  const navigate = useNavigate()
+  const { user, refreshAsync } = useAuth()
+
+  useRequest(
+    async () => {
+      if (user) {
+        return Backend.auth.v1AuthLogoutCreate()
+      }
+      return {}
+    },
+    {
+      onSuccess: () => {
+        refreshAsync?.().then(() => {
+          navigate('/login', { replace: true })
+        })
+      },
+      onError: () => {}
+    }
+  )
+
+  return user ? <div>Logging out</div> : <Navigate to='/login' replace />
+}
+
+
 const Index: React.FC = () => (
   <PageContainer>
     <Logout />
diff --git a/src/pages/SignUp/index.tsx b/src/pages/Register/index.tsx
similarity index 73%
rename from src/pages/SignUp/index.tsx
rename to src/pages/Register/index.tsx
index 6af9532..f1d6a3c 100644
--- a/src/pages/SignUp/index.tsx
+++ b/src/pages/Register/index.tsx
@@ -1,9 +1,8 @@
 import PageContainer from 'components/PageContainer'
-import SignUp from 'components/SignUp'
 
 const Index: React.FC = () => (
   <PageContainer>
-    <SignUp />
+    <div>Register Page</div>
   </PageContainer>
 )
 
diff --git a/src/routes.tsx b/src/routes.tsx
index 674f7a6..6f80449 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -4,7 +4,7 @@ import Login from 'pages/Login'
 import Logout from 'pages/Logout'
 import Main from 'pages/Main'
 import NotFound from 'pages/NotFound'
-import SignUp from 'pages/SignUp'
+import Register from 'pages/Register'
 import type { RouteObject } from 'react-router-dom'
 
 const children: RouteObject[] = [
@@ -17,8 +17,8 @@ const children: RouteObject[] = [
     element: <Logout />
   },
   {
-    path: '/signup',
-    element: <SignUp />
+    path: '/register',
+    element: <Register />
   },
   {
     path: '/',
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index c16a8d0..5c2e455 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -4,8 +4,6 @@ export const THEME = {
   DARK: 'dark'
 }
 
-const IS_SERVER = typeof window === 'undefined'
-
 const getDefaultTheme = () =>
   window.matchMedia('(prefers-color-scheme: dark)').matches
     ? THEME.DARK
@@ -22,18 +20,15 @@ const getPreferredTheme = () => {
 }
 
 export function setTheme(theme: string) {
-  if (IS_SERVER) return
   document.documentElement.dataset.bsTheme = theme
   localStorage.setItem('theme', theme)
 }
 
 export function resetTheme() {
-  if (IS_SERVER) return
   setTheme(getDefaultTheme())
 }
 
 export function toggleTheme() {
-  if (IS_SERVER) return
   const nextTheme =
     document.documentElement.dataset.bsTheme === THEME.DARK
       ? THEME.LIGHT
@@ -42,6 +37,5 @@ export function toggleTheme() {
 }
 
 export function initTheme() {
-  if (IS_SERVER) return
   setTheme(getPreferredTheme())
 }