From 0b5906e275199aee9644502b7b135e1df425936e Mon Sep 17 00:00:00 2001
From: MurakawaTakuya <murakawatakuya5@gmail.com>
Date: Sun, 29 Dec 2024 02:20:21 +0900
Subject: [PATCH] =?UTF-8?q?successRate=E3=81=AE=E5=88=A4=E5=AE=9A=E6=96=B9?=
 =?UTF-8?q?=E6=B3=95=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Components/Account/LoggedInView.tsx | 33 +++++++++++++++++++------
 src/Components/DashBoard/DashBoard.tsx  |  2 +-
 src/Components/Progress/Progress.tsx    | 10 +++-----
 src/utils/successRate.ts                | 22 +++++++++++++++++
 4 files changed, 52 insertions(+), 15 deletions(-)
 create mode 100644 src/utils/successRate.ts

diff --git a/src/Components/Account/LoggedInView.tsx b/src/Components/Account/LoggedInView.tsx
index 9aa9a36..671424a 100644
--- a/src/Components/Account/LoggedInView.tsx
+++ b/src/Components/Account/LoggedInView.tsx
@@ -1,10 +1,12 @@
 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",
@@ -12,17 +14,32 @@ export const RoundedButton = styled(Button)(({ theme }) => ({
 }));
 
 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>
         </>
       )}
diff --git a/src/Components/DashBoard/DashBoard.tsx b/src/Components/DashBoard/DashBoard.tsx
index 0f9eec0..e89df23 100644
--- a/src/Components/DashBoard/DashBoard.tsx
+++ b/src/Components/DashBoard/DashBoard.tsx
@@ -54,7 +54,7 @@ export default function DashBoard({
           type: "warning",
         });
       });
-  }, []);
+  }, [userId]);
 
   useEffect(() => {
     // 表示したい項目にデータがない場合はnoResultをtrueにする
diff --git a/src/Components/Progress/Progress.tsx b/src/Components/Progress/Progress.tsx
index 39f1132..20fdace 100644
--- a/src/Components/Progress/Progress.tsx
+++ b/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
diff --git a/src/utils/successRate.ts b/src/utils/successRate.ts
new file mode 100644
index 0000000..5f2283a
--- /dev/null
+++ b/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);
+};