chore: refactor a lot, add codegen and upgrade vue

components/pages/filters/List/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-flex xs12 sm6 md4 lg3>
+  <v-col xs='12' sm='6' md='4' lg='3'>
     <v-card>
       <v-card-title>
         <span v-text="$tc(title, model.length)" />
@@ -7,18 +7,18 @@
       <v-list>
         <v-list-item v-for="item in model" :key="item">
           <v-list-item-action @click="toggleIgnore(type, item)">
-            <v-tooltip top slot="prepend">
+            <v-tooltip top>
               <template #activator="{ on }">
                 <v-icon v-on="on">mdi-delete-outline</v-icon>
               </template>
               <span v-text="$t('filters.remove')" />
             </v-tooltip>
           </v-list-item-action>
-          <v-list-item-titl><span v-html="item" /></v-list-item-titl>
+          <v-list-item-title><span v-text="item" /></v-list-item-title>
         </v-list-item>
       </v-list>
     </v-card>
-  </v-flex>
+  </v-col>
 </template>
 
 <script>

components/pages/filters/index.vue

@@ -10,7 +10,7 @@
                   :model="bands || []"
                   title="filters.band"
                   type="band"
-                  :toggleIgnore="toggleIgnore"
+                  :toggle-ignore="toggleIgnore"
                 />
                 <v-flex xs12 sm6 md4 lg3>
                   <v-layout column>
@@ -18,25 +18,25 @@
                       :model="states || []"
                       title="filters.state"
                       type="state"
-                      :toggleIgnore="toggleIgnore"
+                      :toggle-ignore="toggleIgnore"
                     />
                     <list
                       :model="municipalities || []"
                       title="filters.municipality"
                       type="municipality"
-                      :toggleIgnore="toggleIgnore"
+                      :toggle-ignore="toggleIgnore"
                     />
                     <list
                       :model="cities || []"
                       title="filters.city"
                       type="city"
-                      :toggleIgnore="toggleIgnore"
+                      :toggle-ignore="toggleIgnore"
                     />
                     <list
                       :model="danceHalls || []"
                       title="filters.hall"
                       type="danceHall"
-                      :toggleIgnore="toggleIgnore"
+                      :toggle-ignore="toggleIgnore"
                     />
                   </v-layout>
                 </v-flex>
@@ -56,22 +56,18 @@
   </div>
 </template>
 
-<script>
-import { ref } from '@vue/composition-api'
-import { useMutations } from '@u3u/vue-hooks'
-import { useMutation, useQuery, useResult } from '@vue/apollo-composable'
-import {
-  fetchFilters,
-  toggleIgnoreBand,
-  toggleIgnoreCity,
-  toggleIgnoreDanceHall,
-  toggleIgnoreMunicipality,
-  toggleIgnoreState
-} from '~/utils/graph-client'
+<script lang='ts'>
+import { computed, ref } from 'vue'
+import { useStore } from '@nuxtjs/composition-api'
 
-import List from './List'
-import { useAuth } from '../../../plugins/auth'
-import { useTranslation } from '../../../plugins/i18n'
+import List from './List/index.vue'
+import { useAuth } from '~/plugins/auth'
+import { useTranslation } from '~/plugins/i18n'
+import {
+  useFetchFiltersQuery,
+  useToggleIgnoreBandMutation, useToggleIgnoreCityMutation,
+  useToggleIgnoreDanceHallMutation, useToggleIgnoreMunicipalityMutation, useToggleIgnoreStateMutation
+} from '~/graphql/generated/operations'
 
 export default {
   name: 'FiltersPage',
@@ -79,32 +75,24 @@ export default {
     List
   },
   setup() {
-    const { setTitle } = useMutations(['setTitle'])
+    const store = useStore()
     const { t } = useTranslation()
-    setTitle(t('app.links.filters'))
+    store.commit('setTitle', t('app.links.filters'))
     const { isAuthenticated } = useAuth()
-    const { result: data, loading, refetch } = useQuery(fetchFilters)
-    const bands = useResult(data, [], (result) => result.bands)
-    const cities = useResult(data, [], (result) => result.cities)
-    const danceHalls = useResult(data, [], (result) => result.danceHalls)
-    const municipalities = useResult(
-      data,
-      [],
-      (result) => result.municipalities
-    )
-    const states = useResult(data, [], (result) => result.states)
+    const { result, loading, refetch } = useFetchFiltersQuery()
+    const bands = computed(() => result.value?.bands ?? [])
+    const cities = computed(() => result.value?.cities ?? [])
+    const danceHalls = computed(() => result.value?.danceHalls ?? [])
+    const municipalities = computed(() => result.value?.municipalities ?? [])
+    const states = computed(() => result.value?.states ?? [])
     const snackbar = ref({ active: false, color: 'success', text: '' })
-    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 () => {
         refetch()
         snackbar.value.color = 'success'
@@ -113,7 +101,7 @@ export default {
       }
     }
 
-    const toggleIgnoreFailed = (name) => {
+    const toggleIgnoreFailed = (name: string) => {
       return () => {
         snackbar.value.color = 'error'
         snackbar.value.text = t('filters.failure', { name })
@@ -121,7 +109,7 @@ export default {
       }
     }
 
-    const toggleIgnore = (type, name) => {
+    const toggleIgnore = (type: string, name: string) => {
       switch (type) {
         case 'band':
           doToggleIgnoreBand({ name })