Reupload

web-app/src/pages/MetricHistory.tsx

@@ -0,0 +1,73 @@
+import {TrashIcon} from "@heroicons/react/outline";
+import {useCallback, useEffect, useState} from "react";
+import {useParams} from "react-router-dom";
+import {useApi} from "../api";
+import Button from "../components/Button";
+import {Metric} from "../core/Metric";
+import {Project} from "../core/Project";
+import {MetricForm} from "../forms/createMetricForm";
+import {useModal} from "../services/ModalService";
+import {formatTimestamp} from "../utils/formatTimestamp";
+
+export function MetricHistoryPage() {
+	
+	const api = useApi();
+	const modalService = useModal();
+	const {projectId, metricId} = useParams();
+	const [project, setProject] = useState<Project | null>(null);
+	const [metric, setMetric] = useState<Metric | null>(null);
+
+	const fetchProject = useCallback(async () => {
+		const project = await api.fetchProject(projectId as string);
+		setProject(project);
+		const metric = await api.fetchProjectMetric(projectId as string, metricId as string);
+		setMetric(metric);
+	}, [projectId, metricId, api])
+
+	useEffect(() => {fetchProject()}, [fetchProject])
+
+	const onSomethingChanged = () => {
+		fetchProject();
+	}
+
+	if (!project || !metric) {
+		return <div>Loading project...</div>
+	}
+
+	const metricForm = (close: () => void) =>
+		<MetricForm
+			close={close}
+			onCreate={async (data) => {
+				close()
+				await api.createSeries(project.id, data)
+				onSomethingChanged()
+			}}
+		/> 
+
+	const deleteRecord = async (recordId: string) => {
+		await api.deleteMetricHistory(metric.projectId, metric.id, recordId);
+		fetchProject();
+	}
+
+	return (
+		<div className="flex-1 f-c gap-4 overflow-scroll">
+			<div className="f-r justify-between items-center border-b border-neutral-600">
+				<h2 className="text-left text-3xl font-bold pb-4">Metrics</h2>
+				<Button text="Create new metric" onClick={() => modalService.addModal(metricForm)}/>
+			</div>
+			<div className="f-c gap-2 overflow-scroll pr-2">
+				{metric?.history?.map(record => 
+					<div className="card f-r gap-4 p-2">
+						<div>Value: {record.value}</div>
+						<div>Date: {formatTimestamp(record.date)}</div>
+						<TrashIcon
+							className="ml-auto w-4 h-4 text-red-300 hover:bg-neutral-500 cursor-pointer duration-75 mr-2"
+
+							onClick={() => modalService.confirmation("Delete this history record ?", () => deleteRecord(record.id))}
+						/>
+					</div>
+				)}
+			</div>
+		</div>
+	)
+}