Revamp UI to light theme, add room deletion, and enhance error handling #29
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
Reviewer's GuideThis PR implements a comprehensive front-end theme overhaul by migrating from dark to light styling across core UI components, refactors form event handlers for conciseness, standardizes API error handling with a unified ApiError type in providers, adds server-side validation in room creation, restructures the mobile drawer in the header, and introduces deletion actions in the room list. Sequence diagram for standardized API error handling in providerssequenceDiagram
participant Provider
participant API
participant ApiError
participant UI
Provider->>API: Make API request
API-->>Provider: Respond (success or error)
alt Error occurs
Provider->>ApiError: Cast error to ApiError
ApiError-->>Provider: Provide error details
Provider->>UI: Set error state with message
else Success
Provider->>UI: Update state with data
end
Class diagram for Room creation validation and member handlingclassDiagram
class Room {
+room_name: string
+description: string
+admin: User
+members: User[]
+isActive: boolean
}
class User {
+rooms: Room[]
+userName: string
+email: string
+avatar: string
}
Room "*" -- "*" User : members
Room "1" -- "1" User : admin
User "*" -- "*" Room : rooms
class RoomRoutes {
+createRoom(room_name, description, members)
}
RoomRoutes --> Room
RoomRoutes --> User
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
✅ Deploy Preview for colab-flow ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Owner
Author
|
@sourcery-ai title |
sourcery-ai
bot
changed the title
![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:
- Consider abstracting the repeated ApiError parsing logic into a shared utility (e.g. parseApiError) to reduce duplication across your providers.
- A lot of nearly identical Tailwind utility classes are used for cards and buttons—extract those into reusable components or custom class names to keep your markup DRY and consistent.
- In room.route.js you start a MongoDB transaction but don’t call abortTransaction or endSession on error; add proper cleanup in the catch block to avoid leaking sessions.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Consider abstracting the repeated ApiError parsing logic into a shared utility (e.g. parseApiError) to reduce duplication across your providers.
- A lot of nearly identical Tailwind utility classes are used for cards and buttons—extract those into reusable components or custom class names to keep your markup DRY and consistent.
- In room.route.js you start a MongoDB transaction but don’t call abortTransaction or endSession on error; add proper cleanup in the catch block to avoid leaking sessions.
## Individual Comments
### Comment 1
<location> `frontend/src/ui/UtilsBar.tsx:68` </location>
<code_context>
{/* Changer le mode d'affichage */}
- <div className="flex bg-white/10 rounded-lg p-1">
+ <div className="flex bg--slatetext-shadow-slate-700/10 rounded-lg p-1">
<button
type="button"
</code_context>
<issue_to_address>
Invalid Tailwind class names used for background and text shadow.
Please update the class names to valid Tailwind CSS classes to ensure correct styling and maintainability.
</issue_to_address>
### Comment 2
<location> `frontend/src/ui/UtilsBar.tsx:72` </location>
<code_context>
<button
type="button"
onClick={() => setViewMode("grid")}
className={`p-2 rounded ${
- viewMode === "grid" ? "bg-white/20 text-white" : "text-gray-300"
+ viewMode === "grid" ? "bg--slatetext-shadow-slate-700/20 text-shadow-slate-700" : "text-gray-300"
} transition-all`}
title="Vue grille"
</code_context>
<issue_to_address>
Incorrect Tailwind class names for conditional styling.
The classes used are invalid and will prevent the intended styles from being applied. Please replace them with valid Tailwind CSS classes, such as 'bg-slate-200' or 'text-slate-700'.
</issue_to_address>
### Comment 3
<location> `frontend/src/ui/UtilsBar.tsx:50` </location>
<code_context>
<button
type="button"
- className="p-2 text-gray-300 hover:text-white rounded-lg hover:bg-white/10 transition-all"
+ className="p-2 text-gray-300 hover:text-shadow-slate-700 rounded-lg hover:bg--slatetext-shadow-slate-700/10 transition-all"
onClick={() => alert("Pas encore fonctionnel")}
title="Filtrer les tâches"
</code_context>
<issue_to_address>
Nonexistent Tailwind classes used for hover effects.
Please replace the invalid hover classes with valid Tailwind CSS classes, such as 'hover:text-slate-700' or 'hover:bg-slate-100', to ensure the intended hover effects work.
</issue_to_address>
### Comment 4
<location> `frontend/src/ui/UpdateTask.tsx:73` </location>
<code_context>
- console.error("Task ID is not defined");
- return;
- }
+ if (!id) return;
setLoading(true);
</code_context>
<issue_to_address>
Silent return on missing id may hinder debugging.
Consider keeping error reporting when 'id' is missing to aid in diagnosing issues during form submission.
</issue_to_address>
<suggested_fix>
<<<<<<< SEARCH
if (!id) return;
setLoading(true);
=======
if (!id) {
console.error("Task ID is not defined. Cannot submit update form.");
return;
}
setLoading(true);
>>>>>>> REPLACE
</suggested_fix>
### Comment 5
<location> `frontend/src/ui/room/Room.tsx:48` </location>
<code_context>
- {/* Menu burger sur mobile */}
+ {/* Bouton burger mobile */}
<div className="sm:hidden">
<button
type="button"
onClick={() => setShowMenu(true)}
</code_context>
<issue_to_address>
No confirmation before deleting a room increases risk of accidental deletion.
The 'Supprimer' button triggers 'deleteRoom' immediately. Please add a confirmation dialog to prevent unintended deletions.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
|
|
||
| {/* Changer le mode d'affichage */} | ||
| <div className="flex bg-white/10 rounded-lg p-1"> | ||
| <div className="flex bg--slatetext-shadow-slate-700/10 rounded-lg p-1"> |
There was a problem hiding this comment.
issue: Invalid Tailwind class names used for background and text shadow.
Please update the class names to valid Tailwind CSS classes to ensure correct styling and maintainability.
Comment on lines
72
to
+73
| className={`p-2 rounded ${ | ||
| viewMode === "grid" ? "bg-white/20 text-white" : "text-gray-300" | ||
| viewMode === "grid" ? "bg--slatetext-shadow-slate-700/20 text-shadow-slate-700" : "text-gray-300" |
There was a problem hiding this comment.
issue (bug_risk): Incorrect Tailwind class names for conditional styling.
The classes used are invalid and will prevent the intended styles from being applied. Please replace them with valid Tailwind CSS classes, such as 'bg-slate-200' or 'text-slate-700'.
| <button | ||
| type="button" | ||
| className="p-2 text-gray-300 hover:text-white rounded-lg hover:bg-white/10 transition-all" | ||
| className="p-2 text-gray-300 hover:text-shadow-slate-700 rounded-lg hover:bg--slatetext-shadow-slate-700/10 transition-all" |
There was a problem hiding this comment.
issue (bug_risk): Nonexistent Tailwind classes used for hover effects.
Please replace the invalid hover classes with valid Tailwind CSS classes, such as 'hover:text-slate-700' or 'hover:bg-slate-100', to ensure the intended hover effects work.
Comment on lines
+73
to
75
| if (!id) return; | ||
|
|
||
| setLoading(true); |
There was a problem hiding this comment.
suggestion: Silent return on missing id may hinder debugging.
Consider keeping error reporting when 'id' is missing to aid in diagnosing issues during form submission.
Suggested change
| if (!id) return; | |
| setLoading(true); | |
| if (!id) { | |
| console.error("Task ID is not defined. Cannot submit update form."); | |
| return; | |
| } | |
| setLoading(true); |
Comment on lines
48
to
+57
| <button | ||
| type="button" | ||
| className="px-4 py-1.5 bg-gradient-to-r from-purple-500 to-pink-500 text-white text-sm font-medium rounded-lg hover:from-purple-600 hover:to-pink-600 transition-all duration-300" | ||
| className="px-4 py-1.5 bg-blue-300 text-white text-sm font-medium rounded-lg hover:from-purple-600 hover:to-pink-600 transition-all duration-300 cursor-pointer" | ||
| > | ||
| Voir | ||
| </button> | ||
| </Link> | ||
| <button | ||
| type="button" | ||
| className="px-4 py-1.5 bg-red-300 text-white text-sm font-medium rounded-lg hover:from-purple-600 hover:to-pink-600 transition-all duration-300 cursor-pointer" |
There was a problem hiding this comment.
suggestion (bug_risk): No confirmation before deleting a room increases risk of accidental deletion.
The 'Supprimer' button triggers 'deleteRoom' immediately. Please add a confirmation dialog to prevent unintended deletions.
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
Revamp the frontend UI to a light theme, streamline form handling, and enhance backend and provider error management, while adding room deletion and input validation for room creation.
New Features:
Bug Fixes:
Enhancements: