Ak event journey forms

package.json

@@ -17,18 +17,18 @@
   "dependencies": {
     "@hookform/resolvers": "^3.6.0",
     "@prisma/client": "^5.15.1",
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-slot": "^1.1.0",
     "bcrypt": "^5.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
-    "framer-motion": "^11.2.10",
-    "lucide-react": "^0.395.0",
+    "framer-motion": "^11.2.11",
+    "lucide-react": "^0.396.0",
     "next": "14.2.4",
     "next-auth": "^4.24.7",
     "react": "^18",
@@ -44,34 +44,27 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/jest-dom": "^6.4.6",
     "@types/bcrypt": "^5.0.2",
     "@types/jest": "^29.5.12",
     "@types/leaflet": "^1.9.12",
-    "@types/node": "^20.14.5",
+    "@types/node": "^20.14.8",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@types/supertest": "^6.0.2",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
-    "eslint-config-next": "14.2.3",
+    "eslint-config-next": "14.2.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-tailwindcss": "^3.15.2",
+    "eslint-plugin-tailwindcss": "^3.17.4",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-fetch-mock": "^3.0.3",
     "jest-html-reporter": "^3.10.2",
     "jest-summary-reporter": "^0.0.2",
-    "next-test-api-route-handler": "^4.0.7",
-    "node-mocks-http": "^1.14.1",
-    "postcss": "^8",
-    "prisma": "^5.14.0",
-    "supertest": "^7.0.0",
-    "tailwindcss": "^3.4.3",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.4.5"
+    "next-test-api-route-handler": "^4.0.8",
+    "prisma": "^5.15.1",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.5.2"
   }
 }

src/app/(app)/evenements/page.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Suspense } from "react";
 import TopBar from "@/components/TopBar";
 import EventsFeed from "@/components/EventsFeed";
 
