chore: make auth and apollo a bit more reactive

components/pages/events/Event/index.vue

@@ -70,7 +70,7 @@
           >{{ event.danceHall.state }}</v-flex
         >
       </v-layout>
-      <v-layout row wrap v-for="distance in event.distances" :key="distance">
+      <v-layout row wrap v-for="distance in event.distances" :key="distance.origin">
         <v-flex xs12 sm6>
           <v-icon>mdi-home</v-icon>
           <span

components/pages/events/List/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div v-if="events && events.events">
-    <v-layout row wrap v-for="event in events.events" :key="event.id">
+  <div>
+    <v-layout row wrap v-for="event in events" :key="event.id">
       <v-flex xs12>
         <Event
           :event="event"
@@ -29,7 +29,7 @@ export default {
       required: true
     },
     events: {
-      type: Object,
+      type: Array,
       required: true
     }
   }

components/pages/events/index.vue

@@ -61,7 +61,7 @@
         </v-flex>
       </v-layout>
       <list
-        :events="data"
+        :events="events || []"
         :has-user="isAuthenticated"
         :toggleIgnore="toggleIgnore"
       />
@@ -79,10 +79,10 @@
 <script>
 import { useRouter, useMutations } from '@u3u/vue-hooks'
 import { computed, ref, watch } from '@vue/composition-api'
-import useAuth from '../../../plugins/auth'
+import { useAuth } from '../../../plugins/auth'
 
 import List from './List'
-import { useLazyQuery, useMutation } from '../../../plugins/apollo'
+import { useLazyQuery, useMutation, useResult } from '../../../plugins/apollo'
 import {
   fetchAddress,
   findEvents,
@@ -110,6 +110,8 @@ export default {
       set: value => router.push(`/?range=${value}`)
     })
     const [query, { data }] = useLazyQuery(findEvents)
