chore: refactor a lot, add codegen and upgrade vue

components/pages/events/Event/index.vue

@@ -1,13 +1,13 @@
 <template>
   <v-card xs12>
     <v-card-title primary-title>
-      <h3 class="headline mb-0">
+      <h3 class='headline mb-0'>
         <v-icon
-          class="ml-1 mr-1"
-          v-if="hasUser"
-          v-on:click="toggleIgnore('band', event.band.name)"
+          v-if='hasUser'
+          class='ml-1 mr-1'
           medium
           title="Dölj"
+          @click="toggleIgnore('band', event.band.name)"
           >mdi-eye-off</v-icon
         >{{ event.band.name }}
       </h3>
@@ -15,71 +15,89 @@
     <v-container>
       <v-layout row wrap>
         <v-flex xs12 sm6
-          ><strong class="mr-1" v-text="$t('events.date')" />{{
+        ><strong class='mr-1' v-text="$t('events.date')" />{{
             event.date
           }}
-          ({{ weekday }} {{ daysUntil }})</v-flex
+          ({{ weekday }} {{ daysUntil }})
+        </v-flex
         >
-        <v-flex xs12 sm6 v-if="event.time"
-          ><strong class="mr-1" v-text="$t('events.time')" />{{
+        <v-flex v-if='event.time' xs12 sm6
+        ><strong class='mr-1' v-text="$t('events.time')" />{{
             event.time
-          }}</v-flex
+          }}
+        </v-flex
         >
       </v-layout>
       <v-layout row wrap>
         <v-flex xs12 sm6 md3
-          ><strong class="mr-1" v-text="$t('events.hall')" /><v-icon
-            class="ml-1 mr-1"
-            v-if="hasUser"
-            v-on:click="toggleIgnore('danceHall', event.danceHall.name)"
+        ><strong class='mr-1' v-text="$t('events.hall')" />
+          <v-icon
+            v-if='hasUser'
+            class='ml-1 mr-1'
             small
             :title="$t('events.hide')"
-            >mdi-eye-off</v-icon
-          >{{ event.danceHall.name }}</v-flex
+            @click="toggleIgnore('danceHall', event.danceHall.name)"
+          >mdi-eye-off
+          </v-icon
+          >
+          {{ event.danceHall.name }}
+        </v-flex
         >
         <v-flex xs12 sm6 md3
-          ><strong class="mr-1" v-text="$t('events.city')" /><v-icon
-            class="ml-1 mr-1"
-            v-if="hasUser"
-            v-on:click="toggleIgnore('city', event.danceHall.city)"
+        ><strong class='mr-1' v-text="$t('events.city')" />
+          <v-icon
+            v-if='hasUser'
+            class='ml-1 mr-1'
             small
             :title="$t('events.hide')"
-            >mdi-eye-off</v-icon
-          >{{ event.danceHall.city }}</v-flex
+            @click="toggleIgnore('city', event.danceHall.city)"
+          >mdi-eye-off
+          </v-icon
+          >
+          {{ event.danceHall.city }}
+        </v-flex
         >
         <v-flex xs12 sm6 md3
-          ><strong class="mr-1" v-text="$t('events.municipality')" /><v-icon
-            class="ml-1 mr-1"
-            v-if="hasUser"
-            v-on:click="
+        ><strong class='mr-1' v-text="$t('events.municipality')" />
+          <v-icon
+            v-if='hasUser'
+            class='ml-1 mr-1'
+            small
+            :title="$t('events.hide')"
+            @click="
               toggleIgnore('municipality', event.danceHall.municipality)
             "
-            small
-            :title="$t('events.hide')"
-            >mdi-eye-off</v-icon
-          >{{ event.danceHall.municipality }}</v-flex
+          >mdi-eye-off
+          </v-icon
+          >
+          {{ event.danceHall.municipality }}
+        </v-flex
         >
         <v-flex xs12 sm6 md3
-          ><strong class="mr-1" v-text="$t('events.state')" /><v-icon
-            class="ml-1 mr-1"
-            v-if="hasUser"
-            v-on:click="toggleIgnore('state', event.danceHall.state)"
+        ><strong class='mr-1' v-text="$t('events.state')" />
+          <v-icon
+            v-if='hasUser'
+            class='ml-1 mr-1'
             small
             :title="$t('events.hide')"
-            >mdi-eye-off</v-icon
-          >{{ event.danceHall.state }}</v-flex
+            @click="toggleIgnore('state', event.danceHall.state)"
+          >mdi-eye-off
+          </v-icon
+          >
+          {{ event.danceHall.state }}
+        </v-flex
         >
       </v-layout>
       <v-layout
+        v-for='distance in event.distances'
+        :key='distance.origin'
         row
         wrap
-        v-for="distance in event.distances"
-        :key="distance.origin"
       >
         <v-flex xs12 sm6>
           <v-icon>mdi-home</v-icon>
           <span
-            ><strong>{{ distance.origin }}</strong></span
+          ><strong>{{ distance.origin }}</strong></span
           >
         </v-flex>
         <v-flex xs12 sm6>
@@ -93,14 +111,19 @@
   </v-card>
 </template>
 
-<script>
-import dayjs from 'dayjs'
+<script lang='ts'>
+// eslint-disable-next-line import/no-duplicates
+import { format, formatDistanceToNow, parseISO } from 'date-fns'
+// eslint-disable-next-line import/no-duplicates
+import { enGB, sv } from 'date-fns/locale'
+import { computed, defineComponent, getCurrentInstance, PropType } from 'vue'
+import { Event } from '~/graphql/generated/operations'
 
-export default {
+export default defineComponent({
   name: 'EventDetail',
   props: {
     event: {
-      type: Object,
+      type: Object as PropType<Event>,
       required: true
     },
     hasUser: {
@@ -113,13 +136,15 @@ export default {
     }
   },
   setup(props) {
+    const instance = getCurrentInstance()
+    const locale = computed(() => (instance?.proxy.$i18n.locale ?? 'sv') === 'en' ? enGB : sv )
     const time = (props.event.time || '').split('-')[0].replace('.', ':')
-    const weekday = dayjs(props.event.date).format('dddd')
-    const daysUntil = dayjs(`${props.event.date} ${time}`).fromNow()
+    const weekday = format(parseISO(props.event.date), 'EEEE', { locale: locale.value })
+    const daysUntil = formatDistanceToNow(parseISO(`${props.event.date}T${time}`), { addSuffix: true, locale: locale.value })
     return {
       weekday,
       daysUntil
     }
   }
-}
+})
 </script>