Added data to data report view

JonathanVarild · Dec 22, 2024 · 193a119 · 193a119
1 parent 958554a
commit 193a119
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 42 deletions.
diff --git a/src/presenters/DataReportPresenter.jsx b/src/presenters/DataReportPresenter.jsx
@@ -1,7 +1,18 @@
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import DataReportView from "../views/DataReportView";
+import { fetchDataReport } from "../store/interface/dataReport";
 
 function DataReport(props) {
-	return <DataReportView />;
+	const dataReport = useSelector((state) => state.interface.dataReport);
+	const userInfo = useSelector((state) => state.interface.authenticate.userInfo);
+	const dispatch = useDispatch();
+
+	useEffect(() => {
+		dispatch(fetchDataReport());
+	}, [dispatch]);
+
+	return <DataReportView data={dataReport.data} status={dataReport.status} />;
 }
 
 export default DataReport;
diff --git a/src/store/interface/dataReport.js b/src/store/interface/dataReport.js
@@ -0,0 +1,57 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { fetchResolvedCB } from "./utilities";
+
+const apiUrl = import.meta.env.VITE_API_URL;
+
+export const dataReportInitalState = {
+	dataReport: {
+		status: "idle",
+		requestId: null,
+		error: null,
+		data: null,
+	},
+};
+
+export const fetchDataReport = createAsyncThunk("interface/fetchDataReport", async (_, { getState, abort, requestId }) => {
+	const state = getState().interface;
+
+	if (state.dataReport.requestId !== requestId) return abort("Request already in progress.");
+
+	return await fetch(apiUrl + "/api/data_report", {
+		method: "POST",
+		headers: {
+			"Content-type": "application/json; charset=UTF-8",
+		},
+		credentials: "include",
+	}).then(fetchResolvedCB);
+});
+
+export function dataReportBuilder(builder) {
+	builder
+		.addCase(fetchDataReport.pending, (state, action) => {
+			if (state.dataReport.requestId === null) {
+				state.dataReport.status = "loading";
+				state.dataReport.requestId = action.meta.requestId;
+			}
+		})
+		.addCase(fetchDataReport.fulfilled, (state, action) => {
+			if (state.dataReport.requestId === action.meta.requestId) {
+				state.dataReport.status = "idle";
+				state.dataReport.requestId = null;
+				state.dataReport.data = {
+					agreements: action.payload.agreements,
+					loginLogs: action.payload.login_logs,
+					reportLogs: action.payload.report_logs,
+					favoriteLines: action.payload.favorite_lines,
+					userData: action.payload.userData,
+				};
+			}
+		})
+		.addCase(fetchDataReport.rejected, (state, action) => {
+			if (state.dataReport.requestId === action.meta.requestId) {
+				state.dataReport.status = "failed";
+				state.dataReport.requestId = null;
+				state.dataReport.error = action.error.message;
+			}
+		});
+}
diff --git a/src/store/interface/index.js b/src/store/interface/index.js
@@ -8,6 +8,7 @@ import { updatePasswordInitialState, updatePasswordBuilder } from "./updatePassw
 import { searchInitialState, searchBuilder } from "./search";
 import { trendingBuilder, trendingInitalState } from "./trending";
 import { deleteAccountBuilder, deleteAccountInitialState, getDeleteAccountMiddleware } from "./deleteAccount";
