dylan/spotify-window
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Back Button to StatView page

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

This commit also includes some general formatting
This commit is contained in:
Chris-1010
2025-09-23 01:24:20 +01:00
parent 76e609068f
commit e1ec1d942b
3 changed files with 118 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/package-lock.json generated
View File

@@ -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",

1
app/package.json
View File

@@ -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",

42
app/src/pages/StatView.tsx
View File

@@ -1,10 +1,12 @@
import { useEffect, useState } from 'react';
import { getAllStreams } from '../util/db';
import { formatSeconds, tsToDate, getDaysBetween, getDaysAfter, dateToTs } from '../util/time';
import RangeSlider from 'react-range-slider-input';
import 'react-range-slider-input/dist/style.css';
import type { stream } from '../model/types';
import { getFirstStreamDate, getLastStreamDate, getListenedTracks, getListenedArtists } from '../model/parser';
import { useEffect, useState } from "react";
import { getAllStreams } from "../util/db";
import { formatSeconds, tsToDate, getDaysBetween, getDaysAfter, dateToTs } from "../util/time";
import RangeSlider from "react-range-slider-input";
import "react-range-slider-input/dist/style.css";
import type { stream } from "../model/types";
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;