From b09a072fb954df0a2b443d8da18a62afe2cff3f2 Mon Sep 17 00:00:00 2001 From: Drew Galbraith Date: Mon, 22 Sep 2025 21:21:30 -0700 Subject: [PATCH] Add multiselect. --- frontend/app/components/TaskList.tsx | 146 ++++++++++++++++++++++++++- frontend/app/hooks/useTasks.ts | 30 +++++- frontend/app/routes.ts | 7 +- frontend/app/routes/$.tsx | 25 +++++ frontend/app/routes/home.test.tsx | 10 +- frontend/app/routes/home.tsx | 35 +++++-- frontend/vite.config.ts | 3 + 7 files changed, 235 insertions(+), 21 deletions(-) create mode 100644 frontend/app/routes/$.tsx diff --git a/frontend/app/components/TaskList.tsx b/frontend/app/components/TaskList.tsx index 5bbb868..8503ffb 100644 --- a/frontend/app/components/TaskList.tsx +++ b/frontend/app/components/TaskList.tsx @@ -17,9 +17,18 @@ import { TableRow, useMediaQuery, useTheme, + Checkbox, + Toolbar, + Button, + Dialog, + DialogTitle, + DialogContent, + DialogContentText, + DialogActions, } from '@mui/material' +import { Delete as DeleteIcon } from '@mui/icons-material' import { useTasks } from '~/hooks/useTasks' -import { TaskStatus } from '~/types/task' +import { TaskStatus, type Task } from '~/types/task' import LoadingSpinner from './LoadingSpinner' type SortOption = @@ -31,12 +40,18 @@ type SortOption = interface TaskListProps { className?: string + initialTasks?: Task[] } -export function TaskList({ className }: TaskListProps) { - const { tasks, loading, error } = useTasks() +export function TaskList({ className, initialTasks }: TaskListProps) { + const { tasks, loading, error, deleteTask } = useTasks({ + autoFetch: !initialTasks, + initialData: initialTasks, + }) const [statusFilter, setStatusFilter] = useState('all') const [sortBy, setSortBy] = useState('created_desc') + const [selectedTaskIds, setSelectedTaskIds] = useState>(new Set()) + const [deleteDialogOpen, setDeleteDialogOpen] = useState(false) const theme = useTheme() const isMobile = useMediaQuery(theme.breakpoints.down('md')) @@ -107,6 +122,54 @@ export function TaskList({ className }: TaskListProps) { return `${Math.floor(diffInDays / 365)}y ago` } + const handleSelectAll = (checked: boolean) => { + if (checked) { + setSelectedTaskIds(new Set(filteredAndSortedTasks.map(task => task.id))) + } else { + setSelectedTaskIds(new Set()) + } + } + + const handleSelectTask = (taskId: string, checked: boolean) => { + const newSelected = new Set(selectedTaskIds) + if (checked) { + newSelected.add(taskId) + } else { + newSelected.delete(taskId) + } + setSelectedTaskIds(newSelected) + } + + const handleBulkDelete = async () => { + try { + const results = await Promise.all( + Array.from(selectedTaskIds).map(taskId => deleteTask(taskId)) + ) + + // Check if all deletions were successful + const allSuccessful = results.every(result => result === true) + + if (allSuccessful) { + setSelectedTaskIds(new Set()) + setDeleteDialogOpen(false) + } else { + console.error('Some tasks failed to delete') + // Clear selection of successfully deleted tasks + const failedTaskIds = Array.from(selectedTaskIds).filter( + (taskId, index) => !results[index] + ) + setSelectedTaskIds(new Set(failedTaskIds)) + } + } catch (error) { + console.error('Error deleting tasks:', error) + } + } + + const isAllSelected = + filteredAndSortedTasks.length > 0 && + filteredAndSortedTasks.every(task => selectedTaskIds.has(task.id)) + const isIndeterminate = selectedTaskIds.size > 0 && !isAllSelected + if (loading) { return } @@ -171,6 +234,31 @@ export function TaskList({ className }: TaskListProps) { + {/* Bulk Actions Toolbar */} + {selectedTaskIds.size > 0 && ( + + + + {selectedTaskIds.size} task{selectedTaskIds.size > 1 ? 's' : ''}{' '} + selected + + + + + )} + {/* Task Table */} {filteredAndSortedTasks.length === 0 ? ( @@ -188,6 +276,17 @@ export function TaskList({ className }: TaskListProps) { + + handleSelectAll(e.target.checked)} + inputProps={{ + 'aria-label': 'select all tasks', + }} + /> + Title {!isMobile && ( Description @@ -214,11 +313,27 @@ export function TaskList({ className }: TaskListProps) { backgroundColor: 'action.hover', }, '&:last-child td, &:last-child th': { border: 0 }, + backgroundColor: selectedTaskIds.has(task.id) + ? 'action.selected' + : 'inherit', }} > + + + handleSelectTask(task.id, e.target.checked) + } + inputProps={{ + 'aria-labelledby': `task-${task.id}`, + }} + /> + )} + + {/* Delete Confirmation Dialog */} + setDeleteDialogOpen(false)} + aria-labelledby="delete-dialog-title" + aria-describedby="delete-dialog-description" + > + + Delete {selectedTaskIds.size} task + {selectedTaskIds.size > 1 ? 's' : ''}? + + + + This action cannot be undone. Are you sure you want to delete the + selected task{selectedTaskIds.size > 1 ? 's' : ''}? + + + + + + + ) } diff --git a/frontend/app/hooks/useTasks.ts b/frontend/app/hooks/useTasks.ts index 740d096..3b91795 100644 --- a/frontend/app/hooks/useTasks.ts +++ b/frontend/app/hooks/useTasks.ts @@ -13,6 +13,7 @@ interface UseTasksState { interface UseTasksActions { fetchTasks: () => Promise createTask: (data: CreateTaskRequest) => Promise + deleteTask: (id: string) => Promise refreshTasks: () => Promise clearError: () => void getTaskById: (id: string) => Task | undefined @@ -22,18 +23,19 @@ interface UseTasksActions { interface UseTasksOptions { autoFetch?: boolean refreshInterval?: number + initialData?: Task[] } export function useTasks( options: UseTasksOptions = {} ): UseTasksState & UseTasksActions { - const { autoFetch = true, refreshInterval } = options + const { autoFetch = true, refreshInterval, initialData } = options const [state, setState] = useState({ - tasks: [], + tasks: initialData || [], loading: false, error: null, - lastFetch: null, + lastFetch: initialData ? new Date() : null, }) const clearError = useCallback(() => { @@ -89,6 +91,27 @@ export function useTasks( [] ) + const deleteTask = useCallback(async (id: string): Promise => { + try { + await apiClient.deleteTask(id) + + // Remove the task from the local state immediately + setState(prev => ({ + ...prev, + tasks: prev.tasks.filter(task => task.id !== id), + })) + + return true + } catch (error) { + const apiError = error as ApiError + setState(prev => ({ + ...prev, + error: apiError.message, + })) + return false + } + }, []) + const refreshTasks = useCallback(async () => { // Force refresh without showing loading state if tasks already exist const showLoading = state.tasks.length === 0 @@ -153,6 +176,7 @@ export function useTasks( ...state, fetchTasks, createTask, + deleteTask, refreshTasks, clearError, getTaskById, diff --git a/frontend/app/routes.ts b/frontend/app/routes.ts index f8effb3..c74f179 100644 --- a/frontend/app/routes.ts +++ b/frontend/app/routes.ts @@ -1,3 +1,6 @@ -import { type RouteConfig, index } from '@react-router/dev/routes' +import { type RouteConfig, index, route } from '@react-router/dev/routes' -export default [index('routes/home.tsx')] satisfies RouteConfig +export default [ + index('routes/home.tsx'), + route('*', 'routes/$.tsx'), +] satisfies RouteConfig diff --git a/frontend/app/routes/$.tsx b/frontend/app/routes/$.tsx new file mode 100644 index 0000000..a567239 --- /dev/null +++ b/frontend/app/routes/$.tsx @@ -0,0 +1,25 @@ +import { redirect } from 'react-router' +import type { Route } from './+types/$' + +export async function loader({ request }: Route.LoaderArgs) { + const url = new URL(request.url) + + // Handle React DevTools and other development files + if ( + url.pathname.endsWith('.js.map') || + url.pathname.includes('installHook') || + url.pathname.startsWith('/__') || + url.pathname.startsWith('/node_modules/') + ) { + // Return a 404 response for these dev-only requests + throw new Response('Not Found', { status: 404 }) + } + + // For any other unmatched routes, redirect to home + return redirect('/') +} + +export default function CatchAll() { + // This component should never render since we always redirect or throw + return null +} diff --git a/frontend/app/routes/home.test.tsx b/frontend/app/routes/home.test.tsx index d0d2427..e15502f 100644 --- a/frontend/app/routes/home.test.tsx +++ b/frontend/app/routes/home.test.tsx @@ -4,12 +4,12 @@ import Home from './home' describe('Home component', () => { it('should render task management interface', () => { - render() - expect(screen.getByText(/Tasks/i)).toBeInTheDocument() + const mockLoaderData = { tasks: [] } + render() expect( - screen.getByText(/GTD-inspired task management system/i) + screen.getByRole('heading', { level: 1, name: /Tasks/i }) ).toBeInTheDocument() - // TaskList component should be rendered (initially shows loading state) - expect(screen.getByText(/Loading.../i)).toBeInTheDocument() + // TaskList component should be rendered with empty state + expect(screen.getByText(/No tasks found/i)).toBeInTheDocument() }) }) diff --git a/frontend/app/routes/home.tsx b/frontend/app/routes/home.tsx index 1f0465c..bffbd4a 100644 --- a/frontend/app/routes/home.tsx +++ b/frontend/app/routes/home.tsx @@ -1,27 +1,46 @@ import type { Route } from './+types/home' import { Box, Typography, Container } from '@mui/material' import { TaskList } from '~/components/TaskList' +import type { Task } from '~/types/task' export function meta(_: Route.MetaArgs) { return [ { title: "Captain's Log - Tasks" }, - { name: 'description', content: 'GTD-inspired task management system' }, + { name: 'description', content: 'Task Dashboard' }, ] } -export default function Home() { +export async function loader(): Promise<{ tasks: Task[] }> { + try { + // Fetch tasks from the backend API during SSR + const apiUrl = process.env.API_URL || 'http://localhost:3000' + const response = await fetch(`${apiUrl}/api/tasks`, { + headers: { + 'Content-Type': 'application/json', + }, + }) + + if (!response.ok) { + console.error('Failed to fetch tasks:', response.statusText) + return { tasks: [] } + } + + const tasks = await response.json() + return { tasks } + } catch (error) { + console.error('Error fetching tasks during SSR:', error) + return { tasks: [] } + } +} + +export default function Home({ loaderData }: Route.ComponentProps) { return ( Tasks - - Your GTD-inspired task management system. Capture everything, see only - what matters. - - - + ) diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index d2e73cc..5442d2b 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -12,4 +12,7 @@ export default defineConfig({ }, }, }, + build: { + sourcemap: true, + }, });