@@ -8,7 +8,9 @@ const Event = () => {
       <TopBar />
       <main>
         <section className="flex flex-col gap-7 px-5 pb-40">
-          <EventsFeed />
+          <Suspense fallback={<div>Loading...</div>}>
+            <EventsFeed />
+          </Suspense>
         </section>
       </main>
     </>

src/app/(app)/parcours/page.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import JourneyCard from "@/components/JourneyCard";
+import React, { Suspense } from "react";
+import JourneysFeed from "@/components/JourneysFeed";
 import AddButton from "@/components/AddButton";
 import JourneyForm from "@/components/form/journey/JourneyForm";
 import TopBar from "@/components/TopBar";
@@ -10,12 +10,9 @@ const Parcours = () => {
       <TopBar />
       <main>
         <section className="flex flex-col gap-7 px-5 pb-40">
-          {
-            // to do: fetch parcours
-            Array.from({ length: 10 }).map((_, i) => (
-              <JourneyCard key={i} />
-            ))
-          }
+          <Suspense fallback={<div>Loading...</div>}>
+            <JourneysFeed />
+          </Suspense>
         </section>
         <JourneyForm />
         <AddButton action="journey" />

src/app/utils/utils.ts

@@ -1,4 +1,5 @@
 import { TimeSeparator } from "@/types/enums/timeSeparator";
+import { Comment } from "@prisma/client";
 
 /**
  * @param milliseconds: number
@@ -41,3 +42,18 @@ export function convertMillisecondsToHoursMinutes(
 
   return formattedDuration;
 }
+
+export const calculateAverageRating = (comments: Comment[]) => {
+  if (!comments.length) return 0;
+  let totalRating = 0;
+  let count = 0;
+
+  comments.forEach((comment) => {
+    if (comment.rating !== undefined && comment.rating !== null) {
+      totalRating += comment.rating;
+      count++;
+    }
+  });
+
+  return count === 0 ? 0 : totalRating / count;
+};

src/components/EventAccordion.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   Accordion,
   AccordionItem,
@@ -16,8 +16,6 @@ interface EventAccordionProps {
 
 const EventAccordion: React.FC<EventAccordionProps> = ({ events }) => {
   const [openItem, setOpenItem] = useState<string>();
-  if (!events) return;
-
   const groupedEvents = events?.reduce(
     (groups: Record<string, Event[]>, event) => {
       const date = new Date(event.startAt).toISOString().split("T")[0];
@@ -41,7 +39,10 @@ const EventAccordion: React.FC<EventAccordionProps> = ({ events }) => {
       day: "numeric",
     }),
   }));
-  setOpenItem(formattedDates[0].formatted);
+  useEffect(() => {
+    setOpenItem(formattedDates[0].formatted);
+  }, []);
+  if (!events) return;
 
   const handleToggle = (date: string) => {
     setOpenItem((prev) => (prev === date ? "" : date));

src/components/EventsFeed.tsx

@@ -1,23 +1,22 @@
 import { getAllEvents } from "@/services/eventService";
+import { handleException } from "@/app/utils/errorHandlerUtils";
 import EventAccordion from "./EventAccordion";
-import { Suspense } from "react";
 
 async function getData() {
   try {
     const result = await getAllEvents();
     return result;
   } catch (error: any) {
-    console.log(error);
+    console.log(error, "error");
+    handleException(error);
   }
 }
 
 const EventsFeed = async () => {
   const events = await getData();
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      {events && <EventAccordion events={events} />}
-    </Suspense>
-  );
+  if (!events) return;
+
+  return <EventAccordion events={events} />;
 };
 
 export default EventsFeed;

src/components/JourneyCard.tsx

@@ -3,33 +3,17 @@ import Image from "next/image";
 import Link from "next/link";
 import { Icons } from "./Icons";
 import Rating from "./Rating";
+import { JourneyWithStepsAndComments } from "@/types/journey";
+import { calculateAverageRating } from "@/app/utils/utils";
 
-// type JourneyCardProps = {
-//   id: string;
-//   title: string;
-//   location: string;
-//   description: string;
-//   image: string;
-//   cluesDifficulty: number;
-//   physicalDifficulty: number;
-//   commentsCount: number;
-//   rating: number;
-// };
+type JourneyCardProps = {
+  journey: JourneyWithStepsAndComments;
+};
 
-const JourneyCard = (/* {
-  id,
-  title,
-  location,
-  description,
-  cluesDifficulty,
-  commentsCount,
-  image,
-  physicalDifficulty,
-  rating,
-}: JourneyCardProps */) => {
-  const id = "1";
+const JourneyCard = ({ journey }: JourneyCardProps) => {
+  const averageRate = calculateAverageRating(journey.comments);
   return (
-    <Link href={`/parcours/${id}`} className="rounded-lg bg-gray">
+    <Link href={`/parcours/${journey.id}`} className="rounded-lg bg-gray">
       <div className="relative">
         <div className="absolute left-4 flex gap-[6px]">
           <div className="flex items-center rounded-b-md bg-white px-2 py-[6px]">
@@ -50,16 +34,13 @@ const JourneyCard = (/* {
         />
       </div>
       <div className="flex flex-col p-4">
-        <h2 className="font-semibold">Lorem ipsum ametre</h2>
-        <Rating rating={3.5} ratingCount={4} />
-        <p className="text-sm">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in
-          sodales mauris.
-        </p>
+        <h2 className="font-semibold">{journey.title}</h2>
+        <Rating rating={averageRate} ratingCount={journey.comments.length} />
+        <p className="text-sm">{journey.description}</p>
         <div className="mt-4 flex items-center justify-between">
           <div className="flex items-center gap-1 text-orange">
             <Icons.mapPin fill="#d8552b" />
-            <p className="text-sm font-medium">Normandie</p>
+            <p className="text-sm font-medium">{journey.steps[0].city}</p>
           </div>
           <Icons.arrowLink width={18} height={18} />
         </div>

src/components/JourneysFeed.tsx

@@ -0,0 +1,27 @@
+import { getAllJourneys } from "@/services/journeyService";
+import { handleException } from "@/app/utils/errorHandlerUtils";
+import JourneyCard from "./JourneyCard";
+
+async function getData() {
+  try {
+    const result = await getAllJourneys();
+    return result;
+  } catch (error: any) {
+    console.log(error, "error");
+    handleException(error);
+  }
+}
+
+const JourneysFeed = async () => {
+  const journeys = await getData();
+  if (!journeys) return;
+  return (
+    <>
+      {journeys.map((journey, i) => (
+        <JourneyCard key={i} journey={journey} />
+      ))}
+    </>
+  );
+};
+
+export default JourneysFeed;

src/repositories/journeyRepository.ts

@@ -3,6 +3,7 @@ import {
   JourneyWithoutDates,
   JourneyWithComments,
   JourneyWithSteps,
+  JourneyWithStepsAndComments,
 } from "@/types/journey";
 import { StepWithoutDates } from "@/types/step";
 import { Journey } from "@prisma/client";
@@ -113,11 +114,26 @@ export const readJourneyWithComments = async (
 };
 
 /**
- * @returns Journey[]
+ * @returns JourneyWithStepsAndComments[]
  * @description Retrieves all journeys.
  */
-export const readJourneys = async (): Promise<Journey[]> => {
-  return await prisma.journey.findMany();
+export const readJourneys = async (): Promise<
+  JourneyWithStepsAndComments[]
+> => {
+  return await prisma.journey.findMany({
+    include: {
+      steps: {
+        orderBy: {
+          stepNumber: "asc",
+        },
+      },
+      comments: {
+        orderBy: {
+          createdAt: "asc",
+        },
+      },
+    },
+  });
 };
 
 /**

src/services/journeyService.ts

@@ -17,6 +17,7 @@ import {
   JourneyWithoutDates,
   JourneyWithComments,
   JourneyWithSteps,
+  JourneyWithStepsAndComments,
 } from "@/types/journey";
 import { StepWithoutDates } from "@/types/step";
 
@@ -66,11 +67,13 @@ export const getJourneyByIdWithComments = async (
 };
 
 /**
- * @returns Journey[]
+ * @returns JourneyWithStepsAndComments[]
  * @throws NotFoundException
  * @description Retrieves all journeys without steps.
  */
-export const getAllJourneys = async (): Promise<Journey[]> => {
+export const getAllJourneys = async (): Promise<
+  JourneyWithStepsAndComments[]
+> => {
   const journeys = await readJourneys();
 
   if (!journeys || journeys.length === 0)

src/types/journey.ts

@@ -8,6 +8,10 @@ export type JourneyWithSteps = Prisma.JourneyGetPayload<{
   include: { steps: true };
 }>;
 
+export type JourneyWithStepsAndComments = Prisma.JourneyGetPayload<{
+  include: { steps: true; comments: true };
+}>;
+
 export type JourneyWithoutDates = {
   id?: number;
   authorId: number;