Assorted refactor and cleanup (#106)

* merge storage context into themecontext

* TokenManager -> api util

* reduce themecontext

* lowercase util files

* dead code

* remove Contexts

Author: dkhalife

src/App.tsx

@@ -2,7 +2,7 @@ import { NavBar } from './views/Navigation/NavBar'
 import { useColorScheme } from '@mui/joy'
 import { Outlet } from 'react-router-dom'
 import { UserContext } from './contexts/UserContext'
-import { isTokenValid } from './utils/TokenManager'
+import { isTokenValid } from './utils/api'
 import React from 'react'
 import { ThemeMode } from './constants/theme'
 import { GetUserProfile } from './api/users'

src/api/auth.ts

@@ -1,4 +1,4 @@
-import { Request } from '../utils/TokenManager'
+import { Request } from '../utils/api'
 
 type TokenResponse = {
   token: string

src/api/labels.ts

@@ -1,5 +1,5 @@
 import { Label } from '@/models/label'
-import { Request } from '../utils/TokenManager'
+import { Request } from '../utils/api'
 
 type LabelsResponse = {
   labels: Label[]

src/api/tasks.ts

@@ -1,5 +1,5 @@
 import { Task } from '@/models/task'
-import { Request } from '../utils/TokenManager'
+import { Request } from '../utils/api'
 import { HistoryEntry } from '@/models/history'
 import { Label } from '@/models/label'
 

src/api/users.ts

@@ -1,5 +1,5 @@
 import { APIToken } from '@/models/token'
-import { Request } from '../utils/TokenManager'
+import { Request } from '../utils/api'
 import { User } from '@/models/user'
 import { NotificationTriggerOptions, NotificationType } from '@/models/notifications'
 

src/contexts/Contexts.tsx

@@ -1,89 +1,17 @@
-// import { COLORS } from '@/utils/Colors'
-import { CssBaseline } from '@mui/joy'
-import { CssVarsProvider, extendTheme } from '@mui/joy/styles'
+import { ThemeMode } from '@/constants/theme'
+import { retrieveValue, storeValue } from '@/utils/storage'
 import React from 'react'
 
-// const primaryColor = 'cyan'
-
-// const shades = [
-//   '50',
-//   ...Array.from({ length: 9 }, (_, i) => String((i + 1) * 100)),
-// ]
-
-// TODO: Theming
-// const getPallete = (key = primaryColor) => {
-//   return shades.reduce((acc: any, shade) => {
-//     acc[shade] = COLORS[key][shade]
-//     return acc
-//   }, {})
-// }
+export type ThemeContextState = {
+  themeMode: ThemeMode
+  setThemeMode: (themeMode: ThemeMode) => void
+}
 
-// const primaryPalette = getPallete(primaryColor)
+const initialThemeMode = retrieveValue<ThemeMode>('themeMode', 'system')
 
-const theme = extendTheme({
-  colorSchemes: {
-    light: {
-      palette: {
-        // TODO: theming
-        // primary: primaryPalette,
-        success: {
-          50: '#f3faf7',
-          100: '#def5eb',
-          200: '#b7e7d5',
-          300: '#8ed9be',
-          400: '#6ecdb0',
-          500: '#4ec1a2',
-          600: '#46b89a',
-          700: '#3cae91',
-          800: '#32a487',
-          900: '#229d76',
-        },
-        danger: {
-          50: '#fef2f2',
-          100: '#fde8e8',
-          200: '#fbd5d5',
-          300: '#f9c1c1',
-          400: '#f6a8a8',
-          500: '',
-          600: '#f47272',
-          700: '#e33434',
-          800: '#cc1f1a',
-          900: '#b91c1c',
-        },
-        warning: {
-          50: '#fffdf7',
-          100: '#fef8e1',
-          200: '#fdecb2',
-          300: '#fcd982',
-          400: '#fbcf52',
-          500: '#f9c222',
-          600: '#f6b81e',
-          700: '#f3ae1a',
-          800: '#f0a416',
-          900: '#e99b0e',
-        },
-      },
-    },
-    // TODO: Theming
-    // dark: {
-    //   palette: {
-    //     primary: primaryPalette,
-    //   },
-    // },
+export const ThemeContext = React.createContext<ThemeContextState>({
+  themeMode: initialThemeMode,
+  setThemeMode: (themeMode: ThemeMode) => {
+    storeValue('themeMode', themeMode)
   },
 })
-
-interface ThemeContextProps {
-  children: React.ReactNode
-}
-
-export class ThemeContext extends React.Component<ThemeContextProps> {
-  render() {
-    return (
-      <CssVarsProvider theme={theme}>
-        <CssBaseline />
-        {this.props.children}
-      </CssVarsProvider>
-    )
-  }
-}

src/contexts/StorageContext.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { Contexts } from './contexts/Contexts'
 import { useRoot } from './utils/dom'
+import { RouterContext } from './contexts/RouterContext'
 
 ReactDOM.createRoot(useRoot()).render(
   <React.StrictMode>
-    <Contexts />
+    <RouterContext />
   </React.StrictMode>,
 )

src/contexts/ThemeContext.tsx

@@ -1,4 +1,4 @@
-import { LABEL_COLORS } from "./Colors"
+import { LABEL_COLORS } from "./colors"
 
 export type ColorOption = {
   name: string

src/main.tsx

@@ -1,5 +1,5 @@
 import { Task } from '@/models/task'
-import { COLORS, TASK_COLOR } from './Colors'
+import { COLORS, TASK_COLOR } from './colors'
 import moment from 'moment'
 import { Label } from '@/models/label'
 import { DueDateGroups, GROUP_BY, LabelGroups } from '@/utils/grouping'

src/utils/TokenManager.tsx src/utils/api.ts

@@ -1,6 +1,6 @@
 import { DeleteLabel, GetLabels } from '@/api/labels'
 import { Label } from '@/models/label'
-import { getTextColorFromBackgroundColor } from '@/utils/Colors'
+import { getTextColorFromBackgroundColor } from '@/utils/colors'
 import { Add } from '@mui/icons-material'
 import {
   Box,

src/utils/Colors.ts src/utils/colors.ts

@@ -1,6 +1,6 @@
 import { UpdateLabel, CreateLabel } from '@/api/labels'
 import { Label } from '@/models/label'
-import { LABEL_COLORS } from '@/utils/Colors'
+import { LABEL_COLORS } from '@/utils/colors'
 import { ModalDialog } from '@mui/joy'
 import {
   Modal,

src/utils/labels.ts

@@ -1,5 +1,4 @@
 import { getNextThemeMode } from '@/constants/theme'
-import { StorageContext, StorageContextState } from '@/contexts/StorageContext'
 import {
   MenuRounded,
   HomeOutlined,
@@ -22,6 +21,7 @@ import { ThemeToggleButton } from '../Settings/ThemeToggleButton'
 import { NavBarLink } from './NavBarLink'
 import { getPathName, NavigationPaths, WithNavigate } from '@/utils/navigation'
 import { Logo } from '@/Logo'
+import { ThemeContext, ThemeContextState } from '@/contexts/ThemeContext'
 
 type NavBarProps = WithNavigate
 
@@ -91,8 +91,8 @@ export class NavBar extends React.Component<NavBarProps, NavBarState> {
               fontSize: 24,
             }}
           />
-          <StorageContext.Consumer>
-            {({ themeMode, setThemeMode }: StorageContextState) => (
+          <ThemeContext.Consumer>
+            {({themeMode, setThemeMode}: ThemeContextState) => (
               <ThemeToggleButton
                 themeMode={themeMode}
                 onThemeModeToggle={() => setThemeMode(getNextThemeMode(themeMode))}
@@ -102,7 +102,7 @@ export class NavBar extends React.Component<NavBarProps, NavBarState> {
                 }}
               />
             )}
-          </StorageContext.Consumer>
+          </ThemeContext.Consumer>
         </Box>
         <Drawer
           open={this.state.drawerOpen}

src/utils/Storage.ts src/utils/storage.ts

@@ -1,11 +1,11 @@
 import { UpdatePassword } from '@/api/users'
-import { StorageContext } from '@/contexts/StorageContext'
 import { Container, Typography, Divider, Box, Button } from '@mui/joy'
 import React from 'react'
 import { PassowrdChangeModal } from '../Modals/Inputs/PasswordChangeModal'
 import { APITokenSettings } from './APITokenSettings'
 import { NotificationSetting } from '../Notifications/NotificationSettings'
 import { ThemeToggle } from './ThemeToggle'
+import { ThemeContext } from '@/contexts/ThemeContext'
 
 export class Settings extends React.Component {
   private changePasswordModal = React.createRef<PassowrdChangeModal>()
@@ -60,14 +60,14 @@ export class Settings extends React.Component {
           <Typography level='h3'>Theme preferences</Typography>
           <Divider />
 
-          <StorageContext.Consumer>
+          <ThemeContext.Consumer>
             {storedState => (
               <ThemeToggle
                 themeMode={storedState.themeMode}
                 onThemeModeToggle={storedState.setThemeMode}
               />
             )}
-          </StorageContext.Consumer>
+          </ThemeContext.Consumer>
         </Box>
       </Container>
     )