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>