successRateの判定方法を修正

src/Components/Account/LoggedInView.tsx

@@ -1,28 +1,45 @@
 import NameUpdate from "@/Components/NameUpdate/NameUpdate";
 import NotificationButton from "@/Components/NotificationButton/NotificationButton";
 import { handleSignOut } from "@/utils/Auth/signOut";
+import { getSuccessRate } from "@/utils/successRate";
 import { useUser } from "@/utils/UserContext";
 import Button from "@mui/material/Button";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
+import { useEffect, useState } from "react";
 
 export const RoundedButton = styled(Button)(({ theme }) => ({
   borderRadius: "30px",
   padding: theme.spacing(1.5, 3),
 }));
 
 export default function LoggedInView() {
+  const [userStats, setUserStats] = useState<{
+    streak: number;
+    successRate: number;
+    completed: number;
+  }>({
+    streak: 0,
+    successRate: 0,
+    completed: 0,
+  });
   const { user } = useUser();
 
+  useEffect(() => {
+    if (user) {
+      const successRate = getSuccessRate(user.completed, user.failed);
+      setUserStats({
+        streak: user.streak ?? 0,
+        successRate: successRate ?? 0,
+        completed: user.completed ?? 0,
+      });
+    }
+  }, [user]);
+
   if (!user) {
     return null;
   }
 
-  const successRate =
-    user && user.completed && user.failed
-      ? Math.floor((user.completed / (user.completed + user.failed)) * 100)
-      : "?";
-
   return (
     <>
       {user.loginType === "Guest" ? (
@@ -33,13 +50,13 @@ export default function LoggedInView() {
             ようこそ、{user.name}さん!
           </Typography>
           <Typography sx={{ textAlign: "center" }}>
-            連続達成日数: {user.streak}日目
+            連続達成日数: {userStats.streak}日目
           </Typography>
           <Typography sx={{ textAlign: "center" }}>
-            目標達成率: {successRate}%
+            目標達成率: {userStats.successRate}%
           </Typography>
           <Typography sx={{ textAlign: "center" }}>
-            達成回数: {user.completed}回
+            達成回数: {userStats.completed}回
           </Typography>
         </>
       )}

src/Components/DashBoard/DashBoard.tsx

@@ -54,7 +54,7 @@ export default function DashBoard({
           type: "warning",
         });
       });
-  }, []);
+  }, [userId]);
 
   useEffect(() => {
     // 表示したい項目にデータがない場合はnoResultをtrueにする

src/Components/Progress/Progress.tsx

@@ -1,5 +1,6 @@
 import { GoalWithIdAndUserData, User } from "@/types/types";
 import { formatStringToDate } from "@/utils/DateFormatter";
+import { getSuccessRate } from "@/utils/successRate";
 import { useUser } from "@/utils/UserContext";
 import AppRegistrationRoundedIcon from "@mui/icons-material/AppRegistrationRounded";
 import CheckRoundedIcon from "@mui/icons-material/CheckRounded";
@@ -350,12 +351,9 @@ const StepperBlock = ({
   userData?: User | null;
   resultType?: "success" | "failed" | "pending";
 }) => {
-  const successRate =
-    userData && userData.completed && userData.failed
-      ? Math.floor(
-          (userData.completed / (userData.completed + userData.failed)) * 100
-        )
-      : "?";
+  const successRate = userData
+    ? getSuccessRate(userData.completed, userData.failed)
+    : 0;
 
   return (
     <Card

src/utils/successRate.ts

@@ -0,0 +1,22 @@
+export const getSuccessRate = (
+  completed: number | undefined,
+  failed: number | undefined
+): number => {
+  if (completed === undefined || failed === undefined) {
+    return 0;
+  }
+
+  if (completed === 0 && failed === 0) {
+    return 0;
+  }
+
+  if (completed === 0) {
+    return 0;
+  }
+
+  if (failed === 0) {
+    return 100;
+  }
+
+  return Math.floor((completed / (completed + failed)) * 100);
+};