Assorted bug fixes

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { NavBar } from './views/Navigation/NavBar'
-import { Outlet } from 'react-router-dom'
+import { Outlet, useLocation } from 'react-router-dom'
 import { isTokenValid } from './utils/api'
 import React from 'react'
 import { WithNavigate } from './utils/navigation'
@@ -17,6 +17,7 @@ import { FIVE_MINUTES_MS } from '@/constants/time'
 
 type AppProps = {
   refreshStaleData: boolean
+  pathname: string
 
   fetchLabels: () => Promise<any>
   fetchUser: () => Promise<any>
@@ -26,12 +27,41 @@ type AppProps = {
 } & WithNavigate
 
 class AppImpl extends React.Component<AppProps> {
+  private initializedAuthenticated = false
+  private initializingAuthenticated = false
+
   private onVisibilityChange = () => {
     if (!document.hidden) {
       this.refreshStaleData()
     }
   }
 
+  private initializeAuthenticated = async () => {
+    if (this.initializedAuthenticated || this.initializingAuthenticated) {
+      return
+    }
+
+    if (!isTokenValid()) {
+      return
+    }
+
+    this.initializingAuthenticated = true
+    try {
+      preloadSounds()
+      WebSocketManager.getInstance()
+
+      await this.props.fetchUser()
+      await this.props.fetchLabels()
+      await this.props.fetchTasks()
+      await this.props.fetchTokens()
+      await this.props.initGroups()
+
+      this.initializedAuthenticated = true
+    } finally {
+      this.initializingAuthenticated = false
+    }
+  }
+
   private refreshStaleData = async () => {
     if (!this.props.refreshStaleData) {
       return
@@ -70,18 +100,27 @@ class AppImpl extends React.Component<AppProps> {
   }
 
   async componentDidMount(): Promise<void> {
-    if (isTokenValid()) {
-      preloadSounds();
-      WebSocketManager.getInstance();
+    await this.initializeAuthenticated()
 
-      await this.props.fetchUser()
-      await this.props.fetchLabels()
-      await this.props.fetchTasks()
-      await this.props.fetchTokens()
-      await this.props.initGroups()
+    document.addEventListener('visibilitychange', this.onVisibilityChange)
+  }
+
+  async componentDidUpdate(prevProps: AppProps): Promise<void> {
+    // If we just navigated away from auth routes (e.g. successful login),
+    // the token becomes valid after App has already mounted. Ensure we
+    // initialize data once without requiring a full page refresh.
+    if (prevProps.pathname !== this.props.pathname) {
+      if (!isTokenValid()) {
+        this.initializedAuthenticated = false
+        return
+      }
+      await this.initializeAuthenticated()
+      return
     }
 
-    document.addEventListener('visibilitychange', this.onVisibilityChange)
+    // Also handle the case where token becomes valid without a pathname change
+    // (defensive; should be rare).
+    await this.initializeAuthenticated()
   }
 
   componentWillUnmount(): void {
@@ -90,6 +129,7 @@ class AppImpl extends React.Component<AppProps> {
 
   render() {
     const { navigate } = this.props
+    const { pathname } = this.props
 
     return (
       <div style={{ minHeight: '100vh' }}>
@@ -100,7 +140,10 @@ class AppImpl extends React.Component<AppProps> {
           defaultMode='system'
           colorSchemeNode={document.body}
         >
-          <NavBar navigate={navigate} />
+          <NavBar
+            navigate={navigate}
+            pathname={pathname}
+          />
           <Outlet />
           <StatusList />
         </CssVarsProvider>
@@ -121,7 +164,17 @@ const mapDispatchToProps = (dispatch: AppDispatch) => ({
   fetchTokens: () => dispatch(fetchTokens()),
 })
 
-export const App = connect(
+const ConnectedApp = connect(
   mapStateToProps,
   mapDispatchToProps,
 )(AppImpl)
+
+export const App = (props: WithNavigate) => {
+  const location = useLocation()
+  return (
+    <ConnectedApp
+      {...props}
+      pathname={location.pathname}
+    />
+  )
+}

frontend/src/api/tasks.ts

@@ -45,6 +45,12 @@ export const SkipTask = async (id: number): Promise<SingleTaskResponse> =>
       ws: (ws) => ws.request('skip_task', id),
     })
 
+export const UncompleteTask = async (id: number): Promise<SingleTaskResponse> =>
+    await transport({
+      http: () => Request<SingleTaskResponse>(`/tasks/${id}/undo`, 'POST'),
+      ws: (ws) => ws.request('uncomplete_task', id),
+    })
+
 export const CreateTask = async (task: Omit<Task, 'id'>) =>
   await transport({
     http: () => Request<TaskIdResponse>(`/tasks/`, 'POST', MarshallLabels(task)),

frontend/src/models/task.ts

@@ -89,7 +89,7 @@ export const newTask = (): Task => ({
   labels: [],
 })
 
-export type TASK_UPDATE_EVENT = 'updated' | 'completed' | 'rescheduled' | 'skipped' | 'deleted'
+export type TASK_UPDATE_EVENT = 'updated' | 'completed' | 'uncompleted' | 'rescheduled' | 'skipped' | 'deleted'
 
 export const getDueDateChipText = (nextDueDate: Date | null): string => {
   if (nextDueDate === null) {

frontend/src/store/tasksSlice.ts

@@ -3,6 +3,7 @@ import {
   GetTasks,
   GetCompletedTasks,
   MarkTaskComplete,
+  UncompleteTask,
   DeleteTask,
   SkipTask,
   CreateTask,
@@ -98,6 +99,14 @@ export const skipTask = createAsyncThunk(
   },
 )
 
+export const uncompleteTask = createAsyncThunk(
+  'tasks/uncompleteTask',
+  async (taskId: number) => {
+    const response = await UncompleteTask(taskId)
+    return response.task
+  },
+)
+
 export const deleteTask = createAsyncThunk(
   'tasks/deleteTask',
   async (taskId: number) => await DeleteTask(taskId),
@@ -229,8 +238,31 @@ const tasksSlice = createSlice({
       const taskId = action.payload
       state.items = state.items.filter(t => t.id !== taskId)
       state.filteredItems = state.filteredItems.filter(t => t.id !== taskId)
+
+      // Keep completed list consistent when a completed task is deleted.
+      state.completedItems = state.completedItems.filter(t => t.id !== taskId)
+
+      deleteTaskFromGroups(taskId, state.groupedItems)
+    },
+    taskRemovedFromActive: (state, action: PayloadAction<number>) => {
+      const taskId = action.payload
+      state.items = state.items.filter(t => t.id !== taskId)
+      state.filteredItems = state.filteredItems.filter(t => t.id !== taskId)
       deleteTaskFromGroups(taskId, state.groupedItems)
     },
+	completedTaskRemoved: (state, action: PayloadAction<number>) => {
+		const taskId = action.payload
+		state.completedItems = state.completedItems.filter(t => t.id !== taskId)
+	},
+  completedTaskUpserted: (state, action: PayloadAction<Task>) => {
+    const task = action.payload
+    const index = state.completedItems.findIndex(t => t.id === task.id)
+    if (index >= 0) {
+      state.completedItems[index] = task
+    } else {
+      state.completedItems.unshift(task)
+    }
+  },
   },
   extraReducers: builder => {
     builder
@@ -356,10 +388,15 @@ const tasksSlice = createSlice({
             type: 'tasks/taskUpserted',
           })
         } else {
-          tasksSlice.caseReducers.taskDeleted(state, {
-            payload: newTask.id,
-            type: 'tasks/taskDeleted',
-          })
+			// Task is now completed/inactive; remove from active lists and add to completed list.
+			tasksSlice.caseReducers.taskRemovedFromActive(state, {
+				payload: newTask.id,
+				type: 'tasks/taskRemovedFromActive',
+			})
+			tasksSlice.caseReducers.completedTaskUpserted(state, {
+				payload: newTask,
+				type: 'tasks/completedTaskUpserted',
+			})
         }
 
         state.status = 'succeeded'
@@ -426,10 +463,36 @@ const tasksSlice = createSlice({
         state.status = 'failed'
         state.error = action.error.message ?? null
       })
+
+    // Uncomplete tasks
+    .addCase(uncompleteTask.pending, state => {
+    state.status = 'loading'
+    state.error = null
+    })
+    .addCase(uncompleteTask.fulfilled, (state, action) => {
+    const updatedTask = action.payload
+
+    // Task is active again; remove from completed list and upsert into active lists.
+    tasksSlice.caseReducers.completedTaskRemoved(state, {
+      payload: updatedTask.id,
+      type: 'tasks/completedTaskRemoved',
+    })
+    tasksSlice.caseReducers.taskUpserted(state, {
+      payload: updatedTask,
+      type: 'tasks/taskUpserted',
+    })
+
+    state.status = 'succeeded'
+    state.error = null
+    })
+    .addCase(uncompleteTask.rejected, (state, action) => {
+    state.status = 'failed'
+    state.error = action.error.message ?? null
+    })
   },
 })
 
-export const { setDraft, filterTasks, toggleShowCompleted, toggleGroup } = tasksSlice.actions
+export const { setDraft, filterTasks, toggleShowCompleted, toggleGroup, completedTaskRemoved } = tasksSlice.actions
 
 export const tasksReducer = tasksSlice.reducer
 
@@ -451,11 +514,13 @@ const onTaskCompleted = (data: WSEventPayloads['task_completed']) => {
   if (data.next_due_date) {
     store.dispatch(taskUpserted(data))
   } else {
-    store.dispatch(taskDeleted(data.id))
+		store.dispatch(tasksSlice.actions.taskRemovedFromActive(data.id))
+		store.dispatch(tasksSlice.actions.completedTaskUpserted(data))
   }
 }
 
 const onTaskUncompleted = (data: WSEventPayloads['task_uncompleted']) => {
+  store.dispatch(completedTaskRemoved(data.id))
   store.dispatch(taskUpserted(data))
 }
 

frontend/src/utils/websocket.ts

@@ -280,7 +280,6 @@ export class WebSocketManager {
   private newRequestId(): string {
     try {
       // Modern browsers
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const c: any = crypto
       if (c && typeof c.randomUUID === 'function') {
         return c.randomUUID()

frontend/src/views/Navigation/NavBar.tsx

@@ -20,11 +20,13 @@ import React from 'react'
 import { ThemeToggleButton } from '../Settings/ThemeToggleButton'
 import { SyncStatus } from './SyncStatus'
 import { NavBarLink } from './NavBarLink'
-import { getPathName, NavigationPaths, WithNavigate } from '@/utils/navigation'
+import { NavigationPaths, WithNavigate } from '@/utils/navigation'
 import { isMobile } from '@/utils/dom'
 import { Logo } from '@/Logo'
 
-type NavBarProps = WithNavigate
+type NavBarProps = WithNavigate & {
+  pathname: string
+}
 
 interface NavBarState {
   drawerOpen: boolean
@@ -56,7 +58,7 @@ export class NavBar extends React.Component<NavBarProps, NavBarState> {
   }
 
   render(): React.ReactNode {
-    if (['/signup', '/login', '/forgot-password'].includes(getPathName())) {
+    if (['/signup', '/login', '/forgot-password'].includes(this.props.pathname)) {
       return null
     }