reenable ssr

components/Header.vue

@@ -47,7 +47,7 @@ const submit = async () => {
         <p
           class="font-semibold text-ellipsis whitespace-nowrap overflow-hidden"
         >
-          {{ count?.members.map((m) => m.name).join(", ") }}
+          {{ count.members.map((m) => m.name).join(", ") }}
         </p>
       </div>
       <p v-if="count?.description">{{ count.description }}</p>

components/balances/View.vue

@@ -1,25 +1,21 @@
 <script setup lang="ts">
 const props = defineProps<{ count: CountData; currentMember?: number }>();
 
-const sortedMembers = computed(
-  () => props.count?.members.sort((a, b) => a.name.localeCompare(b.name)) ?? []
-);
-
 const balances = computed(() =>
-  props.count ? computeBalances(props.count.expenses, sortedMembers.value) : []
+  props.count ? computeBalances(props.count.expenses, props.count.members) : []
 );
 </script>
 
 <template>
   <main class="space-y-2">
     <BalancesChart
-      :members="sortedMembers"
+      :members="count.members"
       :balances="balances"
       :current-member="currentMember"
     />
     <BalancesReimbursementsTable
       :count="count"
-      :members="sortedMembers"
+      :members="count.members"
       :balances="balances"
       :current-member="currentMember"
     />

components/new-expense/Infos.vue

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-const props = defineProps<{ count: CountData }>();
-
-const sortedMembers = computed(
-  () => props.count?.members.sort((a, b) => a.name.localeCompare(b.name)) ?? []
-);
+defineProps<{ count: CountData }>();
 
 const title = defineModel<string>("title");
 const amount = defineModel<number>("amount");
@@ -40,7 +36,7 @@ const author = defineModel<number>("author");
       </div>
       <select class="select select-bordered" v-model.number="author">
         <option disabled selected value="undefined">Who paid?</option>
-        <option v-for="m in sortedMembers" :key="m.id" :value="m.id">
+        <option v-for="m in count.members" :key="m.id" :value="m.id">
           {{ m.name }}
         </option>
       </select>

components/new-expense/Modal.vue

@@ -47,8 +47,6 @@ const submit = async () => {
     @click="
       () => {
         expenseStore.$reset();
-        console.log(expenseStore.shares);
-
         for (const m of count?.members ?? []) {
           expenseStore.shares[m.id] = { fraction: 1, amount: '' };
         }

components/new-expense/Participants.vue

@@ -2,13 +2,9 @@
 const props = defineProps<{ count: CountData; expenseAmount: number }>();
 const model = defineModel<ExpenseShares>({ default: {} });
 
-const sortedMembers = computed(
-  () => props.count?.members.sort((a, b) => a.name.localeCompare(b.name)) ?? []
-);
-
 const updateSharesAmount = () => {
   const formattedShares: { fraction?: number; amount?: number }[] = [];
-  const mIds = sortedMembers.value.map((m) => m.id);
+  const mIds = props.count.members.map((m) => m.id);
   for (const id of mIds) {
     const share = model.value[id];
     if (share.amount !== "" && share.fraction === "") {
@@ -41,22 +37,22 @@ updateSharesAmount();
                 type="checkbox"
                 class="checkbox"
                 :checked="
-                  sortedMembers.every(
+                  count.members.every(
                     (m) => model[m.id].fraction || model[m.id].amount
                   )
                 "
                 @click="
                   () => {
                     if (
-                      sortedMembers.every(
+                      count.members.every(
                         (m) => model[m.id].fraction || model[m.id].amount
                       )
                     ) {
-                      for (const m of sortedMembers) {
+                      for (const m of count.members) {
                         model[m.id] = { fraction: 0, amount: '' };
                       }
                     } else {
-                      for (const m of sortedMembers) {
+                      for (const m of count.members) {
                         if (!(model[m.id].fraction || model[m.id].amount))
                           model[m.id] = { fraction: 1, amount: '' };
                       }
@@ -73,7 +69,7 @@ updateSharesAmount();
         </tr>
       </thead>
       <tbody>
-        <tr v-for="m in sortedMembers" :key="m.id">
+        <tr v-for="m in count.members" :key="m.id">
           <th>
             <label>
               <input

nuxt.config.ts

@@ -1,8 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  ssr: false,
-  modules: ["@nuxtjs/tailwindcss", "@pinia/nuxt", "@vueuse/nuxt"],
+  modules: ["@nuxtjs/tailwindcss", "@pinia/nuxt"],
   app: {
     head: {
       viewport: "width=device-width, initial-scale=1, viewport-fit=cover", // https://github.com/saadeghi/daisyui/issues/1732

package.json

@@ -20,7 +20,6 @@
     "@pinia/nuxt": "^0.5.1",
     "@prisma/client": "^5.7.1",
     "@tailwindcss/typography": "^0.5.10",
-    "@vueuse/nuxt": "^10.7.1",
     "chart.js": "^4.4.1",
     "daisyui": "^4.5.0",
     "nuxt": "^3.9.0",

pages/[id].vue

@@ -21,13 +21,16 @@ useHead({
   titleTemplate: `${data.value?.title} | %s`,
 });
 
-const sortedMembers = computed(
-  () => data.value?.members.sort((a, b) => a.name.localeCompare(b.name)) ?? []
-);
+watchEffect(() => {
+  if (data.value) {
+    data.value.members.sort((a, b) => a.name.localeCompare(b.name));
+  }
+});
 
 const tabId = ref(0);
 
-const currentMemberStr = useLocalStorage(`${countId}_currentMember`, "");
+const currentMemberStr = useCookie(`${countId}_currentMember`);
+currentMemberStr.value = currentMemberStr.value ?? "";
 const currentMember = computed(() => {
   const id = currentMemberStr.value;
   return id ? parseInt(id) : undefined;
@@ -47,7 +50,7 @@ const currentMember = computed(() => {
         v-model="currentMemberStr"
       >
         <option disabled selected value="">Identify as…</option>
-        <option v-for="m in sortedMembers" :value="m.id">{{ m.name }}</option>
+        <option v-for="m in data.members" :value="m.id">{{ m.name }}</option>
       </select>
       <button class="btn btn-sm btn-success" @click="refreshNuxtData()">
         <ArrowPathIcon class="h-4 w-4" />

utils/shares.ts

@@ -102,7 +102,6 @@ export function computeReimbursments(
       });
     }
   }
-  console.log(balances);
 
   return reimb;
 }