Rework "nowStore" to scrollingTimeFrameStore that contains both from and to dates

frontend/src/App.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Toaster } from "svelte-sonner";
-	import Header from "$lib/components/Header.svelte";
 	import Router from "$lib/router/Router.svelte";
 	import { Close } from "$wails/main/App";
+	import { scrollingTimeFrameStore } from "$lib/store/scrollingTimeFrameStore";
 
 	function keyDown(event: KeyboardEvent) {
 		if (event.ctrlKey && event.key == "r") {
@@ -11,6 +11,12 @@
 		if (event.ctrlKey && event.key == "w") {
 			Close();
 		}
+		if (event.key == "ArrowLeft") {
+			scrollingTimeFrameStore.prev();
+		}
+		if (event.key == "ArrowRight") {
+			scrollingTimeFrameStore.next();
+		}
 	}
 </script>
 

frontend/src/lib/components/PaymentBillComp.svelte

@@ -6,8 +6,6 @@
 		name: "none",
 		payment: null,
 	};
-
-	console.log(paymentBill);
 </script>
 
 <template>

frontend/src/lib/router/routes/Home.svelte

@@ -1,18 +1,13 @@
 <script lang="ts">
 	import Payments from "$lib/components/Payments.svelte";
-	import { nowStore } from "$lib/store/nowStore";
+	import { scrollingTimeFrameStore } from "$lib/store/scrollingTimeFrameStore";
 	import { lastMonthPaymentsStore } from "$lib/store/lastMonthPaymentsStore";
 	import { thisMonthPaymentsStore } from "$lib/store/thisMonthPaymentsStore";
-
-	const thisMonth = new Date();
-	thisMonth.setMonth($nowStore.getMonth());
-	const previousMonth = new Date();
-	previousMonth.setMonth($nowStore.getMonth() - 1);
 </script>
 
 <template>
 	<div class="grid grid-cols-2">
-		<Payments date={previousMonth} payments={$lastMonthPaymentsStore} />
-		<Payments date={thisMonth} payments={$thisMonthPaymentsStore} />
+		<Payments date={$scrollingTimeFrameStore.from} payments={$lastMonthPaymentsStore} />
+		<Payments date={$scrollingTimeFrameStore.to} payments={$thisMonthPaymentsStore} />
 	</div>
 </template>

frontend/src/lib/store/lastMonthPaymentsStore.ts

@@ -2,13 +2,11 @@ import { get, type Writable, writable } from "svelte/store";
 import { GetPaymentsForMonth } from "$wails/main/App";
 import { main } from "$wails/models";
 import { toast } from "svelte-sonner";
-import { nowStore } from "$lib/store/nowStore";
+import { scrollingTimeFrameStore } from "$lib/store/scrollingTimeFrameStore";
 
 async function createStore(): Promise<Writable<main.Payment[]>> {
 	const payments: main.Payment[] = [];
-	const now = new Date();
-	now.setMonth(get(nowStore).getMonth() - 1)
-	const res = await GetPaymentsForMonth(now);
+	const res = await GetPaymentsForMonth(get(scrollingTimeFrameStore).from);
 	if (!res.success) {
 		toast.error("Error getting payments " + res.error);
 	} else {

frontend/src/lib/store/nowStore.ts

@@ -1,24 +0,0 @@
-import { type Writable, writable } from "svelte/store";
-
-async function createStore(): Promise<Writable<Date> & { next: Function; prev: Function }> {
-	const { subscribe, update, set } = writable(new Date());
-	return {
-		subscribe,
-		update,
-		set,
-		next: () => {
-			update((now: Date) => {
-				now.setMonth(now.getMonth() + 1);
-				return now;
-			});
-		},
-		prev: () => {
-			update((now: Date) => {
-				now.setMonth(now.getMonth() - 1);
-				return now;
-			});
-		},
-	};
-}
-
-export const nowStore = await createStore();

frontend/src/lib/store/scrollingTimeFrameStore.ts

@@ -0,0 +1,31 @@
+import { type ScrollingTimeframe } from "$lib/types";
+import { type Writable, writable } from "svelte/store";
+
+async function createStore(): Promise<Writable<ScrollingTimeframe> & { next: Function; prev: Function }> {
+	const thism = new Date();
+	const lastm = new Date();
+	lastm.setMonth(thism.getMonth() - 1);
+
+	const { subscribe, update, set } = writable({ from: thism, to: lastm });
+	return {
+		subscribe,
+		update,
+		set,
+		next: () => {
+			update((frame: ScrollingTimeframe) => {
+				frame.from.setMonth(frame.from.getMonth() + 1);
+				frame.to.setMonth(frame.from.getMonth() + 1);
+				return frame;
+			});
+		},
+		prev: () => {
+			update((frame: ScrollingTimeframe) => {
+				frame.from.setMonth(frame.from.getMonth() - 1);
+				frame.to.setMonth(frame.from.getMonth() - 1);
+				return frame;
+			});
+		},
+	};
+}
+
+export const scrollingTimeFrameStore = await createStore();

frontend/src/lib/store/thisMonthPaymentsStore.ts

@@ -2,12 +2,11 @@ import { get, type Writable, writable } from "svelte/store";
 import { GetPaymentsForMonth } from "$wails/main/App";
 import { main } from "$wails/models";
 import { toast } from "svelte-sonner";
-import { nowStore } from "$lib/store/nowStore";
+import { scrollingTimeFrameStore } from "$lib/store/scrollingTimeFrameStore";
 
 async function createStore(): Promise<Writable<main.Payment[]>> {
 	const payments: main.Payment[] = [];
-	const now = get(nowStore)
-	const res = await GetPaymentsForMonth(now);
+	const res = await GetPaymentsForMonth(get(scrollingTimeFrameStore).to);
 	if (!res.success) {
 		toast.error("Error getting payments " + res.error);
 	} else {

frontend/src/lib/types.ts

@@ -5,3 +5,7 @@ export type PaymentBill = {
 	name: string;
 	payment: main.Payment|null;
 };
+export type ScrollingTimeframe = {
+	from: Date;
+	to: Date;
+}