chore: refactor a lot, add codegen and upgrade vue

components/pages/origins/index.vue

@@ -1,109 +1,107 @@
 <template>
-  <div :key="isAuthenticated">
-    <v-container fluid grid-list-md class="app-fade-in">
+  <div :key='isAuthenticated'>
+    <v-container fluid grid-list-md class='app-fade-in'>
       <v-layout row wrap>
         <v-flex xs12>
           <v-text-field
-            v-model="origin"
+            v-model='origin'
             :label="$t('origins.origin')"
             :placeholder="$t('origins.geolocation')"
           >
-            <v-tooltip top slot="append-outer">
-              <template v-slot:activator="{ on }">
-                <v-icon v-on="on" v-on:click="fetchAddress()"
+            <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>
-            <v-tooltip top slot="prepend">
-              <template v-slot:activator="{ on }">
-                <v-icon
-                  v-on="on"
-                  :disabled="!origin"
-                  v-on:click="saveOrigin(origin)"
+                  </v-icon>
+                </template>
+                <span v-text="$t('origins.fetchAddress')" />
+              </v-tooltip>
+            </template>
+            <template #prepend>
+              <v-tooltip 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>
+                  </v-icon>
+                </template>
+                <span v-text="$t('origins.save')" />
+              </v-tooltip>
+            </template>
           </v-text-field>
         </v-flex>
       </v-layout>
-      <template>
-        <v-layout row wrap v-for="origin in origins" :key="origin">
-          <v-flex xs12>
-            <v-tooltip top slot="prepend">
-              <template v-slot:activator="{ on }">
-                <v-icon v-on="on" v-on:click="removeOrigin(origin)"
-                  >mdi-delete-outline
-                </v-icon>
-              </template>
-              <span v-text="$t('origins.remove')" />
-            </v-tooltip>
-            <span>{{ origin }}</span>
-          </v-flex>
-        </v-layout>
-      </template>
+      <v-layout v-for='o in origins' :key='o' row wrap>
+        <v-flex xs12>
+          <v-tooltip top>
+            <template #activator='{ on }'>
+              <v-icon v-on='on' @click='removeOrigin(o)'
+              >mdi-delete-outline
+              </v-icon>
+            </template>
+            <span v-text="$t('origins.remove')" />
+          </v-tooltip>
+          <span>{{ o }}</span>
+        </v-flex>
+      </v-layout>
     </v-container>
     <v-snackbar
-      v-model="snackbar.active"
-      :color="snackbar.color"
-      :timeout="5000"
+      v-model='snackbar.active'
+      :color='snackbar.color'
+      :timeout='5000'
     >
       {{ snackbar.text }}
     </v-snackbar>
   </div>
 </template>
 
-<script>
-import { ref } from '@vue/composition-api'
-import { useMutations } from '@u3u/vue-hooks'
-import { useMutation, useQuery, useResult } from '@vue/apollo-composable'
+<script lang='ts'>
+import { computed, defineComponent, ref } from 'vue'
+import { useStore } from '@nuxtjs/composition-api'
+import { useAuth } from '~/plugins/auth'
+import { useTranslation } from '~/plugins/i18n'
 import {
-  fetchAddress,
-  findOrigins,
-  removeOrigin,
-  saveOrigin
-} from '../../../utils/graph-client'
-import { useAuth } from '../../../plugins/auth'
-import { useTranslation } from '../../../plugins/i18n'
+  useFetchAddressLazyQuery,
+  useFindOriginsQuery,
+  useRemoveOriginMutation,
+  useSaveOriginMutation
+} from '~/graphql/generated/operations'
 
-export default {
+export default defineComponent({
   name: 'OriginsPage',
   setup() {
-    const { setTitle } = useMutations(['setTitle'])
+    const store = useStore()
     const { t } = useTranslation()
-    setTitle(t('app.links.origins'))
+    store.commit('setTitle', t('app.links.origins'))
     const { isAuthenticated } = useAuth()
-    const { result: data, loading, refetch } = useQuery(findOrigins)
-    const origins = useResult(data, [])
+    const { result, loading, refetch } = useFindOriginsQuery()
+    const origins = computed(() => result.value?.origins ?? [])
     const snackbar = ref({ active: false, color: 'success', text: '' })
-    const { mutate: doSaveOrigin } = useMutation(saveOrigin)
-    const { mutate: doRemoveOrigin } = useMutation(removeOrigin)
-    const enabled = ref(false)
-    const { refetch: doFetchAddress } = useQuery(fetchAddress, {}, () => ({
-      enabled: enabled.value
-    }))
+    const { mutate: doSaveOrigin } = useSaveOriginMutation({})
+    const { mutate: doRemoveOrigin } = useRemoveOriginMutation({})
+    const { refetch: doFetchAddress, load } = useFetchAddressLazyQuery({ latlng: '' })
     const origin = ref('')
     const fetchAddressFn = () => {
       if (window.navigator) {
         window.navigator.geolocation.getCurrentPosition((pos) => {
-          enabled.value = true
+          load()
           doFetchAddress({
             latlng: `${pos.coords.latitude},${pos.coords.longitude}`
-          }).then((res) => {
-            origin.value = res.address
+          })?.then((res) => {
+            origin.value = res.data.address
           })
         })
       }
     }
-    const saveOriginFn = (o) =>
+    const saveOriginFn = (o: string) =>
       doSaveOrigin({ origin: o }).then(() => {
         refetch()
         origin.value = ''
       })
-    const removeOriginFn = (o) =>
+    const removeOriginFn = (o: string) =>
       doRemoveOrigin({ origin: o }).then(() => refetch())
     return {
       isAuthenticated,
@@ -116,5 +114,5 @@ export default {
       fetchAddress: fetchAddressFn
     }
   }
-}
+})
 </script>