Update react-app example

ije · ije · commit d0c190ae1c4c · 2022-04-30T19:25:12.000+08:00
diff --git a/examples/react-app/routes/index.tsx b/examples/react-app/routes/index.tsx
@@ -4,10 +4,11 @@ export default function Index() {
   return (
     <div className="page y-center">
       <Head>
-        <title>About Aleph.js</title>
+        <title>Aleph.js</title>
+        <meta name="description" content="The Fullstack Framework in Deno." />
       </Head>
       <p className="logo">
-        <img src="/assets/logo.svg" height="75" title="Aleph.js" />
+        <img src="/assets/logo.svg" width="75" height="75" title="Aleph.js" />
       </p>
       <h1>
         The Fullstack Framework in Deno.
diff --git a/examples/react-app/routes/todos.tsx b/examples/react-app/routes/todos.tsx
@@ -10,43 +10,43 @@ type DataProps = {
   todos: TodoItem[];
 };
 
-const storage: DataProps = {
-  todos: JSON.parse(window.localStorage?.getItem("todos") || "[]"),
-};
-
-export const data: Data<DataProps> = {
+export const data: Data<DataProps, DataProps> = {
+  cacheTtl: 0,
+  any: (_req, ctx) => {
+    ctx.todos = JSON.parse(window.localStorage?.getItem("todos") || "[]");
+  },
   get: (_req, ctx) => {
-    return ctx.json(storage);
+    return ctx.json({ todos: ctx.todos });
   },
   put: async (req, ctx) => {
     const { message } = await req.json();
     if (typeof message === "string") {
-      storage.todos.push({ id: Date.now(), message, completed: false });
-      window.localStorage?.setItem("todos", JSON.stringify(storage.todos));
+      ctx.todos.push({ id: Date.now(), message, completed: false });
+      window.localStorage?.setItem("todos", JSON.stringify(ctx.todos));
     }
-    return ctx.json(storage);
+    return ctx.json({ todos: ctx.todos });
   },
   patch: async (req, ctx) => {
     const { id, message, completed } = await req.json();
-    const todo = storage.todos.find((todo) => todo.id === id);
+    const todo = ctx.todos.find((todo) => todo.id === id);
     if (todo) {
       if (typeof message === "string") {
         todo.message = message;
       }
       if (typeof completed === "boolean") {
         todo.completed = completed;
       }
-      window.localStorage?.setItem("todos", JSON.stringify(storage.todos));
+      window.localStorage?.setItem("todos", JSON.stringify(ctx.todos));
     }
-    return ctx.json(storage);
+    return ctx.json({ todos: ctx.todos });
   },
   delete: async (req, ctx) => {
     const { id } = await req.json();
     if (id) {
-      storage.todos = storage.todos.filter((todo) => todo.id !== id);
-      window.localStorage?.setItem("todos", JSON.stringify(storage.todos));
+      ctx.todos = ctx.todos.filter((todo) => todo.id !== id);
+      window.localStorage?.setItem("todos", JSON.stringify(ctx.todos));
     }
-    return ctx.json(storage);
+    return ctx.json({ todos: ctx.todos });
   },
 };
 
