From 4bbb1854ff8a7630720c1c1fae71845443435ddc Mon Sep 17 00:00:00 2001
From: NextFire <git@yuru.moe>
Date: Mon, 25 Mar 2024 18:30:17 -0400
Subject: [PATCH] fix hydration

---
 .../expenses/{Card.vue => Card.client.vue}    |  14 +-
 .../expenses/{View.vue => View.client.vue}    |   0
 components/new-expense/Infos.vue              |  14 +-
 components/new-expense/Participants.vue       |   2 +-
 nuxt.config.ts                                |   2 +-
 package-lock.json                             | 141 ++++++++++++++++++
 package.json                                  |   2 +
 pages/[id].vue                                |  10 +-
 utils/dinero.ts                               |  12 +-
 9 files changed, 171 insertions(+), 26 deletions(-)
 rename components/expenses/{Card.vue => Card.client.vue} (93%)
 rename components/expenses/{View.vue => View.client.vue} (100%)

diff --git a/components/expenses/Card.vue b/components/expenses/Card.client.vue
similarity index 93%
rename from components/expenses/Card.vue
rename to components/expenses/Card.client.vue
index 6cd35f1..4435022 100644
--- a/components/expenses/Card.vue
+++ b/components/expenses/Card.client.vue
@@ -80,12 +80,14 @@ const expenseFormStore = useExpenseFormStore();
         <span class="flex-1"
           >Paid by <b>{{ author?.name }}</b></span
         >
-        <span>{{
-          new Date(expense.date).toLocaleDateString(undefined, {
-            timeZone: "UTC",
-            dateStyle: "long",
-          })
-        }}</span>
+        <span>
+          {{
+            new Date(expense.date).toLocaleDateString(undefined, {
+              timeZone: "UTC",
+              dateStyle: "long",
+            })
+          }}
+        </span>
       </p>
 
       <div class="flex flex-col sm:flex-row text-xs">
diff --git a/components/expenses/View.vue b/components/expenses/View.client.vue
similarity index 100%
rename from components/expenses/View.vue
rename to components/expenses/View.client.vue
diff --git a/components/new-expense/Infos.vue b/components/new-expense/Infos.vue
index 60bbdef..05f541c 100644
--- a/components/new-expense/Infos.vue
+++ b/components/new-expense/Infos.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { toDecimal, toSnapshot, type Dinero } from "dinero.js";
+import { toSnapshot, type Dinero, type Currency } from "dinero.js";
 
 const props = defineProps<{ count: CountData }>();
 
@@ -10,7 +10,7 @@ const date = defineModel<string>("date");
 const author = defineModel<number>("author");
 
 const amountValue = ref(0);
-const amountCurrency = ref(
+const amountCurrency = ref<Currency<number>>(
   amount.value
     ? toSnapshot(amount.value).currency
     : JSON.parse(props.count.currency)
@@ -53,7 +53,15 @@ watchEffect(() => {
         "
         @focusout="amount = fromFloat(amountValue, amountCurrency)"
       />
-      <span class="text-xl">{{ amountCurrency.code }}</span>
+      <select v-model="amountCurrency" class="select select-bordered" disabled>
+        <option
+          v-for="[code, curr] in Object.entries(currencyRecord)"
+          :key="code"
+          :value="curr"
+        >
+          {{ code }}
+        </option>
+      </select>
     </div>
 
     <label class="form-control w-full">
diff --git a/components/new-expense/Participants.vue b/components/new-expense/Participants.vue
index ac787dc..20fd0c1 100644
--- a/components/new-expense/Participants.vue
+++ b/components/new-expense/Participants.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isPositive, toDecimal, toSnapshot, type Dinero } from "dinero.js";
+import { isPositive, toSnapshot, type Dinero } from "dinero.js";
 
 const props = defineProps<{
   count: CountData;
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7d18031..34aa4ea 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ["@nuxtjs/tailwindcss", "@pinia/nuxt"],
+  modules: ["@nuxtjs/tailwindcss", "@pinia/nuxt", "@vueuse/nuxt"],
   app: {
     head: {
       // https://github.com/saadeghi/daisyui/issues/1732
diff --git a/package-lock.json b/package-lock.json
index f28c943..b475187 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,8 @@
         "@prisma/client": "5.11.0",
         "@tailwindcss/typography": "0.5.10",
         "@types/lodash": "4.17.0",
+        "@vueuse/core": "10.9.0",
+        "@vueuse/nuxt": "10.9.0",
         "chart.js": "4.4.2",
         "daisyui": "4.8.0",
         "dinero.js": "2.0.0-alpha.14",
@@ -2869,6 +2871,12 @@
       "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
       "dev": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
+      "dev": true
+    },
     "node_modules/@unhead/dom": {
       "version": "1.8.20",
       "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.8.20.tgz",
@@ -3247,6 +3255,139 @@
       "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==",
       "dev": true
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
+      "integrity": "sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==",
+      "dev": true,
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.9.0",
+        "@vueuse/shared": "10.9.0",
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.9.0.tgz",
+      "integrity": "sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/nuxt": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-10.9.0.tgz",
+      "integrity": "sha512-nC4Efg28Q6E41fUD5R+zM9uT5c+NfaDzaJCpqaEV/qHj+/BNJmkDBK8POLIUsiVOY35d0oD/YxZ+eVizqWBZow==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/kit": "^3.10.2",
+        "@vueuse/core": "10.9.0",
+        "@vueuse/metadata": "10.9.0",
+        "local-pkg": "^0.5.0",
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "nuxt": "^3.0.0"
+      }
+    },
+    "node_modules/@vueuse/nuxt/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.9.0.tgz",
+      "integrity": "sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==",
+      "dev": true,
+      "dependencies": {
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
diff --git a/package.json b/package.json
index 78b4ecc..4ed799d 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,8 @@
     "@prisma/client": "5.11.0",
     "@tailwindcss/typography": "0.5.10",
     "@types/lodash": "4.17.0",
+    "@vueuse/core": "10.9.0",
+    "@vueuse/nuxt": "10.9.0",
     "chart.js": "4.4.2",
     "daisyui": "4.8.0",
     "dinero.js": "2.0.0-alpha.14",
diff --git a/pages/[id].vue b/pages/[id].vue
index 0b46cdf..e48d5bd 100644
--- a/pages/[id].vue
+++ b/pages/[id].vue
@@ -29,12 +29,10 @@ watchEffect(() => {
 
 const tabId = ref(0);
 
-const currentMemberStr = useCookie(`${countId}_currentMember`);
-currentMemberStr.value = currentMemberStr.value ?? "";
-const currentMember = computed(() => {
-  const id = currentMemberStr.value;
-  return id ? parseInt(id) : undefined;
-});
+const currentMemberStr = useLocalStorage(`${countId}_currentMember`, "");
+const currentMember = computed(() =>
+  currentMemberStr.value ? parseInt(currentMemberStr.value) : undefined
+);
 </script>
 
 <template>
diff --git a/utils/dinero.ts b/utils/dinero.ts
index 03fc73e..d8b56b9 100644
--- a/utils/dinero.ts
+++ b/utils/dinero.ts
@@ -25,12 +25,6 @@ export function toString(amount: Dinero<number>): string {
   );
 }
 
-export const currencyRecord: Record<
-  Currency<number>["code"],
-  Currency<number>
-> = {};
-for (const currency of Object.values(currencies)) {
-  if (currency.code) {
-    currencyRecord[currency.code] = currency;
-  }
-}
+export const currencyRecord = Object.fromEntries(
+  Object.values(currencies).map((currency) => [currency.code, currency])
+);