fix(web-client): Fix frontend to work with the new backend

apps/web-client/src/components/Sidebar.jsx

@@ -9,19 +9,25 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from '@/components/ui/accordion';
+import { logoutService } from '@/services/authenticationService';
 
 const Sidebar = ({ className }) => {
   const router = useRouter();
   const { organizationId } = router.query;
 
+  const handleLogout = async () => {
+    await logoutService();
+    router.push('/login');
+  };
+
   return (
     <div className={cn('pb-12', className)}>
       <div className="space-y-4 py-4">
         <div className="px-3 py-2">
           <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Quick Access</h2>
           <div className="space-y-1">
             <Button variant="ghost" className="w-full justify-start">
-              <Link href={`/dashboard/${organizationId}`}>Events</Link>
+              <Link href={`/organizations/${organizationId}`}>Events</Link>
             </Button>
             <Button variant="ghost" className="w-full justify-start">
               Participants
@@ -74,6 +80,9 @@ const Sidebar = ({ className }) => {
             <Button variant="ghost" className="w-full justify-start">
               Settings
             </Button>
+            <Button className="w-full justify-start" onClick={handleLogout}>
+              Logout
+            </Button>
           </div>
         </div>
       </div>

apps/web-client/src/components/cards/EventCard.jsx

@@ -18,7 +18,7 @@ const EventCard = ({ event }) => {
     <Card
       className="w-72"
       onClick={() => {
-        router.push(`/dashboard/${event.organizationId}/${event.id}`);
+        router.push(`/organizations/${event.organizationId}/events/${event.id}`);
       }}
     >
       <CardHeader>

apps/web-client/src/components/cards/OrganizationCard.jsx

@@ -15,7 +15,7 @@ const OrganizationCard = ({ organization }) => {
   const router = useRouter();
 
   return (
-    <Card className="w-72" onClick={() => router.push(`/dashboard/${organization?.id}`)}>
+    <Card className="w-72" onClick={() => router.push(`/organizations/${organization?.id}`)}>
       <CardHeader>
         <CardTitle>{organization?.name}</CardTitle>
       </CardHeader>

apps/web-client/src/components/cards/ParticipantCard.jsx

@@ -28,7 +28,7 @@ const ParticipantCard = ({ participant }) => {
       className="w-72"
       onClick={() => {
         router.push(
-          `/dashboard/${participant.organizationId}/${participant.eventId}/participants/${participant.id}`,
+          `/organizations/${participant.organizationId}/${participant.eventId}/participants/${participant.id}`,
         );
       }}
     >

apps/web-client/src/pages/index.jsx

@@ -6,8 +6,8 @@ const Home = () => {
   const router = useRouter();
 
   useEffect(() => {
-    router.replace('/dashboard');
-  }, []);
+    router.replace('/organizations');
+  }, [router]);
 
   return (
     <main>

apps/web-client/src/pages/login/index.jsx

@@ -13,7 +13,7 @@ export default function Login() {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    if (await loginService({ email, password })) router.push('/dashboard');
+    if (await loginService({ email, password })) router.push('/organizations');
     else console.error('Error when logging in');
   };
 

apps/web-client/src/pages/dashboard/[organizationId]/[eventId]/index.jsx → apps/web-client/src/pages/organizations/[organizationId]/events/[eventId]/index.jsx

@@ -9,8 +9,8 @@ const Home = () => {
 
   useEffect(() => {
     if (!organizationId || !eventId) return;
-    router.replace(`/dashboard/${organizationId}/${eventId}/participants`);
-  }, [organizationId, eventId]);
+    router.replace(`/organizations/${organizationId}/events/${eventId}/participants`);
+  }, [router, organizationId, eventId]);
 
   return (
     <main>

apps/web-client/src/pages/organizations/[organizationId]/events/[eventId]/participants/index.jsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+
+import DashboardLayout from '@/layouts/DashboardLayout';
+import EventCard from '@/components/cards/EventCard';
+
+import { Skeleton } from '@/components/ui/skeleton';
+import { PlusCircledIcon } from '@radix-ui/react-icons';
+import { Button } from '@/components/ui/button';
+import axiosInstance from '@/lib/axios';
+
+const Dashboard = () => {
+  const router = useRouter();
+  const { organizationId, eventId } = router.query;
+
+  const [loading, setLoading] = useState(true);
+  const [participants, setParticipants] = useState([]);
+
+  const fetchParticipants = async () => {
+    try {
+      const { data, status } = await axiosInstance.get(
+        `/core/${organizationId}/events/${eventId}/participants`,
+      );
+
+      if (status === 200) setParticipants(data.participants || []);
+
+      setLoading(false);
+    } catch (error) {
+      console.error(error);
+      setLoading(true);
+    }
+  };
+
+  useEffect(() => {
+    if (!organizationId || !eventId) return;
+    fetchParticipants();
+  }, [router, organizationId, eventId]);
+
+  return (
+    <DashboardLayout>
+      <div className="flex flex-row justify-end">
+        <Button
+          onClick={() => {
+            router.push(`/organizations/${organizationId}/new`);
+          }}
+        >
+          <PlusCircledIcon className="mr-2 h-4 w-4" />
+          New
+        </Button>
+      </div>
+      <div className="h-full w-full bg-black-russian flex flex-row justify-start items-start overflow-y-auto gap-8 flex-wrap p-6">
+        {loading && (
+          <>
+            <Skeleton className="w-[100px] h-[20px] rounded-full" />
+            <Skeleton className="w-[100px] h-[20px] rounded-full" />
+            <Skeleton className="w-[100px] h-[20px] rounded-full" />
+            <Skeleton className="w-[100px] h-[20px] rounded-full" />
+          </>
+        )}
+        {participants.map((p) => (
+          <div key={p?.id}>{JSON.stringify(p)}</div>
+        ))}
+      </div>
+    </DashboardLayout>
+  );
+};
+
+export default Dashboard;

apps/web-client/src/pages/dashboard/[organizationId]/index.jsx → apps/web-client/src/pages/organizations/[organizationId]/events/index.jsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 
-import DashboardLayout from '../../../layouts/DashboardLayout';
+import DashboardLayout from '../../../../layouts/DashboardLayout';
 import EventCard from '@/components/cards/EventCard';
 
 import { Skeleton } from '@/components/ui/skeleton';
-import { fetchAllEvents } from '@/services/eventService';
 import { PlusCircledIcon } from '@radix-ui/react-icons';
 import { Button } from '@/components/ui/button';
+import axiosInstance from '@/lib/axios';
 
 const Dashboard = () => {
   const router = useRouter();
@@ -16,28 +16,29 @@ const Dashboard = () => {
   const [loading, setLoading] = useState(true);
   const [events, setEvents] = useState([]);
 
-  const fetchEvents = async () => {
-    try {
-      const r = await fetchAllEvents({ organizationId });
-      setEvents(r || []);
-      setLoading(false);
-    } catch (error) {
-      console.error(error);
-      setLoading(true);
-    }
-  };
-
   useEffect(() => {
     if (!organizationId) return;
+    const fetchEvents = async () => {
+      try {
+        const { data, status } = await axiosInstance.get(`core/${organizationId}/events`);
+
+        if (status === 200) setEvents(data.events || []);
+
+        setLoading(false);
+      } catch (error) {
+        console.error(error);
+        setLoading(true);
+      }
+    };
     fetchEvents();
-  }, [organizationId]);
+  }, [router, organizationId]);
 
   return (
     <DashboardLayout>
       <div className="flex flex-row justify-end">
         <Button
           onClick={() => {
-            router.push(`/dashboard/${organizationId}/new`);
+            router.push(`/organizations/${organizationId}/events/new`);
           }}
         >
           <PlusCircledIcon className="mr-2 h-4 w-4" />

apps/web-client/src/pages/dashboard/[organizationId]/new/index.jsx → apps/web-client/src/pages/organizations/[organizationId]/events/new/index.jsx

@@ -7,14 +7,25 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
 import { Button } from '@/components/ui/button';
-import { addNewEvent } from '@/services/eventService';
+import axiosInstance from '@/lib/axios';
 
 const Dashboard = () => {
   const router = useRouter();
   const { organizationId } = router.query;
 
   const [event, setEvent] = useState({});
 
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const { data, status } = await axiosInstance.post(`/core/${organizationId}/events`, {
+      name: event.name,
+    });
+
+    if (status === 201) {
+      router.push(`/organizations/${organizationId}/events`);
+    }
+  };
+
   return (
     <DashboardLayout>
       <div
@@ -31,17 +42,7 @@ const Dashboard = () => {
         >
           <Label htmlFor="name">Name</Label>
           <Input type="text" id="name" placeholder="Big Event" />
-          <Button
-            onClick={async (e) => {
-              e.preventDefault();
-              console.log({ event });
-              if (await addNewEvent({ organizationId, event }))
-                router.push(`/dashboard/${organizationId}`);
-              else console.error('Error adding event');
-            }}
-          >
-            Add
-          </Button>
+          <Button onClick={handleSubmit}>Add</Button>
         </form>
       </div>
     </DashboardLayout>

apps/web-client/src/pages/organizations/[organizationId]/index.jsx

@@ -0,0 +1,24 @@
+import DashboardLayout from '@/layouts/DashboardLayout';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+const Home = () => {
+  const router = useRouter();
+
+  const { organizationId } = router.query;
+
+  useEffect(() => {
+    if (!organizationId) return;
+    router.replace(`/organizations/${organizationId}/events`);
+  }, [router, organizationId]);
+
+  return (
+    <main>
+      <DashboardLayout>
+        <p className="text-3xl">Please wait ...</p>
+      </DashboardLayout>
+    </main>
+  );
+};
+
+export default Home;

apps/web-client/src/pages/dashboard/index.jsx → apps/web-client/src/pages/organizations/index.jsx

@@ -16,8 +16,6 @@ import {
 } from '@/components/ui/table';
 import { Button } from '@/components/ui/button';
 
-import OrganizationCard from '@/components/cards/OrganizationCard';
-import { fetchAllOrganizations } from '@/services/organizationService';
 import { useRouter } from 'next/router';
 
 const Dashboard = () => {
@@ -28,9 +26,8 @@ const Dashboard = () => {
 
   const fetchOrganizations = async () => {
     try {
-      const r = await fetchAllOrganizations();
-      console.log(r);
-      setOrganizations(r || []);
+      const { data, status } = await axiosInstance.get('/users/organizations');
+      if (status === 200) setOrganizations(data.organizations || []);
       setLoading(false);
     } catch (error) {
       console.error(error);
@@ -70,7 +67,7 @@ const Dashboard = () => {
                 <TableCell>
                   <Button
                     onClick={() => {
-                      router.push(`/dashboard/${o.id}`);
+                      router.push(`/organizations/${o.id}`);
                     }}
                   >
                     Manage

apps/web-client/src/services/authenticationService.js

@@ -47,3 +47,13 @@ export const loginService = async ({ email, password }) => {
     return false;
   }
 };
+
+export const logoutService = async () => {
+  try {
+    localStorage.removeItem(process.env.NEXT_PUBLIC_AUTH_TOKEN);
+    return true;
+  } catch (err) {
+    console.error(err);
+    return false;
+  }
+};