Add user profile and preference management with ID-based routing #35
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for colab-flow ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Reviewer's GuideThis PR overhauls the profile and preference UIs into a unified tabbed interface, extends routing and data fetching to support viewing other users’ profiles, updates the Auth context/provider to handle userName and new backend calls, and synchronizes backend routes and controllers for profile and preference updates. Sequence diagram for viewing another user's profilesequenceDiagram
actor User
participant Frontend
participant AuthProvider
participant Backend
User->>Frontend: Navigate to /dashboard/profile/:id
Frontend->>AuthProvider: getUserById(id)
AuthProvider->>Backend: GET /auth/user/:id
Backend-->>AuthProvider: Return user data
AuthProvider-->>Frontend: Return user data
Frontend-->>User: Display profile UI for user
Sequence diagram for updating profile and preferencessequenceDiagram
actor User
participant Frontend
participant AuthProvider
participant Backend
User->>Frontend: Submit profile or preference form
Frontend->>AuthProvider: updateProfile(...) or updatePreferences(...)
AuthProvider->>Backend: PUT /auth/update/profile/:id or /auth/update/preference/:id
Backend-->>AuthProvider: Return updated user data
AuthProvider-->>Frontend: Update local state
Frontend-->>User: Show updated profile/preference
Entity relationship diagram for updated User and Profile data typeserDiagram
USER {
string _id
string userName
string email
Profile profile
Preferences preferences
}
PROFILE {
string userName
string firstName
string lastName
string bio
string phone
}
PREFERENCES {
Notifications notifications
string language
string theme
}
NOTIFICATIONS {
boolean email
boolean push
boolean taskUpdates
boolean mention
}
USER ||--|{ PROFILE : has
USER ||--|{ PREFERENCES : has
PREFERENCES ||--|{ NOTIFICATIONS : has
Class diagram for updated AuthContext and related typesclassDiagram
class AuthContextType {
user: User[]
currentUser: User | null
loading: boolean
error: string
login(email: string, password: string): Promise<void>
register(userName: string, email: string, password: string): Promise<void>
logout(): void
getAllUser(): Promise<void>
getUserById(id: string): Promise<User>
updatePreferences(email: boolean, push: boolean, taskUpdates: boolean, mention: boolean, language: string, theme: string, profileId: string): Promise<void>
updateProfile(userName: string, firstName: string, lastName: string, bio: string, phone: string, profileId: string): Promise<void>
}
class User {
_id: string
userName: string
email: string
profile: Profile
preferences: Preferences
}
class Profile {
userName: string
firstName: string
lastName: string
bio: string
phone: string
}
class Preferences {
notifications: Notifications
language: string
theme: string
}
class Notifications {
email: boolean
push: boolean
taskUpdates: boolean
mention: boolean
}
AuthContextType o-- User
User o-- Profile
User o-- Preferences
Preferences o-- Notifications
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey there - I've reviewed your changes - here's some feedback:
- Profile.tsx has grown quite large and mixes tab logic, forms, and display—consider splitting it into smaller components (e.g., TabNavigation, ProfileForm, PreferenceForm) to improve readability and maintainability.
- In ProfilePage.tsx you still fetch all users and then filter by id—since you added getUserById in the auth context, consider calling getUserById directly when an ID param is present to avoid loading the entire user list.
- There’s a lot of duplicated form logic (state initialization, change handlers, error display) across the profile and preference forms—extract common hooks or subcomponents to reduce repetition and simplify the code.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Profile.tsx has grown quite large and mixes tab logic, forms, and display—consider splitting it into smaller components (e.g., TabNavigation, ProfileForm, PreferenceForm) to improve readability and maintainability.
- In ProfilePage.tsx you still fetch all users and then filter by id—since you added getUserById in the auth context, consider calling getUserById directly when an ID param is present to avoid loading the entire user list.
- There’s a lot of duplicated form logic (state initialization, change handlers, error display) across the profile and preference forms—extract common hooks or subcomponents to reduce repetition and simplify the code.
## Individual Comments
### Comment 1
<location> `src/controllers/user.controller.js:157` </location>
<code_context>
const [preference, setPreference] = useState<Preference>({
- notification: {
+ notifications: {
email: false,
push: false,
</code_context>
<issue_to_address>
Inconsistent naming for 'mentions' field may cause confusion or bugs.
Standardize the field name to 'mentions' throughout the codebase to prevent mismatches between frontend and backend.
</issue_to_address>
### Comment 2
<location> `frontend/src/context/AuthProvider.tsx:213` </location>
<code_context>
- setLoading(false);
- }
- }, [])
+ const updatedUser = response.data?.updateProfile || response.data;
+ setCurrentUser(prev => ({
+ ...prev,
</code_context>
<issue_to_address>
Ambiguous response handling for updated profile data.
Relying on two possible response formats may cause inconsistencies. Standardize the backend response to always return updated user data in a consistent structure.
</issue_to_address>
### Comment 3
<location> `frontend/src/context/AuthProvider.tsx:243` </location>
<code_context>
+ const getUserById = useCallback(async (id: string) => {
+ try {
+ setLoading(true);
+ const res = await instance.get(`/auth/user/${id}`);
+
+ console.log("API Response for user by ID:", res.data); // Debug
</code_context>
<issue_to_address>
Console log for debugging should be removed in production.
Consider removing or replacing the console.log with a proper logging mechanism to prevent exposure of sensitive data.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
+157
to
+161
| notifications: { | ||
| email, | ||
| push, | ||
| taskUpdates, | ||
| mentions: mention, // Note: In the model it's 'mentions' but in the request it's 'mention' |
There was a problem hiding this comment.
issue: Inconsistent naming for 'mentions' field may cause confusion or bugs.
Standardize the field name to 'mentions' throughout the codebase to prevent mismatches between frontend and backend.
| setLoading(false); | ||
| } | ||
| }, []) | ||
| const updatedUser = response.data?.updateProfile || response.data; |
There was a problem hiding this comment.
issue: Ambiguous response handling for updated profile data.
Relying on two possible response formats may cause inconsistencies. Standardize the backend response to always return updated user data in a consistent structure.
| const getUserById = useCallback(async (id: string) => { | ||
| try { | ||
| setLoading(true); | ||
| const res = await instance.get(`/auth/user/${id}`); |
There was a problem hiding this comment.
nitpick: Console log for debugging should be removed in production.
Consider removing or replacing the console.log with a proper logging mechanism to prevent exposure of sensitive data.
Owner
Author
|
@sourcery-ai summary |
Owner
Author
|
@sourcery-ai title |
sourcery-ai
bot
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Implement a unified profile and preferences management UI with full CRUD support and route parameter handling
New Features:
Enhancements:
Chores: