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>

components/pages/events/List/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <v-layout row wrap v-for="event in events" :key="event.id">
+    <v-row v-for="event in events" :key="event.id" wrap>
       <v-flex xs12>
         <Event
           :event="event"
           :has-user="hasUser"
-          :toggleIgnore="toggleIgnore"
+          :toggle-ignore="toggleIgnore"
         />
       </v-flex>
-    </v-layout>
+    </v-row>
   </div>
 </template>
 

components/pages/events/index.vue

@@ -1,42 +1,46 @@
 <template>
   <div :key='isAuthenticated'>
     <v-container :key='range' fluid grid-list-md class='app-fade-in'>
-      <v-layout v-if='!isAuthenticated' row wrap>
-        <v-flex xs12>
+      <v-row v-if='!isAuthenticated' wrap>
+        <v-col xs='12'>
           <p><b v-text="$t('events.login')" /></p>
-        </v-flex>
-      </v-layout>
-      <v-layout row wrap>
-        <v-flex xs12>
+        </v-col>
+      </v-row>
+      <v-row wrap>
+        <v-col xs='12'>
           <v-text-field
             v-model='origin'
             :label="$t('origins.origin')"
             :placeholder="$t('origins.geolocation')"
           >
-            <v-tooltip slot='append-outer' top>
-              <template #activator='{ on }'>
-                <v-icon v-on='on' @click='fetchAddress()'
-                >mdi-crosshairs-gps
-                </v-icon>
-              </template>
-              <span v-text="$t('origins.fetchAddress')" />
-            </v-tooltip>
-            <v-tooltip v-if='isAuthenticated' slot='prepend' top>
-              <template #activator='{ on }'>
-                <v-icon
-                  :disabled='!origin'
-                  v-on='on'
-                  @click='saveOrigin(origin)'
-                >mdi-bookmark-plus-outline
-                </v-icon>
-              </template>
-              <span v-text="$t('origins.save')" />
-            </v-tooltip>
+            <template #append-outer>
+              <v-tooltip top>
+                <template #activator='{ on }'>
+                  <v-icon v-on='on' @click='fetchAddress()'
+                  >mdi-crosshairs-gps
+                  </v-icon>
+                </template>
+                <span v-text="$t('origins.fetchAddress')" />
+              </v-tooltip>
+            </template>
+            <template #prepend>
+              <v-tooltip v-if='isAuthenticated' top>
+                <template #activator='{ on }'>
+                  <v-icon
+                    :disabled='!origin'
+                    v-on='on'
+                    @click='saveOrigin(origin)'
+                  >mdi-bookmark-plus-outline
+                  </v-icon>
+                </template>
+                <span v-text="$t('origins.save')" />
+              </v-tooltip>
+            </template>
           </v-text-field>
-        </v-flex>
-      </v-layout>
-      <v-layout row wrap>
-        <v-flex>
+        </v-col>
+      </v-row>
+      <v-row wrap>
+        <v-col>
           <v-btn-toggle
             v-if='$vuetify.breakpoint.smAndUp'
             v-model='range'
@@ -47,17 +51,17 @@
               /></v-btn>
           </v-btn-toggle>
           <v-select
-            v-if='$vuetify.breakpoint.xsOnly'
+            v-else
             v-model='range'
             outline
             :items='ranges'
             item-text='name'
             item-value='value'
           />
-        </v-flex>
-      </v-layout>
+        </v-col>
+      </v-row>
       <list
-        :events='events || []'
+        :events='events'
         :has-user='isAuthenticated'
         :toggle-ignore='toggleIgnore'
       />
@@ -72,58 +76,61 @@
   </div>
 </template>
 
-<script>
-import { useMutations, useRouter } from '@u3u/vue-hooks'
-import { computed, ref, watch } from '@vue/composition-api'
-import { useMutation, useQuery, useResult } from '@vue/apollo-composable'
+<script lang='ts'>
+import { computed, defineComponent, ref, watch } from 'vue'
+import { useRoute, useRouter, useStore } from '@nuxtjs/composition-api'
+
+import List from './List/index.vue'
 import { useAuth } from '~/plugins/auth'
-
-import List from './List'
-import {
-  fetchAddress,
-  findEvents,
-  saveOrigin,
-  toggleIgnoreBand,
-  toggleIgnoreCity,
-  toggleIgnoreDanceHall,
-  toggleIgnoreMunicipality,
-  toggleIgnoreState
-} from '~/utils/graph-client'
 import { useTranslation } from '~/plugins/i18n'
+import {
+  FindEventsQueryVariables,
+  Range,
+  useFetchAddressLazyQuery,
+  useFindEventsLazyQuery,
+  useSaveOriginMutation,
+  useToggleIgnoreBandMutation,
+  useToggleIgnoreCityMutation,
+  useToggleIgnoreDanceHallMutation,
+  useToggleIgnoreMunicipalityMutation,
+  useToggleIgnoreStateMutation
+} from '~/graphql/generated/operations'
 
