adjusted remix example

examples/remix/app/routes/_index.tsx

@@ -1,24 +1,151 @@
-import { type MetaFunction, useLoaderData } from "@remix-run/react";
-import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { type MetaFunction, useFetcher, useLoaderData, useOutletContext } from "@remix-run/react";
+import type { ActionFunctionArgs } from "@remix-run/server-runtime";
+import { getApi } from "~/bknd";
 
 export const meta: MetaFunction = () => {
-   return [{ title: "Remix & bknd" }, { name: "description", content: "Welcome to Remix & bknd!" }];
+   return [
+      { title: "New bknd-Remix App" },
+      { name: "description", content: "Welcome to bknd & Remix!" }
+   ];
 };
 
-export const loader = async ({ context: { api } }: LoaderFunctionArgs) => {
-   const { data } = await api.data.readMany("todos");
-   return { data, user: api.getUser() };
+export const loader = async () => {
+   const api = await getApi();
+
+   const limit = 5;
+   const {
+      data: todos,
+      body: { meta }
+   } = await api.data.readMany("todos", {
+      limit,
+      sort: "-id"
+   });
+
+   return { todos: todos.reverse(), total: meta.total, limit };
+};
+
+export const action = async (args: ActionFunctionArgs) => {
+   const api = await getApi();
+   const formData = await args.request.formData();
+   const action = formData.get("action") as string;
+
+   switch (action) {
+      case "update": {
+         const id = Number(formData.get("id"));
+         const done = formData.get("done") === "on";
+
+         if (id > 0) {
+            await api.data.updateOne("todos", id, { done });
+         }
+         break;
+      }
+      case "add": {
+         const title = formData.get("title") as string;
+
+         if (title.length > 0) {
+            await api.data.createOne("todos", { title });
+         }
+         break;
+      }
+      case "delete": {
+         const id = Number(formData.get("id"));
+
+         if (id > 0) {
+            await api.data.deleteOne("todos", id);
+         }
+         break;
+      }
+   }
+
+   return null;
 };
 
 export default function Index() {
-   const { data, user } = useLoaderData<typeof loader>();
+   const ctx = useOutletContext<any>();
+   const { todos, total, limit } = useLoaderData<typeof loader>();
+   const fetcher = useFetcher();
 
    return (
-      <div>
-         <h1>Data</h1>
-         <pre>{JSON.stringify(data, null, 2)}</pre>
-         <h1>User</h1>
-         <pre>{JSON.stringify(user, null, 2)}</pre>
+      <div className="flex h-screen items-center justify-center">
+         <div className="flex flex-col items-center gap-16">
+            <header className="flex flex-col items-center gap-9">
+               <h1 className="leading text-2xl font-bold text-gray-800 dark:text-gray-100">
+                  bknd w/ <span className="sr-only">Remix</span>
+               </h1>
+               <div className="h-[144px] w-[434px]">
+                  <img src="/logo-light.png" alt="Remix" className="block w-full dark:hidden" />
+                  <img src="/logo-dark.png" alt="Remix" className="hidden w-full dark:block" />
+               </div>
+            </header>
+            <nav className="flex flex-col items-center justify-center gap-4 rounded-3xl border border-gray-200 p-6 dark:border-gray-700">
+               <p className="leading-6 text-gray-700 dark:text-gray-200 font-bold">
+                  What&apos;s next? ({total})
+               </p>
+               <div className="flex flex-col w-full gap-2">
+                  {total > limit && (
+                     <div className="bg-white/10 flex justify-center p-1 text-xs rounded text-gray-500">
+                        {total - limit} more todo(s) hidden
+                     </div>
+                  )}
+                  {todos.map((todo) => (
+                     <div className="flex flex-row" key={String(todo.id)}>
+                        <fetcher.Form
+                           className="flex flex-row flex-grow items-center gap-3 ml-1"
+                           method="post"
+                        >
+                           <input
+                              type="checkbox"
+                              name="done"
+                              defaultChecked={todo.done}
+                              onChange={(e) => fetcher.submit(e.currentTarget.form!)}
+                           />
+                           <input type="hidden" name="action" value="update" />
+                           <input type="hidden" name="id" value={String(todo.id)} />
+                           <div className="dark:text-gray-300 text-gray-800">{todo.title}</div>
+                        </fetcher.Form>
+                        <fetcher.Form className="flex items-center" method="post">
+                           <input type="hidden" name="action" value="delete" />
+                           <input type="hidden" name="id" value={String(todo.id)} />
+                           <button
+                              type="submit"
+                              className="cursor-pointer grayscale transition-all hover:grayscale-0 text-xs "
+                           >
+                              ❌
+                           </button>
+                        </fetcher.Form>
+                     </div>
+                  ))}
+                  <fetcher.Form
+                     className="flex flex-row gap-3 mt-2"
+                     method="post"
+                     key={todos.map((t) => t.id).join()}
+                  >
+                     <input
+                        type="text"
+                        name="title"
+                        placeholder="New todo"
+                        className="py-2 px-4 rounded-xl bg-black/5 dark:bg-white/10"
+                     />
+                     <input type="hidden" name="action" value="add" />
+                     <button type="submit" className="cursor-pointer">
+                        Add
+                     </button>
+                  </fetcher.Form>
+               </div>
+            </nav>
+            <div className="flex flex-col items-center gap-4">
+               <a href="/admin">Go to Admin ➝</a>
+               <div className="opacity-50 text-xs">
+                  {ctx.user ? (
+                     <p>
+                        Authenticated as <b>{ctx.user.email}</b>
+                     </p>
+                  ) : (
+                     <a href="/admin/auth/login">Login</a>
+                  )}
+               </div>
+            </div>
+         </div>
       </div>
    );
 }