use query api

Author: SandroMaglione

src/components/Spinner.tsx

@@ -0,0 +1,9 @@
+import { LoaderCircleIcon } from "lucide-react";
+
+export default function Spinner() {
+  return (
+    <div className="flex items-center justify-center">
+      <LoaderCircleIcon size={16} className="animate-spin" />
+    </div>
+  );
+}

src/components/date-logs.tsx

@@ -1,45 +1,54 @@
-import { Either } from "effect";
 import { XIcon } from "lucide-react";
 import { Button } from "react-aria-components";
 import { useDeleteLog } from "../lib/hooks/use-delete-log";
 import { useGetLogByDate } from "../lib/hooks/use-get-log-by-date";
 import { textColor } from "../styles";
+import Spinner from "./Spinner";
 
 export default function DateLogs({ date }: { date: string }) {
   const [_, action, pending] = useDeleteLog();
-  const logByDate = useGetLogByDate(date);
-  return Either.isRight(logByDate) ? (
+  const { error, data, loading } = useGetLogByDate(date);
+
+  if (loading) {
+    return <Spinner />;
+  } else if (error) {
+    return <div>{error.message}</div>;
+  }
+
+  return (
     <div className="flex flex-wrap items-center justify-center gap-2">
-      {logByDate.right.map((log) => (
-        <div
-          key={log.logId}
-          className={textColor({
-            theme: log.color,
-            className:
-              "border rounded-md inline-flex items-center gap-x-2 px-2 py-1",
-          })}
-        >
-          <form
-            action={action}
-            className="inline-flex items-center justify-center"
+      {data.length === 0 ? (
+        <span className="text-sm text-fuchsia/50">No activity</span>
+      ) : (
+        data.map((log) => (
+          <div
+            key={log.logId}
+            className={textColor({
+              theme: log.color,
+              className:
+                "border rounded-md inline-flex items-center gap-x-2 px-2 py-1",
+            })}
           >
-            <input type="hidden" value={log.logId} name="log-id" />
-            <Button
-              type="submit"
-              isDisabled={pending}
-              className="text-sm hover:cursor-pointer"
+            <form
+              action={action}
+              className="inline-flex items-center justify-center"
             >
-              <XIcon
-                size={16}
-                className="hover:scale-125 transition-transform duration-150"
-              />
-            </Button>
-          </form>
-          <span>{log.name}</span>
-        </div>
-      ))}
+              <input type="hidden" value={log.logId} name="log-id" />
+              <Button
+                type="submit"
+                isDisabled={pending}
+                className="text-sm hover:cursor-pointer"
+              >
+                <XIcon
+                  size={16}
+                  className="hover:scale-125 transition-transform duration-150"
+                />
+              </Button>
+            </form>
+            <span>{log.name}</span>
+          </div>
+        ))
+      )}
     </div>
-  ) : (
-    <div>{logByDate.left._tag}</div>
   );
 }

src/components/insert-activity.tsx

@@ -1,18 +1,20 @@
-import { Either } from "effect";
 import { Radio } from "react-aria-components";
 import { useGetCategories } from "../lib/hooks/use-get-categories";
 import { useInsertActivity } from "../lib/hooks/use-insert-activity";
 import CategoryDot from "./category-dot";
+import Spinner from "./Spinner";
 import { Button } from "./ui/button";
 import { RadioGroup } from "./ui/radio-group";
 import { FieldError, Input, Label, TextField } from "./ui/text-field";
 
 export default function InsertActivity() {
   const [, action, pending] = useInsertActivity();
-  const categories = useGetCategories();
+  const { data, error, loading } = useGetCategories();
 
-  if (Either.isLeft(categories)) {
-    return <div>Loading...</div>;
+  if (loading) {
+    return <Spinner />;
+  } else if (error) {
+    return <div>{error.message}</div>;
   }
 
   return (
@@ -25,7 +27,7 @@ export default function InsertActivity() {
 
       <RadioGroup className="flex flex-wrap gap-2" name="category-id">
         <Label hidden>Category</Label>
-        {categories.right.map((category) => (
+        {data.map((category) => (
           <Radio
             key={category.categoryId}
             id={`${category.categoryId}`}

src/components/insert-log.tsx

@@ -1,16 +1,23 @@
-import { Either } from "effect";
 import { PlusIcon } from "lucide-react";
 import { Button } from "react-aria-components";
 import { useGetActivities } from "../lib/hooks/use-get-activities";
 import { useInsertLog } from "../lib/hooks/use-insert-log";
 import { textColor } from "../styles";
+import Spinner from "./Spinner";
 
 export default function InsertLog({ date }: { date: string }) {
-  const activities = useGetActivities();
   const [, action, pending] = useInsertLog(date);
-  return Either.isRight(activities) ? (
+  const { data, error, loading } = useGetActivities();
+
+  if (loading) {
+    return <Spinner />;
+  } else if (error) {
+    return <div>{error.message}</div>;
+  }
+
+  return (
     <div className="flex flex-wrap gap-2">
-      {activities.right.map((activity) => (
+      {data.map((activity) => (
         <div
           key={activity.activityId}
           className={textColor({
@@ -43,7 +50,5 @@ export default function InsertLog({ date }: { date: string }) {
         </div>
       ))}
     </div>
-  ) : (
-    <div>{activities.left._tag}</div>
   );
 }

src/lib/hooks/use-pglite-query.ts

@@ -1,10 +1,10 @@
 import { useLiveQuery } from "@electric-sql/pglite-react";
 import type { Query } from "drizzle-orm";
 import {
-  Array,
   Data,
   Either,
   flow,
+  Match,
   pipe,
   Schema,
   type ParseResult,
@@ -31,21 +31,28 @@ export const useQuery = <A, I>(
         Schema.decodeEither(Schema.Array(schema)),
         Either.mapLeft((parseError) => new InvalidData({ parseError }))
       )
-    )
-  );
-};
-
-export const useQuerySingle = <A, I>(
-  ...args: Parameters<typeof useQuery<A, I>>
-) => {
-  const results = useQuery(...args);
-  return pipe(
-    results,
-    Either.flatMap(
-      flow(
-        Array.head,
-        Either.fromOption(() => new MissingData())
-      )
-    )
+    ),
+    Either.match({
+      onLeft: (_) =>
+        Match.value(_).pipe(
+          Match.tagsExhaustive({
+            InvalidData: ({ parseError }) => ({
+              error: parseError,
+              loading: false as const,
+              data: undefined,
+            }),
+            MissingData: (_) => ({
+              loading: true as const,
+              data: undefined,
+              error: undefined,
+            }),
+          })
+        ),
+      onRight: (rows) => ({
+        data: rows,
+        loading: false as const,
+        error: undefined,
+      }),
+    })
   );
 };

src/routes/index.tsx

@@ -29,7 +29,7 @@ function HomeComponent() {
   const { date } = Route.useSearch();
   return (
     <div className="mx-auto max-w-[32rem] py-12 flex flex-col gap-y-12">
-      <div className="flex flex-col gap-y-8 items-center">
+      <div className="flex flex-col gap-y-12 items-center">
         <div className="flex flex-col items-center gap-y-4">
           <Link
             to="."