chore: migrate to script setup style

components/pages/filters/List/index.vue

@@ -21,26 +21,23 @@
   </v-card>
 </template>
 
-<script>
-export default {
-  name: 'FiltersList',
-  props: {
-    model: {
-      type: Array,
-      required: true
-    },
-    title: {
-      type: String,
-      required: true
-    },
-    type: {
-      type: String,
-      required: true
-    },
-    toggleIgnore: {
-      type: Function,
-      required: true
-    }
+<script setup lang='ts'>
+defineProps({
+  model: {
+    type: Array,
+    required: true
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  type: {
+    type: String,
+    required: true
+  },
+  toggleIgnore: {
+    type: Function,
+    required: true
   }
-}
+})
 </script>

components/pages/filters/index.vue

@@ -60,9 +60,8 @@
   </div>
 </template>
 
-<script lang='ts'>
+<script setup lang='ts'>
 import { computed, ref } from 'vue'
-
 import List from './List/index.vue'
 import { useAuth } from '~/plugins/auth'
 import { useTranslation } from '~/plugins/i18n'
@@ -76,88 +75,68 @@ import {
 } from '~/graphql/generated/operations'
 import { useState } from '~/store'
 
-export default {
-  name: 'FiltersPage',
-  components: {
-    List
-  },
-  setup () {
-    const state = useState()
-    const { t } = useTranslation()
-    state.setTitle(t('app.links.filters'))
-    const { isAuthenticated } = useAuth()
-    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 } = useToggleIgnoreBandMutation({})
-    const { mutate: doToggleIgnoreDanceHall } = useToggleIgnoreDanceHallMutation({})
-    const { mutate: doToggleIgnoreCity } = useToggleIgnoreCityMutation({})
-    const { mutate: doToggleIgnoreMunicipality } = useToggleIgnoreMunicipalityMutation({})
-    const { mutate: doToggleIgnoreState } = useToggleIgnoreStateMutation({})
+const state = useState()
+const { t } = useTranslation()
+state.setTitle(t('app.links.filters'))
+const { isAuthenticated } = useAuth()
+const { result, 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 } = useToggleIgnoreBandMutation({})
+const { mutate: doToggleIgnoreDanceHall } = useToggleIgnoreDanceHallMutation({})
+const { mutate: doToggleIgnoreCity } = useToggleIgnoreCityMutation({})
+const { mutate: doToggleIgnoreMunicipality } = useToggleIgnoreMunicipalityMutation({})
+const { mutate: doToggleIgnoreState } = useToggleIgnoreStateMutation({})
 
-    const toggleIgnoreSuccess = (name: string) => {
-      return () => {
-        refetch()
-        snackbar.value.color = 'success'
-        snackbar.value.text = t('filters.success', { name })
-        snackbar.value.active = true
-      }
-    }
+const toggleIgnoreSuccess = (name: string) => {
+  return () => {
+    refetch()
+    snackbar.value.color = 'success'
+    snackbar.value.text = t('filters.success', { name })
+    snackbar.value.active = true
+  }
+}
 
-    const toggleIgnoreFailed = (name: string) => {
-      return () => {
-        snackbar.value.color = 'error'
-        snackbar.value.text = t('filters.failure', { name })
-        snackbar.value.active = true
-      }
-    }
+const toggleIgnoreFailed = (name: string) => {
+  return () => {
+    snackbar.value.color = 'error'
+    snackbar.value.text = t('filters.failure', { name })
+    snackbar.value.active = true
+  }
+}
 
-    const toggleIgnore = (type: string, name: string) => {
-      switch (type) {
-        case 'band':
-          doToggleIgnoreBand({ name })
-            .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
-          break
-        case 'danceHall':
-          doToggleIgnoreDanceHall({ name })
-            .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
-          break
-        case 'city':
-          doToggleIgnoreCity({ name })
-            .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
-          break
-        case 'municipality':
-          doToggleIgnoreMunicipality({ name })
-            .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
-          break
-        case 'state':
-          doToggleIgnoreState({ name })
-            .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
-          break
-        default:
-      }
-    }
-
-    return {
-      isAuthenticated,
-      loading,
-      bands,
-      danceHalls,
-      cities,
-      municipalities,
-      states,
-      snackbar,
-      toggleIgnore
-    }
+const toggleIgnore = (type: string, name: string) => {
+  switch (type) {
+    case 'band':
+      doToggleIgnoreBand({ name })
+        .then(toggleIgnoreSuccess(name))
+        .catch(toggleIgnoreFailed)
+      break
+    case 'danceHall':
+      doToggleIgnoreDanceHall({ name })
+        .then(toggleIgnoreSuccess(name))
+        .catch(toggleIgnoreFailed)
+      break
+    case 'city':
+      doToggleIgnoreCity({ name })
+        .then(toggleIgnoreSuccess(name))
+        .catch(toggleIgnoreFailed)
+      break
+    case 'municipality':
+      doToggleIgnoreMunicipality({ name })
+        .then(toggleIgnoreSuccess(name))
+        .catch(toggleIgnoreFailed)
+      break
+    case 'state':
+      doToggleIgnoreState({ name })
+        .then(toggleIgnoreSuccess(name))
+        .catch(toggleIgnoreFailed)
+      break
+    default:
   }
 }
 </script>