From b9242989c593b68a8bb7f4a2043eaf590f0e56a7 Mon Sep 17 00:00:00 2001
From: Morimoto Mana <cnj14140@ict.nitech.ac.jp>
Date: Fri, 6 Dec 2024 15:46:30 +0900
Subject: [PATCH 1/2] create my contents

---
 src/Components/DashBoard/DashBoard.tsx | 33 ++++++++++++++------
 src/app/mycontent/page.tsx             | 43 ++++++++++++++++++++++++++
 src/app/page.tsx                       |  2 +-
 src/utils/API/fetchResult.ts           |  8 +++--
 4 files changed, 73 insertions(+), 13 deletions(-)
 create mode 100644 src/app/mycontent/page.tsx

diff --git a/src/Components/DashBoard/DashBoard.tsx b/src/Components/DashBoard/DashBoard.tsx
index 8cd14ee..0a36767 100644
--- a/src/Components/DashBoard/DashBoard.tsx
+++ b/src/Components/DashBoard/DashBoard.tsx
@@ -6,24 +6,38 @@ import Progress from "../Progress/Progress";
 import styles from "./DashBoard.module.scss";
 
 // 投稿を取得してPostCardに渡す
-export default function DashBoard() {
+export default function DashBoard({
+  userId = "",
+  success = true,
+  failed = true,
+  pending = true,
+}: {
+  userId?: string;
+  success?: boolean;
+  failed?: boolean;
+  pending?: boolean;
+} = {}) {
   const [successResults, setSuccessResults] = useState<SuccessResult[]>([]);
   const [failedResults, setFailedResults] = useState<GoalWithId[]>([]);
+  const [pendingResults, setPendingResults] = useState<GoalWithId[]>([]);
   const [noResult, setNoResult] = useState<boolean>(false);
 
+  console.log(success, failed, pending);
+
   useEffect(() => {
-    fetchResult()
+    fetchResult({ userId })
       .then((data) => {
+        console.log(data);
         if (
           data.successResults.length === 0 &&
-          data.failedResults.length === 0
+          data.failedResults.length === 0 &&
+          data.pendingResults.length === 0
         ) {
           setNoResult(true);
-        } else {
-          console.log(data);
-          setSuccessResults(data.successResults);
-          setFailedResults(data.failedResults);
         }
+        setSuccessResults(data.successResults);
+        setFailedResults(data.failedResults);
+        setPendingResults(data.pendingResults);
       })
       .catch((error) => {
         if (error instanceof Response && error.status === 404) {
@@ -41,8 +55,9 @@ export default function DashBoard() {
       ) : (
         <div className={styles.postsContainer}>
           <Progress
-            successResults={successResults}
-            failedResults={failedResults}
+            successResults={success ? successResults : []}
+            failedResults={failed ? failedResults : []}
+            pendingResults={pending ? pendingResults : []}
           />
         </div>
       )}
diff --git a/src/app/mycontent/page.tsx b/src/app/mycontent/page.tsx
new file mode 100644
index 0000000..6a04320
--- /dev/null
+++ b/src/app/mycontent/page.tsx
@@ -0,0 +1,43 @@
+"use client";
+import DashBoard from "@/Components/DashBoard/DashBoard";
+import { useUser } from "@/utils/UserContext";
+import Button from "@mui/material/Button";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import { useState } from "react";
+
+export default function MyContent() {
+  const { user } = useUser();
+  const [buttonState, setButtonState] = useState<"pending" | "finished">(
+    "pending"
+  );
+
+  const handlePendingClick = () => {
+    setButtonState("pending");
+  };
+
+  const handleCompletedClick = () => {
+    setButtonState("finished");
+  };
+  console.log(buttonState);
+  return (
+    <>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-evenly",
+        }}
+      >
+        <ButtonGroup variant="outlined" aria-label="Loading button group">
+          <Button onClick={handlePendingClick}>未完了</Button>
+          <Button onClick={handleCompletedClick}>完了済み</Button>
+        </ButtonGroup>
+      </div>
+
+      {buttonState == "pending" ? (
+        <DashBoard userId={user?.uid} success={false} failed={false} />
+      ) : (
+        <DashBoard userId={user?.uid} pending={false} />
+      )}
+    </>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0dc78a4..929ac0a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,7 +11,7 @@ import { Button } from "@mui/material";
 export default function Top() {
   return (
     <>
-      <DashBoard />
+      <DashBoard pending={false} />
       <PostForm />
       <GoalModal />
       <Button variant="contained" onClick={requestPermission}>
diff --git a/src/utils/API/fetchResult.ts b/src/utils/API/fetchResult.ts
index ddf7f7a..37c7316 100644
--- a/src/utils/API/fetchResult.ts
+++ b/src/utils/API/fetchResult.ts
@@ -4,11 +4,13 @@ import { appCheckToken, functionsEndpoint } from "@/app/firebase";
 /**
  * Cloud FunctionsのAPIを呼び出して、結果の一覧を取得する
  *
- * @para
+ * @param {string} uid
  * @return {*}
  */
-export const fetchResult = async () => {
-  const response = await fetch(`${functionsEndpoint}/result/`, {
+export const fetchResult = async ({
+  userId = "",
+}: { userId?: string } = {}) => {
+  const response = await fetch(`${functionsEndpoint}/result/${userId}`, {
     method: "GET",
     headers: {
       "X-Firebase-AppCheck": appCheckToken,

From 845002a6496486d4991baf9cba2078c330df1022 Mon Sep 17 00:00:00 2001
From: MurakawaTakuya <murakawatakuya5@gmail.com>
Date: Thu, 12 Dec 2024 10:27:30 +0900
Subject: [PATCH 2/2] =?UTF-8?q?button=E3=82=92joyUI=E3=81=AEToggleButtonGr?=
 =?UTF-8?q?oup=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Components/DashBoard/DashBoard.tsx |  2 --
 src/app/mycontent/page.tsx             | 40 ++++++++++++++------------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/Components/DashBoard/DashBoard.tsx b/src/Components/DashBoard/DashBoard.tsx
index 0a36767..de3d3db 100644
--- a/src/Components/DashBoard/DashBoard.tsx
+++ b/src/Components/DashBoard/DashBoard.tsx
@@ -22,8 +22,6 @@ export default function DashBoard({
   const [pendingResults, setPendingResults] = useState<GoalWithId[]>([]);
   const [noResult, setNoResult] = useState<boolean>(false);
 
-  console.log(success, failed, pending);
-
   useEffect(() => {
     fetchResult({ userId })
       .then((data) => {
diff --git a/src/app/mycontent/page.tsx b/src/app/mycontent/page.tsx
index 6a04320..957ae90 100644
--- a/src/app/mycontent/page.tsx
+++ b/src/app/mycontent/page.tsx
@@ -1,24 +1,21 @@
 "use client";
 import DashBoard from "@/Components/DashBoard/DashBoard";
 import { useUser } from "@/utils/UserContext";
-import Button from "@mui/material/Button";
-import ButtonGroup from "@mui/material/ButtonGroup";
+import { styled } from "@mui/material/styles";
+import ToggleButton from "@mui/material/ToggleButton";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import { useState } from "react";
 
+const CenteredToggleButtonGroup = styled(ToggleButtonGroup)({
+  display: "flex",
+  justifyContent: "center",
+  marginBottom: "16px",
+});
+
 export default function MyContent() {
   const { user } = useUser();
-  const [buttonState, setButtonState] = useState<"pending" | "finished">(
-    "pending"
-  );
-
-  const handlePendingClick = () => {
-    setButtonState("pending");
-  };
+  const [value, setValue] = useState<"pending" | "finished" | null>("pending");
 
-  const handleCompletedClick = () => {
-    setButtonState("finished");
-  };
-  console.log(buttonState);
   return (
     <>
       <div
@@ -27,13 +24,20 @@ export default function MyContent() {
           justifyContent: "space-evenly",
         }}
       >
-        <ButtonGroup variant="outlined" aria-label="Loading button group">
-          <Button onClick={handlePendingClick}>未完了</Button>
-          <Button onClick={handleCompletedClick}>完了済み</Button>
-        </ButtonGroup>
+        <CenteredToggleButtonGroup
+          value={value}
+          exclusive
+          onChange={(event, newValue) => {
+            setValue(newValue);
+          }}
+          aria-label="Loading button group"
+        >
+          <ToggleButton value="pending">未完了</ToggleButton>
+          <ToggleButton value="finished">完了済み</ToggleButton>
+        </CenteredToggleButtonGroup>
       </div>
 
-      {buttonState == "pending" ? (
+      {value == "pending" ? (
         <DashBoard userId={user?.uid} success={false} failed={false} />
       ) : (
         <DashBoard userId={user?.uid} pending={false} />