Merge pull request #92 from MurakawaTakuya/create-my-content

mycontentページを作成
MurakawaTakuya · Dec 12, 2024 · 5af353b · 5af353b
2 parents f09bec8 + 948a33c
commit 5af353b
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 13 deletions.
diff --git a/src/Components/DashBoard/DashBoard.tsx b/src/Components/DashBoard/DashBoard.tsx
@@ -6,24 +6,36 @@ 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);
 
   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 +53,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
@@ -0,0 +1,47 @@
+"use client";
+import DashBoard from "@/Components/DashBoard/DashBoard";
+import { useUser } from "@/utils/UserContext";
+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 [value, setValue] = useState<"pending" | "finished" | null>("pending");
+
+  return (
+    <>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-evenly",
+        }}
+      >
+        <CenteredToggleButtonGroup
+          value={value}
+          exclusive
+          onChange={(event, newValue) => {
+            setValue(newValue);
+          }}
+          aria-label="Loading button group"
+        >
+          <ToggleButton value="pending">未完了</ToggleButton>
+          <ToggleButton value="finished">完了済み</ToggleButton>
+        </CenteredToggleButtonGroup>
+      </div>
+
+      {value == "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
@@ -5,7 +5,7 @@ import GoalModal from "@/Components/GoalModal/GoalModal";
 export default function Top() {
   return (
     <>
-      <DashBoard />
+      <DashBoard pending={false} />
       <GoalModal />
     </>
   );

diff --git 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,