Add Back Button to StatView page

Return to the `Home` page by pressing a back button (lucide-react icon) on the `StatView` page

This commit also includes some general formatting

app/package-lock.json

@@ -12,6 +12,7 @@
         "idb": "^8.0.3",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
+        "lucide-react": "^0.544.0",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "react-range-slider-input": "^3.2.1",
@@ -3177,6 +3178,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.544.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.544.0.tgz",
+      "integrity": "sha512-t5tS44bqd825zAW45UQxpG2CvcC4urOwn2TrwSH8u+MjeE+1NnWl6QqeQ/6NdjMqdOygyiT9p3Ev0p1NJykxjw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",

app/package.json

@@ -14,6 +14,7 @@
     "idb": "^8.0.3",
     "lodash": "^4.17.21",
     "lodash.debounce": "^4.0.8",
+    "lucide-react": "^0.544.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-range-slider-input": "^3.2.1",

app/src/pages/StatView.tsx

@@ -1,10 +1,12 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
-import { getAllStreams } from '../util/db';
+import { getAllStreams } from "../util/db";
-import { formatSeconds, tsToDate, getDaysBetween, getDaysAfter, dateToTs } from '../util/time';
+import { formatSeconds, tsToDate, getDaysBetween, getDaysAfter, dateToTs } from "../util/time";
-import RangeSlider from 'react-range-slider-input';
+import RangeSlider from "react-range-slider-input";
-import 'react-range-slider-input/dist/style.css'; 
+import "react-range-slider-input/dist/style.css";
-import type { stream } from '../model/types';
+import type { stream } from "../model/types";
-import { getFirstStreamDate, getLastStreamDate, getListenedTracks, getListenedArtists } from '../model/parser';
+import { getFirstStreamDate, getLastStreamDate, getListenedTracks, getListenedArtists } from "../model/parser";
+import { useNavigate } from "react-router-dom";
+import { ArrowLeft as Back } from "lucide-react";
 
 const StatView = () => {
 	const [streams, setStreams] = useState<stream[]>([]);
@@ -15,9 +17,11 @@ const StatView = () => {
 	const [lastStreamDate, setLastStreamDate] = useState<Date>();
 
 	const [dateRange, setDateRange] = useState<[Date, Date]>([new Date(), new Date()]);
+	const navigate = useNavigate();
 
 	useEffect(() => {
-        getAllStreams().then((streams) => {
+		getAllStreams()
+			.then((streams) => {
 				setStreams(streams);
 				if (streams.length > 0) {
 					const firstDate = tsToDate(getFirstStreamDate(streams));
@@ -26,8 +30,9 @@ const StatView = () => {
 					setLastStreamDate(lastDate);
 					setDateRange([firstDate, lastDate]);
 				}
-        }).catch((error) => {
+			})
-            console.error('Error fetching streams:', error);
+			.catch((error) => {
+				console.error("Error fetching streams:", error);
 			});
 	}, []);
 
@@ -43,6 +48,7 @@ const StatView = () => {
 	return (
 		<div>
             <div className="flex flex-row justify-between items-start gap-4 p-4">
+			<Back className="absolute top-4 left-4 cursor-pointer hover:opacity-70" size={40} onClick={() => navigate(-1)} />
 
                 <div className="w-150 h-180 overflow-auto">
 					<h1>Track Statistics</h1>
@@ -75,7 +81,6 @@ const StatView = () => {
 						))}
 					</ul>
 				</div>
-
 			</div>
 
 			<RangeSlider
@@ -94,29 +99,28 @@ const StatView = () => {
 			<div className="text-center">
 				<input
 					type="date"
-                    value={dateRange[0].toISOString().split('T')[0]}
+					value={dateRange[0].toISOString().split("T")[0]}
 					onChange={(e) => {
 						if (new Date(e.target.value) > dateRange[1]) {
-                            alert('Start date cannot be after end date');
+							alert("Start date cannot be after end date");
 							return;
 						}
 
-
 						// check if valid date
 						if (isNaN(new Date(e.target.value).getTime())) {
 							return;
 						}
 
-                        setDateRange([new Date(e.target.value), dateRange[1]])
+						setDateRange([new Date(e.target.value), dateRange[1]]);
 					}}
 					className="mr-2"
 				/>
 				<input
 					type="date"
-                    value={dateRange[1].toISOString().split('T')[0]}
+					value={dateRange[1].toISOString().split("T")[0]}
 					onChange={(e) => {
 						if (new Date(e.target.value) < dateRange[0]) {
-                            alert('End date cannot be before start date');
+							alert("End date cannot be before start date");
 							return;
 						}
 
@@ -133,7 +137,7 @@ const StatView = () => {
 				<p>({getDaysBetween(dateRange[0], dateRange[1])} days)</p>
 			</div>
 		</div>
-    )
+	);
-}
+};
 
 export default StatView;