added edit functionality

Author: blitzard7

public/locales/de/translation.json

@@ -18,5 +18,6 @@
   "completedBadge": "abgeschlossen",
   "pendingBadge": "ausstehend",
   "searchPlaceholder": "tippen, um todos zu suchen ...",
-  "createNewTodo": "Neues Todo erstellen"
+  "createNewTodo": "Neues Todo erstellen",
+  "noTodosFound": "Es gibt keine Todos"
 }

public/locales/en/translation.json

@@ -18,5 +18,6 @@
   "completedBadge": "completed",
   "pendingBadge": "pending",
   "searchPlaceholder": "type to search todos ...",
-  "createNewTodo": "Create new todo"
+  "createNewTodo": "Create new todo",
+  "noTodosFound": "There are no todos"
 }

src/lib/todo.schema.ts

@@ -0,0 +1,20 @@
+import { z } from 'zod';
+
+const todoSchema = z.object({
+  title: z
+    .string()
+    .nonempty({ message: 'This is required' })
+    .min(4, { message: 'At least 4 characters are needed' }),
+  description: z.string().nonempty({ message: 'This is required' }),
+  deadline: z.coerce.date().refine(
+    (date) => {
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+      return date >= today;
+    },
+    { message: 'Deadline cannot be in the past' },
+  ),
+  priority: z.string().nonempty(),
+});
+
+export { todoSchema };

src/routeTree.gen.ts

@@ -13,6 +13,7 @@
 import { Route as rootRoute } from './routes/__root'
 import { Route as IndexImport } from './routes/index'
 import { Route as TodosNewImport } from './routes/todos/new'
+import { Route as TodosTodoIdEditImport } from './routes/todos/$todoId/edit'
 
 // Create/Update Routes
 
@@ -28,6 +29,12 @@ const TodosNewRoute = TodosNewImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const TodosTodoIdEditRoute = TodosTodoIdEditImport.update({
+  id: '/todos/$todoId/edit',
+  path: '/todos/$todoId/edit',
+  getParentRoute: () => rootRoute,
+} as any)
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -46,6 +53,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof TodosNewImport
       parentRoute: typeof rootRoute
     }
+    '/todos/$todoId/edit': {
+      id: '/todos/$todoId/edit'
+      path: '/todos/$todoId/edit'
+      fullPath: '/todos/$todoId/edit'
+      preLoaderRoute: typeof TodosTodoIdEditImport
+      parentRoute: typeof rootRoute
+    }
   }
 }
 
@@ -54,36 +68,41 @@ declare module '@tanstack/react-router' {
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/todos/new': typeof TodosNewRoute
+  '/todos/$todoId/edit': typeof TodosTodoIdEditRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/todos/new': typeof TodosNewRoute
+  '/todos/$todoId/edit': typeof TodosTodoIdEditRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexRoute
   '/todos/new': typeof TodosNewRoute
+  '/todos/$todoId/edit': typeof TodosTodoIdEditRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/todos/new'
+  fullPaths: '/' | '/todos/new' | '/todos/$todoId/edit'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/todos/new'
-  id: '__root__' | '/' | '/todos/new'
+  to: '/' | '/todos/new' | '/todos/$todoId/edit'
+  id: '__root__' | '/' | '/todos/new' | '/todos/$todoId/edit'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   TodosNewRoute: typeof TodosNewRoute
+  TodosTodoIdEditRoute: typeof TodosTodoIdEditRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   TodosNewRoute: TodosNewRoute,
+  TodosTodoIdEditRoute: TodosTodoIdEditRoute,
 }
 
 export const routeTree = rootRoute
@@ -97,14 +116,18 @@ export const routeTree = rootRoute
       "filePath": "__root.tsx",
       "children": [
         "/",
-        "/todos/new"
+        "/todos/new",
+        "/todos/$todoId/edit"
       ]
     },
     "/": {
       "filePath": "index.tsx"
     },
     "/todos/new": {
       "filePath": "todos/new.tsx"
+    },
+    "/todos/$todoId/edit": {
+      "filePath": "todos/$todoId/edit.tsx"
     }
   }
 }

src/routes/__root.tsx

@@ -1,5 +1,5 @@
-import { Outlet, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { Outlet, createRootRoute } from '@tanstack/react-router';
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
 
 export const Route = createRootRoute({
   component: () => (
@@ -8,4 +8,4 @@ export const Route = createRootRoute({
       <TanStackRouterDevtools />
     </>
   ),
-})
+});

src/routes/index.tsx

@@ -4,6 +4,7 @@ import {
   ButtonLink,
   CheckIcon,
   ClockIcon,
+  EmptyTodoList,
   Header,
   SearchBar,
   TodoCard,
@@ -17,6 +18,7 @@ export const Route = createFileRoute('/')({
 });
 
 function App() {
+  const navigate = Route.useNavigate();
   const [searchQuery, setSearchQuery] = useState('');
   const todos = useTodoStore((state) => state.todos);
   const deleteTodos = useTodoStore((state) => state.delete);
@@ -27,6 +29,10 @@ function App() {
     setSearchQuery(e.target.value);
   };
 
+  const onEdit = (todoId: string) => {
+    navigate({ to: '/todos/$todoId/edit', params: { todoId } });
+  };
+
   const lowerSearchQuery = searchQuery.toLowerCase();
   const filteredTodos = useMemo(() => {
     return todos.filter(
@@ -36,6 +42,17 @@ function App() {
     );
   }, [todos, lowerSearchQuery]);
 
+  const todoCards = filteredTodos.map((todo) => {
+    return (
+      <TodoCard
+        key={todo.id}
+        todo={todo}
+        onDelete={deleteTodos}
+        onEdit={onEdit}
+      />
+    );
+  });
+
   return (
     <div className="min-h-screen bg-gray-50 pt-16 space-y-8">
       <div className="container mx-auto px-4 py-8">
@@ -74,16 +91,16 @@ function App() {
             </Badge>
           </div>
         </div>
-        <div
-          data-testid="todos"
-          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pt-8"
-        >
-          {filteredTodos.map((todo) => {
-            return (
-              <TodoCard key={todo.id} todo={todo} onDelete={deleteTodos} />
-            );
-          })}
-        </div>
+        {filteredTodos.length === 0 ? (
+          <EmptyTodoList />
+        ) : (
+          <div
+            data-testid="todos"
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pt-8"
+          >
+            {todoCards}
+          </div>
+        )}
       </div>
     </div>
   );