From 3d7401717047e6bc3291217bad17b4058a7e67d1 Mon Sep 17 00:00:00 2001
From: Yannik Inniger <yannik.inniger@ti8m.ch>
Date: Sun, 29 Oct 2023 01:38:47 +0200
Subject: [PATCH] =?UTF-8?q?Some=20date=20magic=20=F0=9F=AA=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/Datepicker.svelte                     |  2 +-
 .../calendar/components/DateSelector.svelte   | 22 ++++++++++++++++---
 src/utils/date.extenstions.ts                 |  8 ++++++-
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/lib/Datepicker.svelte b/src/lib/Datepicker.svelte
index d19dca1..ddbd76e 100644
--- a/src/lib/Datepicker.svelte
+++ b/src/lib/Datepicker.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
    export let label: string = 'Select a date please';
-   export let date: Date;
+   export let date: string;
 </script>
 
 <div>
diff --git a/src/routes/calendar/components/DateSelector.svelte b/src/routes/calendar/components/DateSelector.svelte
index d83ab0f..81b086c 100644
--- a/src/routes/calendar/components/DateSelector.svelte
+++ b/src/routes/calendar/components/DateSelector.svelte
@@ -2,18 +2,34 @@
    import Datepicker from '../../../lib/Datepicker.svelte';
 
    export let selecedDate: Date | undefined;
-   let pickedDate: Date;
+   let pickedDate: string;
 
    $: selecedDate = !!pickedDate ? new Date(pickedDate) : undefined;
+
+   const nextDay = () => {
+      if (!selecedDate) {
+         selecedDate = new Date();
+      }
+      selecedDate.addDays(1);
+      pickedDate = selecedDate.toShortISOString();
+   };
+
+   const previousDay = () => {
+      if (!selecedDate) {
+         selecedDate = new Date();
+      }
+      selecedDate.addDays(-1);
+      pickedDate = selecedDate.toShortISOString();
+   };
 </script>
 
 <div class="date-selector-container">
-   <button>Previous day</button>
+   <button on:click={previousDay}>Previous day</button>
    <Datepicker
       bind:date={pickedDate}
       label="On which day would you like to do laundry?"
    />
-   <button>Next day</button>
+   <button on:click={nextDay}>Next day</button>
 </div>
 
 <style>
diff --git a/src/utils/date.extenstions.ts b/src/utils/date.extenstions.ts
index 53260ab..ee1137a 100644
--- a/src/utils/date.extenstions.ts
+++ b/src/utils/date.extenstions.ts
@@ -2,7 +2,8 @@ export {};
 
 declare global {
    interface Date {
-      addHours(days: number): Date;
+      addHours(hours: number): Date;
+      addDays(days: number): Date;
       isSameDay(otherDate: Date): boolean;
       toWeekdayString(): string;
       toTime(): string;
@@ -17,6 +18,11 @@ Date.prototype.addHours = function (hours: number) {
    return this;
 };
 
+Date.prototype.addDays = function (days: number) {
+   this.setDate(this.getDate() + days);
+   return this;
+};
+
 Date.prototype.isSameDay = function (otherDate: Date): boolean {
    var thisDateStr = this.toISOString().slice(0, 10);
    var otherDateStr = otherDate.toISOString().slice(0, 10);