+import { dataReportBuilder, dataReportInitalState } from "./dataReport";
 
 const interfaceSlice = createSlice({
 	name: "interface",
@@ -50,7 +51,8 @@ const interfaceSlice = createSlice({
 		...updatePasswordInitialState,
 		...searchInitialState,
 		...trendingInitalState,
-		...deleteAccountInitialState
+		...deleteAccountInitialState,
+		...dataReportInitalState,
 	},
 	reducers: {
 		toggleNavigation: (state) => {
@@ -132,7 +134,8 @@ const interfaceSlice = createSlice({
 		updatePasswordBuilder(builder);
 		searchBuilder(builder);
 		trendingBuilder(builder);
-		deleteAccountBuilder(builder)
+		deleteAccountBuilder(builder);
+		dataReportBuilder(builder);
 	},
 });
 
@@ -157,4 +160,3 @@ export default interfaceSlice.reducer;
 
 export const logoutMiddlewareFunction = getLogoutMiddleware(dequeuePopup);
 export const deleteAccountMiddlewareFunction = getDeleteAccountMiddleware(dequeuePopup);
-
diff --git a/src/views/DataReportView.jsx b/src/views/DataReportView.jsx
@@ -1,10 +1,19 @@
 import styles from "../css/DataReport.module.css";
+import LoadingSpinnerView from "../views/LoadingSpinnerView";
 
 function DataReportView(props) {
+	if (props.status === "failed") {
+		return <section className={styles.dataReportPage}>We could not find any data.</section>;
+	}
+
+	if (props.data === null) {
+		return <LoadingSpinnerView />;
+	}
+
 	return (
 		<section className={styles.dataReportPage}>
 			<h1>User data report</h1>
-			<div className={styles.reportInfo}>A new report will be available for generation in 24 hours. Please save this report if you want to view it again.</div>
+			<div className={styles.reportInfo}>This report is showing all account information that we store in our database.</div>
 			<h2>User data:</h2>
 			<table>
 				<thead>
@@ -16,27 +25,23 @@ function DataReportView(props) {
 				<tbody>
 					<tr>
 						<td>user_id</td>
-						<td></td>
+						<td>{props.data.userData.id}</td>
 					</tr>
 					<tr>
 						<td>username</td>
-						<td></td>
+						<td>{props.data.userData.username}</td>
 					</tr>
 					<tr>
 						<td>email</td>
-						<td></td>
-					</tr>
-					<tr>
-						<td>password_hash</td>
-						<td></td>
+						<td>{props.data.userData.email}</td>
 					</tr>
 					<tr>
 						<td>date_of_birth</td>
-						<td></td>
+						<td>{props.data.userData.date_of_birth}</td>
 					</tr>
 					<tr>
 						<td>registration_date</td>
-						<td></td>
+						<td>{props.data.userData.registration_date}</td>
 					</tr>
 				</tbody>
 			</table>
@@ -48,17 +53,7 @@ function DataReportView(props) {
 						<th>user_id</th>
 					</tr>
 				</thead>
-				<tbody>{[{ lineID: "2123414123132", userID: "3" }].map(renderFavoriteLineCB)}</tbody>
-			</table>
-			<h2>Favorite stations:</h2>
-			<table>
-				<thead>
-					<tr>
-						<th>station_id</th>
-						<th>user_id</th>
-					</tr>
-				</thead>
-				<tbody>{[{ stationID: "2123414123132", userID: "3" }].map(renderFavoriteStationCB)}</tbody>
+				<tbody>{props.data.favoriteLines.map(renderFavoriteLineCB)}</tbody>
 			</table>
 			<h2>Login logs:</h2>
 			<table>
@@ -68,7 +63,7 @@ function DataReportView(props) {
 						<th>ip</th>
 					</tr>
 				</thead>
-				<tbody>{[{ time: "YYYY-MM-DD HH:MM:SS", ip: "192.168.1.1" }].map(renderLoginCB)}</tbody>
+				<tbody>{props.data.loginLogs.map(renderLoginCB)}</tbody>
 			</table>
 			<h2>Report logs:</h2>
 			<table>
@@ -78,7 +73,7 @@ function DataReportView(props) {
 						<th>ip</th>
 					</tr>
 				</thead>
-				<tbody>{[{ time: "YYYY-MM-DD HH:MM:SS", ip: "192.168.1.1" }].map(renderReportCB)}</tbody>
+				<tbody>{props.data.reportLogs.map(renderReportCB)}</tbody>
 			</table>
 			<h2>Agreement logs:</h2>
 			<table>
@@ -89,39 +84,33 @@ function DataReportView(props) {
 						<th>ip</th>
 					</tr>
 				</thead>
-				<tbody>
-					{[
-						{ time: "YYYY-MM-DD HH:MM:SS", type: "terms_of_service", ip: "192.168.1.1" },
-						{ time: "YYYY-MM-DD HH:MM:SS", type: "data_policy", ip: "192.168.1.1" },
-					].map(renderAgreementCB)}
-				</tbody>
+				<tbody>{props.data.agreements.map(renderAgreementCB)}</tbody>
 			</table>
-
 		</section>
 	);
 
 	function renderLoginCB(login) {
 		return (
-			<tr key={login.time + login.ip}>
-				<td>{login.time}</td>
+			<tr key={login.timestamp + login.ip}>
+				<td>{login.timestamp} (UTC +0)</td>
 				<td>{login.ip}</td>
 			</tr>
 		);
 	}
 
 	function renderReportCB(report) {
 		return (
-			<tr key={report.time + report.ip}>
-				<td>{report.time}</td>
+			<tr key={report.timestamp + report.ip}>
+				<td>{report.timestamp} (UTC +0)</td>
 				<td>{report.ip}</td>
 			</tr>
 		);
 	}
 
 	function renderAgreementCB(agreement) {
 		return (
-			<tr key={agreement.time + agreement.type + agreement.ip}>
-				<td>{agreement.time}</td>
+			<tr key={agreement.timestamp + agreement.type + agreement.ip}>
+				<td>{agreement.timestamp} (UTC +0)</td>
 				<td>{agreement.type}</td>
 				<td>{agreement.ip}</td>
 			</tr>
@@ -130,8 +119,8 @@ function DataReportView(props) {
 
 	function renderFavoriteLineCB(favoriteLine) {
 		return (
-			<tr key={favoriteLine.lineID + favoriteLine.userID}>
-				<td>{favoriteLine.lineID}</td>
+			<tr key={favoriteLine.line_id + favoriteLine.userID}>
+				<td>{favoriteLine.line_id}</td>
 				<td>{favoriteLine.userID}</td>
 			</tr>
 		);