From 22efb9c60f082af96258a47cd31cbaa162462078 Mon Sep 17 00:00:00 2001
From: Reza Rahemtola <reza.rahemtola@epitech.eu>
Date: Sun, 5 Nov 2023 21:04:46 +0100
Subject: [PATCH] feat(web/activity): Basic page

---
 frontend/web/app/dashboard/activity/page.tsx  | 65 +++++++++++++++++++
 .../layouts/library/LibraryWorkflowTable.tsx  |  2 +-
 frontend/web/locales/en-US.ts                 |  3 +
 frontend/web/locales/fr-FR.ts                 |  3 +
 frontend/web/locales/is-IS.ts                 |  3 +
 frontend/web/services/workflows/activity.ts   | 15 +++++
 frontend/web/services/workflows/index.ts      |  2 +
 frontend/web/types/activity.ts                | 16 +++++
 8 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 frontend/web/app/dashboard/activity/page.tsx
 create mode 100644 frontend/web/services/workflows/activity.ts
 create mode 100644 frontend/web/types/activity.ts

diff --git a/frontend/web/app/dashboard/activity/page.tsx b/frontend/web/app/dashboard/activity/page.tsx
new file mode 100644
index 00000000..be17afe6
--- /dev/null
+++ b/frontend/web/app/dashboard/activity/page.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+
+import { useEffect, useState } from "react";
+import DashboardPageWrapper from "@/layouts/dashboard/DashboardPageWrapper";
+import { Activity } from "@/types/activity";
+import services from "@/services";
+
+const ActivityPage = () => {
+	const { t } = useTranslation();
+	const [page, setPage] = useState(0);
+	const [activities, setActivities] = useState<Activity[]>([]);
+
+	useEffect(() => {
+		(async () => {
+			const fetchedActivities = await services.workflows.getActivities(page);
+			setActivities(fetchedActivities.data ?? []);
+		})();
+	}, [page]);
+
+	return (
+		<DashboardPageWrapper title={t("activity.title")}>
+			<table className="table">
+				<thead className="text-neutral-content">
+					<tr>
+						<th>Time</th>
+						<th>Workflow</th>
+						<th>Activity</th>
+					</tr>
+				</thead>
+				<tbody>
+					{activities.map((activity) => (
+						<tr key={activity.id}>
+							<td>{activity.createdAt}</td>
+							<td>{activity.workflow.name}</td>
+							<td>{activity.type}</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+			<div className="flex justify-around items-center mt-10">
+				<button
+					className="btn btn-accent"
+					onClick={() => {
+						if (page > 0) setPage((prev) => prev - 1);
+					}}
+				>
+					{t("editor.back")}
+				</button>
+				<span>Page {page + 1}</span>
+				<button
+					className="btn btn-accent"
+					onClick={() => {
+						if (activities.length >= 20) setPage((prev) => prev + 1);
+					}}
+				>
+					{t("editor.next")}
+				</button>
+			</div>
+		</DashboardPageWrapper>
+	);
+};
+
+export default ActivityPage;
diff --git a/frontend/web/layouts/library/LibraryWorkflowTable.tsx b/frontend/web/layouts/library/LibraryWorkflowTable.tsx
index bb58c222..fbeaf045 100644
--- a/frontend/web/layouts/library/LibraryWorkflowTable.tsx
+++ b/frontend/web/layouts/library/LibraryWorkflowTable.tsx
@@ -112,7 +112,7 @@ const LibraryWorkflowTable = () => {
 					<table className="table">
 						<thead className="text-neutral-content">
 							<tr>
-								<th className="table-cell " colSpan={2}>
+								<th className="table-cell" colSpan={2}>
 									<div className="flex">
 										<label className="custom-checkbox">
 											<input
diff --git a/frontend/web/locales/en-US.ts b/frontend/web/locales/en-US.ts
index 86c46105..d436fc15 100644
--- a/frontend/web/locales/en-US.ts
+++ b/frontend/web/locales/en-US.ts
@@ -82,6 +82,9 @@ const translations = {
 		reactions: "Reactions",
 		noArea: "This service doesn't have any action or reaction",
 	},
+	activity: {
+		title: "Activity",
+	},
 	landing: {
 		actions: {
 			downloadApk: " Download APK",
diff --git a/frontend/web/locales/fr-FR.ts b/frontend/web/locales/fr-FR.ts
index d8f17237..0d4bcff0 100644
--- a/frontend/web/locales/fr-FR.ts
+++ b/frontend/web/locales/fr-FR.ts
@@ -83,6 +83,9 @@ const translations = {
 		reactions: "Réactions",
 		noArea: "Ce service n'a pas d'action ou de réaction",
 	},
+	activity: {
+		title: "Activité",
+	},
 	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 f14a7896..05028195 100644
--- a/frontend/web/locales/is-IS.ts
+++ b/frontend/web/locales/is-IS.ts
@@ -82,6 +82,9 @@ const translations = {
 		reactions: "Viðbrögð",
 		noArea: "Þessi þjónusta hefur engar aðgerðir eða viðbrögð",
 	},
+	activity: {
+		title: "Virkni",
+	},
 	landing: {
 		actions: {
 			downloadApk: " Sækja APK",
diff --git a/frontend/web/services/workflows/activity.ts b/frontend/web/services/workflows/activity.ts
new file mode 100644
index 00000000..646ec4fd
--- /dev/null
+++ b/frontend/web/services/workflows/activity.ts
@@ -0,0 +1,15 @@
+import { ServiceReturn } from "@/types/api";
+import { axiosInstance } from "@/services";
+import { SERVICE_ERROR_UNKNOWN } from "@/config/services";
+import { Activity } from "@/types/activity";
+
+const getActivities = async (page: number): Promise<ServiceReturn<Activity[]>> => {
+	try {
+		const response = await axiosInstance.get<Activity[]>(`/activity?page=${page}&itemsPerPage=20`);
+		return { data: response.data, error: undefined };
+	} catch (error) {
+		return { data: null, error: SERVICE_ERROR_UNKNOWN };
+	}
+};
+
+export default getActivities;
diff --git a/frontend/web/services/workflows/index.ts b/frontend/web/services/workflows/index.ts
index 4150f2f6..294a6cf0 100644
--- a/frontend/web/services/workflows/index.ts
+++ b/frontend/web/services/workflows/index.ts
@@ -2,6 +2,7 @@ import { deleteBulk, deleteOne } from "@/services/workflows/delete";
 import { toggleBulk, toggleOne } from "@/services/workflows/update";
 import { create, rename, update } from "@/services/workflows/editor";
 import { getAll, getOne } from "@/services/workflows/get";
+import getActivities from "@/services/workflows/activity";
 
 const workflowsService = {
 	toggleOne,
@@ -13,6 +14,7 @@ const workflowsService = {
 	rename,
 	getOne,
 	getAll,
+	getActivities,
 };
 
 export default workflowsService;
diff --git a/frontend/web/types/activity.ts b/frontend/web/types/activity.ts
new file mode 100644
index 00000000..74abe0e7
--- /dev/null
+++ b/frontend/web/types/activity.ts
@@ -0,0 +1,16 @@
+export type Activity = {
+	id: string;
+	type: string;
+	createdAt: string;
+	workflowArea: {
+		id: string;
+		area: {
+			id: string;
+			serviceId: string;
+		};
+	};
+	workflow: {
+		id: string;
+		name: string;
+	};
+};