From dc7701d583f1663febb2a23b19914533ffec14a8 Mon Sep 17 00:00:00 2001
From: Reza Rahemtola <reza.rahemtola@epitech.eu>
Date: Fri, 27 Oct 2023 20:29:27 +0200
Subject: [PATCH] feat(web/services): Areas displayed

---
 frontend/web/app/dashboard/services/page.tsx  | 80 +++++++++++++++----
 .../web/components/editor/ServicesList.tsx    |  1 +
 frontend/web/locales/en-US.ts                 |  5 ++
 frontend/web/locales/fr-FR.ts                 |  5 ++
 frontend/web/locales/is-IS.ts                 |  5 ++
 5 files changed, 81 insertions(+), 15 deletions(-)

diff --git a/frontend/web/app/dashboard/services/page.tsx b/frontend/web/app/dashboard/services/page.tsx
index e95981af..13a13656 100644
--- a/frontend/web/app/dashboard/services/page.tsx
+++ b/frontend/web/app/dashboard/services/page.tsx
@@ -3,10 +3,11 @@
 import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import Image from "next/image";
+import { useTranslation } from "react-i18next";
 import DashboardPageWrapper from "@/layouts/dashboard/DashboardPageWrapper";
 import { servicesAtom } from "@/stores";
 import services from "@/services";
-import { Service } from "@/types/services";
+import { Area, Service } from "@/types/services";
 
 const ServiceLine = ({
 	service,
@@ -16,23 +17,72 @@ const ServiceLine = ({
 	service: Service;
 	selectedServiceId: string | null;
 	setSelectedServiceId: (serviceId: string | null) => void;
-}) => (
-	<div className="collapse collapse-arrow">
-		<input type="radio" checked={selectedServiceId === service.id} onChange={() => setSelectedServiceId(service.id)} />
-
-		<div className="collapse-title text-xl font-medium flex">
-			<div className="avatar">
-				<div className="mask mask-squircle w-8 h-8">
-					<Image src={service.imageUrl} alt="Service logo" width={500} height={500} />
+}) => {
+	const [actions, setActions] = useState<Area[]>([]);
+	const [reactions, setReactions] = useState<Area[]>([]);
+	const { t } = useTranslation();
+
+	useEffect(() => {
+		(async () => {
+			const actionsResponse = await services.services.getServiceActions(service.id);
+			const reactionsResponse = await services.services.getServiceReactions(service.id);
+
+			setActions(actionsResponse.data ?? []);
+			setReactions(reactionsResponse.data ?? []);
+		})();
+	}, []);
+
+	return (
+		<div className="collapse collapse-arrow">
+			<input
+				type="radio"
+				checked={selectedServiceId === service.id}
+				onChange={() => setSelectedServiceId(service.id)}
+			/>
+
+			<div className="collapse-title text-2xl font-medium flex">
+				<div className="avatar">
+					<div className="mask mask-squircle w-8 h-8">
+						<Image src={service.imageUrl} alt="Service logo" width={500} height={500} />
+					</div>
 				</div>
+				<p className="ml-2">{service.id}</p>
+			</div>
+			<div className="collapse-content">
+				{actions.length > 0 && (
+					<>
+						<p className="font-semibold text-xl">{t("services.actions")}</p>
+						<ul className="list-disc ml-8">
+							{actions.map((action) => (
+								<li className="list-item" key={action.id}>
+									<p className="text-md font-medium">{action.id}</p>
+									<p className="text-sm">{action.description}</p>
+								</li>
+							))}
+						</ul>
+					</>
+				)}
+				{reactions.length > 0 && (
+					<>
+						<p className="font-semibold text-xl">{t("services.reactions")}</p>
+						<ul className="list-disc ml-8">
+							{reactions.map((reaction) => (
+								<li className="list-item" key={reaction.id}>
+									<p className="text-md font-medium">{reaction.id}</p>
+									<p className="text-sm">{reaction.description}</p>
+								</li>
+							))}
+						</ul>
+					</>
+				)}
+
+				{actions.length === 0 && reactions.length === 0 && (
+					<p className="font-semibold text-md">{t("services.noArea")}</p>
+				)}
 			</div>
-			<p className="ml-2">{service.id}</p>
-		</div>
-		<div className="collapse-content">
-			<p>TODO: Actions and Reactions displayed</p>
 		</div>
-	</div>
-);
+	);
+};
 
 const ServicesPage = () => {
 	const [cachedServices, setCachedServices] = useAtom(servicesAtom);
diff --git a/frontend/web/components/editor/ServicesList.tsx b/frontend/web/components/editor/ServicesList.tsx
index d6794dc4..cb24d50f 100644
--- a/frontend/web/components/editor/ServicesList.tsx
+++ b/frontend/web/components/editor/ServicesList.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+
 import { Service } from "@/types/services";
 import { splitArrayInChunks } from "@/utils/arrays";
 
diff --git a/frontend/web/locales/en-US.ts b/frontend/web/locales/en-US.ts
index 86c906b9..0ff86641 100644
--- a/frontend/web/locales/en-US.ts
+++ b/frontend/web/locales/en-US.ts
@@ -67,6 +67,11 @@ const translations = {
 			logout: "Logout",
 		},
 	},
+	services: {
+		actions: "Actions",
+		reactions: "Reactions",
+		noArea: "This service doesn't have any action or reaction",
+	},
 	landing: {
 		actions: {
 			downloadApk: " Download APK",
diff --git a/frontend/web/locales/fr-FR.ts b/frontend/web/locales/fr-FR.ts
index 1a9350d0..dd754be8 100644
--- a/frontend/web/locales/fr-FR.ts
+++ b/frontend/web/locales/fr-FR.ts
@@ -67,6 +67,11 @@ const translations = {
 			logout: "Déconnexion",
 		},
 	},
+	services: {
+		actions: "Actions",
+		reactions: "Réactions",
+		noArea: "Ce service n'a pas d'action ou de réaction",
+	},
 	landing: {
 		actions: {
 			downloadApk: " Télécharger l'APK",
diff --git a/frontend/web/locales/is-IS.ts b/frontend/web/locales/is-IS.ts
index d59789b2..816c891e 100644
--- a/frontend/web/locales/is-IS.ts
+++ b/frontend/web/locales/is-IS.ts
@@ -67,6 +67,11 @@ const translations = {
 			logout: "Aftengdu",
 		},
 	},
+	services: {
+		actions: "Aðgerðir",
+		reactions: "Viðbrögð",
+		noArea: "Þessi þjónusta hefur engar aðgerðir eða viðbrögð",
+	},
 	landing: {
 		actions: {
 			downloadApk: " Sækja APK",