Merge pull request #32 from MurakawaTakuya/create-goal-form

目標を作成し、期限の日付を設定する

functions/src/routers/goalRouter.ts

@@ -80,11 +80,14 @@ router.route("/").post(async (req: Request, res: Response) => {
 
   try {
     // goalId をドキュメント名として使用してデータを保存
-    await db.collection("goal").doc(goalId).set({
-      userId: userId,
-      deadline: deadline,
-      text: text,
-    });
+    await db
+      .collection("goal")
+      .doc(goalId)
+      .set({
+        userId: userId,
+        deadline: admin.firestore.Timestamp.fromDate(new Date(deadline)),
+        text: text,
+      });
 
     return res
       .status(201)

src/app/Components/Goal/Goal.tsx

@@ -0,0 +1,68 @@
+"use client";
+import { useState } from "react";
+
+export default function Goal() {
+  const [text, setText] = useState("");
+  const [dueDate, setDueDate] = useState("");
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    try {
+      const response = await fetch(
+        "http://127.0.0.1:5001/todo-real-c28fa/asia-northeast1/firestore/goal/",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            userId: "sampleUser123",
+            text: text,
+            deadline: dueDate,
+          }),
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`Network response was not ok: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      console.log("Success:", data);
+
+      setText("");
+      setDueDate("");
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        console.error("Fetch error:", error.message);
+      } else {
+        console.error("An unknown error occurred");
+      }
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        目標テキスト:
+        <input
+          type="text"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          required
+        />
+      </label>
+      <label>
+        期日:
+        <input
+          type="datetime-local"
+          value={dueDate}
+          onChange={(e) => setDueDate(e.target.value)}
+          required
+        />
+      </label>
+      <button type="submit">アップロード</button>
+    </form>
+  );
+}

src/app/page.tsx

@@ -1,3 +1,4 @@
+import Goal from "./Components/Goal/Goal";
 import Posts from "./Components/Posts/Posts";
 import UpLoadTest from "./Components/Uploader/Uploader";
 
@@ -6,6 +7,7 @@ export default function Home() {
     <>
       <Posts />
       <UpLoadTest />
+      <Goal></Goal>
     </>
   );
 }