Integrate category CRUD APIs#249
Conversation
There was a problem hiding this comment.
Pull request overview
This PR integrates the admin Category UI (sidebar + modal) with the backend Category CRUD endpoints, enabling listing active categories and supporting edit/delete actions directly from the sidebar while reusing the same modal for create/update.
Changes:
- Category sidebar now loads active categories from
/secure/api/v1/categories/activecategorieswith loading/error states and manual refresh. - Added edit/delete actions for categories in the sidebar (including delete confirmation + toast feedback).
- Reused the Category modal for both create and update, including basic client-side validation and toast messaging.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| RestroHub-FrontEnd/src/components/admin/menu/Menus.jsx | Wires CategorySidebar edit flow into CategoryFormModal and triggers refreshes after modal close. |
| RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategorySidebar.jsx | Implements active category fetching, refresh, edit/delete actions, and UI states. |
| RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategoryFormModal.jsx | Adds edit support, form validation, and success/error feedback for create/update. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const openEditCategoryModal = async (category) => { | ||
| try { | ||
| const response = await api.get(`/secure/api/v1/categories/${category.categoryId}`); | ||
| setEditingCategory(response.data?.data || response.data); | ||
| setIsCategoryModalOpen(true); | ||
| } catch (err) { | ||
| console.error('Failed to fetch category:', err.response?.data || err); | ||
| toast.error(err.response?.data?.message || 'Failed to load category details'); | ||
| } | ||
| }; |
| const closeCategoryModal = () => { | ||
| setIsCategoryModalOpen(false); | ||
| setEditingCategory(null); | ||
| categorySidebarRef.current?.refreshCategories(); | ||
| menuGridRef.current?.refreshFoods(); | ||
| }; |
| <div className="flex items-center gap-3"> | ||
| <div className="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center"> | ||
| <Tag className="w-5 h-5 text-white" /> | ||
| <Dialog open={isOpen} onClose={onClose} className="relative z-50"> |
| <button | ||
| type="button" | ||
| onClick={onClose} | ||
| className="flex-1 px-4 py-2.5 border border-gray-200 rounded-xl | ||
| hover:bg-gray-50 transition-colors font-medium text-gray-600" | ||
| > | ||
| Cancel | ||
| </button> | ||
| <button | ||
| type="submit" | ||
| disabled={submitting} | ||
| className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 | ||
| bg-gradient-to-r from-blue-600 to-indigo-600 text-white | ||
| rounded-xl hover:from-blue-700 hover:to-indigo-700 | ||
| transition-all font-semibold disabled:opacity-50 | ||
| shadow-lg shadow-blue-600/25 hover:shadow-xl | ||
| hover:shadow-blue-600/30" | ||
| className="p-2 hover:bg-white/20 rounded-xl transition-colors" | ||
| > |
|
Hi @gTanusri, Bug Fix Needed 1: Fix: After food item operations (add/delete/edit), call categorySidebarRef.current?.refreshCategoryCounts() to update the counts in the sidebar. Affected Files: Menus.jsx - add refresh call in food item handlers 2: Issue: Category IDs are directly interpolated into URLs without validation/sanitization. If a malicious user manipulates the categoryId object property, it could craft SQL/NoSQL injection payloads. Thanks!!! |
Summary
Issue
Closes #230
Validation
npm run buildpasses../gradlew.bat compileJavapasses.git diff --checkpasses.