Merged
Conversation
provider_profile_and_user_dev: Added ProviderUsers Component Code
Reviewer's GuideThis PR enhances the ProviderUsers page by introducing a data-fetching flow using hooks and a new service, and by rendering results in a reusable CustomTable component complete with styling and an edit icon. Sequence Diagram for Fetching and Displaying Provider UserssequenceDiagram
participant PU as ProviderUsers Component
participant PUS as ProviderUsersService
participant Axios as AxiosInstance
participant BE as Backend API
activate PU
PU->>PU: useEffect hook runs
PU->>PUS: getAllUsers(userId)
activate PUS
PUS->>Axios: get("providers/getAllUsers/{userId}")
activate Axios
Axios->>BE: HTTP GET Request
activate BE
BE-->>Axios: HTTP Response (User Data)
deactivate BE
Axios-->>PUS: Response
deactivate Axios
PUS-->>PU: Formatted User Data (users[])
deactivate PUS
PU->>PU: setUsers(users)
PU->>CustomTable Component: Render with users
deactivate PU
Class Diagram for Frontend Components and User Data StructureclassDiagram
class ProviderUsers {
<<React Component>>
-users: User[]
-userId: String
+useEffect()
#_fetchUsers()
}
class ProviderUsersService {
<<Service>>
+getAllUsers(providerId: String): Promise<User[]>
}
class CustomTable {
<<React Component>>
+headers: String[]
+data: User[]
}
class User {
<<Data Structure>>
+name: String
+email: String
+phone_number: String
}
class AxiosInstance {
<<HTTP Client>>
+get(url: String): Promise
}
ProviderUsers o--> CustomTable : Renders
ProviderUsers ..> ProviderUsersService : Calls
ProviderUsersService ..> AxiosInstance : Uses
CustomTable ..> User : Data items are
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 @Riyad-Murad - I've reviewed your changes and they look great!
Here's what I looked at during the review
- 🟡 General issues: 3 issues found
- 🟢 Security: all looks good
- 🟢 Testing: all looks good
- 🟢 Documentation: all looks good
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| const userId = useSelector((state) => state.user.id); | ||
| const { getAllUsers } = ProviderUsersService(); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
suggestion (bug_risk): Missing getAllUsers in effect dependencies
getAllUsers is recreated every render, so memoize it or include it in the effect’s dependency array with userId to avoid stale closures.
Comment on lines
+12
to
+15
| } catch (error) { | ||
| console.error("Error fetching users:", error); | ||
| return []; | ||
| } |
There was a problem hiding this comment.
suggestion (bug_risk): Silent failure on fetch errors
Returning [] hides fetch errors. Propagate the error or use a shared handler so the UI can display an error banner.
Suggested change
| } catch (error) { | |
| console.error("Error fetching users:", error); | |
| return []; | |
| } | |
| } catch (error) { | |
| console.error("Error fetching users:", error); | |
| throw error; | |
| } |
| <td>{user.email}</td> | ||
| <td>{user.phone_number}</td> | ||
| <td> | ||
| <FontAwesomeIcon icon={faPenToSquare} className="edit-icon" /> |
There was a problem hiding this comment.
suggestion (bug_risk): No action handler for edit icon
Pass an onEdit or onAction prop into CustomTable and attach it as the edit icon’s onClick handler to enable row-level actions.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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 by Sourcery
Fetch provider users from the API and display them in a reusable table component with basic styling and an edit action icon.
New Features:
Enhancements: