fix menu issue by removing the presist bad logic and update it to use… - #53
Conversation
… react query by using usemenuitems.js isntead of useresturantinit.js
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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: 3
🧹 Nitpick comments (1)
src/hooks/useRestaurantInit.js (1)
13-18: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winConsider setting
staleTimeon the prefetch to actually avoid the redundant refetch.Without a
staleTime, the prefetched query is immediately considered stale, so anyuseMenuItems({})consumer mounting right after (Home/Menu pages) will still trigger a background refetch on mount, partially defeating the purpose of prefetching. TanStack Query's own docs note this: prefetch calls should pass a specificstaleTime(or configure a default one) to avoid this "double fetching."♻️ Suggested tweak
useEffect(() => { queryClient.prefetchQuery({ queryKey: menuKeys.items({}), queryFn: () => getMenuItems({}), + staleTime: 60 * 1000, // keep data fresh long enough to avoid immediate refetch }); }, [queryClient]);🤖 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/hooks/useRestaurantInit.js` around lines 13 - 18, The prefetch in useRestaurantInit via queryClient.prefetchQuery is immediately stale, so consumers like useMenuItems({}) still refetch on mount. Update the prefetch call to pass a staleTime (or ensure a matching default query staleTime) so the prefetched menu data remains fresh long enough to prevent the redundant background fetch.
🤖 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/pages/Home/Sections/PopularMenus.jsx`:
- Line 10: The PopularMenus section is rendering the raw error object from
useMenuItems({}), which can crash React because it is not a valid child. Update
PopularMenus.jsx to follow the same pattern used in RegularFood.jsx and
OffersSection.jsx by deriving a string from error.message before rendering. Keep
the loading/data flow in the same component, but ensure any error UI only
receives a string fallback when message is unavailable.
In `@src/pages/Home/Sections/RegularFood.jsx`:
- Around line 7-9: The RegularFood component is passing a `useQuery` options
object to `useMenuItems`, but the hook currently only accepts `filters` and
ignores the second argument, so the query still runs unnecessarily. Update
`useMenuItems` to accept and forward an `options` parameter to the underlying
query call, or remove the extra argument from `RegularFood` if it should never
control query behavior. Use the `useMenuItems` hook and `RegularFood` usage to
locate the change.
In `@src/pages/Menu/Sections/OffersSection.jsx`:
- Around line 6-9: Clamp the OffersSection carousel index when the offers list
changes, because useMenuItems({ hasDiscount: true }) can refetch to a shorter
offersMeals array while current still points past the end and RegularFoodCard
will read meal.id from undefined. Update the OffersSection state logic to reset
or modulo current whenever offersMeals.length changes so the selected item
always stays within bounds.
---
Nitpick comments:
In `@src/hooks/useRestaurantInit.js`:
- Around line 13-18: The prefetch in useRestaurantInit via
queryClient.prefetchQuery is immediately stale, so consumers like
useMenuItems({}) still refetch on mount. Update the prefetch call to pass a
staleTime (or ensure a matching default query staleTime) so the prefetched menu
data remains fresh long enough to prevent the redundant background fetch.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: d1a5bca6-66c7-46ac-8d24-519b5e384451
📒 Files selected for processing (6)
src/hooks/useRestaurantInit.jssrc/pages/Home/Sections/PopularMenus.jsxsrc/pages/Home/Sections/RegularFood.jsxsrc/pages/Menu/Menu.jsxsrc/pages/Menu/Sections/OffersSection.jsxsrc/store/restaurantStore.js
|
|
||
| const PopularMenus = () => { | ||
| const { meals, fetchMeals, loading, error } = useRestaurantStore(); | ||
| const { data: meals = [], isLoading: loading, error } = useMenuItems({}); |
There was a problem hiding this comment.
🩺 Stability & Availability | 🔴 Critical | ⚡ Quick win
Rendering the raw error object will crash the component.
error from useMenuItems({}) is an Error/AxiosError instance, not a string. Passing it directly as a JSX child (<p>{error}</p>) throws "Objects are not valid as a React child" and crashes the section on any fetch failure. RegularFood.jsx and OffersSection.jsx correctly derive a string via error.message — this file wasn't updated to match.
🐛 Proposed fix
if (loading) return <LoadingSpinner />;
- if (error) return <p>{error}</p>;
+ if (error) return <p>{error.message || "Error loading popular meals"}</p>;Also applies to: 41-42
🤖 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/Sections/PopularMenus.jsx` at line 10, The PopularMenus
section is rendering the raw error object from useMenuItems({}), which can crash
React because it is not a valid child. Update PopularMenus.jsx to follow the
same pattern used in RegularFood.jsx and OffersSection.jsx by deriving a string
from error.message before rendering. Keep the loading/data flow in the same
component, but ensure any error UI only receives a string fallback when message
is unavailable.
| const { data: meals = [], isLoading: loading, error } = useMenuItems({}, { | ||
| enabled: !items, // Don't fetch if items are passed via prop | ||
| }); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== files ==\n'
git ls-files 'src/pages/Home/Sections/RegularFood.jsx' 'src/hooks/dashboard/useMenuItems.js' 'src/pages/**/Menu.jsx'
printf '\n== outlines ==\n'
for f in src/pages/Home/Sections/RegularFood.jsx src/hooks/dashboard/useMenuItems.js; do
echo "--- $f"
ast-grep outline "$f" --view expanded || true
done
printf '\n== search useMenuItems usages ==\n'
rg -n "useMenuItems\\(" src --glob '!**/node_modules/**' || true
printf '\n== relevant file excerpts ==\n'
for f in src/pages/Home/Sections/RegularFood.jsx src/hooks/dashboard/useMenuItems.js; do
echo "--- $f"
nl -ba "$f" | sed -n '1,220p'
doneRepository: Revive-Graduation-Project/Revive-Front-End
Length of output: 1839
🏁 Script executed:
#!/bin/bash
set -euo pipefail
for f in src/pages/Home/Sections/RegularFood.jsx src/hooks/dashboard/useMenuItems.js src/pages/Menu/Menu.jsx; do
echo "=== $f ==="
sed -n '1,220p' "$f" | cat -n
echo
doneRepository: Revive-Graduation-Project/Revive-Front-End
Length of output: 14521
Pass useQuery options through useMenuItems
RegularFood passes { enabled: !items }, but useMenuItems(filters = {}) drops that second argument, so the query still runs when items is already provided. Thread an options param through the hook, or remove the extra argument, to avoid the redundant fetch.
🤖 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/Sections/RegularFood.jsx` around lines 7 - 9, The RegularFood
component is passing a `useQuery` options object to `useMenuItems`, but the hook
currently only accepts `filters` and ignores the second argument, so the query
still runs unnecessarily. Update `useMenuItems` to accept and forward an
`options` parameter to the underlying query call, or remove the extra argument
from `RegularFood` if it should never control query behavior. Use the
`useMenuItems` hook and `RegularFood` usage to locate the change.
| const OffersSection = () => { | ||
| const [offersMeals, setOffersMeals] = useState([]); | ||
| const [loading, setLoading] = useState(true); | ||
| const [error, setError] = useState(null); | ||
| const { data: offersMeals = [], isLoading: loading, error: queryError } = useMenuItems({ hasDiscount: true }); | ||
| const error = queryError ? (queryError.message || "Failed to load offers") : null; | ||
| const [current, setCurrent] = useState(0); |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Map the target file and neighboring components.
printf '\n## OffersSection outline\n'
ast-grep outline src/pages/Menu/Sections/OffersSection.jsx --view expanded || true
printf '\n## RegularFoodCard candidates\n'
fd -a 'RegularFoodCard' src || true
printf '\n## Search for useMenuItems definition/usages\n'
rg -n "useMenuItems|RegularFoodCard|current" src/pages src -g '!**/node_modules/**' || trueRepository: Revive-Graduation-Project/Revive-Front-End
Length of output: 24722
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Show the relevant section of OffersSection.jsx with line numbers.
sed -n '1,220p' src/pages/Menu/Sections/OffersSection.jsx | cat -n
# Find the RegularFoodCard implementation and inspect it.
fd -a 'RegularFoodCard.jsx' src || true
fd -a 'RegularFoodCard.*' src || trueRepository: Revive-Graduation-Project/Revive-Front-End
Length of output: 5208
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## OffersSection outline\n'
ast-grep outline src/pages/Menu/Sections/OffersSection.jsx --view expanded || true
printf '\n## OffersSection lines\n'
sed -n '1,220p' src/pages/Menu/Sections/OffersSection.jsx | cat -n
printf '\n## RegularFoodCard candidates\n'
fd -a 'RegularFoodCard.*' src || true
printf '\n## useMenuItems definition/usages\n'
rg -n "useMenuItems|RegularFoodCard|offersMeals\\[" src -g '!**/node_modules/**' || trueRepository: Revive-Graduation-Project/Revive-Front-End
Length of output: 8477
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## useMenuItems hook\n'
sed -n '1,220p' src/hooks/dashboard/useMenuItems.js | cat -n
printf '\n## RegularFoodCard.jsx\n'
sed -n '1,240p' src/components/ui/RegularFoodCard.jsx | cat -nRepository: Revive-Graduation-Project/Revive-Front-End
Length of output: 16104
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n "setCurrent\\(|currentIndex|offersMeals\\[current\\]|offersMeals\\.length" src/pages src/components -g '!**/node_modules/**' || trueRepository: Revive-Graduation-Project/Revive-Front-End
Length of output: 1277
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## useMenuItems hook\n'
sed -n '1,220p' src/hooks/dashboard/useMenuItems.js | cat -n
printf '\n## RegularFoodCard.jsx\n'
sed -n '1,240p' src/components/ui/RegularFoodCard.jsx | cat -n
printf '\n## Similar index-state patterns\n'
rg -n "setCurrent\\(|currentIndex|offersMeals\\[current\\]|offersMeals\\.length" src/pages src/components -g '!**/node_modules/**' || trueRepository: Revive-Graduation-Project/Revive-Front-End
Length of output: 17234
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '1,220p' src/hooks/dashboard/useMenuItems.js | cat -n
printf '\n---\n'
sed -n '1,240p' src/components/ui/RegularFoodCard.jsx | cat -nRepository: Revive-Graduation-Project/Revive-Front-End
Length of output: 16063
Clamp current when offersMeals changes. A refetch can shrink the discounts list while current still points past the end; RegularFoodCard dereferences meal.id immediately, so offersMeals[current] being undefined will crash the carousel. Reset or modulo the index on offersMeals.length changes.
🤖 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/Menu/Sections/OffersSection.jsx` around lines 6 - 9, Clamp the
OffersSection carousel index when the offers list changes, because
useMenuItems({ hasDiscount: true }) can refetch to a shorter offersMeals array
while current still points past the end and RegularFoodCard will read meal.id
from undefined. Update the OffersSection state logic to reset or modulo current
whenever offersMeals.length changes so the selected item always stays within
bounds.
1 participant
… react query by using usemenuitems.js isntead of useresturantinit.js
Summary by CodeRabbit
New Features
Bug Fixes