Create & Setup Settings page #1342

Avdhesh-Varshney · 2026-01-06T19:22:53Z

Pull Requests Review Criteria

Caution

PRs that fail to meet these review standards will be automatically flagged and may be rejected by maintainers.

Filled out this PR template properly
Did not commit directly to main
Limited commits (max 3–4 unless permitted by Admin/Mentors)
Added comments in complex parts of code

Describe the add-ons or changes you've made 📃

settings sidebar & search & settings/routes setup
reusuable protected route lazy loading component
responsive settings sidebar & header
create reusuable searchbar component
create /api/user/me api to persist users data
Migrate Profile section

Screenshots

vercel · 2026-01-06T19:22:57Z

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

Project	Deployment	Review	Updated (UTC)
code-a2z	Ready	Preview, Comment	Jan 6, 2026 7:29pm
code-a2z-server	Ready	Preview, Comment	Jan 6, 2026 7:29pm

github-actions · 2026-01-06T19:23:00Z

Thank you for submitting your pull request! We'll review it as soon as possible. For further communication, join our discord server https://discord.gg/tSqtvHUJzE.

Copilot

Pull request overview

This PR creates a comprehensive settings page with a sidebar navigation system and migrates the existing profile editing functionality from a standalone /edit-profile route to /settings/profile. The implementation includes a responsive layout that adapts between mobile and desktop views, a reusable searchbar component for filtering settings, and improvements to the authentication flow by fetching user data on app initialization.

Key Changes:

Created new settings page infrastructure with sidebar navigation and nested routing
Added /api/user/me endpoint to fetch current authenticated user data
Migrated profile editing from standalone page to settings subsection
Enhanced authentication hook to fetch user data on initialization

Reviewed changes

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

Show a summary per file

