diff --git a/src/Components/DashBoard/DashBoard.tsx b/src/Components/DashBoard/DashBoard.tsx index 8cd14ee..de3d3db 100644 --- 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([]); const [failedResults, setFailedResults] = useState([]); + const [pendingResults, setPendingResults] = useState([]); const [noResult, setNoResult] = useState(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() { ) : (
)} diff --git a/src/app/mycontent/page.tsx b/src/app/mycontent/page.tsx new file mode 100644 index 0000000..957ae90 --- /dev/null +++ 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 ( + <> +
+ { + setValue(newValue); + }} + aria-label="Loading button group" + > + 未完了 + 完了済み + +
+ + {value == "pending" ? ( + + ) : ( + + )} + + ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index b72751d..f112b9f 100644 --- 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 ( <> - + ); 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,