Implement TodoMVC with all its actions

Author: julienw

resources/tentative/todomvc-react-18/src/components/App.tsx

@@ -1,5 +1,94 @@
+import { RouterProvider, createHashRouter } from "react-router-dom";
+import { TodoListPage } from "./TodoListPage";
+import { loader } from "../logic/todo-loader";
+import { pushTodo, toggleTodo, toggleAll, removeTodo, removeCompleted, setText, populate } from "../logic/todo-model";
+
+const router = createHashRouter([
+    {
+        path: "/:filter?",
+        element: <TodoListPage />,
+        loader,
+    },
+    {
+        path: "/api/todos",
+        children: [
+            {
+                path: "new",
+                action: async ({ request }) => {
+                    const formData = await request.formData();
+                    const todoText = formData.get("todoText");
+                    if (todoText) {
+                        return pushTodo(todoText as string);
+                    }
+                    return null;
+                },
+            },
+            {
+                path: "benchmark/populate",
+                action: async () => {
+                    populate();
+                    return null;
+                },
+            },
+            {
+                path: "toggleAll",
+                action: async ({ request }) => {
+                    const formData = await request.formData();
+                    const value = formData.get("value") as string;
+                    if (!["true", "false"].includes(value!)) {
+                        throw new Error(`Invalid parameter "${value}", it must be "true" or "false".`);
+                    }
+                    toggleAll(value === "true");
+                    return null;
+                },
+            },
+            {
+                path: "resetAll",
+                action: async () => {
+                    toggleAll(false);
+                    return null;
+                },
+            },
+            {
+                path: "removeCompleted",
+                action: async () => {
+                    removeCompleted();
+                    return null;
+                },
+            },
+            {
+                path: ":todoId/toggle",
+                action: async ({ params: { todoId } }) => {
+                    toggleTodo(+todoId!);
+                    return null;
+                },
+            },
+            {
+                path: ":todoId/remove",
+                action: async ({ params: { todoId } }) => {
+                    removeTodo(+todoId!);
+                    return null;
+                },
+            },
+            {
+                path: ":todoId/setText",
+                action: async ({ params: { todoId }, request }) => {
+                    const formData = await request.formData();
+                    const text = formData.get("text") as string;
+
+                    setText(+todoId!, text);
+                    return null;
+                },
+            },
+        ],
+    },
+]);
+
 export function App() {
     return (
-        <h1>todos</h1>
+        <>
+            <h1>todos</h1>
+            <RouterProvider router={router} />
+        </>
     );
 }

resources/tentative/todomvc-react-18/src/components/TodoExtraActions.tsx

@@ -0,0 +1,15 @@
+import { Box, Button } from "@mui/material";
+import { useLoaderData, Form } from "react-router-dom";
+import type { LoaderReturnValue } from "../logic/todo-loader";
+export function TodoExtraActions() {
+    const { allTodos } = useLoaderData() as LoaderReturnValue;
+    const hasCompletedItems = allTodos.some((todo) => todo.done);
+
+    return hasCompletedItems ? (
+        <Box sx={{ width: "100%", textAlign: "right" }}>
+            <Form method="post" action="/api/todos/removeCompleted" navigate={false}>
+                <Button type="submit">Clear completed items</Button>
+            </Form>
+        </Box>
+    ) : null;
+}

resources/tentative/todomvc-react-18/src/components/TodoInput.tsx

