useContext開発中

MurakawaTakuya · Jan 16, 2025 · 4d4236f · 4d4236f
1 parent eb45e30
commit 4d4236f
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 37 deletions.
diff --git a/functions/src/index.ts b/functions/src/index.ts
@@ -69,10 +69,10 @@ app.use(
   rateLimit({
     windowMs: 10 * 60 * 1000,
     max: 100,
-    keyGenerator: (req) => {
-      const key = req.headers["x-forwarded-for"] || req.ip || "unknown";
-      return Array.isArray(key) ? key[0] : key;
-    },
+    // keyGenerator: (req) => {
+    //   const key = req.headers["x-forwarded-for"] || req.ip || "unknown";
+    //   return Array.isArray(key) ? key[0] : key;
+    // },
     handler: (req, res) => {
       return res
         .status(429)
@@ -85,10 +85,10 @@ app.use(
   rateLimit({
     windowMs: 60 * 60 * 1000,
     max: 300,
-    keyGenerator: (req) => {
-      const key = req.headers["x-forwarded-for"] || req.ip || "unknown";
-      return Array.isArray(key) ? key[0] : key;
-    },
+    // keyGenerator: (req) => {
+    //   const key = req.headers["x-forwarded-for"] || req.ip || "unknown";
+    //   return Array.isArray(key) ? key[0] : key;
+    // },
     handler: (req, res) => {
       return res
         .status(429)

diff --git a/src/Components/DashBoard/DashBoard.tsx b/src/Components/DashBoard/DashBoard.tsx
@@ -268,5 +268,5 @@ export default function DashBoard({
 }
 
 export function triggerDashBoardRerender() {
-  rerenderDashBoard();
+  // rerenderDashBoard();
 }
diff --git a/src/Components/DeleteGoalModal/DeleteGoalModal.tsx b/src/Components/DeleteGoalModal/DeleteGoalModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { appCheckToken, functionsEndpoint } from "@/app/firebase";
-import { triggerDashBoardRerender } from "@/Components/DashBoard/DashBoard";
+import { useDeleteGoal } from "@/utils/ResultContext";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import { DialogContent, DialogTitle, Modal, ModalDialog } from "@mui/joy";
 import JoyButton from "@mui/joy/Button";
@@ -10,6 +10,7 @@ import { useState } from "react";
 import { showSnackBar } from "../SnackBar/SnackBar";
 
 export default function DeleteGoalModal({ goalId }: { goalId: string }) {
+  const deleleGoal = useDeleteGoal();
   const [open, setOpen] = useState(false);
 
   const handleDeleteGoal = async () => {
@@ -32,7 +33,7 @@ export default function DeleteGoalModal({ goalId }: { goalId: string }) {
         message: "目標を削除しました",
         type: "success",
       });
-      triggerDashBoardRerender();
+      deleleGoal(goalId);
     }
   };
 

diff --git a/src/Components/GoalModal/CreateGoalModal.tsx b/src/Components/GoalModal/CreateGoalModal.tsx
@@ -2,6 +2,7 @@
 import { showSnackBar } from "@/Components/SnackBar/SnackBar";
 import { Goal } from "@/types/types";
 import { createGoal, handleCreateGoalError } from "@/utils/API/Goal/createGoal";
+import { useAddGoal } from "@/utils/ResultContext";
 import { useUser } from "@/utils/UserContext";
 import AddIcon from "@mui/icons-material/Add";
 import {
@@ -32,6 +33,7 @@ export default function CreateGoalModal({
   const [deadline, setDeadline] = useState("");
 
   const { user } = useUser();
+  const addResult = useAddGoal();
 
   const resetDeadline = () => {
     // 次の日の23時に設定
@@ -70,14 +72,23 @@ export default function CreateGoalModal({
     };
 
     try {
-      await createGoal(postData);
+      const data = await createGoal(postData);
 
       showSnackBar({
         message: "目標を作成しました",
         type: "success",
       });
       triggerDashBoardRerender();
 
+      if (user) {
+        addResult({
+          ...postData,
+          goalId: data.goalId,
+          userData: user,
+          deadline: deadline,
+        });
+      }
+
       setText(defaultText || "");
       setDeadline(defaultDeadline || resetDeadline());
       setOpen(false);

diff --git a/src/Components/PostModal/PostModal.tsx b/src/Components/PostModal/PostModal.tsx
@@ -48,7 +48,7 @@ export default function PostModal({
 
     if (!selectedFile) {
       showSnackBar({
-        message: "ファイルが選択されていません",
+        message: "画像が選択されていません",
         type: "warning",
       });
       return;
@@ -80,7 +80,7 @@ export default function PostModal({
   const handleUpload = async () => {
     if (!image) {
       showSnackBar({
-        message: "ファイルが選択されていません",
+        message: "画像が選択されていません",
         type: "warning",
       });
       return;

diff --git a/src/app/discover/page.tsx b/src/app/discover/page.tsx
@@ -3,7 +3,6 @@ import DashBoard, {
   triggerDashBoardRerender,
 } from "@/Components/DashBoard/DashBoard";
 import GoalModalButton from "@/Components/GoalModal/GoalModalButton";
-import { ResultProvider } from "@/utils/ResultContext";
 import { useEffect } from "react";
 
 export default function Discover() {
@@ -13,9 +12,7 @@ export default function Discover() {
 
   return (
     <>
-      <ResultProvider>
-        <DashBoard pending={false} />
-      </ResultProvider>
+      <DashBoard pending={false} />
       <GoalModalButton />
     </>
   );

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,11 +3,13 @@ import NavigationMenu from "@/Components/NavigationMenu/NavigationMenu";
 import SnackBar from "@/Components/SnackBar/SnackBar";
 import "@/styles/globals.scss";
 import "@/utils/CloudMessaging/getNotification";
+import { ResultProvider } from "@/utils/ResultContext";
 import { UserProvider } from "@/utils/UserContext";
 import type { Metadata } from "next";
 import "./firebase";
 
-const description = "TODO REALはTODOリストとBeRealを組み合わせたアプリです。";
+const description =
+  "TODO REALは、TODOリストとBeRealを組み合わせたアプリです。友達とTODOリストを共有し、目標達成をサポートし合うことで、達成感や楽しさを共有できます。完了したTODOの写真投稿や競争機能で、目標達成がもっと楽しくなります!";
 export const rootURL = "https://todo-real-c28fa.web.app/";
 
 export const metadata: Metadata = {
@@ -76,10 +78,12 @@ export default function RootLayout({
       </head>
       <body>
         <UserProvider>
-          <Loader>
-            {children}
-            <NavigationMenu />
-          </Loader>
+          <ResultProvider>
+            <Loader>
+              {children}
+              <NavigationMenu />
+            </Loader>
+          </ResultProvider>
           <SnackBar />
         </UserProvider>
       </body>

diff --git a/src/app/mycontent/page.tsx b/src/app/mycontent/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 import DashBoard from "@/Components/DashBoard/DashBoard";
 import GoalModalButton from "@/Components/GoalModal/GoalModalButton";
-import { ResultProvider } from "@/utils/ResultContext";
 import { useUser } from "@/utils/UserContext";
 import Typography from "@mui/joy/Typography";
 import { styled } from "@mui/material/styles";
@@ -63,20 +62,16 @@ export default function MyContent() {
           メールに届いた認証リンクを確認してください。
         </Typography>
       ) : value === "pending" ? (
-        <ResultProvider>
-          <DashBoard
-            key="pending"
-            userId={user?.userId}
-            success={false}
-            failed={false}
-            orderBy="asc"
-          />
-        </ResultProvider>
+        <DashBoard
+          key="pending"
+          userId={user?.userId}
+          success={false}
+          failed={false}
+          orderBy="asc"
+        />
       ) : (
         value === "finished" && (
-          <ResultProvider>
-            <DashBoard key="finished" userId={user?.userId} pending={false} />
-          </ResultProvider>
+          <DashBoard key="finished" userId={user?.userId} pending={false} />
         )
       )}
 

diff --git a/src/utils/ResultContext.tsx b/src/utils/ResultContext.tsx
@@ -1,4 +1,5 @@
-import { GoalWithIdAndUserData } from "@/types/types";
+"use client";
+import { GoalWithIdAndUserData, Post } from "@/types/types";
 import React, { createContext, ReactNode, useContext, useState } from "react";
 
 interface ResultContextType {
@@ -52,3 +53,64 @@ export const useResults = () => {
   }
   return context;
 };
+
+// 目標作成時
+// pendingに追加
+export const useAddGoal = () => {
+  const { setPendingResults } = useResults();
+  return (result: GoalWithIdAndUserData) => {
+    setPendingResults((prev) => [...prev, result]);
+  };
+};
+
+// 目標削除時
+// pendingから削除
+export const useDeleteGoal = () => {
+  const { setPendingResults } = useResults();
+  return (goalId: string) => {
+    setPendingResults((prev) =>
+      prev.filter((result) => result.goalId !== goalId)
+    );
+  };
+};
+
+// 投稿作成時
+// pendingから削除してsuccessに追加
+// TODO: pendingから削除したら明日も追加が表示できなくなる
+export const useAddPost = () => {
+  const { setPendingResults, setSuccessResults } = useResults();
+  return (
+    result: GoalWithIdAndUserData,
+    post: Omit<Post, "submittedAt"> & { submittedAt: string }
+  ) => {
+    setPendingResults((prev) =>
+      prev.filter((pendingResult) => pendingResult.goalId !== result.goalId)
+    );
+    setSuccessResults((prev) => [...prev, result]);
+  };
+};
+
+// 投稿削除時
+// successのpostの項目をundefinedにして、successからpendingに移動する
+export const useDeletePost = () => {
+  const { setPendingResults, setSuccessResults } = useResults();
+  return (goalId: string) => {
+    setSuccessResults((prev) =>
+      prev.map((result) => {
+        if (result.goalId === goalId) {
+          return { ...result, post: undefined };
+        }
+        return result;
+      })
+    );
+    setPendingResults((prev) =>
+      prev.filter((pendingResult) => pendingResult.goalId !== goalId)
+    );
+  };
+};
+
+// TODO: implement updateResult
+
+// 目標作成時, 目標削除時, 投稿作成時, 投稿削除時, 投稿更新時, 目標更新時
+// 投稿時に目標削除
+// 投稿削除時に目標追加