feat(ReportWeekly): Implement change month by using L2 or R2 buttons

src/containers/ReportWeekly.tsx

@@ -1,5 +1,7 @@
 import { PanelSection } from "@decky/ui";
-import { type VFC, useEffect, useState } from "react";
+import { Button } from "@src/steam/enums/Button";
+import { registerForInputEvent } from "@src/steam/registerForInputEvent";
+import { useEffect, useState } from "react";
 import { formatWeekInterval } from "../app/formatters";
 import {
 	type DailyStatistics,
@@ -14,30 +16,75 @@ import { PieView } from "../components/statistics/PieView";
 import { WeekView } from "../components/statistics/WeekView";
 import { useLocator } from "../locator";
 
-export const ReportWeekly: VFC = () => {
+interface ReportWeeklyProperties {
+	slim?: boolean;
+}
+
+export const ReportWeekly = ({ slim = false }: ReportWeeklyProperties) => {
 	const { reports, currentSettings: settings } = useLocator();
+	const [lastChangedPageTimeStamp, setLastChangedPageTimeStamp] =
+		useState<number>(0);
 	const [isLoading, setLoading] = useState<boolean>(false);
 	const [currentPage, setCurrentPage] = useState<Paginated<DailyStatistics>>(
 		empty(),
 	);
 
 	useEffect(() => {
 		setLoading(true);
+
 		reports.weeklyStatistics().then((it) => {
 			setCurrentPage(it);
 			setLoading(false);
 		});
 	}, []);
 
+	useEffect(() => {
+		if (slim) {
+			return;
+		}
+
+		const { unregister } = registerForInputEvent((buttons) => {
+			if (buttons.length !== 1) {
+				return;
+			}
+
+			if (new Date().getTime() - lastChangedPageTimeStamp <= 500) {
+				return;
+			}
+
+			if (buttons.includes(Button.L2) && currentPage.hasPrev()) {
+				setLastChangedPageTimeStamp(new Date().getTime());
+
+				onPrevWeek();
+			}
+
+			if (buttons.includes(Button.R2) && currentPage.hasNext()) {
+				setLastChangedPageTimeStamp(new Date().getTime());
+
+				onNextWeek();
+			}
+		});
+
+		return () => {
+			unregister();
+		};
+	}, [
+		currentPage.current().interval.start.getTime(),
+		currentPage.current().interval.end.getTime(),
+	]);
+
 	const onNextWeek = () => {
 		setLoading(true);
+
 		currentPage?.next().then((it) => {
 			setCurrentPage(it);
 			setLoading(false);
 		});
 	};
+
 	const onPrevWeek = () => {
 		setLoading(true);
+
 		currentPage?.prev().then((it) => {
 			setCurrentPage(it);
 			setLoading(false);
@@ -60,20 +107,28 @@ export const ReportWeekly: VFC = () => {
 				currentText={formatWeekInterval(currentPage.current().interval)}
 				hasNext={currentPage.hasNext()}
 				hasPrev={currentPage.hasPrev()}
+				prevKey={slim ? undefined : "l2"}
+				nextKey={slim ? undefined : "r2"}
 			/>
+
 			{isLoading && <div>Loading...</div>}
+
 			{!isLoading && !currentPage && <div>Error while loading data</div>}
+
 			{!isLoading && currentPage && (
 				<div>
 					<AverageAndOverall statistics={data} />
+
 					<PanelSection title="By day">
 						<WeekView statistics={data} />
 					</PanelSection>
+
 					{isAnyGames && (
 						<PanelSection title="By game">
 							<GamesTimeBarView
 								data={convertDailyStatisticsToGameWithTime(data)}
 							/>
+
 							{settings.gameChartStyle === ChartStyle.PIE_AND_BARS && (
 								<PieView statistics={data} />
 							)}