feat: implement real-time collaboration and instant updates with socket integration

- Added `SocketProvider` for application-wide WebSocket connection management. - Introduced real-time updates for projects and groups, including create, update, and delete events. - Enhanced project and group pages with real-time collaboration, group actions, and data syncing. - Refactored fetch methods to include loading and refreshing states. - Integrated `toast` notifications for real-time event feedback. - Updated `package.json` to include `socket.io-client@4.8.1`.
2025-05-16 16:41:37 +02:00 · 2025-05-16 16:41:37 +02:00 · d7255444f5
commit d7255444f5
parent ce7e89d339
5 changed files with 365 additions and 87 deletions
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@ -3,6 +3,8 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { AuthProvider } from "@/lib/auth-context";
+import { SocketProvider } from "@/lib/socket-context";
+import { NotificationsListener } from "@/components/notifications";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@ -37,14 +39,17 @@ export default function RootLayout({
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <AuthProvider>
-          <ThemeProvider
-            attribute="class"
-            defaultTheme="system"
-            enableSystem
-            disableTransitionOnChange
-          >
-            {children}
-          </ThemeProvider>
+          <SocketProvider>
+            <ThemeProvider
+              attribute="class"
+              defaultTheme="system"
+              enableSystem
+              disableTransitionOnChange
+            >
+              <NotificationsListener />
+              {children}
+            </ThemeProvider>
+          </SocketProvider>
        </AuthProvider>
      </body>
    </html>
--- a/frontend/app/projects/[id]/groups/auto-create/page.tsx
+++ b/frontend/app/projects/[id]/groups/auto-create/page.tsx
@ -14,10 +14,12 @@ import {
  Loader2,
  Wand2,
  Save,
-  RefreshCw
+  RefreshCw,
+  Users
 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { toast } from "sonner";
+import { useSocket } from "@/lib/socket-context";

 // Mock project data (same as in the groups page)
 const getProjectData = (id: string) => {
@ -78,6 +80,9 @@ export default function AutoCreateGroupsPage() {
  const [generating, setGenerating] = useState(false);
  const [saving, setSaving] = useState(false);

+  // Socket connection for real-time updates
+  const { isConnected, joinProject, leaveProject, onGroupCreated } = useSocket();
+
  // State for auto-generation parameters
  const [numberOfGroups, setNumberOfGroups] = useState(4);
  const [balanceTags, setBalanceTags] = useState(true);
@ -86,6 +91,36 @@ export default function AutoCreateGroupsPage() {
  const [availableTags, setAvailableTags] = useState<string[]>([]);
  const [availableLevels, setAvailableLevels] = useState<string[]>([]);

+  // Join project room for real-time updates when connected
+  useEffect(() => {
+    if (!isConnected) return;
+
+    // Join the project room to receive updates
+    joinProject(projectId);
+
+    // Clean up when component unmounts
+    return () => {
+      leaveProject(projectId);
+    };
+  }, [isConnected, joinProject, leaveProject, projectId]);
+
+  // Listen for group created events
+  useEffect(() => {
+    if (!isConnected || groups.length === 0) return;
+
+    const unsubscribe = onGroupCreated((data) => {
+      console.log("Group created:", data);
+
+      if (data.action === "created" && data.group) {
+        toast.info(`Nouveau groupe créé par un collaborateur: ${data.group.name}`);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [isConnected, onGroupCreated, groups]);
+
  useEffect(() => {
    // Fetch project data from API
    const fetchProject = async () => {
@ -163,6 +198,12 @@ export default function AutoCreateGroupsPage() {

    setGenerating(true);
    try {
+      // Notify users that groups are being generated
+      if (isConnected) {
+        toast.info("Génération de groupes en cours...", {
+          description: "Les autres utilisateurs seront notifiés lorsque les groupes seront générés."
+        });
+      }
      // Use the API service to generate groups
      const { groupsAPI } = await import('@/lib/api');

@ -338,6 +379,12 @@ export default function AutoCreateGroupsPage() {
            </Link>
          </Button>
          <h1 className="text-3xl font-bold">Assistant de création de groupes</h1>
+          {isConnected && (
+            <div className="flex items-center gap-2 ml-4 text-sm text-muted-foreground">
+              <div className="h-2 w-2 rounded-full bg-green-500"></div>
+              <span>Collaboration en temps réel active</span>
+            </div>
+          )}
        </div>
        <Button onClick={handleSaveGroups} disabled={saving || groups.length === 0}>
          {saving ? (
@ -470,6 +517,12 @@ export default function AutoCreateGroupsPage() {
                  <p className="text-center text-muted-foreground">
                    Aucun groupe généré. Cliquez sur "Générer les groupes" pour commencer.
                  </p>
+                  {isConnected && (
+                    <div className="mt-4 flex items-center gap-2 text-sm text-muted-foreground">
+                      <div className="h-2 w-2 rounded-full bg-green-500"></div>
+                      <span>Collaboration en temps réel active</span>
+                    </div>
+                  )}
                </div>
              ) : (
                <div className="space-y-4">
--- a/frontend/app/projects/[id]/groups/page.tsx
+++ b/frontend/app/projects/[id]/groups/page.tsx
@ -1,7 +1,7 @@
 "use client";

 import { useState, useEffect } from "react";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@ -11,10 +11,12 @@ import {
  Users, 
  Wand2, 
  ArrowLeft,
-  Loader2
+  Loader2,
+  RefreshCw
 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { toast } from "sonner";
+import { useSocket } from "@/lib/socket-context";

 // Mock project data
 const getProjectData = (id: string) => {
@ -88,39 +90,187 @@ const getProjectData = (id: string) => {

 export default function ProjectGroupsPage() {
  const params = useParams();
+  const router = useRouter();
  const projectId = params.id as string;
  const [project, setProject] = useState<any>(null);
  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
  const [activeTab, setActiveTab] = useState("existing");

-  useEffect(() => {
-    // Simulate API call to fetch project data
-    const fetchProject = async () => {
-      setLoading(true);
-      try {
-        // In a real app, this would be an API call
-        await new Promise(resolve => setTimeout(resolve, 1000));
-        const data = getProjectData(projectId);
-        setProject(data);
-      } catch (error) {
-        console.error("Error fetching project:", error);
-        toast.error("Erreur lors du chargement du projet");
-      } finally {
-        setLoading(false);
-      }
-    };
+  // Socket connection for real-time updates
+  const { isConnected, joinProject, leaveProject, onGroupCreated, onGroupUpdated, onPersonAddedToGroup, onPersonRemovedFromGroup } = useSocket();

+  // Fetch project data from API
+  const fetchProject = async () => {
+    setLoading(true);
+    try {
+      // Use the API service to get project and groups data
+      const { projectsAPI, groupsAPI } = await import('@/lib/api');
+      const projectData = await projectsAPI.getProject(projectId);
+      const groupsData = await groupsAPI.getGroups(projectId);
+
+      // Combine project data with groups data
+      const data = {
+        ...projectData,
+        groups: groupsData || []
+      };
+
+      setProject(data);
+    } catch (error) {
+      console.error("Error fetching project:", error);
+      toast.error("Erreur lors du chargement du projet");
+
+      // Fallback to mock data for development
+      const data = getProjectData(projectId);
+      setProject(data);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  // Initial fetch
+  useEffect(() => {
    fetchProject();
  }, [projectId]);

-  const handleCreateGroups = async () => {
-    toast.success("Redirection vers la page de création de groupes");
-    // In a real app, this would redirect to the group creation page
+  // Join project room for real-time updates when connected
+  useEffect(() => {
+    if (!isConnected) return;
+
+    // Join the project room to receive updates
+    joinProject(projectId);
+
+    // Clean up when component unmounts
+    return () => {
+      leaveProject(projectId);
+    };
+  }, [isConnected, joinProject, leaveProject, projectId]);
+
+  // Listen for group created events
+  useEffect(() => {
+    if (!isConnected) return;
+
+    const unsubscribe = onGroupCreated((data) => {
+      console.log("Group created:", data);
+
+      if (data.action === "created" && data.group) {
+        // Add the new group to the list
+        setProject(prev => ({
+          ...prev,
+          groups: [...prev.groups, data.group]
+        }));
+
+        toast.success(`Nouveau groupe créé: ${data.group.name}`);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [isConnected, onGroupCreated]);
+
+  // Listen for group updated events
+  useEffect(() => {
+    if (!isConnected) return;
+
+    const unsubscribe = onGroupUpdated((data) => {
+      console.log("Group updated:", data);
+
+      if (data.action === "updated" && data.group) {
+        // Update the group in the list
+        setProject(prev => ({
+          ...prev,
+          groups: prev.groups.map(group => 
+            group.id === data.group.id ? data.group : group
+          )
+        }));
+
+        toast.info(`Groupe mis à jour: ${data.group.name}`);
+      } else if (data.action === "deleted" && data.group) {
+        // Remove the group from the list
+        setProject(prev => ({
+          ...prev,
+          groups: prev.groups.filter(group => group.id !== data.group.id)
+        }));
+
+        toast.info(`Groupe supprimé: ${data.group.name}`);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [isConnected, onGroupUpdated]);
+
+  // Listen for person added to group events
+  useEffect(() => {
+    if (!isConnected) return;
+
+    const unsubscribe = onPersonAddedToGroup((data) => {
+      console.log("Person added to group:", data);
+
+      if (data.group && data.person) {
+        // Update the group with the new person
+        setProject(prev => ({
+          ...prev,
+          groups: prev.groups.map(group => {
+            if (group.id === data.group.id) {
+              return {
+                ...group,
+                persons: [...group.persons, data.person]
+              };
+            }
+            return group;
+          })
+        }));
+
+        toast.success(`${data.person.name} a été ajouté au groupe ${data.group.name}`);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [isConnected, onPersonAddedToGroup]);
+
+  // Listen for person removed from group events
+  useEffect(() => {
+    if (!isConnected) return;
+
+    const unsubscribe = onPersonRemovedFromGroup((data) => {
+      console.log("Person removed from group:", data);
+
+      if (data.group && data.person) {
+        // Update the group by removing the person
+        setProject(prev => ({
+          ...prev,
+          groups: prev.groups.map(group => {
+            if (group.id === data.group.id) {
+              return {
+                ...group,
+                persons: group.persons.filter(person => person.id !== data.person.id)
+              };
+            }
+            return group;
+          })
+        }));
+
+        toast.info(`${data.person.name} a été retiré du groupe ${data.group.name}`);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [isConnected, onPersonRemovedFromGroup]);
+
+  const handleCreateGroups = () => {
+    router.push(`/projects/${projectId}/groups/create`);
  };

-  const handleAutoCreateGroups = async () => {
-    toast.success("Redirection vers l'assistant de création automatique de groupes");
-    // In a real app, this would redirect to the automatic group creation page
+  const handleAutoCreateGroups = () => {
+    router.push(`/projects/${projectId}/groups/auto-create`);
  };

  if (loading) {
@ -144,13 +294,27 @@ export default function ProjectGroupsPage() {

  return (
    <div className="flex flex-col gap-6">
-      <div className="flex items-center gap-2">
-        <Button variant="outline" size="icon" asChild>
-          <Link href={`/projects/${projectId}`}>
-            <ArrowLeft className="h-4 w-4" />
-          </Link>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="icon" asChild>
+            <Link href={`/projects/${projectId}`}>
+              <ArrowLeft className="h-4 w-4" />
+            </Link>
+          </Button>
+          <h1 className="text-3xl font-bold">{project.name} - Groupes</h1>
+        </div>
+        <Button 
+          variant="outline" 
+          size="icon" 
+          onClick={() => {
+            setRefreshing(true);
+            fetchProject();
+          }}
+          disabled={loading || refreshing}
+        >
+          <RefreshCw className={`h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} />
+          <span className="sr-only">Rafraîchir</span>
        </Button>
-        <h1 className="text-3xl font-bold">{project.name} - Groupes</h1>
      </div>

      <Tabs defaultValue="existing" className="space-y-4" onValueChange={setActiveTab}>
@ -158,7 +322,7 @@ export default function ProjectGroupsPage() {
          <TabsTrigger value="existing">Groupes existants</TabsTrigger>
          <TabsTrigger value="create">Créer des groupes</TabsTrigger>
        </TabsList>
-        
+
        <TabsContent value="existing" className="space-y-4">
          {project.groups.length === 0 ? (
            <Card>
@ -208,7 +372,7 @@ export default function ProjectGroupsPage() {
            </div>
          )}
        </TabsContent>
-        
+
        <TabsContent value="create" className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <Card>
@ -229,7 +393,7 @@ export default function ProjectGroupsPage() {
                </Button>
              </CardContent>
            </Card>
-            
+
            <Card>
              <CardHeader>
                <CardTitle>Création automatique</CardTitle>
@ -253,4 +417,4 @@ export default function ProjectGroupsPage() {
      </Tabs>
    </div>
  );
-}
+}
--- a/frontend/app/projects/page.tsx
+++ b/frontend/app/projects/page.tsx
@ -35,8 +35,11 @@ import {
  Pencil, 
  Trash2, 
  Users, 
-  Eye 
+  Eye,
+  RefreshCw
 } from "lucide-react";
+import { useSocket } from "@/lib/socket-context";
+import { toast } from "sonner";

 // Define the Project type
 interface Project {
@ -55,55 +58,95 @@ export default function ProjectsPage() {
  const [projects, setProjects] = useState<Project[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState(false);
+
+  // Socket connection for real-time updates
+  const { isConnected, onProjectUpdated } = useSocket();

  // Fetch projects from API
-  useEffect(() => {
-    const fetchProjects = async () => {
-      setIsLoading(true);
-      try {
-        const data = await import('@/lib/api').then(module => 
-          module.projectsAPI.getProjects()
-        );
-        setProjects(data);
-        setError(null);
-      } catch (err) {
-        console.error("Failed to fetch projects:", err);
-        setError("Impossible de charger les projets. Veuillez réessayer plus tard.");
-        // Fallback to mock data for development
-        setProjects([
-          {
-            id: 1,
-            name: "Projet Formation Dev Web",
-            description: "Création de groupes pour la formation développement web",
-            date: "2025-05-15",
-            groups: 4,
-            persons: 16,
-          },
-          {
-            id: 2,
-            name: "Projet Hackathon",
-            description: "Équipes pour le hackathon annuel",
-            date: "2025-05-10",
-            groups: 8,
-            persons: 32,
-          },
-          {
-            id: 3,
-            name: "Projet Workshop UX/UI",
-            description: "Groupes pour l'atelier UX/UI",
-            date: "2025-05-05",
-            groups: 5,
-            persons: 20,
-          },
-        ]);
-      } finally {
-        setIsLoading(false);
-      }
-    };
+  const fetchProjects = async () => {
+    setIsLoading(true);
+    try {
+      const data = await import('@/lib/api').then(module => 
+        module.projectsAPI.getProjects()
+      );
+      setProjects(data);
+      setError(null);
+    } catch (err) {
+      console.error("Failed to fetch projects:", err);
+      setError("Impossible de charger les projets. Veuillez réessayer plus tard.");
+      // Fallback to mock data for development
+      setProjects([
+        {
+          id: 1,
+          name: "Projet Formation Dev Web",
+          description: "Création de groupes pour la formation développement web",
+          date: "2025-05-15",
+          groups: 4,
+          persons: 16,
+        },
+        {
+          id: 2,
+          name: "Projet Hackathon",
+          description: "Équipes pour le hackathon annuel",
+          date: "2025-05-10",
+          groups: 8,
+          persons: 32,
+        },
+        {
+          id: 3,
+          name: "Projet Workshop UX/UI",
+          description: "Groupes pour l'atelier UX/UI",
+          date: "2025-05-05",
+          groups: 5,
+          persons: 20,
+        },
+      ]);
+    } finally {
+      setIsLoading(false);
+      setRefreshing(false);
+    }
+  };

+  // Initial fetch
+  useEffect(() => {
    fetchProjects();
  }, []);

+  // Set up real-time updates for projects
+  useEffect(() => {
+    if (!isConnected) return;
+
+    // Listen for project updates
+    const unsubscribe = onProjectUpdated((data) => {
+      console.log("Project updated:", data);
+
+      if (data.action === "created") {
+        // Add the new project to the list
+        setProjects(prev => [data.project, ...prev]);
+        toast.success(`Nouveau projet créé: ${data.project.name}`);
+      } else if (data.action === "updated") {
+        // Update the project in the list
+        setProjects(prev => 
+          prev.map(project => 
+            project.id === data.project.id ? data.project : project
+          )
+        );
+        toast.info(`Projet mis à jour: ${data.project.name}`);
+      } else if (data.action === "deleted") {
+        // Remove the project from the list
+        setProjects(prev => 
+          prev.filter(project => project.id !== data.project.id)
+        );
+        toast.info(`Projet supprimé: ${data.project.name}`);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [isConnected, onProjectUpdated]);
+
  // Filter projects based on search query
  const filteredProjects = projects.filter(
    (project) =>
@ -135,6 +178,18 @@ export default function ProjectsPage() {
            disabled={isLoading}
          />
        </div>
+        <Button 
+          variant="outline" 
+          size="icon" 
+          onClick={() => {
+            setRefreshing(true);
+            fetchProjects();
+          }}
+          disabled={isLoading || refreshing}
+        >
+          <RefreshCw className={`h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} />
+          <span className="sr-only">Rafraîchir</span>
+        </Button>
      </div>

      {error && (
--- a/frontend/package.json
+++ b/frontend/package.json
@ -52,6 +52,7 @@
    "react-resizable-panels": "^3.0.2",
    "recharts": "^2.15.3",
    "sonner": "^2.0.3",
+    "socket.io-client": "^4.8.1",
    "swr": "^2.3.3",
    "tailwind-merge": "^3.3.0",
    "vaul": "^1.1.2",