fix hydration

components/expenses/Card.vue → 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">

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">

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;

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

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",

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>

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])
+);