add setting to let user decide home view (#109)

Author: dkhalife

src/contexts/RouterContext.tsx

@@ -1,6 +1,5 @@
 import { App } from '@/App'
-import { isMobile } from '@/utils/dom'
-import { getPathName } from '@/utils/navigation'
+import { getHomeView, getPathName } from '@/utils/navigation'
 import { ForgotPasswordView } from '@/views/Authorization/ForgotPasswordView'
 import { LoginView } from '@/views/Authorization/LoginView'
 import { SignupView } from '@/views/Authorization/Signup'
@@ -45,7 +44,9 @@ export class RouterContext extends React.Component<object, RouterContextState> {
   }
 
   private getMainRoute = () => {
-    if (isMobile()) {
+    const home_view = getHomeView()
+
+    if (home_view === 'my_tasks') {
       return <MyTasks navigate={this.navigate} />
     }
 

src/utils/auth.ts

@@ -11,6 +11,6 @@ export const doLogin = async (email: string, password: string, navigate: (path:
     localStorage.removeItem('ca_redirect')
     navigate(redirectUrl)
   } else {
-    navigate(NavigationPaths.DeviceAwareLoggedInLandingPage)
+    navigate(NavigationPaths.HomeView())
   }
 }

src/utils/navigation.ts

@@ -1,4 +1,5 @@
 import { isMobile } from "./dom"
+import { retrieveValue } from "./storage"
 
 export const getPathName = () => document.location.pathname
 
@@ -12,13 +13,20 @@ export const NavigationPaths = {
   ResetPassword: '/forgot-password',
   MyTasks: '/my/tasks',
   TasksOverview: '/tasks',
-  DeviceAwareLoggedInLandingPage: isMobile() ? '/my/tasks' : '/tasks',
+  HomeView: () => getHomeView() === 'my_tasks' ? '/my/tasks' : '/tasks',
   Labels: '/labels',
+  Settings: '/settings',
   TaskCreate: '/tasks/create',
   TaskEdit: (taskId: string) => `/tasks/${taskId}/edit`,
   TaskHistory: (taskId: string) => `/tasks/${taskId}/history`,
 }
 
 export interface WithNavigate {
   navigate: (path: string) => void
-}
+}
+
+export type HomeView = 'my_tasks' | 'tasks_overview'
+
+export const getHomeView = (): HomeView => {
+  return retrieveValue<HomeView>('home_view', isMobile() ? 'my_tasks' : 'tasks_overview')
+}

src/views/Navigation/NavBar.tsx

@@ -1,9 +1,10 @@
 import {
   MenuRounded,
-  HomeOutlined,
-  LabelOutlined,
-  SettingsOutlined,
   Logout,
+  FormatListBulleted,
+  LocalLibrary,
+  Label,
+  Settings,
 } from '@mui/icons-material'
 import {
   IconButton,
@@ -109,18 +110,23 @@ export class NavBar extends React.Component<NavBarProps, NavBarState> {
               sx={{ borderRadius: 4, width: '100%', padding: 1 }}
             >
               <NavBarLink
-                to={NavigationPaths.DeviceAwareLoggedInLandingPage}
-                icon={<HomeOutlined />}
-                label='Home'
+                to={NavigationPaths.MyTasks}
+                icon={<LocalLibrary />}
+                label='My tasks'
               />
               <NavBarLink
-                to='/labels'
-                icon={<LabelOutlined />}
+                to={NavigationPaths.MyTasks}
+                icon={<FormatListBulleted />}
+                label='Tasks Overview'
+              />
+              <NavBarLink
+                to={NavigationPaths.Labels}
+                icon={<Label />}
                 label='Labels'
               />
               <NavBarLink
-                to='/settings'
-                icon={<SettingsOutlined />}
+                to={NavigationPaths.Settings}
+                icon={<Settings />}
                 label='Settings'
               />
             </List>

src/views/Settings/Settings.tsx

@@ -1,12 +1,28 @@
 import { UpdatePassword } from '@/api/users'
-import { Container, Typography, Divider, Box, Button } from '@mui/joy'
+import { Container, Typography, Divider, Box, Button, Select, Option } 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 { storeValue } from '@/utils/storage'
+import { getHomeView, HomeView } from '@/utils/navigation'
+import { SelectValue } from '@mui/base'
+
+type SettingsProps = object
+type SettingsState = {
+  homeView: HomeView
+}
+
+export class Settings extends React.Component<SettingsProps, SettingsState> {
+  constructor(props: SettingsProps) {
+    super(props)
+
+    this.state = {
+      homeView: getHomeView(),
+    }
+  }
 
-export class Settings extends React.Component {
   private changePasswordModal = React.createRef<PassowrdChangeModal>()
 
   private onPasswordChanged = async (password: string | null) => {
@@ -21,7 +37,18 @@ export class Settings extends React.Component {
     this.changePasswordModal.current?.open()
   }
 
+  private onHomeViewChange = async (e: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, option: SelectValue<HomeView, false>) => {
+    const homeView = option as HomeView
+    await this.setState({
+      homeView,
+    })
+
+    storeValue<HomeView>('home_view', homeView)
+  }
+
   render(): React.ReactNode {
+    const { homeView } = this.state
+
     return (
       <Container sx={{
         paddingBottom: '16px',
@@ -34,7 +61,22 @@ export class Settings extends React.Component {
             paddingBottom: '4',
           }}
         >
-          <Typography level='h3'>Password</Typography>
+          <Typography level='h3'>Preferred view</Typography>
+          <Divider />
+          <Typography>Choose your default view:</Typography>
+          <Select
+            value={homeView}
+            sx={{
+              maxWidth: '200px',
+            }}
+            onChange={this.onHomeViewChange}
+            >
+            <Option value='my_tasks'>My Tasks</Option>
+            <Option value='tasks_overview'>Tasks Overview</Option>
+          </Select>
+          <Typography level='h3' sx={{
+            mt: 2,
+          }}>Password</Typography>
           <Divider />
           <Box sx={{
             mt: 1,

src/views/Tasks/TaskEdit.tsx

@@ -91,7 +91,7 @@ export class TaskEdit extends React.Component<TaskEditProps, TaskEditState> {
   private navigateAway = () => {
     const { navigate } = this.props
 
-    navigate(NavigationPaths.DeviceAwareLoggedInLandingPage)
+    navigate(NavigationPaths.HomeView())
   }
 
   private HandleValidateTask = () => {