-export default {
+export default defineComponent({
   name: 'EventsPage',
   components: {
     List
   },
   setup() {
-    const { setTitle } = useMutations(['setTitle'])
+    const store = useStore()
     const { t } = useTranslation()
-    setTitle(t('app.links.events'))
+    store.commit('setTitle', t('app.links.events'))
     const { loading: authLoading, isAuthenticated } = useAuth()
-    const { route, router } = useRouter()
+    const route = useRoute()
+    const router = useRouter()
     const range = computed({
-      get: () => route.value.query.range || 'ONE_WEEK',
-      set: (value) => router.push(`/?range=${value}`)
+      get: () => route.value.query.range ? route.value.query.range as Range : undefined,
+      set: (value) => {
+        router.push(`/?range=${value}`)
+      }
     })
-    const enabled = ref(false)
-    const { result: data, refetch } = useQuery(
-      findEvents,
-      { includeOrigins: false },
-      () => ({ enabled: enabled.value })
-    )
-    const events = useResult(data, [], (result) => result.events)
-    const origins = useResult(data, [], (result) => result.origins)
+    const variables = ref<FindEventsQueryVariables>({ includeOrigins: false})
+    const { result, refetch, load } = useFindEventsLazyQuery(variables)
+    const events = computed(() => result.value?.events ?? [])
+    const origins = computed(() => result.value?.origins ?? [])
     watch(
-      range,
+      () => route.value.query.range,
       (r) => {
-        enabled.value = true
-        refetch({
-          range: r,
-          includeOrigins: isAuthenticated.value || false
-        })
+        if (!authLoading.value) {
+          variables.value = {
+            range: r ? r as Range : Range.OneWeek,
+            includeOrigins: isAuthenticated.value || false
+          }
+          load()
+          refetch(variables.value)
+        }
       },
-      { lazy: false }
+      { immediate: true }
     )
     const submitting = ref(true)
     const ranges = [
@@ -141,25 +148,22 @@ export default {
       if (origin.value) {
         originsTemp.push(origin.value)
       }
-      enabled.value = true
-      refetch({
+      variables.value = {
         range: range.value,
         origins: originsTemp,
         includeOrigins: isAuthenticated.value || false
-      })
+      }
+      load()
+      refetch(variables.value)
     }
 
-    const { mutate: doToggleIgnoreBand } = useMutation(toggleIgnoreBand)
-    const { mutate: doToggleIgnoreDanceHall } = useMutation(
-      toggleIgnoreDanceHall
-    )
-    const { mutate: doToggleIgnoreCity } = useMutation(toggleIgnoreCity)
-    const { mutate: doToggleIgnoreMunicipality } = useMutation(
-      toggleIgnoreMunicipality
-    )
-    const { mutate: doToggleIgnoreState } = useMutation(toggleIgnoreState)
+    const { mutate: doToggleIgnoreBand } = useToggleIgnoreBandMutation({})
+    const { mutate: doToggleIgnoreDanceHall } = useToggleIgnoreDanceHallMutation({})
+    const { mutate: doToggleIgnoreCity } = useToggleIgnoreCityMutation({})
+    const { mutate: doToggleIgnoreMunicipality } = useToggleIgnoreMunicipalityMutation({})
+    const { mutate: doToggleIgnoreState } = useToggleIgnoreStateMutation({})
 
-    const toggleIgnoreSuccess = (name) => {
+    const toggleIgnoreSuccess = (name: string) => {
       return () => {
         fetchEvents()
         snackbar.value.color = 'success'
@@ -168,7 +172,7 @@ export default {
       }
     }
 
-    const toggleIgnoreFailed = (name) => {
+    const toggleIgnoreFailed = (name: string) => {
       return () => {
         snackbar.value.color = 'error'
         snackbar.value.text = `${name} kunde inte döljas`
@@ -176,7 +180,7 @@ export default {
       }
     }
 
-    const toggleIgnore = (type, name) => {
+    const toggleIgnore = (type: string, name: string) => {
       switch (type) {
         case 'band':
           doToggleIgnoreBand({ name })
@@ -207,26 +211,21 @@ export default {
       }
     }
 
-    const { mutate: doSaveOrigin } = useMutation(saveOrigin)
-    const addressEnabled = ref(false)
-    const { result: address, refetch: doFetchAddress } = useQuery(
-      fetchAddress,
-      {},
-      () => ({ enabled: addressEnabled.value })
-    )
+    const { mutate: doSaveOrigin } = useSaveOriginMutation({})
+    const { refetch: doFetchAddress, load: loadFetchAddress } = useFetchAddressLazyQuery({ latlng: '' })
     const fetchAddressFn = () => {
       if (window.navigator) {
         window.navigator.geolocation.getCurrentPosition((pos) => {
-          addressEnabled.value = true
+          loadFetchAddress()
           doFetchAddress({
             latlng: `${pos.coords.latitude},${pos.coords.longitude}`
-          }).then(() => {
-            origin.value = address.value.address
+          })?.then((result) => {
+            origin.value = result.data.address
           })
         })
       }
     }
-    const saveOriginFn = (o) =>
+    const saveOriginFn = (o: string) =>
       doSaveOrigin({ origin: o }).then(() => {
         origin.value = ''
         fetchEvents()
@@ -238,7 +237,6 @@ export default {
       range,
       events,
       origins,
-      query: fetchEvents,
       submitting,
       ranges,
       snackbar,
@@ -248,5 +246,5 @@ export default {
       saveOrigin: saveOriginFn
     }
   }
-}
+})
 </script>