From 6ab3295ea3c6f1824bf440e66879a6aa6e4b2236 Mon Sep 17 00:00:00 2001
From: Mark Ross <krazkidd@gmail.com>
Date: Thu, 7 Sep 2023 15:58:36 -0700
Subject: [PATCH 1/4] Turn SSR off and use Pinia store as recommended.

---
 components/lineup/Lineup.vue               |  10 +-
 components/lineup/LineupSpot.vue           |   2 +-
 components/player/PlayerJersey.vue         |   4 +-
 components/settings/SettingsButton.vue     |  12 +-
 components/settings/SettingsLockButton.vue |  10 +-
 stores/AppSettings.ts                      | 128 ++++++++++++---------
 stores/AppSettingsClientOnly.ts            | 123 --------------------
 7 files changed, 90 insertions(+), 199 deletions(-)
 delete mode 100644 stores/AppSettingsClientOnly.ts

diff --git a/components/lineup/Lineup.vue b/components/lineup/Lineup.vue
index eec598c..7a566b5 100644
--- a/components/lineup/Lineup.vue
+++ b/components/lineup/Lineup.vue
@@ -6,11 +6,11 @@ import { useAppSettingsStore } from '~~/stores/AppSettings'
 const appSettingsStore = useAppSettingsStore();
 
 const sortableContainer = ref<HTMLElement | null>(null);