@@ -0,0 +1,45 @@
+import { TextField, IconButton, Box } from "@mui/material";
+
+// Note: we're importing the icons using a deep import to work around an issue
+// with Firefox devtools in development mode.
+import AddIcon from "@mui/icons-material/Add";
+import KeyboardDoubleArrowDownIcon from "@mui/icons-material/KeyboardDoubleArrowDown";
+
+import { useFetcher, useLoaderData } from "react-router-dom";
+import type { LoaderReturnValue } from "../logic/todo-loader";
+
+export function TodoInput() {
+    const { allTodos } = useLoaderData() as LoaderReturnValue;
+    const hasTodos = allTodos.length > 0;
+    const areAllCompleted = allTodos.every((todo) => todo.done);
+    const fetcher = useFetcher();
+    return (
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+            {hasTodos ? (
+                <fetcher.Form action="/api/todos/toggleAll" method="post">
+                    <IconButton type="submit" aria-label={areAllCompleted ? "Reset all entries" : "Mark all entries as completed"} sx={areAllCompleted ? { color: "black" } : null} name="value" value={String(!areAllCompleted)}>
+                        <KeyboardDoubleArrowDownIcon />
+                    </IconButton>
+                </fetcher.Form>
+            ) : null}
+            <fetcher.Form
+                method="POST"
+                action="/api/todos/new"
+                style={{ display: "flex", alignItems: "center", flex: "auto" }}
+                onSubmit={(e) => {
+                    const form = e.currentTarget;
+                    const { todoText } = form.elements as unknown as { todoText: HTMLInputElement };
+
+                    setTimeout(() => {
+                        todoText.value = "";
+                    });
+                }}
+            >
+                <TextField name="todoText" placeholder="What needs to be done?" sx={{ flex: "auto" }} />
+                <IconButton aria-label="add" type="submit">
+                    <AddIcon />
+                </IconButton>
+            </fetcher.Form>
+        </Box>
+    );
+}

resources/tentative/todomvc-react-18/src/components/TodoItem.tsx

@@ -0,0 +1,55 @@
+import { Input, ListItem, ListItemIcon, ListItemButton, ListItemText, Checkbox, IconButton } from "@mui/material";
+
+// Note: we're importing the icons using a deep import to work around an issue
+// with Firefox devtools in development mode.
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+
+import { useState, memo } from "react";
+
+interface TodoItemProps {
+    todoId: number;
+    todoText: string;
+    todoDone: boolean;
+    onToggle: (todoId: number) => unknown;
+}
+
+export const TodoItem = memo(function ({ todoId, todoText, todoDone, onToggle }: TodoItemProps) {
+    const [edit, setEdit] = useState(false);
+    const labelId = `checkbox-list-label-${todoId}`;
+
+    return (
+        <ListItem
+            secondaryAction={
+                <>
+                    <IconButton edge="end" aria-label="edit" onClick={() => setEdit(!edit)}>
+                        <EditIcon />
+                    </IconButton>
+                    <IconButton edge="end" aria-label="remove" type="submit" formAction={`/api/todos/${todoId}/remove`}>
+                        <DeleteIcon />
+                    </IconButton>
+                </>
+            }
+            disablePadding
+        >
+            {edit ? (
+                <Input
+                    defaultValue={todoText}
+                    autoFocus={true}
+                    onKeyDown={(e) => {
+                        if (e.code === "Escape") setEdit(false);
+                    }}
+                    sx={{ marginLeft: "72px", height: "58px" }}
+                    name="text"
+                />
+            ) : (
+                <ListItemButton role={undefined} sx={{ marginRight: "40px" /* The margin compensates for the 2 icons in secondaryAction */ }} onClick={() => onToggle(todoId)}>
+                    <ListItemIcon>
+                        <Checkbox edge="start" checked={todoDone} tabIndex={-1} inputProps={{ "aria-labelledby": labelId }} />
+                    </ListItemIcon>
+                    <ListItemText id={labelId} primary={todoText} />
+                </ListItemButton>
+            )}
+        </ListItem>
+    );
+});

resources/tentative/todomvc-react-18/src/components/TodoList.tsx

@@ -0,0 +1,27 @@
+import { useCallback } from "react";
+import { useLoaderData, useFetcher } from "react-router-dom";
+import { LoaderReturnValue } from "../logic/todo-loader";
+import { TodoItem } from "./TodoItem";
+import { List } from "@mui/material";
+
+export function TodoList() {
+    const { filteredTodos } = useLoaderData() as LoaderReturnValue;
+    const fetcher = useFetcher();
+    /* The eslint rule doesn't seem to support this case. */
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    const onTodoToggle = useCallback((todoId: number) => fetcher.submit(null, { action: `/api/todos/${todoId}/toggle`, method: "POST" }), [fetcher.submit]);
+    return (
+        <List>
+            {filteredTodos.map((todo) => (
+                <fetcher.Form key={todo.id} action={`/api/todos/${todo.id}/setText`} method="POST">
+                    {/* This submit button is present first, so that it's the default submit button for this form for the purpose of the
+                        implicit submission algorithm. */}
+                    <input type="submit" style={{ display: "none" }} />
+                    {/* We use todo.text as key, so that the element is remounted when the text is changed, and the edit box is hidden.
+                        The alternative would have been to listen for the Enter key inside ListItem, and hide the input in a setTimeout, but I thought this was more fragile. */}
+                    <TodoItem key={todo.text} todoId={todo.id} todoText={todo.text} todoDone={todo.done} onToggle={onTodoToggle} />
+                </fetcher.Form>
+            ))}
+        </List>
+    );
+}