File	Description
server/src/routes/api/user.routes.js	Added route registration for new `/api/user/me` endpoint
server/src/controllers/user/get-current-user.js	New controller to fetch current authenticated user profile
client/src/shared/hooks/use-auth.ts	Modified to fetch user data on initialization instead of just tokens
client/src/shared/hooks/use-device.ts	Added laptop breakpoint and isMobileOrTablet helper
client/src/shared/components/molecules/searchbar/index.tsx	New reusable searchbar component with mobile drawer support
client/src/modules/settings/v1/index.tsx	Main settings page with responsive sidebar and content layout
client/src/modules/settings/v1/hooks/index.ts	Custom hook managing settings state and routing logic
client/src/modules/settings/v1/hooks/get-settings.tsx	Settings configuration with routes and lazy-loaded components
client/src/modules/settings/v1/components/*.tsx	Settings UI components (tab, header, no-results)
client/src/modules/settings/modules/profile/v1/index.tsx	Migrated profile settings component
client/src/modules/settings/modules/profile/v1/hooks/index.ts	Profile settings logic with form validation and API calls
client/src/modules/settings/modules/profile/v1/components/*.tsx	Profile-specific UI components (image upload, social links)
client/src/modules/app/routes/auth-routes/protected-route/*.tsx	New reusable protected route wrapper with access control
client/src/modules/edit-profile/*	Removed old edit-profile module files
client/src/main.tsx	Added Jotai Provider at root level
client/src/App.tsx	Removed nested Jotai Provider (moved to main.tsx)
client/src/infra/rest/apis/user/index.ts	Added getCurrentUser API function

Comments suppressed due to low confidence (1)

client/src/shared/hooks/use-auth.ts:49

The clearToken function is not wrapped in useCallback but is used as a dependency in the logout callback on line 55. This could cause unnecessary re-renders and breaks the rules of hooks dependencies. Either wrap clearToken in useCallback or inline its logic directly in the logout function.

  const clearToken = (): void => {
    removeFromLocal(TOKEN_CONFIG.ACCESS_TOKEN_NAME);
    setToken(null);
  };

Copilot · 2026-01-06T19:28:05Z

client/src/modules/settings/v1/index.tsx

+          ) : (
+            filteredSettings.map((setting, index) => (
+              <SettingsTab
+                key={index}


Using array index as the React key prop is an anti-pattern, especially when the list order can change or items can be filtered (as they are with the search feature). This can cause rendering bugs and performance issues. Use the setting.id field instead, which is unique and stable.

Suggested change

key={index}

key={setting.id}

Copilot · 2026-01-06T19:28:06Z

client/src/modules/settings/modules/profile/v1/hooks/index.ts

+        throw error;
+      }
+    },
+    [user]


The dependency array for this useCallback hook is missing the setUser setter. While Jotai setters are stable and won't cause issues, for consistency and to follow React Hooks best practices, the dependency should be included.

Suggested change

[user]

[user, setUser]

Copilot · 2026-01-06T19:28:06Z

server/src/routes/api/user.routes.js


 userRoutes.get('/search', searchUser);
 userRoutes.get('/profile', getProfile);
+userRoutes.get('/me', authenticateUser, getCurrentUser);


The new GET /api/user/me endpoint is not protected by a rate limiter. According to the coding guidelines, all routes should apply rate limiters (authLimiter for auth routes, generalLimiter for others). This endpoint should use generalLimiter middleware since it's a general user data fetch endpoint.

Copilot · 2026-01-06T19:28:06Z

client/src/modules/settings/v1/hooks/get-settings.tsx

+    !isMobileOrTablet && (
+      <Route
+        key="*"
+        path="*"
+        element={
+          <Navigate
+            to={`${ROUTES_V1.SETTINGS}${ROUTES_V1.SETTINGS_PROFILE}`}
+            replace
+          />
+        }
+      />
+    ),
+  ];


The routes array contains a conditional element (!isMobileOrTablet && <Route...>) on line 37 which could be false/undefined. While React handles this, it's cleaner to use .filter() to exclude falsy values from the array, or use conditional logic outside the array definition to avoid potential type issues.

Copilot · 2026-01-06T19:28:07Z

client/src/modules/settings/v1/components/settings-tab.tsx

+  const { name, description, icon, path, locked, isNew, newText, feature } =
+    setting;
+  const absolutePath = `${ROUTES_V1.SETTINGS}${path}`;
+  const isTabActive = window.location.pathname.includes(absolutePath);


Using window.location.pathname directly in a React component is not ideal because it doesn't trigger re-renders when the location changes, potentially causing stale state. Use the useLocation hook from react-router-dom instead, which is already imported and used elsewhere in the component.

Copilot · 2026-01-06T19:28:09Z

server/src/controllers/user/get-current-user.js

+    if (!user_id) {
+      return sendResponse(res, 401, 'User ID not found in token');
+    }
+


The check for user_id on line 13 is redundant because the authenticateUser middleware already verifies the token and populates req.user. If the token is invalid or missing user_id, the middleware would have rejected the request before reaching this point. This check can be safely removed.

Suggested change

if (!user_id) {

return sendResponse(res, 401, 'User ID not found in token');

}

Copilot · 2026-01-06T19:28:09Z

client/src/shared/components/molecules/searchbar/index.tsx

+  };
+
+  const handleDrawerClose = () => {
+    setIsDrawerOpen(false);


When the drawer closes, the search term and results are not cleared. This means when users reopen the drawer, they'll see stale search results. Consider calling handleOnClearClick in the handleDrawerClose function to reset the search state when the drawer is closed.

Suggested change

setIsDrawerOpen(false);

setIsDrawerOpen(false);

handleOnClearClick();

Copilot · 2026-01-06T19:28:10Z

client/src/modules/settings/modules/profile/v1/constants/index.ts

+export const SOCIAL_LINKS_CONFIG = [
+  {
+    key: 'youtube',
+    label: 'YouTube',
+    placeholder: 'https://youtube.com/@username',
+  },
+  {
+    key: 'facebook',
+    label: 'Facebook',
+    placeholder: 'https://facebook.com/username',
+  },
+  { key: 'x', label: 'Twitter/X', placeholder: 'https://x.com/username' },
+  {
+    key: 'github',
+    label: 'GitHub',
+    placeholder: 'https://github.com/username',
+  },
+  {
+    key: 'instagram',
+    label: 'Instagram',
+    placeholder: 'https://instagram.com/username',
+  },
+  { key: 'website', label: 'Website', placeholder: 'https://yourwebsite.com' },
+] as const;


The LinkedIn social link field is missing from the SOCIAL_LINKS_CONFIG array but is present in the USER_SOCIAL_LINKS type definition. This means users won't be able to update their LinkedIn profile link through the settings UI, even though the backend and type system support it.

Copilot · 2026-01-06T19:28:10Z

client/src/modules/settings/v1/hooks/get-settings.tsx

+    settings: settings,
+    routes: routes,


The redundant assignment 'settings: settings' and 'routes: routes' can be simplified to just 'settings' and 'routes' using ES6 object property shorthand notation.

Suggested change

settings: settings,

routes: routes,

settings,

routes,

Copilot · 2026-01-06T19:28:10Z

client/src/modules/settings/modules/profile/v1/hooks/index.ts

+        console.error('Error updating profile image:', error);
+        throw error;
+      }
+    },
+    [user, setUser]
+  );
+
+  const handleImageUpload = useCallback(async () => {
+    if (!selectedImageFile) return;
+
+    setUploading(true);
+    try {
+      await updateProfileImage(selectedImageFile);
+      setSelectedImageFile(null);
+    } finally {
+      setUploading(false);
+    }
+  }, [selectedImageFile, updateProfileImage]);
+
+  const updateUserProfile = useCallback(
+    async (profileData: UpdateProfilePayload) => {
+      if (!user) {
+        throw new Error('User not found');
+      }
+
+      try {
+        const response = await updateProfile(profileData);
+        if (response.data && user) {
+          const updatedUser: USER_DB_STATE = {
+            ...user,
+            personal_info: {
+              ...user.personal_info,
+              username: response.data.username,
+              bio: profileData.bio,
+            },
+            social_links: {
+              ...user.social_links,
+              ...profileData.social_links,
+            },
+          };
+          setUser(updatedUser);
+        }
+        return response;
+      } catch (error) {
+        console.error('Error updating profile:', error);
+        throw error;


Using console.error in production code is not recommended. Consider removing these console.error calls or replacing them with proper error handling since errors are already being re-thrown.

Avdhesh-Varshney added 6 commits January 6, 2026 00:28

settings sidebar & search & settings/routes setup

f4f5de2

reusuable protected route lazy loading component

05aa009

responsive settings sidebar & header

f29a801

create reusuable searchbar component

c5a7ebd

create /user/me api to persist users data

fefd456

migrate profile section

decb06f

Avdhesh-Varshney requested a review from Copilot January 6, 2026 19:22

Avdhesh-Varshney self-assigned this Jan 6, 2026

Avdhesh-Varshney added the enhancement New feature or request label Jan 6, 2026

Avdhesh-Varshney temporarily deployed to avdhesh/settings-page - code-a2z PR #1342 January 6, 2026 19:22 — with Render Destroyed

Copilot started reviewing on behalf of Avdhesh-Varshney January 6, 2026 19:23 View session

format code

9380c5e

vercel bot deployed to Preview – code-a2z January 6, 2026 19:24 View deployment

vercel bot deployed to Preview – code-a2z-server January 6, 2026 19:24 View deployment

Copilot AI reviewed Jan 6, 2026

View reviewed changes

lint fixes

d8f043e

vercel bot deployed to Preview – code-a2z January 6, 2026 19:29 View deployment

vercel bot deployed to Preview – code-a2z-server January 6, 2026 19:29 View deployment

Avdhesh-Varshney merged commit ea933c8 into main Jan 6, 2026
4 checks passed

Avdhesh-Varshney deleted the avdhesh/settings-page branch January 6, 2026 19:30

Avdhesh-Varshney linked an issue Jan 7, 2026 that may be closed by this pull request

Implement light/dark mode switch #1341

Closed

4 tasks

	if (!user_id) {
	return sendResponse(res, 401, 'User ID not found in token');
	}

	setIsDrawerOpen(false);
	setIsDrawerOpen(false);
	handleOnClearClick();

Create & Setup Settings page #1342

Create & Setup Settings page #1342

Uh oh!

Conversation

Avdhesh-Varshney commented Jan 6, 2026

Pull Requests Review Criteria

Describe the add-ons or changes you've made 📃

Screenshots

Uh oh!

vercel bot commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jan 6, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Jan 6, 2026 •

edited

Loading