+    const events = useResult(data, [], data => data.events)
+    const origins = useResult(data, [], data => data.origins)
     watch(
       () => range.value,
       r => {
@@ -134,14 +136,14 @@ export default {
 
     const origin = ref('')
     const fetchEvents = () => {
-      const origins = [...(data.value.origins || [])]
+      const originsTemp = [...(origins.value || [])]
       if (origin.value) {
-        origins.push(origin.value)
+        originsTemp.push(origin.value)
       }
       query({
         variables: {
           range: range.value,
-          origins,
+          origins: originsTemp,
           includeOrigins: isAuthenticated.value || false
         }
       })
@@ -226,7 +228,8 @@ export default {
       authLoading,
       isAuthenticated,
       range,
-      data,
+      events,
+      origins,
       query: fetchEvents,
       submitting,
       ranges,
@@ -239,53 +242,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.left {
-  padding: 1.5rem 1rem;
-
-  > * {
-    margin-bottom: 1.5rem;
-  }
-
-  hr {
-    border: 0;
-    border-top: 1px solid #eaeaea;
-  }
-}
-
-.left,
-.right {
-  height: 100vh;
-  overflow: scroll;
-  overflow-x: hidden;
-  position: relative;
-}
-
-@media screen and(max-width: 1200px) {
-  .left {
-    width: 40vw;
-  }
-  .right {
-    width: 60vw;
-  }
-}
-
-@media screen and(max-width: 1024px) {
-  .left {
-    width: 50vw;
-  }
-  .right {
-    width: 50vw;
-  }
-}
-
-@media screen and(min-width: 1200px) {
-  .left {
-    width: 35vw;
-  }
-  .right {
-    width: 65vw;
-  }
-}
-</style>

components/pages/filters/index.vue

@@ -5,43 +5,38 @@
         <v-flex xs12>
           <v-card>
             <v-container fluid grid-list-md>
-              <v-layout row wrap v-if="!loading && data">
+              <v-layout row wrap>
                 <list
-                  :model="data.bands"
+                  :model="bands || []"
                   title="filters.band"
                   type="band"
                   :toggleIgnore="toggleIgnore"
-                  v-if="data.bands"
                 />
                 <v-flex xs12 sm6 md4 lg3>
                   <v-layout column>
                     <list
-                      :model="data.states"
+                      :model="states || []"
                       title="filters.state"
                       type="state"
                       :toggleIgnore="toggleIgnore"
-                      v-if="data.states"
                     />
                     <list
-                      :model="data.municipalities"
+                      :model="municipalities || []"
                       title="filters.municipality"
                       type="municipality"
                       :toggleIgnore="toggleIgnore"
-                      v-if="data.municipalities"
                     />
                     <list
-                      :model="data.cities"
+                      :model="cities || []"
                       title="filters.city"
                       type="city"
                       :toggleIgnore="toggleIgnore"
-                      v-if="data.cities"
                     />
                     <list
-                      :model="data.danceHalls"
+                      :model="danceHalls || []"
                       title="filters.hall"
                       type="danceHall"
                       :toggleIgnore="toggleIgnore"
-                      v-if="data.danceHalls"
                     />
                   </v-layout>
                 </v-flex>
@@ -74,8 +69,8 @@ import {
 } from '~/utils/graph-client'
 
 import List from './List'
-import { useMutation, useQuery } from '../../../plugins/apollo'
-import useAuth from '../../../plugins/auth'
+import { useMutation, useQuery, useResult } from '../../../plugins/apollo'
+import { useAuth } from '../../../plugins/auth'
 import { useTranslation } from '../../../plugins/i18n'
 
 export default {
@@ -88,6 +83,11 @@ export default {
     setTitle(t('app.links.filters'))
     const { isAuthenticated } = useAuth()
     const { data, loading, refetch } = useQuery(fetchFilters)
+    const bands = useResult(data, [], data => data.bands)
+    const cities = useResult(data, [], data => data.cities)
+    const danceHalls = useResult(data, [], data => data.danceHalls)
+    const municipalities = useResult(data, [], data => data.municipalities)
+    const states = useResult(data, [], data => data.states)
     const snackbar = ref({ active: false, color: 'success', text: '' })
     const [doToggleIgnoreBand] = useMutation(toggleIgnoreBand)
     const [doToggleIgnoreDanceHall] = useMutation(toggleIgnoreDanceHall)
@@ -97,7 +97,7 @@ export default {
 
     const toggleIgnoreSuccess = name => {
       return () => {
-        refetch.value()
+        refetch()
         snackbar.value.color = 'success'
         snackbar.value.text = t('filters.success', { name })
         snackbar.value.active = true
@@ -146,7 +146,11 @@ export default {
     return {
       isAuthenticated,
       loading,
-      data,
+      bands,
+      danceHalls,
+      cities,
+      municipalities,
+      states,
       snackbar,
       toggleIgnore
     }

components/pages/origins/index.vue

@@ -30,8 +30,8 @@
           </v-text-field>
         </v-flex>
       </v-layout>
-      <template v-if="data && data.origins">
-        <v-layout row wrap v-for="origin in data.origins" :key="origin">
+      <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 }">
@@ -65,8 +65,8 @@ import {
   removeOrigin,
   saveOrigin
 } from '../../../utils/graph-client'
-import { useLazyQuery, useMutation, useQuery } from '../../../plugins/apollo'
-import useAuth from '../../../plugins/auth'
+import { useLazyQuery, useMutation, useQuery, useResult } from '../../../plugins/apollo'
+import { useAuth } from '../../../plugins/auth'
 import { useTranslation } from '../../../plugins/i18n'
 
 export default {
@@ -76,10 +76,11 @@ export default {
     setTitle(t('app.links.origins'))
     const { isAuthenticated } = useAuth()
     const { data, loading, refetch } = useQuery(findOrigins)
+    const origins = useResult(data, [])
     const snackbar = ref({ active: false, color: 'success', text: '' })
     const [doSaveOrigin] = useMutation(saveOrigin)
     const [doRemoveOrigin] = useMutation(removeOrigin)
-    const [doFetchAddress, { data: address }] = useLazyQuery(fetchAddress)
+    const [doFetchAddress] = useLazyQuery(fetchAddress)
     const origin = ref('')
     const fetchAddressFn = () => {
       if (window.navigator) {
@@ -88,23 +89,23 @@ export default {
             variables: {
               latlng: `${pos.coords.latitude},${pos.coords.longitude}`
             }
-          }).then(() => {
-            origin.value = address.value.address
+          }).then(res => {
+            origin.value = res.address
           })
         })
       }
     }
     const saveOriginFn = o =>
       doSaveOrigin({ variables: { origin: o } }).then(() => {
-        refetch.value()
+        refetch()
         origin.value = ''
       })
     const removeOriginFn = o =>
-      doRemoveOrigin({ variables: { origin: o } }).then(() => refetch.value())
+      doRemoveOrigin({ variables: { origin: o } }).then(() => refetch())
     return {
       isAuthenticated,
       loading,
-      data,
+      origins,
       snackbar,
       origin,
       saveOrigin: saveOriginFn,