resources/tentative/todomvc-react-18/src/components/TodoListPage.tsx

@@ -0,0 +1,20 @@
+import { Paper } from "@mui/material";
+import { TodoTestActions } from "./TodoTestActions";
+import { TodoInput } from "./TodoInput";
+import { TodoList } from "./TodoList";
+import { TodoNav } from "./TodoNav";
+import { TodoExtraActions } from "./TodoExtraActions";
+
+export function TodoListPage() {
+    return (
+        <>
+            <TodoTestActions />
+            <Paper elevation={1}>
+                <TodoInput />
+                <TodoList />
+                <TodoExtraActions />
+                <TodoNav />
+            </Paper>
+        </>
+    );
+}

resources/tentative/todomvc-react-18/src/components/TodoNav.tsx

@@ -0,0 +1,57 @@
+import { BottomNavigation, BottomNavigationAction, Paper, Badge } from "@mui/material";
+
+// Note: we're importing the icons using a deep import to work around an issue
+// with Firefox devtools in development mode.
+import DoneIcon from "@mui/icons-material/Done";
+import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
+import AlarmIcon from "@mui/icons-material/Alarm";
+
+import { Link as RouterLink, useLoaderData } from "react-router-dom";
+import type { LoaderReturnValue } from "../logic/todo-loader";
+
+export function TodoNav() {
+    const { filter, allTodos } = useLoaderData() as LoaderReturnValue;
+    if (!allTodos.length) {
+        return null;
+    }
+
+    let completedCount = 0;
+    let pendingCount = 0;
+    for (const todo of allTodos) {
+        if (todo.done) {
+            completedCount++;
+        } else {
+            pendingCount++;
+        }
+    }
+
+    return (
+        <Paper elevation={1}>
+            <BottomNavigation showLabels value={filter}>
+                <BottomNavigationAction value="all" label="All" icon={<FormatListBulletedIcon />} component={RouterLink} to="/" />
+                <BottomNavigationAction
+                    value="active"
+                    label="Active"
+                    icon={
+                        <Badge badgeContent={pendingCount} color="primary">
+                            <AlarmIcon aria-label={`${pendingCount} pending items`} />
+                        </Badge>
+                    }
+                    component={RouterLink}
+                    to="/active"
+                />
+                <BottomNavigationAction
+                    value="completed"
+                    label="Completed"
+                    icon={
+                        <Badge badgeContent={completedCount} color="success">
+                            <DoneIcon aria-label={`${completedCount} completed items`} />
+                        </Badge>
+                    }
+                    component={RouterLink}
+                    to="/completed"
+                />
+            </BottomNavigation>
+        </Paper>
+    );
+}

resources/tentative/todomvc-react-18/src/components/TodoTestActions.tsx

@@ -0,0 +1,13 @@
+import { Form } from "react-router-dom";
+import { Box, Button } from "@mui/material";
+export function TodoTestActions() {
+    return (
+        <Box sx={{ padding: 1 }}>
+            <Form action="/api/todos/benchmark/populate" method="post" navigate={false}>
+                <Button variant="contained" type="submit" className="add-lots-of-items-button">
+                    Add lots of items
+                </Button>
+            </Form>
+        </Box>
+    );
+}

resources/tentative/todomvc-react-18/src/logic/todo-loader.ts

@@ -0,0 +1,17 @@
+import type { Params } from "react-router-dom";
+import { getTodos } from "./todo-model";
+
+export function loader({ params }: { params: Params<"filter"> }) {
+    const filter = params.filter ?? "all";
+    if (!["all", "active", "completed"].includes(filter)) {
+        throw new Error(`Invalid filter ${filter}, should be one of all, done or pending`);
+    }
+
+    return {
+        filter,
+        filteredTodos: getTodos(filter as "all" | "active" | "completed"),
+        allTodos: getTodos(),
+    };
+}
+
+export type LoaderReturnValue = Awaited<ReturnType<typeof loader>>;