From 098dac5ab74100f157204e55ac737ad3fb0e3c05 Mon Sep 17 00:00:00 2001
From: pbzweihander <pbzweihander@gmail.com>
Date: Wed, 29 Nov 2023 14:38:03 +0900
Subject: [PATCH] Implement posting note

---
 frontend/src/pages/login/LogInIndex.tsx | 55 +++++++++++++++++++++----
 frontend/src/queries/note.ts            | 23 +++++++++++
 2 files changed, 70 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/queries/note.ts

diff --git a/frontend/src/pages/login/LogInIndex.tsx b/frontend/src/pages/login/LogInIndex.tsx
index a7973bf..3d6bc2d 100644
--- a/frontend/src/pages/login/LogInIndex.tsx
+++ b/frontend/src/pages/login/LogInIndex.tsx
@@ -1,22 +1,59 @@
+import { SubmitHandler, useForm } from "react-hook-form";
+import z from "zod";
+
+import { CreatePost } from "../../dto";
+import { useNotes, usePostNoteMutation } from "../../queries/note";
+
 export function LogInIndexPage() {
-  const notes = new Array(40).fill("foobar"); // TODO: stub
+  const { data: notes } = useNotes();
+  const { register, handleSubmit, reset } =
+    useForm<z.infer<typeof CreatePost>>();
+  const {
+    mutate: postNote,
+    isLoading,
+    error,
+  } = usePostNoteMutation(() => {
+    reset();
+  });
+
+  const onSubmit: SubmitHandler<z.infer<typeof CreatePost>> = (data) => {
+    postNote(data);
+  };
 
   return (
     <div className="relative flex h-full w-full">
       <div className="h-full w-full overflow-y-scroll">
-        {notes.map((note, i) => (
-          <div className="chat chat-start">
-            <div className="chat-bubble">
-              {note} {i}
-            </div>
+        {(notes ?? []).map((note) => (
+          <div className={`chat chat-${note.user != null ? "start" : "end"}`}>
+            {note.user && (
+              <div className="chat-header">
+                {note.user.name != null ? (
+                  <span>
+                    {note.user.name}
+                    <span className="ml-2 text-gray-500">
+                      @{note.user.handle}
+                    </span>
+                  </span>
+                ) : (
+                  <span>@{note.user.handle}</span>
+                )}
+              </div>
+            )}
+            <div className="chat-bubble">{note.text}</div>
           </div>
         ))}
       </div>
-      <form className="chat chat-end absolute bottom-4 right-4">
+      <form
+        className="chat chat-end absolute bottom-4 right-4"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <input type="hidden" value="public" {...register("visibility")} />
         <div className="chat-bubble chat-bubble-primary">
           <textarea
-            className="textarea w-full"
+            className="textarea w-full text-base-content"
             placeholder="Jot something..."
+            required
+            {...register("text")}
           />
         </div>
         <div className="chat-footer">
@@ -24,8 +61,10 @@ export function LogInIndexPage() {
             type="submit"
             className="btn btn-primary btn-sm mt-2"
             value="Chirp!"
+            disabled={isLoading}
           />
         </div>
+        {error && <div className="mt-5 text-error">{error.message}</div>}
       </form>
     </div>
   );
diff --git a/frontend/src/queries/note.ts b/frontend/src/queries/note.ts
new file mode 100644
index 0000000..cd1a11a
--- /dev/null
+++ b/frontend/src/queries/note.ts
@@ -0,0 +1,23 @@
+import { useQueryClient } from "react-query";
+import z from "zod";
+
+import { JsonMutationRet, useJsonQuery, useJsonMutation } from ".";
+import { CreatePost, IdResponse, Post } from "../dto";
+
+const NOTES_KEY = ["notes"];
+
+export function useNotes() {
+  return useJsonQuery(z.array(Post), NOTES_KEY, "/api/post");
+}
+
+export function usePostNoteMutation(
+  onSuccess: () => void,
+): JsonMutationRet<z.infer<typeof CreatePost>, typeof IdResponse> {
+  const queryClient = useQueryClient();
+  return useJsonMutation("POST", "/api/post", IdResponse, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(NOTES_KEY);
+      onSuccess();
+    },
+  });
+}