diff --git a/public/img/blur.webp b/public/img/blur.webp index ae358c3f..c4209291 100644 Binary files a/public/img/blur.webp and b/public/img/blur.webp differ diff --git a/src/Components/DashBoard/DashBoard.tsx b/src/Components/DashBoard/DashBoard.tsx index 721546e6..8cf29b4a 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,32 @@ export default function DashBoard({ ); }, [success, failed, pending, successResults, failedResults, pendingResults]); + useEffect(() => { + if (user?.loginType === "Guest") { + return; + } + + if (success) { + // 最後に成功した目標を取得 + 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 +220,7 @@ export default function DashBoard({ failedResults={failed ? failedResults : []} pendingResults={pending ? pendingResults : []} orderBy={orderBy} + lastPostDate={lastPostDate} />
diff --git a/src/Components/NameUpdate/NameUpdate.tsx b/src/Components/NameUpdate/NameUpdate.tsx index 4a9c9111..29cb6bc0 100644 --- a/src/Components/NameUpdate/NameUpdate.tsx +++ b/src/Components/NameUpdate/NameUpdate.tsx @@ -51,12 +51,9 @@ export default function NameUpdate() { console.error("Failed to update displayName: No authenticated user"); } - showSnackBar({ - message: "名前を変更しました", - type: "success", - }); setNewName(""); setOpen(false); + window.location.reload(); } catch (error) { console.error("Error updating name:", error); showSnackBar({ diff --git a/src/Components/Progress/Progress.tsx b/src/Components/Progress/Progress.tsx index fd0e4a32..fe68da5d 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,13 @@ 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" // ゲストユーザーは特別にモザイクを解除 + ? false + : true + } /> ); } else if (result.type === "failed") { @@ -112,9 +126,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 +205,13 @@ const SuccessStep = ({ zIndex: 0, }} > -
+
+ {isBlured && imageURL && ( +
+ + + 投稿をするとモザイクが解除されます + + + 最後にあなたが完了した目標より後に投稿された画像はモザイクがかかります。自分も目標を達成して共有しましょう! + + +
+ )}
- 友達の投稿を見たいなら、あなたも投稿しましょう + 見るだけではなく行動しましょう - 友達の投稿を表示するには、あなたの完了した目標をシェアしましょう。あなたが最後に投稿した時間より後の目標の画像はモザイクがかかっています。 + 友達の投稿を表示するには、あなたの完了した目標をシェアしましょう。あなたが最後に投稿した時間より後の目標の画像はモザイクがかかっています。(ゲストログインの場合は特別に表示されます) {/* TODO: 正式に実装したら画像を新しくする */}