diff --git a/src/Components/DashBoard/DashBoard.tsx b/src/Components/DashBoard/DashBoard.tsx index 721546e..3da0011 100644 --- a/src/Components/DashBoard/DashBoard.tsx +++ b/src/Components/DashBoard/DashBoard.tsx @@ -5,6 +5,7 @@ import { fetchResult, handleFetchResultError, } from "@/utils/API/Result/fetchResult"; +import { useUser } from "@/utils/UserContext"; import CircularProgress from "@mui/joy/CircularProgress"; import Typography from "@mui/joy/Typography"; import LinearProgress from "@mui/material/LinearProgress"; @@ -47,6 +48,11 @@ export default function DashBoard({ const offset = useRef(0); const noMore = useRef(false); + const [lastPostDate, setLastPostDate] = useState(null); // 投稿が0の場合はnull + + const { user } = useUser(); + const myUserId = user?.userId; + const limit = 10; // limitずつ表示 useEffect(() => { @@ -162,6 +168,28 @@ export default function DashBoard({ ); }, [success, failed, pending, successResults, failedResults, pendingResults]); + useEffect(() => { + if (success) { + // ここで最後の投稿のsubmittedAtを取得 + fetchResult({ + userId: myUserId, + success, + failed: false, + pending: false, + offset: 0, + limit: 1, + }) + .then((data) => { + if (data.successResults.length > 0) { + setLastPostDate(data.successResults[0].post?.submittedAt); + } + }) + .catch((error) => { + console.error("Error fetching last post date:", error); + }); + } + }, [success]); + return ( <> {isLoading ? ( @@ -188,6 +216,7 @@ export default function DashBoard({ failedResults={failed ? failedResults : []} pendingResults={pending ? pendingResults : []} orderBy={orderBy} + lastPostDate={lastPostDate} />
diff --git a/src/Components/Progress/Progress.tsx b/src/Components/Progress/Progress.tsx index fd0e4a3..be8d626 100644 --- a/src/Components/Progress/Progress.tsx +++ b/src/Components/Progress/Progress.tsx @@ -28,6 +28,11 @@ const successPostIndicatorStyle = { }, }; +const blurImageStyle = { + filter: "blur(20px)", + clipPath: "inset(0)", +}; + const outerBorderColors = { success: "#008c328a", failed: "#a2000082", @@ -45,6 +50,7 @@ interface ProgressProps { failedResults?: GoalWithIdAndUserData[]; pendingResults?: GoalWithIdAndUserData[]; orderBy?: "asc" | "desc"; + lastPostDate: string | null; // 投稿が0の場合はnull } export default function Progress({ @@ -52,6 +58,7 @@ export default function Progress({ failedResults = [], pendingResults = [], orderBy = "desc", // 最新が上位 + lastPostDate, }: ProgressProps) { const { user } = useUser(); @@ -85,6 +92,12 @@ export default function Progress({ key={result.goalId} result={result as GoalWithIdAndUserData} user={user as User} + isBlured={ + result.post?.submittedAt && lastPostDate + ? new Date(result.post.submittedAt) > + new Date(lastPostDate) && user?.loginType !== "Guest" + : true + } // ゲストユーザーは特別にモザイクを解除 /> ); } else if (result.type === "failed") { @@ -112,9 +125,11 @@ export default function Progress({ const SuccessStep = ({ result, user, + isBlured, }: { result: GoalWithIdAndUserData; user: User; + isBlured: boolean; }) => { const [imageURL, setImageURL] = useState(""); const [imageLoaded, setImageLoaded] = useState(false); @@ -189,7 +204,13 @@ const SuccessStep = ({ zIndex: 0, }} > -
+
{imageURL && ( - setImageLoaded(true)} - /> +
+ setImageLoaded(true)} + /> + {isBlured && ( +
+ + + 投稿をするとモザイクが解除されます + + + 最後にあなたが完了した目標より後に投稿された画像はモザイクがかかります。自分も目標を達成して共有しましょう! + + +
+ )} +
)}
diff --git a/src/app/page.tsx b/src/app/page.tsx index d7f8b3d..42f5204 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -117,7 +117,7 @@ export default function Top() { 友達の投稿を見たいなら、あなたも投稿しましょう - 友達の投稿を表示するには、あなたの完了した目標をシェアしましょう。あなたが最後に投稿した時間より後の目標の画像はモザイクがかかっています。 + 友達の投稿を表示するには、あなたの完了した目標をシェアしましょう。あなたが最後に投稿した時間より後の目標の画像はモザイクがかかっています。(ゲストログインの場合は特別に表示されます) {/* TODO: 正式に実装したら画像を新しくする */}