dashboardを自動で更新

functions/src/index.ts

@@ -70,6 +70,11 @@ app.use(
       const key = req.headers["x-forwarded-for"] || req.ip || "unknown";
       return Array.isArray(key) ? key[0] : key;
     },
+    handler: (req, res) => {
+      return res
+        .status(429)
+        .json({ message: "Too many requests, please try again later." });
+    },
   })
 );
 // 1時間で最大300回に制限
@@ -81,6 +86,11 @@ app.use(
       const key = req.headers["x-forwarded-for"] || req.ip || "unknown";
       return Array.isArray(key) ? key[0] : key;
     },
+    handler: (req, res) => {
+      return res
+        .status(429)
+        .json({ message: "Too many requests, please try again later." });
+    },
   })
 );
 

functions/src/routers/resultRouter.ts

@@ -125,7 +125,7 @@ const processGoals = async (
 router.get("/:userId?", async (req: Request, res: Response) => {
   const userId = req.params.userId;
 
-  let limit = parseInt(req.query.limit as string) || 100;
+  let limit = parseInt(req.query.limit as string) || 10;
   if (limit < 1 || limit > 100) {
     limit = 100;
   }

src/Components/DashBoard/DashBoard.tsx

@@ -11,7 +11,9 @@ import { useEffect, useState } from "react";
 import Progress from "../Progress/Progress";
 import styles from "./DashBoard.module.scss";
 
-// 投稿を取得してProgress
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+let rerenderDashBoard: () => void = () => {};
+
 export default function DashBoard({
   userId = "",
   success = true,
@@ -37,7 +39,8 @@ export default function DashBoard({
   const [noResult, setNoResult] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(true);
 
-  useEffect(() => {
+  const fetchData = () => {
+    setIsLoading(true);
     fetchResult({ userId, success, failed, pending })
       .then((data) => {
         setSuccessResults(data.successResults);
@@ -54,10 +57,14 @@ export default function DashBoard({
           type: "warning",
         });
       });
+  };
+
+  useEffect(() => {
+    rerenderDashBoard = fetchData;
+    fetchData();
   }, [userId, success, failed, pending]);
 
   useEffect(() => {
-    // 表示したい項目にデータがない場合はnoResultをtrueにする
     setNoResult(
       ((success && successResults.length === 0) || !success) &&
         ((failed && failedResults.length === 0) || !failed) &&
@@ -92,3 +99,7 @@ export default function DashBoard({
     </>
   );
 }
+
+export function triggerDashBoardRerender() {
+  rerenderDashBoard();
+}

src/Components/DeleteGoalModal/DeleteGoalModal.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { appCheckToken, functionsEndpoint } from "@/app/firebase";
+import { triggerDashBoardRerender } from "@/Components/DashBoard/DashBoard"; // インポートパスを修正
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import { DialogContent, DialogTitle, Modal, ModalDialog } from "@mui/joy";
 import JoyButton from "@mui/joy/Button";
@@ -31,6 +32,7 @@ export default function DeleteGoalModal({ goalId }: { goalId: string }) {
         message: "目標を削除しました",
         type: "success",
       });
+      triggerDashBoardRerender();
     }
   };
 

src/Components/DeletePostModal/DeletePostModal.tsx

@@ -6,6 +6,7 @@ import JoyButton from "@mui/joy/Button";
 import Button from "@mui/material/Button";
 import Stack from "@mui/material/Stack";
 import { useState } from "react";
+import { triggerDashBoardRerender } from "../DashBoard/DashBoard";
 import { showSnackBar } from "../SnackBar/SnackBar";
 
 export default function DeletePostModal({
@@ -37,6 +38,7 @@ export default function DeletePostModal({
         message: "目標を削除しました",
         type: "success",
       });
+      triggerDashBoardRerender();
     }
   };
 

src/Components/GoalModal/CreateGoalModal.tsx

@@ -15,6 +15,7 @@ import {
   Typography,
 } from "@mui/joy";
 import React, { useEffect, useState } from "react";
+import { triggerDashBoardRerender } from "../DashBoard/DashBoard";
 
 export default function CreateGoalModal({
   open,
@@ -81,6 +82,7 @@ export default function CreateGoalModal({
         message: "目標を作成しました",
         type: "success",
       });
+      triggerDashBoardRerender();
 
       setText("");
       setDueDate("");

src/Components/NameUpdate/NameUpdate.tsx

@@ -38,7 +38,9 @@ export default function NameUpdate() {
       );
 
       if (!response.ok) {
-        throw new Error("Network response was not ok");
+        const status = response.status;
+        const data = await response.json();
+        throw new Error(`Error ${status}: ${data.message}`);
       }
 
       // Firebase AuthenticationのdisplayNameを更新

src/utils/API/Goal/createGoal.ts

@@ -18,7 +18,9 @@ export const createGoal = async (postData: Goal) => {
   });
 
   if (!response.ok) {
-    throw new Error(`Network response was not ok: ${response.statusText}`);
+    const status = response.status;
+    const data = await response.json();
+    throw new Error(`Error ${status}: ${data.message}`);
   }
 
   return await response.json();

src/utils/API/Post/createPost.ts

@@ -18,7 +18,9 @@ export const createPost = async (postData: PostWithGoalId) => {
   });
 
   if (!response.ok) {
-    throw new Error(`Network response was not ok: ${response.statusText}`);
+    const status = response.status;
+    const data = await response.json();
+    throw new Error(`Error ${status}: ${data.message}`);
   }
 
   return await response.json();

src/utils/API/Result/fetchResult.ts

@@ -37,8 +37,11 @@ export const fetchResult = async ({
   );
 
   if (!response.ok) {
-    throw new Error("Network response was not ok");
+    const status = response.status;
+    const data = await response.json();
+    throw new Error(`Error ${status}: ${data.message}`);
   }
+
   const data = await response.json();
   return data;
 };

src/utils/API/User/createUser.ts

@@ -18,8 +18,11 @@ export const createUser = async (name: string, userId: string) => {
   });
 
   if (!response.ok) {
-    throw new Error("Network response was not ok");
+    const status = response.status;
+    const data = await response.json();
+    throw new Error(`Error ${status}: ${data.message}`);
   }
+
   const data = await response.json();
   console.log("Success:", data);
 };

src/utils/API/User/fetchUser.ts

@@ -17,8 +17,11 @@ export const fetchUserById = async (userId: string): Promise<User> => {
   });
 
   if (!response.ok) {
-    throw new Error("Network response was not ok");
+    const status = response.status;
+    const data = await response.json();
+    throw new Error(`Error ${status}: ${data.message}`);
   }
+
   const data = await response.json();
   return data;
 };
@@ -40,6 +43,9 @@ export const handleFetchUserError = (error: unknown) => {
     if (error.message.includes("500")) {
       snackBarMessage = "サーバーエラーが発生しました";
     }
+    if (error.message.includes("429")) {
+      snackBarMessage = "リクエストが多すぎます。数分後に再度お試しください";
+    }
   } else {
     console.error("An unknown error occurred");
     snackBarMessage = "不明なエラーが発生しました";