chore(web): use AppContext instead of useTokens Hook

web/src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Route, HashRouter, Switch } from 'react-router-dom'
 import { ThemeProvider } from '@mui/material/styles'
 import { theme } from './theme'
@@ -9,12 +9,12 @@ import Home from './components/home'
 import Drive from './containers/Drive'
 import Studio from './containers/Studio'
 
-import useTokens from './components/useTokens'
+import { AppContext } from './context/appContext'
 
 function App() {
-  const { tokens, setTokens } = useTokens()
+  const appContext = useContext(AppContext)
 
-  if (!tokens) {
+  if (!appContext.tokens) {
     return (
       <ThemeProvider theme={theme}>
         <HashRouter>
@@ -24,7 +24,7 @@ function App() {
               <Login getCodeOnly />
             </Route>
             <Route path="/">
-              <Login setTokens={setTokens} />
+              <Login />
             </Route>
           </Switch>
         </HashRouter>

web/src/components/login.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react'
+import React, { useState, useContext } from 'react'
 import { useLocation } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
 import { CssBaseline, Box, TextField, Button, Typography } from '@mui/material'
+import { AppContext } from '../context/appContext'
 
 const headers = {
   Accept: 'application/json',
@@ -33,8 +34,9 @@ const getTokens = async (payload: any) => {
   }).then((data) => data.json())
 }
 
-const Login = ({ setTokens, getCodeOnly }: any) => {
+const Login = ({ getCodeOnly }: any) => {
   const location = useLocation()
+  const appContext = useContext(AppContext)
   const [username, setUserName] = useState('')
   const [password, setPassword] = useState('')
   const [errorMessage, setErrorMessage] = useState('')
@@ -71,7 +73,8 @@ const Login = ({ setTokens, getCodeOnly }: any) => {
         code
       })
 
-      setTokens(accessToken, refreshToken)
+      if (appContext.setTokens) appContext.setTokens(accessToken, refreshToken)
+      if (appContext.setUserName) appContext.setUserName(username)
     }
   }
 
@@ -126,7 +129,7 @@ const Login = ({ setTokens, getCodeOnly }: any) => {
         required
       />
       {errorMessage && <span>{errorMessage}</span>}
-      <Button type="submit" variant="outlined">
+      <Button type="submit" variant="outlined" disabled={!appContext.setTokens}>
         Submit
       </Button>
     </Box>
@@ -134,7 +137,6 @@ const Login = ({ setTokens, getCodeOnly }: any) => {
 }
 
 Login.propTypes = {
-  setTokens: PropTypes.func,
   getCodeOnly: PropTypes.bool
 }
 

web/src/index.tsx

@@ -2,10 +2,13 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import './index.css'
 import App from './App'
+import AppContextProvider from './context/appContext'
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <AppContextProvider>
+      <App />
+    </AppContextProvider>
   </React.StrictMode>,
   document.getElementById('root')
 )