fix:回答後にポイントが即時反映されるように修正 - #28
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR implements immediate point reflection after answering surveys by adding a refresh mechanism to the dashboard. The changes ensure that when users complete a survey and earn points, those points are immediately displayed without requiring a manual page refresh.
Key changes:
- Added a new
PointDisplaycomponent that can refresh user points on demand - Implemented URL parameter-based refresh triggering for both surveys and points data
- Created a new API endpoint to fetch current user points
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/schemas/api/users.ts | Added schema for user points API response |
| src/hooks/domain/(authenticated)/survey/[id]/answer/useSurveyAnswerPage.ts | Modified redirect to include refresh parameter |
| src/hooks/domain/(authenticated)/dashboard/useDashboardPage.ts | Added refresh logic based on URL parameters |
| src/components/common/PointDisplay.tsx | New component for displaying user points with refresh capability |
| src/components/common/Header.tsx | Replaced inline point display with new PointDisplay component |
| src/app/api/points/route.ts | New API endpoint for fetching user points |
| src/app/api/(Repository)/point.ts | Added getUserPoints function for database queries |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| // URLパラメータをクリーンアップ | ||
| useEffect(() => { | ||
| if (shouldRefresh === "true") { | ||
| window.history.replaceState({}, "", "/dashboard"); |
There was a problem hiding this comment.
Using window.history.replaceState directly in React can cause issues with client-side routing. Consider using Next.js router's replace method instead for better compatibility with the framework's routing system.
| const { data } = useCustomizedSWR(swrKey, userPointsSchema); | ||
|
|
||
| const points = data?.currentPoints ?? initialPoints; | ||
|
|
There was a problem hiding this comment.
The SWR hook should handle loading and error states. Consider destructuring isLoading and error to provide better user experience during point fetching or when errors occur.
| const { data } = useCustomizedSWR(swrKey, userPointsSchema); | |
| const points = data?.currentPoints ?? initialPoints; | |
| const { data, isLoading, error } = useCustomizedSWR(swrKey, userPointsSchema); | |
| const points = data?.currentPoints ?? initialPoints; | |
| if (isLoading) { | |
| return ( | |
| <div className="flex items-center gap-2 rounded-lg bg-secondary/10 px-3 py-2"> | |
| <span className="font-semibold text-foreground">Loading...</span> | |
| </div> | |
| ); | |
| } | |
| if (error) { | |
| return ( | |
| <div className="flex items-center gap-2 rounded-lg bg-secondary/10 px-3 py-2"> | |
| <span className="font-semibold text-destructive">Error loading points</span> | |
| </div> | |
| ); | |
| } |
| const swrKey = useMemo( | ||
| () => | ||
| shouldRefresh === "true" ? "/api/survey?refresh=true" : "/api/survey", | ||
| [shouldRefresh], | ||
| ); |
There was a problem hiding this comment.
The refresh parameter in the SWR key doesn't actually affect the API request since the backend likely ignores this parameter. Consider using SWR's mutate function or a timestamp-based approach for forcing re-fetches instead of modifying the URL.
No description provided.