feat: connect daily tips to backend#90
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughAdds a daily tips API contract and react-query hook, then updates the home daily tip component to render fetched ChangesDaily Tip API Integration
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/hooks/useDailyTip.ts`:
- Around line 9-14: The useEffect hook in the getDailyTip promise chain (setTip,
setError, setIsLoading calls) lacks protection against state updates after
component unmount, which can cause memory leaks and warnings. Add a cleanup
function to the useEffect that prevents these state setters from being called
after unmount by using a mounted ref flag that gets set to false in the cleanup
function, then check this flag before executing any setState calls in the
promise handlers.
In `@src/pages/home/dailyTips/titleAndDescription/TitleAndDescription.tsx`:
- Around line 8-9: The TitleAndDescription component currently returns null when
there is an error or no tip data (the condition on line 8-9), which leaves the
UI blank with no user feedback. Instead of returning null in both the error and
no-data cases, render a lightweight fallback message or default copy that keeps
the UI informative and provides clear feedback to the user about the state of
the content.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 5b5a53f3-4582-4758-bcf9-31957594482c
📒 Files selected for processing (3)
src/hooks/useDailyTip.tssrc/pages/home/dailyTips/titleAndDescription/TitleAndDescription.tsxsrc/services/api/tips.service.ts
| if (isLoading) return null | ||
| if (error || !tip) return null |
There was a problem hiding this comment.
Don’t render a blank section on error/no-data.
On Line 8-9, return null for error or missing tip removes all feedback. Please render a lightweight fallback message (or previous default copy) so the UI stays informative.
Proposed fix
- if (isLoading) return null
- if (error || !tip) return null
+ if (isLoading) return null
+ if (error || !tip) {
+ return (
+ <>
+ <SGLTypography variant="smallTitle" styles={titleAndDescriptionStyles.title}>
+ Daily tip
+ </SGLTypography>
+ <SGLTypography variant="smallText" styles={titleAndDescriptionStyles.description}>
+ Tip is currently unavailable.
+ </SGLTypography>
+ </>
+ )
+ }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/pages/home/dailyTips/titleAndDescription/TitleAndDescription.tsx` around
lines 8 - 9, The TitleAndDescription component currently returns null when there
is an error or no tip data (the condition on line 8-9), which leaves the UI
blank with no user feedback. Instead of returning null in both the error and
no-data cases, render a lightweight fallback message or default copy that keeps
the UI informative and provides clear feedback to the user about the state of
the content.
| const [error, setError] = useState<string | null>(null) | ||
|
|
||
| useEffect(() => { | ||
| getDailyTip() |
There was a problem hiding this comment.
We are not using useEffect for api calls, we are using tanstack query, check other examples of how we are calling api
|
Fixed! Replaced useEffect with useQuery from tanstack query. Also resolved merge conflict in api.constants.ts |
| <> | ||
| <SGLTypography variant="smallTitle" styles={titleAndDescriptionStyles.title}> | ||
| {t('daily.tip.title')} | ||
| {tip.title} |
There was a problem hiding this comment.
Why did you removed the translation support?
| </SGLTypography> | ||
| <SGLTypography variant="smallText" styles={titleAndDescriptionStyles.description}> | ||
| {t('daily.tip.description')} | ||
| {tip.description} |
There was a problem hiding this comment.
same here.
change the language
| } | ||
|
|
||
| export const getDailyTip = (): Promise<DailyTip> => { | ||
| return apiService.get<DailyTip>('/tips/daily') |
There was a problem hiding this comment.
consider to use const and move it to the appropriate file
| export const useDailyTip = () => { | ||
| const { data, isLoading, error } = useQuery({ | ||
| queryKey: ['dailyTip'], | ||
| queryFn: () => apiService.get<DailyTip>(API_ENDPOINTS.tips), |
There was a problem hiding this comment.
You had implemented getDailyTip() in src/services/api/tips.service.ts. Why don't you use it?
| if (isLoading) return null | ||
| if (error || !tip) return null |
There was a problem hiding this comment.
Component should return JSX return </> instead of null
| metrics: '/api/metrics/', | ||
| metricsToday: '/api/metrics/today/', | ||
| email: '/api/email', | ||
| tips: '/api/tips/daily', |
There was a problem hiding this comment.
why did you remove it? This is a reference for a working route
3 participants
Description
Please include a summary of the changes and the related issue.
חיברתי את הטיפ היומי לבאקאנד.
יצרתי tips.service.ts עם הקריאה ל-API, hook של useDailyTip שמושך את הדאטה
ועדכנתי את TitleAndDescription שיציג את הדאטה האמיתית.
.
Related Issue(s)
Fixes # (issue number)
Checklist:
Screenshots (if appropriate):
Summary by CodeRabbit
Summary by CodeRabbit