Skip to content

Enhance Room/Task API, UI, and Member Management #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
elhalj merged 1 commit into from
Aug 31, 2025
Merged

Enhance Room/Task API, UI, and Member Management #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/tasks/src/context/RoomContext.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ interface RoomContextType {
room: Room[];
getRoom: () => Promise<void>;
createRoom: (room_name: string, description: string, members: User[]) => Promise<void>;
addMember: (roomId: string, memberId: User) => Promise<void>;
addMember: (roomId: string, memberId: string) => Promise<void>;
deleteMemberToRoom: (roomId: string, memberId: string) => Promise<void>;
updateRoomInformation: (roomId: string, room: Room) => Promise<void>;
deleteRoom: (roomId: string) => Promise<void>
Expand Down
7 changes: 4 additions & 3 deletions frontend/tasks/src/context/RoomProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,10 @@ export const RoomProvider = ({ children }: RoomProviderProps) => {
}
};

const addMember = async (roomId: string, memberId: User) => {
const addMember = async (roomId: string, memberId: string) => {
try {
setLoading(true);
const response = await instance.post(`/room/add/${roomId}/${memberId._id}`);
const response = await instance.post(`/room/add/${roomId}/${memberId}`);

if (!response.data.success) {
throw new Error(response.data.error || "Failed to add member");
Expand All @@ -102,9 +102,10 @@ export const RoomProvider = ({ children }: RoomProviderProps) => {
)
);
setErrors(null);
return response.data;
}

throw new Error("Failed to update room after adding member");
throw new Error("No room data returned from server");
} catch (error) {
const apiError = error as ApiError;
const errorMessage =
Expand Down
3 changes: 2 additions & 1 deletion frontend/tasks/src/hook/useRoom.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@ export const useRoom = () => {
return context as {
room: Room[];
getRoom: () => Promise<void>;
loading: boolean;
createRoom: (room_name: string, description: string, members: User[]) => Promise<void>;
addMember: (roomId: string, memberId: User) => Promise<void>;
addMember: (roomId: string, memberId: string) => Promise<void>;
deleteMemberToRoom: (roomId: string, memberId: string) => Promise<void>;
updateRoomInformation: (roomId: string, room: Room) => Promise<void>;
deleteRoom: (roomId: string) => Promise<void>;
Expand Down
56 changes: 45 additions & 11 deletions frontend/tasks/src/pages/RoomId.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,12 @@ import {
} from "lucide-react";
import AddMember from "../ui/room/AddMember";
import { AuthContext } from "../context";
import { CheckmarkIcon } from "react-hot-toast";

const RoomId = () => {
const { id } = useParams<{ id: string }>();
const { room, getRoom } = useRoom();
// const {deleteTask} = useContext(TaskContext) //Au cas ou on veut supprimer directement dans la salle
const {currentUser} = useContext(AuthContext)
const [currentRoom, setCurrentRoom] = useState<Room | null>(null);
const [isLoading, setIsLoading] = useState(true);
Expand Down Expand Up @@ -61,19 +63,25 @@ const RoomId = () => {
switch (status) {
case 'completed':
return 'bg-emerald-900/30 text-emerald-400 border-emerald-800/50';
case 'in-progress':
case 'in_progress':
return 'bg-blue-900/30 text-blue-400 border-blue-800/50';
case 'done':
return 'bg-green-900/30 text-blue-400 border-green-800/50';
default:
return 'bg-slate-800/50 text-slate-300 border-slate-700/50';
}
};

const getPriorityColor = (priority: string) => {
switch (priority) {
case 'low':
return 'bg-yellow-200'
Comment on lines +77 to +78
Copy link

@sourcery-ai sourcery-ai bot Aug 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: The color for 'low' priority is very light and may reduce readability on light backgrounds.

Using a darker yellow shade will improve contrast and accessibility for users on light backgrounds.

Suggested change
case 'low':
return 'bg-yellow-200'
case 'low':
return 'bg-yellow-400'

case 'high':
return 'bg-red-500';
case 'medium':
return 'bg-yellow-500';
case 'critical':
return 'bg-red-500';
default:
return 'bg-green-500';
}
Expand All @@ -83,8 +91,12 @@ const RoomId = () => {
switch (status) {
case 'completed':
return <CheckCircle2 className="w-4 h-4" />;
case 'in-progress':
case 'in_progress':
return <Clock className="w-4 h-4" />;
case 'done':
return (
<CheckmarkIcon className="w-4 h-4" />
)
default:
return <Calendar className="w-4 h-4" />;
}
Expand Down Expand Up @@ -139,10 +151,10 @@ const RoomId = () => {
</h1>
</div>
<div className="flex items-center gap-3">
<button className="p-2 rounded-xl bg-slate-800/50 hover:bg-slate-700/50 transition-all duration-200 border border-slate-700/50">
<button type="button" onClick={() => alert("Pas encore fonctionnel")} className="p-2 rounded-xl bg-slate-800/50 hover:bg-slate-700/50 transition-all duration-200 border border-slate-700/50">
<Settings className="w-5 h-5 text-slate-400 hover:text-slate-200" />{ }
</button>
<button className="p-2 rounded-xl bg-slate-800/50 hover:bg-slate-700/50 transition-all duration-200 border border-slate-700/50">
<button type="button" onClick={() => alert("Pas encore fonctionnel")} className="p-2 rounded-xl bg-slate-800/50 hover:bg-slate-700/50 transition-all duration-200 border border-slate-700/50">
<MoreVertical className="w-5 h-5 text-slate-400 hover:text-slate-200" />{ }
</button>
</div>
Expand Down Expand Up @@ -232,9 +244,11 @@ const RoomId = () => {
<CheckCircle2 className="w-7 h-7 text-blue-400" />
Tasks
</h2>
<button className="px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl">
<Plus className="w-4 h-4" />
<button type="button" className="px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl">
<Link to={"/dashboard/add/task"} className="flex justify-center items-center gap-1">
<Plus className="w-4 h-4" />
New Task
</Link>
</button>
</div>

Expand All @@ -250,15 +264,33 @@ const RoomId = () => {
<div className="flex items-center gap-3 mb-2">
<div className={`w-3 h-3 rounded-full ${getPriorityColor(task.priority || 'low')}`}></div>
<h3 className="font-semibold text-slate-100 group-hover:text-blue-400 transition-colors duration-200">
{task.title}
{task.title || 'Sans titre'}
</h3>
<span className={`px-3 py-1 rounded-full text-xs font-medium border ${getStatusColor(task.status || 'todo')} flex items-center gap-1`}>
{getStatusIcon(task.status || 'todo')}
{(task.status || 'todo').replace('-', ' ')}
</span>
</div>
<p className="text-slate-400 leading-relaxed">{task.description}</p>
<p className="text-slate-400 leading-relaxed">
{task.description || 'Aucune description'}
</p>
</div>
{/* <Link to={`/dashboard/tasks/${task._id}/edit`}>
<p className="text-white p-2 bg-blue-400 rounded-md hover:text-blue-300 transition-colors">
Modifier
</p>
</Link> */}
{/* <button
type='button'
className='bg-red-400 text-white p-2 rounded-md hover:text-red-300 transition-colors'
onClick={async () => {
if (task._id) {
await deleteTask(task._id);
}
}}
>
Supprimer
</button> */}
</div>

<div className="flex items-center justify-between">
Expand All @@ -279,7 +311,7 @@ const RoomId = () => {
<span className="text-sm">{new Date(task.dueDate).toLocaleDateString()}</span>
</div>
)}
<button className="p-2 rounded-lg hover:bg-slate-800/50 transition-colors duration-200">
<button type="button" className="p-2 rounded-lg hover:bg-slate-800/50 transition-colors duration-200">
<Star className="w-4 h-4 text-slate-500 hover:text-yellow-400" />{ }
</button>
</div>
Expand All @@ -294,9 +326,11 @@ const RoomId = () => {
</div>
<h3 className="text-xl font-semibold text-slate-100 mb-2">No tasks yet</h3>
<p className="text-slate-400 mb-6">Get started by creating your first task for this room.</p>
<button className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-200 flex items-center gap-2 mx-auto shadow-lg">
<Plus className="w-5 h-5" />
<button type="button" className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-200 flex items-center gap-2 mx-auto shadow-lg">
<Link to={"/dashboard/add/task"}>
<Plus className="w-5 h-5" />
Create First Task
</Link>
</button>
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion frontend/tasks/src/ui/Tasks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ const Tasks = ({ viewMode }: {viewMode: string}) => {
</div>
<h3 className="text-xl font-semibold text-white mb-2">Aucune tâche</h3>
<p className="text-gray-400 mb-6">Créez votre première tâche pour commencer !</p>
<button className="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-3 rounded-lg hover:from-purple-600 hover:to-pink-600 transition-all duration-300 shadow-lg hover:shadow-xl">
<button type="button" className="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-3 rounded-lg hover:from-purple-600 hover:to-pink-600 transition-all duration-300 shadow-lg hover:shadow-xl">
<Plus className="w-5 h-5 inline mr-2" />
Créer une tâche
</button>
Expand Down
2 changes: 2 additions & 0 deletions frontend/tasks/src/ui/UtilsBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ const UtilsBar = ({
<button
type="button"
className="p-2 text-gray-300 hover:text-white transition-colors"
onClick={() => alert("Pas encore fonctionnel")}
>
<Filter className="w-5 h-5" />
{/* TODO: Ajouter un tooltip pour expliquer ce que fait ce bouton */}
Expand All @@ -52,6 +53,7 @@ const UtilsBar = ({
className="p-2 text-gray-300 hover:text-white transition-colors"
aria-label="Calendar view"
title="Switch to calendar view"
onClick={() => alert("Pas encore fonctionnel")}
>
<Calendar className="w-5 h-5" />
</button>
Expand Down
4 changes: 2 additions & 2 deletions frontend/tasks/src/ui/home/Cta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ const Cta = () => {
Rejoignez des milliers d'utilisateurs qui ont déjà adopté TaskFlow pour gérer leurs tâches
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<button className="bg-white text-blue-600 px-8 py-3 rounded hover:bg-gray-50 transition-colors font-semibold">
<button type="button" className="bg-white text-blue-600 px-8 py-3 rounded hover:bg-gray-50 transition-colors font-semibold">
Essai Gratuit 14 Jours
</button>
<button className="border border-white text-white px-8 py-3 rounded hover:bg-blue-700 transition-colors">
<button type="button" className="border border-white text-white px-8 py-3 rounded hover:bg-blue-700 transition-colors">
Planifier une Démo
</button>
</div>
Expand Down
5 changes: 3 additions & 2 deletions frontend/tasks/src/ui/home/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,11 @@ const Header = ({ isMenuOpen, setIsMenuOpen }: { isMenuOpen: boolean, setIsMenuO

{/* CTA et Menu Mobile */}
<div className="flex items-center space-x-4">
<button className="hidden md:block bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors">
<button type="button" className="hidden md:block bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors">
<Link to="/login">Essai Gratuit</Link>
</button>
<button
type="button"
className="md:hidden p-2"
onClick={() => setIsMenuOpen(!isMenuOpen)}
>
Expand All @@ -57,7 +58,7 @@ const Header = ({ isMenuOpen, setIsMenuOpen }: { isMenuOpen: boolean, setIsMenuO
<a href="#temoignages" className="text-gray-700 hover:text-blue-600 py-2">Témoignages</a>
<a href="#contact" className="text-gray-700 hover:text-blue-600 py-2">Contact</a>
<a href="/login" className="text-gray-700 hover:text-blue-600 py-2">Se connecter</a>
<button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors w-full">
<button type="button" className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors w-full">
<Link to="/login">Essai Gratuit</Link>
</button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions frontend/tasks/src/ui/home/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ const Hero = () => {
</p>

<div className="flex flex-col sm:flex-row gap-4 mb-8">
<button className="bg-blue-600 text-white px-8 py-3 rounded hover:bg-blue-700 transition-colors flex items-center justify-center space-x-2">
<button type="button" className="bg-blue-600 text-white px-8 py-3 rounded hover:bg-blue-700 transition-colors flex items-center justify-center space-x-2">
<span><Link to="/login">Commencer Gratuitement</Link></span>
<ArrowRight className="w-5 h-5" />
</button>
<button className="border border-gray-300 text-gray-700 px-8 py-3 rounded hover:bg-gray-50 transition-colors flex items-center justify-center space-x-2">
<button type="button" className="border border-gray-300 text-gray-700 px-8 py-3 rounded hover:bg-gray-50 transition-colors flex items-center justify-center space-x-2">
<Play className="w-5 h-5" />
<span>Voir la Démo</span>
</button>
Expand Down
6 changes: 3 additions & 3 deletions frontend/tasks/src/ui/home/Pricing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const Pricing = () => {
<span className="text-gray-600">Support email</span>
</li>
</ul>
<button className="w-full border border-blue-600 text-blue-600 py-3 rounded hover:bg-blue-50 transition-colors">
<button type="button" className="w-full border border-blue-600 text-blue-600 py-3 rounded hover:bg-blue-50 transition-colors">
Commencer
</button>
</div>
Expand Down Expand Up @@ -72,7 +72,7 @@ const Pricing = () => {
<span>Support prioritaire</span>
</li>
</ul>
<button className="w-full bg-white text-blue-600 py-3 rounded hover:bg-gray-50 transition-colors font-semibold">
<button type="button" className="w-full bg-white text-blue-600 py-3 rounded hover:bg-gray-50 transition-colors font-semibold">
Essai Gratuit
</button>
</div>
Expand Down Expand Up @@ -102,7 +102,7 @@ const Pricing = () => {
<span className="text-gray-600">Support 24/7</span>
</li>
</ul>
<button className="w-full border border-blue-600 text-blue-600 py-3 rounded hover:bg-blue-50 transition-colors">
<button type="button" className="w-full border border-blue-600 text-blue-600 py-3 rounded hover:bg-blue-50 transition-colors">
Nous Contacter
</button>
</div>
Expand Down
2 changes: 2 additions & 0 deletions frontend/tasks/src/ui/room/AddMember.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useContext, useEffect, useState } from "react";
import { AuthContext } from "../../context";
import { useRoom } from "../../hook/useRoom";
import Loader from "../../components/Loader";
import toast from "react-hot-toast";

const AddMember = ({ roomId }: { roomId: string }) => {
const { user, getAllUser, loading: authLoading } = useContext(AuthContext);
Expand Down Expand Up @@ -31,6 +32,7 @@ const AddMember = ({ roomId }: { roomId: string }) => {
try {
setAddingMemberId(userId);
await addMember(roomId, userId);
toast.success("Ajouté avec succès")
setErrors("")
} catch (error) {
setErrors("Erreur lors de l'ajout du membre");
Expand Down
2 changes: 2 additions & 0 deletions frontend/tasks/src/ui/room/CreateRoom.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { AuthContext } from "../../context";
import { useRoom } from "../../hook/useRoom";
import type { User } from "../../types/user";
import Loader from "../../components/Loader";
import toast from "react-hot-toast";

interface RoomFormData {
room_name: string;
Expand Down Expand Up @@ -79,6 +80,7 @@ const CreateRoom = () => {
formData.members
);

toast.success("Créé avec succès")
// Reset form on success
setFormData({ room_name: "", description: "", members: [] });
} catch (error: any) {
Expand Down
18 changes: 12 additions & 6 deletions frontend/tasks/src/ui/room/Room.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,29 @@
import React, { useContext, useEffect } from "react";
import React, { useContext, useEffect} from "react";
import { AuthContext } from "../../context";
import { Link } from "react-router-dom";
import { useRoom } from "../../hook/useRoom";
import Loader from "../../components/Loader";

const RoomUI = () => {
const { room, getRoom } = useRoom();
const { room, getRoom, loading} = useRoom();
const { user } = useContext(AuthContext);

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

if (loading) {
return <Loader/>
}

if (user && room.length === 0) {
return (
<div className="flex items-center justify-center w-full h-screen">
<div className="text-3xl text-center">Vous n'avez pas de room</div>
</div>
);
}

const RoomRow = React.memo(() =>
room.map((r) => {
// Get the first user in the array or undefined if empty
Expand All @@ -27,9 +33,9 @@ const RoomUI = () => {
key={r._id}
className="text-white p-4 border-2 border-gray-300 rounded-md bg-gradient-to-br from-white/20 to-indigo-300/50 opacity-80 backdrop-blur-lg"
>
<h1 className="uppercase text-2xl text-black bg-gray-50 w-24 p-2 rounded-lg">Room</h1>
<h3 className="text-2xl">{r.room_name}</h3>
<p>{r.description}</p>
<h1 className="uppercase text-slate-300 bg-gray-50/10 p-2 rounded-lg">Room: {room.findIndex((room) => room._id === r._id) + 1}</h1>
<h3 className="text-2xl">Titre: {r.room_name}</h3>
{/* <p>{r.description}</p> */}
<div className="flex flex-col">
<div className="flex items-center">
<span className="text-lg font-bold">Membres :</span>
Expand All @@ -43,7 +49,7 @@ const RoomUI = () => {
<Link to={`/dashboard/room/${r._id}`}>
<button
type="button"
className="ml-4 px-4 py-2 bg-blue-500 hover:bg-blue-700 text-white font-bold rounded-md"
className="ml-4 px-4 py-1 bg-blue-500/50 hover:bg-blue-700/50 text-white font-bold rounded-md"
>
Voir
</button>
Expand Down
1 change: 1 addition & 0 deletions src/models/room.model.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ const roomSchema = new mongoose.Schema(
{
type: mongoose.Schema.Types.ObjectId,
ref: "Task",
default: [],
},
],
admin: {
Expand Down
Loading
Loading