-useSortable(sortableContainer, appSettingsStore.getSpots, {
+useSortable(sortableContainer, appSettingsStore.spots, {
   group: 'spots',
   handle: '.drag-handle',
   animation: 150,
-  onMove: () => !appSettingsStore.getIsLocked
+  onMove: () => !appSettingsStore.isLocked
 });
 </script>
 
@@ -19,7 +19,7 @@ useSortable(sortableContainer, appSettingsStore.getSpots, {
         <header class="flex font-bold mb-4">
             <input
                 type="text"
-                @change.trim="appSettingsStore.getTeamName"
+                v-model.trim="appSettingsStore.teamName"
                 @keyup.enter="($event.target as HTMLInputElement).blur()"
                 class="grow inline-block overflow-x-hidden text-ellipsis bg-transparent focus:shadow rounded text-gray-700 placeholder-gray-500 dark:text-gray-300 leading-[3em] cursor-pointer px-1"
                 placeholder="Team Name"
@@ -33,7 +33,7 @@ useSortable(sortableContainer, appSettingsStore.getSpots, {
         <div ref="sortableContainer">
             <ClientOnly>
                 <LineupSpot
-                    v-for="spot in appSettingsStore.getSpots"
+                    v-for="spot in appSettingsStore.spots"
                     :key="spot.player.id"
                     :spot="spot"
                     @delete="appSettingsStore.removeSpot($event)"
@@ -43,7 +43,7 @@ useSortable(sortableContainer, appSettingsStore.getSpots, {
         </div>
 
         <footer>
-            <LineupNewSpot @add="appSettingsStore.addSpot($event)" :class="`${ appSettingsStore.getIsLocked ? 'collapse' : 'visible' }`" />
+            <LineupNewSpot @add="appSettingsStore.addSpot($event)" :class="`${ appSettingsStore.isLocked ? 'collapse' : 'visible' }`" />
         </footer>
     </div>
 </template>
diff --git a/components/lineup/LineupSpot.vue b/components/lineup/LineupSpot.vue
index 78cc8f5..4a4b4e0 100644
--- a/components/lineup/LineupSpot.vue
+++ b/components/lineup/LineupSpot.vue
@@ -32,7 +32,7 @@ const isPositionDialogVisible = ref(false);
         @blur="focused = false"
         tabindex="0"
     >
-        <LineupDragHandle :class="`${ appSettingsStore.getIsLocked ? 'collapse' : 'visible' } inline-block shrink-0 text-[1.3em] px-2`" />
+        <LineupDragHandle :class="`${ appSettingsStore.isLocked ? 'collapse' : 'visible' } inline-block shrink-0 text-[1.3em] px-2`" />
 
         <PlayerJersey :player="props.spot.player" class="shrink-0" />
 
diff --git a/components/player/PlayerJersey.vue b/components/player/PlayerJersey.vue
index 95842a1..d619c48 100644
--- a/components/player/PlayerJersey.vue
+++ b/components/player/PlayerJersey.vue
@@ -12,8 +12,8 @@ const props = defineProps<{
 
 <template>
     <svg viewBox="215 45 526.2 372.045" width="3em" height="3em" xmlns="http://www.w3.org/2000/svg">
-        <use x="-308.27" href="@/assets/images/cloth-t-shirt.svg#shirt-back" :fill="`#${ appSettingsStore.getJerseyColor }`" />
-        <text x="390" y="200" font-size="10em" :fill="`#${ appSettingsStore.getJerseyTextColor }`">{{ props.player.number }}</text>
+        <use x="-308.27" href="@/assets/images/cloth-t-shirt.svg#shirt-back" :fill="`#${ appSettingsStore.jerseyColor }`" />
+        <text x="390" y="200" font-size="10em" :fill="`#${ appSettingsStore.jerseyTextColor }`">{{ props.player.number }}</text>
     </svg>
 </template>
 
diff --git a/components/settings/SettingsButton.vue b/components/settings/SettingsButton.vue
index e5ed952..3d90962 100644
--- a/components/settings/SettingsButton.vue
+++ b/components/settings/SettingsButton.vue
@@ -26,22 +26,22 @@ const isSettingsDialogVisible = ref(false);
         </div>
         <div class="md:col-span-3">
           <Button
-              @click="appSettingsStore.setColorMode(appSettingsStore.getColorMode === 'system' ? 'dark' : appSettingsStore.getColorMode === 'dark' ? 'light' : 'system')"
+              @click="appSettingsStore.colorMode = appSettingsStore.colorMode === 'system' ? 'dark' : appSettingsStore.colorMode === 'dark' ? 'light' : 'system'"
               size="small"
               severity="primary"
               rounded
               aria-label="Color mode"
               title="Color mode"
             >
-            <template v-if="appSettingsStore.getColorMode === 'system'">
+            <template v-if="appSettingsStore.colorMode === 'system'">
               <i class="pi pi-desktop pr-2"></i>
               System
             </template>
-            <template v-if="appSettingsStore.getColorMode === 'dark'">
+            <template v-if="appSettingsStore.colorMode === 'dark'">
               <i class="pi pi-moon pr-2"></i>
               Dark
             </template>
-            <template v-if="appSettingsStore.getColorMode === 'light'">
+            <template v-if="appSettingsStore.colorMode === 'light'">
               <i class="pi pi-sun pr-2"></i>
               Light
             </template>
@@ -52,14 +52,14 @@ const isSettingsDialogVisible = ref(false);
           Jersey Color
         </div>
         <div>
-          <ColorPicker :modelValue="appSettingsStore.getJerseyColor" @update:modelValue="appSettingsStore.setJerseyColor($event as unknown as string)" format="hex" />
+          <ColorPicker v-model="appSettingsStore.jerseyColor" format="hex" />
         </div>
 
         <div class="text-right text-xs py-2">
           Jersey Text Color
         </div>
         <div>
-          <ColorPicker :modelValue="appSettingsStore.getJerseyTextColor" @update:modelValue="appSettingsStore.setJerseyTextColor($event as unknown as string)" format="hex" />
+          <ColorPicker v-model="appSettingsStore.jerseyTextColor" format="hex" />
         </div>
       </div>
     </Dialog>
diff --git a/components/settings/SettingsLockButton.vue b/components/settings/SettingsLockButton.vue
index a8b1d8e..c6ef531 100644
--- a/components/settings/SettingsLockButton.vue
+++ b/components/settings/SettingsLockButton.vue
@@ -6,12 +6,12 @@ const appSettingsStore = useAppSettingsStore();
 
 <template>
   <Button
-      @click="appSettingsStore.setIsLocked(!appSettingsStore.getIsLocked)"
-      :icon="`pi pi-${ appSettingsStore.getIsLocked ? 'lock' : 'lock-open' }`"
-      :severity="`${ appSettingsStore.getIsLocked ? 'secondary' : 'warning' }`"
+      @click="appSettingsStore.isLocked = !appSettingsStore.isLocked"
+      :icon="`pi pi-${ appSettingsStore.isLocked ? 'lock' : 'lock-open' }`"
+      :severity="`${ appSettingsStore.isLocked ? 'secondary' : 'warning' }`"
       text
       rounded
-      :aria-label="`${ appSettingsStore.getIsLocked ? 'Unlock lineup' : 'Lock lineup' }`"
-      :title="`${ appSettingsStore.getIsLocked ? 'Unlock lineup' : 'Lock lineup' }`"
+      :aria-label="`${ appSettingsStore.isLocked ? 'Unlock lineup' : 'Lock lineup' }`"
+      :title="`${ appSettingsStore.isLocked ? 'Unlock lineup' : 'Lock lineup' }`"
   />
 </template>
diff --git a/stores/AppSettings.ts b/stores/AppSettings.ts
index 181a855..e63de06 100644
--- a/stores/AppSettings.ts
+++ b/stores/AppSettings.ts
@@ -1,82 +1,96 @@
-import { defineStore, acceptHMRUpdate } from "pinia";
+import { defineStore, skipHydrate, acceptHMRUpdate } from "pinia";
+import { nanoid } from "nanoid";
 
-import type { Spot } from '~~/types';
+import type { Spot, Lineup } from '~~/types';
 
-// HACK: Unfortunately, we were not able to expose any state properties
-//       because we could not enforce writes to be replicated to the
-//       persistent local storage. Specifically, we were not able to
-//       do so under Nuxt's server-side rendering scheme. (With SSR turned
-//       off or with the experimental `renderJsonPayloads: false` flag,
-//       it may work.)
-//
-//       For performance reasons, we store all the values we want separately
-//       instead of as a larger JSON object.
+// NOTE: This requires `ssr: false` in `nuxt.config.*` because the server will try to
+//       serialize our computed state properties to JSON, and they will fail because
+//       functions can't be serialized.
 //
 //       See: [The Pinia guide](https://pinia.vuejs.org/core-concepts/)
 //            https://github.com/vuejs/pinia/issues/447#issuecomment-1455285437
 //            https://github.com/nuxt/nuxt/issues/20889
 
-export const useAppSettingsStore = defineStore('AppSettingsStore', {
-  // state: () => {
-  //   function $reset() {
-  //     //TODO
-  //   }
+export const useAppSettingsStore = defineStore('AppSettingsStoreClientOnly', {
+  state: () => {
+    const _colorMode = useColorMode();
 
-  //   return {
-  //     $reset,
-  //   };
-  // },
-  actions: {
-    setColorMode(v: string) {
-      const mode = useColorMode();
+    const defaults = {
+      id: nanoid(),
 
-      mode.preference = v;
-    },
+      teamName: '',
+      jerseyColor: 'f47373',
+      jerseyTextColor: '000000',
 
-    setTeamName(v: string) {
-      const store = useLocalStorage('AppSettingsStore:teamName', '');
+      isLocked: false,
+      spots: [],
+    };
 
-      store.value = v;
-    },
-    setJerseyColor(v: string) {
-      const store = useLocalStorage('AppSettingsStore:jerseyColor', '');
+    const _lineup = useLocalStorage<Lineup>('AppSettingsStoreClientOnly:lineup', defaults, { mergeDefaults: true });
 
-      store.value = v;
-    },
-    setJerseyTextColor(v: string) {
-      const store = useLocalStorage('AppSettingsStore:jerseyTextColor', '');
+    // NOTE: We provide setters so we can persist to storage.
+    //       Source: https://github.com/vuejs/pinia/issues/447#issuecomment-1455285437
 
-      store.value = v;
-    },
+    const colorMode = computed<string>({
+      get: () => _colorMode.preference,
+      set: (v) => _colorMode.preference = v
+    });
 
-    setIsLocked(v: boolean) {
-      const store = useLocalStorage('AppSettingsStore:isLocked', false);
+    const teamName = computed<string>({
+      get: () => _lineup.value.teamName,
+      set: (v) => _lineup.value.teamName = v
+    });
 
-      store.value = v;
-    },
-    addSpot(spot: Spot) {
-      const store = useLocalStorage('AppSettingsStore:spots', [] as Array<Spot>);
+    const jerseyColor = computed<string>({
+      get: () => _lineup.value.jerseyColor,
+      set: (v) => _lineup.value.jerseyColor = v
+    });
+
+    const jerseyTextColor = computed<string>({
+      get: () => _lineup.value.jerseyTextColor,
+      set: (v) => _lineup.value.jerseyTextColor = v
+    });
+
+    const isLocked = computed<boolean>({
+      get: () => _lineup.value.isLocked,
+      set: (v) => _lineup.value.isLocked = v
+    });
 
-      if (!this.getIsLocked) {
-        store.value.push({ ...spot });
+    const spots = computed<Spot[]>({
+      get: () => _lineup.value.spots,
+      set: (v) => _lineup.value.spots = v
+    });
+
+    // function $reset() {
+    //   //TODO
+    // }
+
+    return {
+      colorMode: skipHydrate(colorMode),
+
+      teamName: skipHydrate(teamName),
+      jerseyColor: skipHydrate(jerseyColor),
+      jerseyTextColor: skipHydrate(jerseyTextColor),
+
+      isLocked: skipHydrate(isLocked),
+      spots: skipHydrate(spots),
+
+      //$reset,
+    };
+  },
+  actions: {
+    addSpot(spot: Spot) {
+      if (!this.isLocked) {
+        this.spots.push({ ...spot });
       }
     },
     removeSpot(playerId: string) {
-      const store = useLocalStorage('AppSettingsStore:spots', [] as Array<Spot>);
-
-      store.value = store.value.filter(s => s.player.id !== playerId);
+      this.spots = this.spots.filter(s => s.player.id !== playerId)
     },
   },
-  getters: {
-    getColorMode: state => useColorMode().preference,
-
-    getTeamName: state => useLocalStorage('AppSettingsStore:teamName', '').value,
-    getJerseyColor: state => useLocalStorage('AppSettingsStore:jerseyColor', 'f47373').value,
-    getJerseyTextColor: state => useLocalStorage('AppSettingsStore:jerseyTextColor', '000000').value,
+  // getters: {
 
-    getIsLocked: state => useLocalStorage('AppSettingsStore:isLocked', false).value,
-    getSpots: state => useLocalStorage('AppSettingsStore:spots', [] as Array<Spot>).value,
-  }
+  // }
 });
 
 if (import.meta.hot) {
diff --git a/stores/AppSettingsClientOnly.ts b/stores/AppSettingsClientOnly.ts
deleted file mode 100644
index 352a2a8..0000000
--- a/stores/AppSettingsClientOnly.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import { defineStore, skipHydrate, acceptHMRUpdate } from "pinia";
-import { nanoid } from "nanoid";
-
-import type { Spot, Lineup } from '~~/types';
-
-// NOTE: This requires `ssr: false` in `nuxt.config.*` because the server will try to
-//       serialize our computed state properties to JSON, and they will fail because
-//       functions can't be serialized. (With SSR turned on but with the experimental
-//       `renderJsonPayloads: false` flag, it may work.)
-//
-//       See: [The Pinia guide](https://pinia.vuejs.org/core-concepts/)
-//            https://github.com/vuejs/pinia/issues/447#issuecomment-1455285437
-//            https://github.com/nuxt/nuxt/issues/20889
-
-export const useAppSettingsStoreClientOnly = defineStore('AppSettingsStoreClientOnly', {
-  state: () => {
-    const _colorMode = useColorMode();
-
-    const _lineup = useLocalStorage<Lineup>('AppSettingsStoreClientOnly:lineup', {
-      id: nanoid(),
-
-      teamName: '',
-      jerseyColor: 'f47373',
-      jerseyTextColor: '000000',
-
-      isLocked: false,
-      spots: [],
-    }, {
-      mergeDefaults: true
-    });
-
-    // NOTE: We provide setters so we can persist to storage.
-    //       Source: https://github.com/vuejs/pinia/issues/447#issuecomment-1455285437
-
-    const colorMode = computed<string>({
-      get: () => {
-        return _colorMode.preference;
-      },
-      set: (v) => {
-        _colorMode.preference = v;
-      },
-    });
-
-    const teamName = computed<string>({
-      get: () => {
-        return _lineup.value.teamName;
-      },
-      set: (v) => {
-        _lineup.value.teamName = v;
-      },
-    });
-
-    const jerseyColor = computed<string>({
-      get: () => {
-        return _lineup.value.jerseyColor;
-      },
-      set: (v) => {
-        _lineup.value.jerseyColor = v;
-      },
-    });
-
-    const jerseyTextColor = computed<string>({
-      get: () => {
-        return _lineup.value.jerseyTextColor;
-      },
-      set: (v) => {
-        _lineup.value.jerseyTextColor = v;
-      },
-    });
-
-    const isLocked = computed<boolean>({
-      get: () => {
-        return _lineup.value.isLocked;
-      },
-      set: (v) => {
-        _lineup.value.isLocked = v;
-      },
-    });
-
-    const spots = computed<Spot[]>({
-      get: () => {
-        return _lineup.value.spots;
-      },
-      set: (v) => {
-        _lineup.value.spots = v;
-      },
-    });
-
-    function $reset() {
-      //TODO
-    }
-
-    return {
-      colorMode: skipHydrate(colorMode),
-
-      teamName: skipHydrate(teamName),
-      jerseyColor: skipHydrate(jerseyColor),
-      jerseyTextColor: skipHydrate(jerseyTextColor),
-
-      isLocked: skipHydrate(isLocked),
-      spots: skipHydrate(spots),
-
-      $reset,
-    };
-  },
-  actions: {
-    addSpot(spot: Spot) {
-      if (!this.isLocked) {
-        this.spots.push({ ...spot });
-      }
-    },
-    removeSpot(playerId: string) {
-      this.spots = this.spots.filter(s => s.player.id !== playerId)
-    },
-  },
-  // getters: {
-
-  // }
-});
-
-if (import.meta.hot) {
-  import.meta.hot.accept(acceptHMRUpdate(useAppSettingsStoreClientOnly, import.meta.hot));
-}
\ No newline at end of file

From 36072bc8a71da6d2c7c30de9021af60832a71cca Mon Sep 17 00:00:00 2001
From: Mark Ross <krazkidd@gmail.com>
Date: Thu, 7 Sep 2023 16:06:40 -0700
Subject: [PATCH 2/4] Actually disable SSR.

---
 nuxt.config.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 1f3a57a..7723d91 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -7,6 +7,9 @@ export default defineNuxtConfig({
     "@pinia/nuxt",
     "@vueuse/nuxt"
   ],
+  // don't reenable this until our Pinia
+  // stores support universal rendering
+  ssr: false,
   css: [
     'primevue/resources/themes/saga-blue/theme.css',
     'primevue/resources/primevue.css',

From 2cacfa7d07f24324b3a0a7d45758b7c27e47e2df Mon Sep 17 00:00:00 2001
From: Mark Ross <krazkidd@gmail.com>
Date: Thu, 7 Sep 2023 16:26:53 -0700
Subject: [PATCH 3/4] Rename the Pinia store.

---
 stores/AppSettings.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/stores/AppSettings.ts b/stores/AppSettings.ts
index e63de06..ac69240 100644
--- a/stores/AppSettings.ts
+++ b/stores/AppSettings.ts
@@ -11,7 +11,7 @@ import type { Spot, Lineup } from '~~/types';
 //            https://github.com/vuejs/pinia/issues/447#issuecomment-1455285437
 //            https://github.com/nuxt/nuxt/issues/20889
 
-export const useAppSettingsStore = defineStore('AppSettingsStoreClientOnly', {
+export const useAppSettingsStore = defineStore('AppSettingsStore', {
   state: () => {
     const _colorMode = useColorMode();
 
@@ -26,7 +26,7 @@ export const useAppSettingsStore = defineStore('AppSettingsStoreClientOnly', {
       spots: [],
     };
 
-    const _lineup = useLocalStorage<Lineup>('AppSettingsStoreClientOnly:lineup', defaults, { mergeDefaults: true });
+    const _lineup = useLocalStorage<Lineup>('AppSettingsStore:lineup', defaults, { mergeDefaults: true });
 
     // NOTE: We provide setters so we can persist to storage.
     //       Source: https://github.com/vuejs/pinia/issues/447#issuecomment-1455285437

From 2d23aadc90b587df65817e2d8b09fdbe7560187b Mon Sep 17 00:00:00 2001
From: Mark Ross <krazkidd@gmail.com>
Date: Thu, 7 Sep 2023 16:30:48 -0700
Subject: [PATCH 4/4] Add comments.

---
 nuxt.config.ts        | 4 ++--
 stores/AppSettings.ts | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7723d91..b61a4e2 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -7,8 +7,8 @@ export default defineNuxtConfig({
     "@pinia/nuxt",
     "@vueuse/nuxt"
   ],
-  // don't reenable this until our Pinia
-  // stores support universal rendering
+  // HACK: We have to disable SSR until Pinia has better
+  //       support for our usage. See stores/AppSettings.ts.
   ssr: false,
   css: [
     'primevue/resources/themes/saga-blue/theme.css',
diff --git a/stores/AppSettings.ts b/stores/AppSettings.ts
index ac69240..d569913 100644
--- a/stores/AppSettings.ts
+++ b/stores/AppSettings.ts
@@ -3,11 +3,12 @@ import { nanoid } from "nanoid";
 
 import type { Spot, Lineup } from '~~/types';
 
-// NOTE: This requires `ssr: false` in `nuxt.config.*` because the server will try to
-//       serialize our computed state properties to JSON, and they will fail because
-//       functions can't be serialized.
+// NOTE: This Pinia store requires `ssr: false` in `nuxt.config.*` because the server
+//       will try to serialize our computed state properties to JSON, and that will fail
+//       because functions can't be serialized.
 //
 //       See: [The Pinia guide](https://pinia.vuejs.org/core-concepts/)
+//            https://github.com/vuejs/pinia/issues/829 (look for "Advanced SSR")
 //            https://github.com/vuejs/pinia/issues/447#issuecomment-1455285437
 //            https://github.com/nuxt/nuxt/issues/20889