From 764f968b2f259e27a0132b0ccef3b9ffa0c29da2 Mon Sep 17 00:00:00 2001
From: maciejpedzich <contact@maciejpedzi.ch>
Date: Thu, 21 Jul 2022 11:12:53 +0200
Subject: [PATCH] Ensure saving view states for individual playlists

---
 components/snapshot/Calendar.vue    | 27 +++++++++++++++++++--------
 components/stats/FollowerGrowth.vue |  4 ++--
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/components/snapshot/Calendar.vue b/components/snapshot/Calendar.vue
index a282038..9cd08ac 100644
--- a/components/snapshot/Calendar.vue
+++ b/components/snapshot/Calendar.vue
@@ -17,17 +17,22 @@ const route = useRoute();
 const playlistId = route.params.playlistId;
 
 const now = new Date();
-const minDate = new Date('2021-12-01');
-const queryMonth = ref(now.getMonth());
-const queryYear = ref(now.getFullYear());
-const displayDate = reactive({ month: queryMonth, year: queryYear });
+const queryMonth = useState(`queryMonth${playlistId}`, () => now.getMonth());
+const queryYear = useState(`queryYear${playlistId}`, () => now.getFullYear());
 
-const hoursOffset = -(now.getTimezoneOffset() / 60);
+const displayDate = new Date(queryYear.value, queryMonth.value);
+const minDate = new Date('2021-12-01');
+
+const hoursOffset = -(displayDate.getTimezoneOffset() / 60);
 const sinceDateParam = computed(() =>
-  new Date(queryYear.value, queryMonth.value, 1, hoursOffset).toISOString()
+  new Date(queryYear.value, queryMonth.value, 1, hoursOffset)
+    .toISOString()
+    .substring(0, 10)
 );
 const untilDateParam = computed(() =>
-  new Date(queryYear.value, queryMonth.value + 1, 1, hoursOffset).toISOString()
+  new Date(queryYear.value, queryMonth.value + 1, 1, hoursOffset)
+    .toISOString()
+    .substring(0, 10)
 );
 
 const queryString = computed(() => {
@@ -97,14 +102,16 @@ const isQueryMonth = (date: Date) => date.getMonth() === queryMonth.value;
         Something went wrong while fetching archive entries
       </p>
       <Datepicker
-        v-show="!loadingCalendarEntries"
+        v-show="!(loadingCalendarEntries || calendarEntriesLoadError)"
         v-model="displayDate"
+        class="md:p-0 p-2"
         :min-date="minDate"
         :max-date="now"
         :allowed-dates="allowedDates"
         :enable-time-picker="false"
         :month-change-on-arrows="false"
         :month-change-on-scroll="false"
+        no-swipe
         no-today
         prevent-min-max-navigation
         inline
@@ -143,6 +150,10 @@ const isQueryMonth = (date: Date) => date.getMonth() === queryMonth.value;
   padding: 0;
 }
 
+:deep(div.dp__active_date) {
+  background-color: transparent;
+}
+
 :deep(div.dp__overlay_cell_active) {
   background-color: var(--primary-color);
   color: var(--surface-0);
diff --git a/components/stats/FollowerGrowth.vue b/components/stats/FollowerGrowth.vue
index 29d41df..67465db 100644
--- a/components/stats/FollowerGrowth.vue
+++ b/components/stats/FollowerGrowth.vue
@@ -11,7 +11,7 @@ const route = useRoute();
 const playlistId = route.params.playlistId as string;
 
 const chartPeriodOptions = ['Last week', 'Last month'];
-const chartPeriod = useState('chartPeriod', () => 'Last week');
+const chartPeriod = useState(`chartPeriod${playlistId}`, () => 'Last week');
 
 const sinceDate = computed(() => {
   const baseDate = new Date();
@@ -100,7 +100,7 @@ watch(chartPeriod, async () => await refresh());
       </p>
       <Chart
         v-else-if="data"
-        class="w-7 h-4 mt-3"
+        class="md:w-7 w-full h-4 mt-3"
         type="line"
         :options="chartOptions"
         :data="data"