refactor ui user

[dev3h]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
news-reactjs-web	Ready	Preview	Comment	Dec 9, 2025 6:47am

[Copilot]

Pull request overview

This PR refactors the user UI to work with groups containing nested categories instead of flat group categories. The main changes include updating the data structure in the store, adding a new API endpoint, and enhancing the navigation menu with dropdown functionality for categories.

• Replaces groupCategories with hierarchical groups structure containing nested categories
• Adds dropdown menu to display categories under each group
• Updates footer copyright year to be dynamic

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/stores/user-store/UserStore.js	Adds groups state and getAllGroups method to fetch hierarchical group data with categories
src/services/userServices/groupServices.js	Implements getAllGroups API method to fetch all groups from /user/group endpoint
src/layouts/app-layouts/user-layouts/HeaderNav/GroupCategoryMenu.jsx	Refactors component to display groups with dropdown menus for nested categories using hover interactions
src/layouts/app-layouts/user-layouts/FooterNav.jsx	Updates copyright year to dynamically use current year with useMemo
src/components/PopularPost/Popular.jsx	Removes unnecessary React fragment wrapper
google6ea4f563230cd745.html	Adds Google site verification file

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The useEffect hook is missing getAllGroups in its dependency array. This violates the React Hook rules and could lead to stale closures or unexpected behavior if the function reference changes.

Add getAllGroups to the dependency array:

useEffect(() => {
  getAllGroups();
}, [getAllGroups]);

Suggested change

	}, []);
	}, [getAllGroups]);

[Copilot]

The getAllGroups method does not return a value when an error occurs, which could lead to the store state being set to undefined. Consider returning an empty array or rethrowing the error for proper error handling.

getAllGroups: async () => {
  try {
    const response = await groupServices.getAllGroups();
    set({ groups: response });
  } catch (error) {
    console.log(error);
    set({ groups: [] }); // Set to empty array on error
  }
},

Suggested change

	}
	set({ groups: [] }); // Set to empty array on error

[Copilot]

The getAllGroups method does not return a value when an error occurs. This could result in undefined being returned to the caller. Consider returning an empty array or a default value for consistent error handling.

static async getAllGroups() {
  try {
    const response = await axiosInstance.get(`/user/group`);
    const data = response.data;
    return data;
  } catch (error) {
    console.log(error);
    return []; // Return empty array on error
  }
}

Suggested change

	console.log(error);
	console.log(error);
	return [];

[Copilot]

The dropdown menu lacks keyboard navigation support and proper accessibility attributes. Users navigating with keyboards cannot access the category dropdown menu.

Consider adding:

• role="navigation" to the menu container
• aria-label for screen readers
• Keyboard event handlers (onKeyDown) to allow opening/closing with Enter/Escape
• tabIndex attributes for keyboard focus management

[Copilot]

[nitpick] The dropdown menu uses inline styles for the font size which is inconsistent with the Tailwind CSS classes used elsewhere in the component. Consider using Tailwind's text-xs class instead of inline styles for consistency.

{hasCategories && <DownOutlined className="text-xs" />}

Suggested change

	{hasCategories && <DownOutlined style={{ fontSize: '10px' }} />}
	{hasCategories && <DownOutlined className="text-xs" />}

[Copilot]

The dropdown category links are missing padding, which could make them difficult to click and inconsistent with the parent link styling.

Add padding to match the parent link:

<Link
  key={category?.id}
  to={`/category/${category?.slug}`}
  className="block px-4 py-2 text-black hover:bg-gray-100 hover:text-orange-400 transition-all"
>
  {category?.name}
</Link>

Suggested change

	className="block text-black hover:bg-gray-100 hover:text-orange-400 transition-all"
	className="block px-4 py-2 text-black hover:bg-gray-100 hover:text-orange-400 transition-all"