chore: add eslint and fix lint errors

.eslintrc.js

@@ -0,0 +1,37 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: [
+    'airbnb-base',
+    "plugin:vue/recommended",
+    "eslint:recommended",
+    "prettier/vue",
+    "plugin:prettier/recommended",
+  ],
+  globals: {
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly',
+  },
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  plugins: [
+    'vue',
+  ],
+  rules: {
+    'import/extensions': 0,
+    'import/no-unresolved': 0,
+    'no-param-reassign': 0,
+    'prettier/prettier': [
+      'error',
+      {
+        trailingComma: 'none',
+        singleQuote: true,
+        semi: false
+      }
+    ],
+  },
+};

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

Dockerfile

@@ -1,4 +1,4 @@
-FROM cypress/base:10 as builder
+FROM cypress/base:12.14.0 as builder
 
 WORKDIR /build
 

components/common/app-lazy-background/index.vue

@@ -16,10 +16,9 @@ export default {
       default: f => f
     }
   }
-};
+}
 </script>
 
-
 <style lang="scss" scoped>
 .image {
   height: 100%;
@@ -32,7 +31,7 @@ export default {
   transition: opacity 300ms ease;
   will-change: opacity;
 
-  &[lazy="loaded"] {
+  &[lazy='loaded'] {
     opacity: 1;
   }
 }

components/common/app-loader/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div :class="{ 'is-shown': show, 'is-contained': contained }" class="cover">
     <ul class="loader">
-      <li/>
-      <li/>
-      <li/>
-      <li/>
-      <li/>
-      <li/>
+      <li />
+      <li />
+      <li />
+      <li />
+      <li />
+      <li />
     </ul>
   </div>
 </template>
@@ -25,7 +25,7 @@ export default {
       default: false
     }
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -94,4 +94,3 @@ export default {
   }
 }
 </style>
-

components/common/app-message/index.vue

@@ -6,7 +6,7 @@
       </div>
       <h3>{{ message }}</h3>
       <p>{{ description }}</p>
-      <slot name="extras"/>
+      <slot name="extras" />
     </div>
   </div>
 </template>
@@ -21,13 +21,12 @@ export default {
     description: {
       type: String,
       required: false,
-      default: ""
+      default: ''
     }
   }
-};
+}
 </script>
 
-
 <style lang="scss" scoped>
 .message-container {
   margin: 10vh auto;
@@ -52,4 +51,3 @@ export default {
   }
 }
 </style>
-

components/pages/events/Event/index.vue

@@ -1,29 +1,87 @@
 <template>
   <v-card xs12>
     <v-card-title primary-title>
-      <h3 class="headline mb-0"><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('band', event.band.name)" medium title="Dölj">mdi-eye-off</v-icon>{{event.band.name}}</h3>
+      <h3 class="headline mb-0">
+        <v-icon
+          class="ml-1 mr-1"
+          v-if="hasUser"
+          v-on:click="toggleIgnore('band', event.band.name)"
+          medium
+          title="Dölj"
+          >mdi-eye-off</v-icon
+        >{{ event.band.name }}
+      </h3>
     </v-card-title>
     <v-container>
       <v-layout row wrap>
-        <v-flex xs12 sm6><strong class="mr-1" v-text="$t('events.date')" />{{event.date}} ({{ weekday }} {{ daysUntil }})</v-flex>
-        <v-flex xs12 sm6 v-if="event.time"><strong class="mr-1" v-text="$t('events.time')" />{{event.time}}</v-flex>
+        <v-flex xs12 sm6
+          ><strong class="mr-1" v-text="$t('events.date')" />{{
+            event.date
+          }}
+          ({{ weekday }} {{ daysUntil }})</v-flex
+        >
+        <v-flex xs12 sm6 v-if="event.time"
+          ><strong class="mr-1" v-text="$t('events.time')" />{{
+            event.time
+          }}</v-flex
+        >
       </v-layout>
       <v-layout row wrap>
-        <v-flex xs12 sm6 md3><strong class="mr-1" v-text="$t('events.hall')" /><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('danceHall', event.danceHall.name)" small :title="$t('events.hide')">mdi-eye-off</v-icon>{{event.danceHall.name}}</v-flex>
-        <v-flex xs12 sm6 md3><strong class="mr-1" v-text="$t('events.city')" /><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('city', event.danceHall.city)" small :title="$t('events.hide')">mdi-eye-off</v-icon>{{event.danceHall.city}}</v-flex>
-        <v-flex xs12 sm6 md3><strong class="mr-1" v-text="$t('events.municipality')" /><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('municipality', event.danceHall.municipality)" small :title="$t('events.hide')">mdi-eye-off</v-icon>{{event.danceHall.municipality}}</v-flex>
-        <v-flex xs12 sm6 md3><strong class="mr-1" v-text="$t('events.state')" /><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('state', event.danceHall.state)" small :title="$t('events.hide')">mdi-eye-off</v-icon>{{event.danceHall.state}}</v-flex>
+        <v-flex xs12 sm6 md3
+          ><strong class="mr-1" v-text="$t('events.hall')" /><v-icon
+            class="ml-1 mr-1"
+            v-if="hasUser"
+            v-on:click="toggleIgnore('danceHall', event.danceHall.name)"
+            small
+            :title="$t('events.hide')"
+            >mdi-eye-off</v-icon
+          >{{ event.danceHall.name }}</v-flex
+        >
+        <v-flex xs12 sm6 md3
+          ><strong class="mr-1" v-text="$t('events.city')" /><v-icon
+            class="ml-1 mr-1"
+            v-if="hasUser"
+            v-on:click="toggleIgnore('city', event.danceHall.city)"
+            small
+            :title="$t('events.hide')"
+            >mdi-eye-off</v-icon
+          >{{ event.danceHall.city }}</v-flex
+        >
+        <v-flex xs12 sm6 md3
+          ><strong class="mr-1" v-text="$t('events.municipality')" /><v-icon
+            class="ml-1 mr-1"
+            v-if="hasUser"
+            v-on:click="
+              toggleIgnore('municipality', event.danceHall.municipality)
+            "
+            small
+            :title="$t('events.hide')"
+            >mdi-eye-off</v-icon
+          >{{ event.danceHall.municipality }}</v-flex
+        >
+        <v-flex xs12 sm6 md3
+          ><strong class="mr-1" v-text="$t('events.state')" /><v-icon
+            class="ml-1 mr-1"
+            v-if="hasUser"
+            v-on:click="toggleIgnore('state', event.danceHall.state)"
+            small
+            :title="$t('events.hide')"
+            >mdi-eye-off</v-icon
+          >{{ event.danceHall.state }}</v-flex
+        >
       </v-layout>
-      <v-layout row wrap v-for="distance in event.distances" :key="event.origin">
+      <v-layout row wrap v-for="distance in event.distances" :key="distance">
         <v-flex xs12 sm6>
           <v-icon>mdi-home</v-icon>
-          <span><strong>{{distance.origin}}</strong></span>
+          <span
+            ><strong>{{ distance.origin }}</strong></span
+          >
         </v-flex>
         <v-flex xs12 sm6>
           <v-icon>mdi-car</v-icon>
-          <span>{{distance.distance / 1000 | numeral('0,0.00')}} km</span>
+          <span>{{ (distance.distance / 1000) | numeral('0,0.00') }} km</span>
           <v-icon>mdi-clock-outline</v-icon>
-          <span>{{distance.duration}}</span>
+          <span>{{ distance.duration }}</span>
         </v-flex>
       </v-layout>
     </v-container>
@@ -31,31 +89,31 @@
 </template>
 
 <script>
-  import dayjs from 'dayjs'
+import dayjs from 'dayjs'
 
-  export default {
-    props: {
-      event: {
-        type: Object,
-        required: true
-      },
-      hasUser: {
-        type: Boolean,
-        required: true
-      },
-      toggleIgnore: {
-        type: Function,
-        required: true
-      }
+export default {
+  props: {
+    event: {
+      type: Object,
+      required: true
     },
-    setup(props) {
-      const time = (props.event.time || '').split('-')[0].replace('.', ':')
-      const weekday = dayjs(props.event.date).format('dddd')
-      const daysUntil = dayjs(`${props.event.date} ${time}`).fromNow()
-      return {
-        weekday,
-        daysUntil
-      }
+    hasUser: {
+      type: Boolean,
+      required: true
     },
-  };
+    toggleIgnore: {
+      type: Function,
+      required: true
+    }
+  },
+  setup(props) {
+    const time = (props.event.time || '').split('-')[0].replace('.', ':')
+    const weekday = dayjs(props.event.date).format('dddd')
+    const daysUntil = dayjs(`${props.event.date} ${time}`).fromNow()
+    return {
+      weekday,
+      daysUntil
+    }
+  }
+}
 </script>

components/pages/events/List/index.vue

@@ -1,19 +1,23 @@
 <template>
-  <div>
-    <v-layout row wrap v-for="event in events.events" :key="event.id" v-if="events && events.events">
+  <div v-if="events && events.events">
+    <v-layout row wrap v-for="event in events.events" :key="event.id">
       <v-flex xs12>
-        <Event :event="event" :has-user="hasUser" :toggleIgnore="toggleIgnore"/>
+        <Event
+          :event="event"
+          :has-user="hasUser"
+          :toggleIgnore="toggleIgnore"
+        />
       </v-flex>
     </v-layout>
   </div>
 </template>
 
 <script>
-import Event from '../Event';
+import Event from '../Event'
 
 export default {
   components: {
-    Event,
+    Event
   },
   props: {
     hasUser: {
@@ -27,7 +31,7 @@ export default {
     events: {
       type: Object,
       required: true
-    },
-  },
+    }
+  }
 }
 </script>

components/pages/events/index.vue

@@ -3,40 +3,68 @@
     <v-container fluid grid-list-md class="app-fade-in" :key="range">
       <v-layout row wrap v-if="!isAuthenticated">
         <v-flex xs12>
-          <p><b v-text="$t('events.login')"/></p>
+          <p><b v-text="$t('events.login')" /></p>
         </v-flex>
       </v-layout>
       <v-layout row wrap>
         <v-flex xs12>
           <v-text-field
-              v-model="origin"
-              :label="$t('origins.origin')"
-              :placeholder="$t('origins.geolocation')"
+            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()">mdi-crosshairs-gps</v-icon>
+                <v-icon v-on="on" v-on:click="fetchAddress()"
+                  >mdi-crosshairs-gps</v-icon
+                >
               </template>
-              <span v-text="$t('origins.fetchAddress')"/>
+              <span v-text="$t('origins.fetchAddress')" />
             </v-tooltip>
             <v-tooltip top slot="prepend" v-if="isAuthenticated">
               <template v-slot:activator="{ on }">
-                <v-icon v-on="on" :disabled="!origin" v-on:click="saveOrigin(origin)">mdi-bookmark-plus-outline</v-icon>
+                <v-icon
+                  v-on="on"
+                  :disabled="!origin"
+                  v-on:click="saveOrigin(origin)"
+                  >mdi-bookmark-plus-outline</v-icon
+                >
               </template>
-              <span v-text="$t('origins.save')"/>
+              <span v-text="$t('origins.save')" />
             </v-tooltip>
           </v-text-field>
         </v-flex>
       </v-layout>
       <v-layout row wrap>
         <v-flex>
-          <v-btn-toggle v-if="$vuetify.breakpoint.smAndUp" v-model="range" mandatory>
-            <v-btn text v-for="r in ranges" :key="r.value" :value="r.value" v-text="$t(`events.range.${r.value}`)"/>
+          <v-btn-toggle
+            v-if="$vuetify.breakpoint.smAndUp"
+            v-model="range"
+            mandatory
+          >
+            <v-btn
+              text
+              v-for="r in ranges"
+              :key="r.value"
+              :value="r.value"
+              v-text="$t(`events.range.${r.value}`)"
+            />
           </v-btn-toggle>
-          <v-select outline v-if="$vuetify.breakpoint.xsOnly" v-model="range" :items="ranges" item-text="name" item-value="value"/>
+          <v-select
+            outline
+            v-if="$vuetify.breakpoint.xsOnly"
+            v-model="range"
+            :items="ranges"
+            item-text="name"
+            item-value="value"
+          />
         </v-flex>
       </v-layout>
-      <list :events="data" :has-user="isAuthenticated" :toggleIgnore="toggleIgnore" />
+      <list
+        :events="data"
+        :has-user="isAuthenticated"
+        :toggleIgnore="toggleIgnore"
+      />
     </v-container>
     <v-snackbar
       v-model="snackbar.active"
@@ -49,203 +77,215 @@
 </template>
 
 <script>
-  import { useAuth } from '../../../plugins/auth'
+import { useRouter, useMutations } from '@u3u/vue-hooks'
+import { computed, ref, watch } from '@vue/composition-api'
+import useAuth from '../../../plugins/auth'
 
-  import List from './List'
-  import { useRouter, useMutations } from '@u3u/vue-hooks'
-  import { computed, ref, watch } from '@vue/composition-api'
-  import { useLazyQuery, useMutation } from '../../../plugins/apollo'
-  import {
-    fetchAddress,
-    findEvents,
-    saveOrigin,
-    toggleIgnoreBand,
-    toggleIgnoreCity,
-    toggleIgnoreDanceHall,
-    toggleIgnoreMunicipality,
-    toggleIgnoreState
-  } from '../../../utils/graph-client'
-  import { useTranslation } from '../../../plugins/i18n'
+import List from './List'
+import { useLazyQuery, useMutation } from '../../../plugins/apollo'
+import {
+  fetchAddress,
+  findEvents,
+  saveOrigin,
+  toggleIgnoreBand,
+  toggleIgnoreCity,
+  toggleIgnoreDanceHall,
+  toggleIgnoreMunicipality,
+  toggleIgnoreState
+} from '../../../utils/graph-client'
+import { useTranslation } from '../../../plugins/i18n'
 
-  export default {
-    components: {
-      List
-    },
-    setup() {
-      const { setTitle } = useMutations(['setTitle'])
-      const { t } = useTranslation();
-      setTitle(t('app.links.events'))
-      const { loading: authLoading, isAuthenticated } = useAuth()
-      const { route, router } = useRouter();
-      const range = computed({get: () => route.value.query.range || 'ONE_WEEK', set: value => router.push(`/?range=${value}`)})
-      const [query, { loading, data, error, refetch }] = useLazyQuery(findEvents)
-      watch(() => range.value, (r, o) => {
+export default {
+  components: {
+    List
+  },
+  setup() {
+    const { setTitle } = useMutations(['setTitle'])
+    const { t } = useTranslation()
+    setTitle(t('app.links.events'))
+    const { loading: authLoading, isAuthenticated } = useAuth()
+    const { route, router } = useRouter()
+    const range = computed({
+      get: () => route.value.query.range || 'ONE_WEEK',
+      set: value => router.push(`/?range=${value}`)
+    })
+    const [query, { data }] = useLazyQuery(findEvents)
+    watch(
+      () => range.value,
+      r => {
         query({
           variables: {
             range: r,
             includeOrigins: isAuthenticated.value
           }
         })
-      }, { lazy: false})
-      const submitting = ref(true)
-      const ranges = [
-        { name: '1 vecka', value: 'ONE_WEEK' },
-        { name: '2 veckor', value: 'TWO_WEEKS' },
-        { name: '1 månad', value: 'ONE_MONTH' },
-        { name: '1 kvartal', value: 'ONE_QUARTER' },
-        { name: '1 år', value: 'ONE_YEAR' }
-      ]
-      const snackbar = ref({ active: false, color: 'success', text: '' })
+      },
+      { lazy: false }
+    )
+    const submitting = ref(true)
+    const ranges = [
+      { name: '1 vecka', value: 'ONE_WEEK' },
+      { name: '2 veckor', value: 'TWO_WEEKS' },
+      { name: '1 månad', value: 'ONE_MONTH' },
+      { name: '1 kvartal', value: 'ONE_QUARTER' },
+      { name: '1 år', value: 'ONE_YEAR' }
+    ]
+    const snackbar = ref({ active: false, color: 'success', text: '' })
 
-      const origin = ref('')
-      const fetchEvents = () => {
-        const origins = [...(data.value.origins || [])]
-        if (origin.value) {
-          origins.push(origin.value)
+    const origin = ref('')
+    const fetchEvents = () => {
+      const origins = [...(data.value.origins || [])]
+      if (origin.value) {
+        origins.push(origin.value)
+      }
+      query({
+        variables: {
+          range: range.value,
+          origins,
+          includeOrigins: isAuthenticated.value || false
         }
-        query({
-          variables: {
-            range: range.value,
-            origins,
-            includeOrigins: (isAuthenticated.value || false)
-          }
+      })
+    }
+
+    const [doToggleIgnoreBand] = useMutation(toggleIgnoreBand)
+    const [doToggleIgnoreDanceHall] = useMutation(toggleIgnoreDanceHall)
+    const [doToggleIgnoreCity] = useMutation(toggleIgnoreCity)
+    const [doToggleIgnoreMunicipality] = useMutation(toggleIgnoreMunicipality)
+    const [doToggleIgnoreState] = useMutation(toggleIgnoreState)
+
+    const toggleIgnoreSuccess = name => {
+      return () => {
+        fetchEvents()
+        snackbar.value.color = 'success'
+        snackbar.value.text = `${name} har dolts`
+        snackbar.value.active = true
+      }
+    }
+
+    const toggleIgnoreFailed = name => {
+      return () => {
+        snackbar.value.color = 'error'
+        snackbar.value.text = `${name} kunde inte döljas`
+        snackbar.value.active = true
+      }
+    }
+
+    const toggleIgnore = (type, name) => {
+      switch (type) {
+        case 'band':
+          doToggleIgnoreBand({ variables: { name } })
+            .then(toggleIgnoreSuccess(name))
+            .catch(toggleIgnoreFailed)
+          break
+        case 'danceHall':
+          doToggleIgnoreDanceHall({ variables: { name } })
+            .then(toggleIgnoreSuccess(name))
+            .catch(toggleIgnoreFailed)
+          break
+        case 'city':
+          doToggleIgnoreCity({ variables: { name } })
+            .then(toggleIgnoreSuccess(name))
+            .catch(toggleIgnoreFailed)
+          break
+        case 'municipality':
+          doToggleIgnoreMunicipality({ variables: { name } })
+            .then(toggleIgnoreSuccess(name))
+            .catch(toggleIgnoreFailed)
+          break
+        case 'state':
+          doToggleIgnoreState({ variables: { name } })
+            .then(toggleIgnoreSuccess(name))
+            .catch(toggleIgnoreFailed)
+          break
+        default:
+      }
+    }
+
+    const [doSaveOrigin] = useMutation(saveOrigin)
+    const [doFetchAddress, { data: address }] = useLazyQuery(fetchAddress)
+    const fetchAddressFn = () => {
+      if (window.navigator) {
+        window.navigator.geolocation.getCurrentPosition(pos => {
+          doFetchAddress({
+            variables: {
+              latlng: `${pos.coords.latitude},${pos.coords.longitude}`
+            }
+          }).then(() => {
+            origin.value = address.value.address
+          })
         })
       }
-
-      const [doToggleIgnoreBand, {loading: ignoringBand, error: errorIgnoreBand}] = useMutation(toggleIgnoreBand)
-      const [doToggleIgnoreDanceHall, {loading: ignoringDanceHall, error: errorIgnoreDanceHall}] = useMutation(toggleIgnoreDanceHall)
-      const [doToggleIgnoreCity, {loading: ignoringCity, error: errorIgnoreCity}] = useMutation(toggleIgnoreCity)
-      const [doToggleIgnoreMunicipality, {loading: ignoringMunicipality, error: errorIgnoreMunicipality}] = useMutation(toggleIgnoreMunicipality)
-      const [doToggleIgnoreState, {loading: ignoringState, error: errorIgnoreState}] = useMutation(toggleIgnoreState)
-
-      const toggleIgnoreSuccess = (name) => {
-        return () => {
-          fetchEvents();
-          snackbar.value.color = 'success';
-          snackbar.value.text = `${name} har dolts`;
-          snackbar.value.active = true;
-        }
-      }
-
-      const toggleIgnoreFailed = (name) => {
-        return () => {
-          snackbar.value.color = 'error';
-          snackbar.value.text = `${name} kunde inte döljas`;
-          snackbar.value.active = true;
-        }
-      }
-
-      const toggleIgnore = (type, name) => {
-        switch (type) {
-          case 'band':
-            doToggleIgnoreBand({ variables: { name: name } })
-              .then(toggleIgnoreSuccess(name))
-              .catch(toggleIgnoreFailed);
-            break;
-          case 'danceHall':
-            doToggleIgnoreDanceHall({ variables: { name: name } })
-              .then(toggleIgnoreSuccess(name))
-              .catch(toggleIgnoreFailed);
-            break;
-          case 'city':
-            doToggleIgnoreCity({ variables: { name: name } })
-              .then(toggleIgnoreSuccess(name))
-              .catch(toggleIgnoreFailed);
-            break;
-          case 'municipality':
-            doToggleIgnoreMunicipality({ variables: { name: name } })
-              .then(toggleIgnoreSuccess(name))
-              .catch(toggleIgnoreFailed);
-            break;
-          case 'state':
-            doToggleIgnoreState({ variables: { name: name } })
-              .then(toggleIgnoreSuccess(name))
-              .catch(toggleIgnoreFailed);
-            break;
-        }
-      }
-
-      const [doSaveOrigin, {loading: savingOrigin, error: errorSaveOrigin}] = useMutation(saveOrigin)
-      const [doFetchAddress, {data: address, loading: fetchingAddress, error: errorFetchingAddress}] = useLazyQuery(fetchAddress)
-      const fetchAddressFn = () => {
-        if (window.navigator) {
-          window.navigator.geolocation.getCurrentPosition(pos => {
-            doFetchAddress({variables: {latlng: pos.coords.latitude + "," + pos.coords.longitude}})
-              .then(() => {
-                origin.value = address.value.address;
-              })
-          })
-        }
-      }
-      const saveOriginFn = o => doSaveOrigin({variables: { origin: o }}).then(() => {
+    }
+    const saveOriginFn = o =>
+      doSaveOrigin({ variables: { origin: o } }).then(() => {
         origin.value = ''
         fetchEvents()
       })
 
-      return {
-        authLoading,
-        isAuthenticated,
-        range,
-        data,
-        query: fetchEvents,
-        submitting,
-        ranges,
-        snackbar,
-        toggleIgnore,
-        origin,
-        fetchAddress: fetchAddressFn,
-        saveOrigin: saveOriginFn
-      }
-    },
-  };
+    return {
+      authLoading,
+      isAuthenticated,
+      range,
+      data,
+      query: fetchEvents,
+      submitting,
+      ranges,
+      snackbar,
+      toggleIgnore,
+      origin,
+      fetchAddress: fetchAddressFn,
+      saveOrigin: saveOriginFn
+    }
+  }
+}
 </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 {
-    padding: 1.5rem 1rem;
-
-    > * {
-      margin-bottom: 1.5rem;
-    }
-
-    hr {
-      border: 0;
-      border-top: 1px solid #eaeaea;
-    }
+    width: 40vw;
   }
-
-  .left,
   .right {
-    height: 100vh;
-    overflow: scroll;
-    overflow-x: hidden;
-    position: relative;
+    width: 60vw;
   }
+}
 
-  @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(max-width: 1024px) {
-    .left {
-      width: 50vw;
-    }
-    .right {
-      width: 50vw;
-    }
+@media screen and(min-width: 1200px) {
+  .left {
+    width: 35vw;
   }
-
-  @media screen and(min-width: 1200px) {
-    .left {
-      width: 35vw;
-    }
-    .right {
-      width: 65vw;
-    }
+  .right {
+    width: 65vw;
   }
+}
 </style>

components/pages/filters/List/index.vue

@@ -2,7 +2,7 @@
   <v-flex xs12 sm6 md4 lg3>
     <v-card>
       <v-card-title>
-        <span v-text="$tc(title, model.length)"/>
+        <span v-text="$tc(title, model.length)" />
       </v-card-title>
       <v-list>
         <v-list-item v-for="item in model" :key="item">
@@ -11,10 +11,10 @@
               <template v-slot:activator="{ on }">
                 <v-icon v-on="on">mdi-delete-outline</v-icon>
               </template>
-              <span v-text="$t('filters.remove')"/>
+              <span v-text="$t('filters.remove')" />
             </v-tooltip>
           </v-list-item-action>
-          <v-list-item-title v-html="item"/>
+          <v-list-item-title v-html="item" />
         </v-list-item>
       </v-list>
     </v-card>
@@ -22,24 +22,24 @@
 </template>
 
 <script>
-  export default {
-    props: {
-      model: {
-        type: Array,
-        required: true
-      },
-      title: {
-        type: String,
-        required: true
-      },
-      type: {
-        type: String,
-        required: true
-      },
-      toggleIgnore: {
-        type: Function,
-        required: true
-      }
+export default {
+  props: {
+    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

@@ -4,18 +4,45 @@
       <v-layout row wrap>
         <v-flex xs12>
           <v-card>
-            <v-container
-                fluid
-                grid-list-md
-            >
+            <v-container fluid grid-list-md>
               <v-layout row wrap v-if="!loading && data">
-                <list :model="data.bands" title="filters.band" type="band" :toggleIgnore="toggleIgnore" v-if="data.bands"/>
+                <list
+                  :model="data.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" title="filters.state" type="state" :toggleIgnore="toggleIgnore" v-if="data.states"/>
-                    <list :model="data.municipalities" title="filters.municipality" type="municipality" :toggleIgnore="toggleIgnore" v-if="data.municipalities"/>
-                    <list :model="data.cities" title="filters.city" type="city" :toggleIgnore="toggleIgnore" v-if="data.cities"/>
-                    <list :model="data.danceHalls" title="filters.hall" type="danceHall" :toggleIgnore="toggleIgnore" v-if="data.danceHalls"/>
+                    <list
+                      :model="data.states"
+                      title="filters.state"
+                      type="state"
+                      :toggleIgnore="toggleIgnore"
+                      v-if="data.states"
+                    />
+                    <list
+                      :model="data.municipalities"
+                      title="filters.municipality"
+                      type="municipality"
+                      :toggleIgnore="toggleIgnore"
+                      v-if="data.municipalities"
+                    />
+                    <list
+                      :model="data.cities"
+                      title="filters.city"
+                      type="city"
+                      :toggleIgnore="toggleIgnore"
+                      v-if="data.cities"
+                    />
+                    <list
+                      :model="data.danceHalls"
+                      title="filters.hall"
+                      type="danceHall"
+                      :toggleIgnore="toggleIgnore"
+                      v-if="data.danceHalls"
+                    />
                   </v-layout>
                 </v-flex>
               </v-layout>
@@ -35,93 +62,94 @@
 </template>
 
 <script>
-  import {
-    fetchFilters,
-    toggleIgnoreBand,
-    toggleIgnoreCity,
-    toggleIgnoreDanceHall,
-    toggleIgnoreMunicipality,
-    toggleIgnoreState,
-  } from "~/utils/graph-client";
+import { ref } from '@vue/composition-api'
+import { useMutations } from '@u3u/vue-hooks'
+import {
+  fetchFilters,
+  toggleIgnoreBand,
+  toggleIgnoreCity,
+  toggleIgnoreDanceHall,
+  toggleIgnoreMunicipality,
+  toggleIgnoreState
+} from '~/utils/graph-client'
 
-  import List from "./List";
-  import { useMutation, useQuery } from '../../../plugins/apollo'
-  import { ref } from '@vue/composition-api'
-  import { useAuth } from '../../../plugins/auth'
-  import { useMutations } from '@u3u/vue-hooks'
-  import { useTranslation } from '../../../plugins/i18n'
+import List from './List'
+import { useMutation, useQuery } from '../../../plugins/apollo'
+import useAuth from '../../../plugins/auth'
+import { useTranslation } from '../../../plugins/i18n'
 
-  export default {
-    components: {
-      List
-    },
-    setup() {
-      const { setTitle } = useMutations(['setTitle'])
-      const { t } = useTranslation();
-      setTitle(t('app.links.filters'))
-      const { loading: authLoading, isAuthenticated } = useAuth()
-      const {data, loading, error, refetch} = useQuery(fetchFilters)
-      const snackbar = ref({ active: false, color: 'success', text: '' })
-      const [doToggleIgnoreBand, {loading: ignoringBand, error: errorIgnoreBand}] = useMutation(toggleIgnoreBand)
-      const [doToggleIgnoreDanceHall, {loading: ignoringDanceHall, error: errorIgnoreDanceHall}] = useMutation(toggleIgnoreDanceHall)
-      const [doToggleIgnoreCity, {loading: ignoringCity, error: errorIgnoreCity}] = useMutation(toggleIgnoreCity)
-      const [doToggleIgnoreMunicipality, {loading: ignoringMunicipality, error: errorIgnoreMunicipality}] = useMutation(toggleIgnoreMunicipality)
-      const [doToggleIgnoreState, {loading: ignoringState, error: errorIgnoreState}] = useMutation(toggleIgnoreState)
+export default {
+  components: {
+    List
+  },
+  setup() {
+    const { setTitle } = useMutations(['setTitle'])
+    const { t } = useTranslation()
+    setTitle(t('app.links.filters'))
+    const { isAuthenticated } = useAuth()
+    const { data, loading, refetch } = useQuery(fetchFilters)
+    const snackbar = ref({ active: false, color: 'success', text: '' })
+    const [doToggleIgnoreBand] = useMutation(toggleIgnoreBand)
+    const [doToggleIgnoreDanceHall] = useMutation(toggleIgnoreDanceHall)
+    const [doToggleIgnoreCity] = useMutation(toggleIgnoreCity)
+    const [doToggleIgnoreMunicipality] = useMutation(toggleIgnoreMunicipality)
+    const [doToggleIgnoreState] = useMutation(toggleIgnoreState)
 
-      const toggleIgnoreSuccess = (name) => {
-        return () => {
-          refetch.value();
-          snackbar.value.color = 'success';
-          snackbar.value.text = t('filters.success', { name });
-          snackbar.value.active = true;
-        }
-      }
-
-      const toggleIgnoreFailed = (name) => {
-        return () => {
-          snackbar.value.color = 'error';
-          snackbar.value.text = t('filters.failure', { name });
-          snackbar.value.active = true;
-        }
-      }
-
-      const toggleIgnore = (type, name) => {
-        switch (type) {
-          case 'band':
-            doToggleIgnoreBand({ variables: { name: name } })
-              .then(toggleIgnoreSuccess(name))
-              .catch(toggleIgnoreFailed);
-            break;
-          case 'danceHall':
-            doToggleIgnoreDanceHall({ variables: { name: name } })
-              .then(toggleIgnoreSuccess(name))
-              .catch(toggleIgnoreFailed);
-            break;
-          case 'city':
-            doToggleIgnoreCity({ variables: { name: name } })
-              .then(toggleIgnoreSuccess(name))
-              .catch(toggleIgnoreFailed);
-            break;
-          case 'municipality':
-            doToggleIgnoreMunicipality({ variables: { name: name } })
-              .then(toggleIgnoreSuccess(name))
-              .catch(toggleIgnoreFailed);
-            break;
-          case 'state':
-            doToggleIgnoreState({ variables: { name: name } })
-              .then(toggleIgnoreSuccess(name))
-              .catch(toggleIgnoreFailed);
-            break;
-        }
-      }
-
-      return {
-        isAuthenticated,
-        loading,
-        data,
-        snackbar,
-        toggleIgnore
+    const toggleIgnoreSuccess = name => {
+      return () => {
+        refetch.value()
+        snackbar.value.color = 'success'
+        snackbar.value.text = t('filters.success', { name })
+        snackbar.value.active = true
       }
     }
+
+    const toggleIgnoreFailed = name => {
+      return () => {
+        snackbar.value.color = 'error'
+        snackbar.value.text = t('filters.failure', { name })
+        snackbar.value.active = true
+      }
+    }
+
+    const toggleIgnore = (type, name) => {
+      switch (type) {
+        case 'band':
+          doToggleIgnoreBand({ variables: { name } })
+            .then(toggleIgnoreSuccess(name))
+            .catch(toggleIgnoreFailed)
+          break
+        case 'danceHall':
+          doToggleIgnoreDanceHall({ variables: { name } })
+            .then(toggleIgnoreSuccess(name))
+            .catch(toggleIgnoreFailed)
+          break
+        case 'city':
+          doToggleIgnoreCity({ variables: { name } })
+            .then(toggleIgnoreSuccess(name))
+            .catch(toggleIgnoreFailed)
+          break
+        case 'municipality':
+          doToggleIgnoreMunicipality({ variables: { name } })
+            .then(toggleIgnoreSuccess(name))
+            .catch(toggleIgnoreFailed)
+          break
+        case 'state':
+          doToggleIgnoreState({ variables: { name } })
+            .then(toggleIgnoreSuccess(name))
+            .catch(toggleIgnoreFailed)
+          break
+        default:
+      }
+    }
+
+    return {
+      isAuthenticated,
+      loading,
+      data,
+      snackbar,
+      toggleIgnore
+    }
   }
+}
 </script>

components/pages/origins/index.vue

@@ -4,36 +4,47 @@
       <v-layout row wrap>
         <v-flex xs12>
           <v-text-field
-              v-model="origin"
-              :label="$t('origins.origin')"
-              :placeholder="$t('origins.geolocation')"
+            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()">mdi-crosshairs-gps</v-icon>
+                <v-icon v-on="on" v-on:click="fetchAddress()"
+                  >mdi-crosshairs-gps</v-icon
+                >
               </template>
-              <span v-text="$t('origins.fetchAddress')"/>
+              <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)">mdi-bookmark-plus-outline</v-icon>
+                <v-icon
+                  v-on="on"
+                  :disabled="!origin"
+                  v-on:click="saveOrigin(origin)"
+                  >mdi-bookmark-plus-outline</v-icon
+                >
               </template>
-              <span v-text="$t('origins.save')"/>
+              <span v-text="$t('origins.save')" />
             </v-tooltip>
           </v-text-field>
         </v-flex>
       </v-layout>
-      <v-layout row wrap v-for="origin in data.origins" :key="origin" v-if="data && data.origins">
-        <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-if="data && data.origins">
+        <v-layout row wrap v-for="origin in data.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-container>
     <v-snackbar
       v-model="snackbar.active"
@@ -46,55 +57,60 @@
 </template>
 
 <script>
-  import {
-    findOrigins,
-    saveOrigin,
-    removeOrigin,
-    fetchAddress,
-  } from "../../../utils/graph-client";
-  import { useLazyQuery, useMutation, useQuery } from '../../../plugins/apollo'
-  import { ref } from '@vue/composition-api'
-  import { useAuth } from '../../../plugins/auth'
-  import { useMutations } from '@u3u/vue-hooks'
-  import { useTranslation } from '../../../plugins/i18n'
+import { ref } from '@vue/composition-api'
+import { useMutations } from '@u3u/vue-hooks'
+import {
+  fetchAddress,
+  findOrigins,
+  removeOrigin,
+  saveOrigin
+} from '../../../utils/graph-client'
+import { useLazyQuery, useMutation, useQuery } from '../../../plugins/apollo'
+import useAuth from '../../../plugins/auth'
+import { useTranslation } from '../../../plugins/i18n'
 
-  export default {
-    setup() {
-      const { setTitle } = useMutations(['setTitle'])
-      const { t } = useTranslation();
-      setTitle(t('app.links.origins'))
-      const { loading: authLoading, isAuthenticated } = useAuth()
-      const {data, loading, error, refetch} = useQuery(findOrigins)
-      const snackbar = ref({ active: false, color: 'success', text: '' })
-      const [doSaveOrigin, {loading: savingOrigin, error: errorSaveOrigin}] = useMutation(saveOrigin)
-      const [doRemoveOrigin, {loading: removingOrigin, error: errorRemoveOrigin}] = useMutation(removeOrigin)
-      const [doFetchAddress, {data: address, loading: fetchingAddress, error: errorFetchingAddress}] = useLazyQuery(fetchAddress)
-      const origin = ref('')
-      const fetchAddressFn = () => {
-        if (window.navigator) {
-          window.navigator.geolocation.getCurrentPosition(pos => {
-            doFetchAddress({variables: {latlng: pos.coords.latitude + "," + pos.coords.longitude}})
-              .then(() => {
-                origin.value = address.value.address;
-              })
+export default {
+  setup() {
+    const { setTitle } = useMutations(['setTitle'])
+    const { t } = useTranslation()
+    setTitle(t('app.links.origins'))
+    const { isAuthenticated } = useAuth()
+    const { data, loading, refetch } = useQuery(findOrigins)
+    const snackbar = ref({ active: false, color: 'success', text: '' })
+    const [doSaveOrigin] = useMutation(saveOrigin)
+    const [doRemoveOrigin] = useMutation(removeOrigin)
+    const [doFetchAddress, { data: address }] = useLazyQuery(fetchAddress)
+    const origin = ref('')
+    const fetchAddressFn = () => {
+      if (window.navigator) {
+        window.navigator.geolocation.getCurrentPosition(pos => {
+          doFetchAddress({
+            variables: {
+              latlng: `${pos.coords.latitude},${pos.coords.longitude}`
+            }
+          }).then(() => {
+            origin.value = address.value.address
           })
-        }
+        })
       }
-      const saveOriginFn = o => doSaveOrigin({variables: { origin: o }}).then(() => {
+    }
+    const saveOriginFn = o =>
+      doSaveOrigin({ variables: { origin: o } }).then(() => {
         refetch.value()
         origin.value = ''
       })
-      const removeOriginFn = o => doRemoveOrigin({variables: { origin: o }}).then(() => refetch.value())
-      return {
-        isAuthenticated,
-        loading,
-        data,
-        snackbar,
-        origin,
-        saveOrigin: saveOriginFn,
-        removeOrigin: removeOriginFn,
-        fetchAddress: fetchAddressFn
-      }
+    const removeOriginFn = o =>
+      doRemoveOrigin({ variables: { origin: o } }).then(() => refetch.value())
+    return {
+      isAuthenticated,
+      loading,
+      data,
+      snackbar,
+      origin,
+      saveOrigin: saveOriginFn,
+      removeOrigin: removeOriginFn,
+      fetchAddress: fetchAddressFn
     }
   }
+}
 </script>

layouts/default.vue

@@ -1,15 +1,11 @@
 <template>
   <v-app :key="$i18n.locale + isAuthenticated">
     <themed>
-      <v-navigation-drawer
-        v-model="nav"
-        temporary
-        app
-      >
+      <v-navigation-drawer v-model="nav" temporary app>
         <v-list dense>
           <v-list-item>
             <v-list-item-action>
-              <v-switch v-model="darkMode"/>
+              <v-switch v-model="darkMode" />
             </v-list-item-action>
             <v-list-item-title>{{ $t('app.darkMode') }}</v-list-item-title>
           </v-list-item>
@@ -24,10 +20,10 @@
           </v-list-item>
           <v-list-item v-if="isAuthenticated && user">
             <v-list-item-avatar>
-              <v-img :src="user.picture" :alt="user.name"/>
+              <v-img :src="user.picture" :alt="user.name" />
             </v-list-item-avatar>
             <v-list-item-content>
-              <v-list-item-title v-html="user.name"/>
+              <v-list-item-title v-html="user.name" />
             </v-list-item-content>
           </v-list-item>
           <v-list-item link to="/">
@@ -59,23 +55,23 @@
         </v-list>
       </v-navigation-drawer>
       <v-app-bar app scroll-off-screen>
-        <v-app-bar-nav-icon v-on:click="nav = !nav"/>
-        <v-toolbar-title v-html="title"/>
-        <v-spacer/>
+        <v-app-bar-nav-icon v-on:click="nav = !nav" />
+        <v-toolbar-title v-html="title" />
+        <v-spacer />
         <v-toolbar-items>
           <v-list-item v-if="isAuthenticated && user">
             <v-list-item-avatar>
-              <v-img :src="user.picture" :alt="user.name"/>
+              <v-img :src="user.picture" :alt="user.name" />
             </v-list-item-avatar>
             <v-list-item-content>
-              <v-list-item-title v-html="user.name"/>
+              <v-list-item-title v-html="user.name" />
             </v-list-item-content>
           </v-list-item>
         </v-toolbar-items>
       </v-app-bar>
       <v-content>
         <v-container fluid v-if="!loading">
-          <nuxt/>
+          <nuxt />
         </v-container>
       </v-content>
     </themed>
@@ -83,32 +79,32 @@
 </template>
 
 <style lang="scss">
-  // We need this line to import all global styling
-  @import "assets/scss/global.scss";
+// We need this line to import all global styling
+@import 'assets/scss/global.scss';
 </style>
 
 <style lang="scss" scoped>
-  .layout {
-    background-color: white;
+.layout {
+  background-color: white;
 
-    .log-out {
-      cursor: pointer;
-    }
+  .log-out {
+    cursor: pointer;
   }
+}
 </style>
 
 <script>
-import { useAuth } from '../plugins/auth'
 import { computed, ref } from '@vue/composition-api'
-import Themed from './components/themed'
-import { setDarkMode } from '../utils/localStorage'
 import { useRouter, useState } from '@u3u/vue-hooks'
 import dayjs from 'dayjs'
 import sv from 'dayjs/locale/sv'
+import { setDarkMode } from '../utils/localStorage'
+import Themed from './components/themed'
+import useAuth from '../plugins/auth'
 
 export default {
   components: {
-    Themed,
+    Themed
   },
   setup(props, context) {
     const { router } = useRouter()
@@ -118,16 +114,22 @@ export default {
         appState && appState.targetUrl
           ? appState.targetUrl
           : window.location.pathname
-      );
+      )
     }
-    const { loading, isAuthenticated, user, loginWithRedirect, logout } = useAuth(onRedirectCallback)
+    const {
+      loading,
+      isAuthenticated,
+      user,
+      loginWithRedirect,
+      logout
+    } = useAuth(onRedirectCallback)
     const doLogin = () => {
-      loginWithRedirect.value();
+      loginWithRedirect.value()
     }
     const doLogout = () => {
       logout.value({
         returnTo: window.location.origin
-      });
+      })
     }
     const darkMode = computed({
       get: () => context.root.$vuetify.theme.dark,
@@ -138,16 +140,16 @@ export default {
     })
     const locale = computed({
       get: () => context.root.$i18n.locale,
-      set: locale => {
-        if (locale === 'en') {
-          dayjs.locale(locale)
-        } else if (locale === 'sv') {
+      set: newLocale => {
+        if (newLocale === 'en') {
+          dayjs.locale(newLocale)
+        } else if (newLocale === 'sv') {
           dayjs.locale(sv)
         }
 
-        context.root.$i18n.setLocaleCookie(locale)
-        context.root.$vuetify.lang.current = locale
-        context.root.$i18n.locale = locale
+        context.root.$i18n.setLocaleCookie(newLocale)
+        context.root.$vuetify.lang.current = newLocale
+        context.root.$i18n.locale = newLocale
       }
     })
 
@@ -165,6 +167,6 @@ export default {
       locale,
       nav
     }
-  },
-};
+  }
+}
 </script>

nuxt.config.js

@@ -3,29 +3,58 @@ import numberFormats from './translations/numberFormats'
 
 export default {
   env: {
-    graphqlApi: process.env.GRAPHQL_API,
+    graphqlApi: process.env.GRAPHQL_API
   },
   mode: 'spa',
   head: {
     link: [
-      {rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png'},
-      {rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png'},
-      {rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png'},
-      {rel: 'manifest', href: '/site.webmanifest'},
-      {rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#7f0aff'},
-      {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'},
-      {rel: "stylesheet", href: 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'},
-      {rel: "stylesheet", href: "https://fonts.googleapis.com/css?family=Material+Icons"},
-      {rel: "stylesheet", href: "https://cdn.materialdesignicons.com/3.3.92/css/materialdesignicons.min.css"}
+      {
+        rel: 'apple-touch-icon',
+        sizes: '180x180',
+        href: '/apple-touch-icon.png'
+      },
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '32x32',
+        href: '/favicon-32x32.png'
+      },
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '16x16',
+        href: '/favicon-16x16.png'
+      },
+      { rel: 'manifest', href: '/site.webmanifest' },
+      { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#7f0aff' },
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+      {
+        rel: 'stylesheet',
+        href:
+          'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'
+      },
+      {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css?family=Material+Icons'
+      },
+      {
+        rel: 'stylesheet',
+        href:
+          'https://cdn.materialdesignicons.com/3.3.92/css/materialdesignicons.min.css'
+      }
     ],
     meta: [
-      {name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no, minimal-ui'}
-    ],
+      {
+        name: 'viewport',
+        content:
+          'width=device-width, initial-scale=1, user-scalable=no, minimal-ui'
+      }
+    ]
   },
   modules: [
     'nuxt-i18n',
     '@nuxtjs/vuetify',
-    ['@nuxtjs/moment', { locales: ['sv'], defaultLocale: 'sv' }],
+    ['@nuxtjs/moment', { locales: ['sv'], defaultLocale: 'sv' }]
   ],
   i18n: {
     strategy: 'prefix_and_default',
@@ -55,10 +84,7 @@ export default {
   vuetify: {
     optionsPath: './vuetify.options.js'
   },
-  css: [
-    'vuetify/dist/vuetify.css',
-    '~/assets/scss/global.scss',
-  ],
+  css: ['vuetify/dist/vuetify.css', '~/assets/scss/global.scss'],
   plugins: [
     '~/plugins/composition',
     '~/plugins/hooks',
@@ -81,4 +107,4 @@ export default {
       }
     }
   }
-};
+}

package.json

@@ -21,8 +21,6 @@
     "apollo-link-http": "^1.5.15",
     "core-js": "3",
     "dayjs": "^1.8.19",
-    "eslint": "^5.1.0",
-    "eslint-plugin-vue": "^4.5.0",
     "graphql": "^14.4.2",
     "graphql-tag": "^2.10.1",
     "moment": "^2.24.0",
@@ -39,7 +37,7 @@
     "dev": "nuxt",
     "build": "nuxt build",
     "generate": "nuxt generate",
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "lint": "eslint --quiet --fix --ext .js,.vue --ignore-path .gitignore .",
     "precommit": "yarn lint",
     "prepush": "yarn test",
     "start": "node server/index.js",
@@ -51,7 +49,17 @@
   },
   "devDependencies": {
     "@babel/runtime-corejs3": "^7.8.3",
+    "babel-eslint": "^10.0.3",
+    "cli-engine": "^4.7.6",
     "cypress": "^3.1.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb-base": "^14.0.0",
+    "eslint-config-prettier": "^6.9.0",
+    "eslint-loader": "^3.0.3",
+    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-vue": "^6.1.2",
+    "prettier": "^1.19.1",
     "wait-on": "^3.2.0"
   },
   "snyk": true

pages/filters.vue

@@ -3,18 +3,18 @@
 </template>
 
 <script>
-  import Filters from "~/components/pages/filters";
-  import { useTranslation } from '../plugins/i18n'
+import Filters from '../components/pages/filters'
+import { useTranslation } from '../plugins/i18n'
 
-  export default {
-    components: {
-      Filters
-    },
-    head() {
-      const { t } = useTranslation()
-      return {
-        title: t('filters.title')
-      };
+export default {
+  components: {
+    Filters
+  },
+  head() {
+    const { t } = useTranslation()
+    return {
+      title: t('filters.title')
     }
-  };
+  }
+}
 </script>

pages/index.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Events from "~/components/pages/events";
+import Events from '../components/pages/events'
 import { useTranslation } from '../plugins/i18n'
 
 export default {
@@ -14,7 +14,7 @@ export default {
     const { t } = useTranslation()
     return {
       title: t('events.title')
-    };
+    }
   }
-};
+}
 </script>

pages/origins.vue

@@ -3,18 +3,18 @@
 </template>
 
 <script>
-  import Origins from "~/components/pages/origins";
-  import { useTranslation } from '../plugins/i18n'
+import Origins from '../components/pages/origins'
+import { useTranslation } from '../plugins/i18n'
 
-  export default {
-    components: {
-      Origins
-    },
-    head() {
-      const { t } = useTranslation()
-      return {
-        title: t('origins.title')
-      };
+export default {
+  components: {
+    Origins
+  },
+  head() {
+    const { t } = useTranslation()
+    return {
+      title: t('origins.title')
     }
-  };
+  }
+}
 </script>

plugins/apollo.js

@@ -1,9 +1,9 @@
 import { ApolloClient } from 'apollo-client'
 import { createHttpLink } from 'apollo-link-http'
-import { InMemoryCache } from 'apollo-cache-inmemory';
+import { InMemoryCache } from 'apollo-cache-inmemory'
 import { setContext } from 'apollo-link-context'
-import { useAuth } from './auth'
 import { reactive, toRefs } from '@vue/composition-api'
+import useAuth from './auth'
 
 let instance = null
 
@@ -13,23 +13,22 @@ const httpLink = createHttpLink({
   uri: apiUrl
 })
 
-const getToken = async (options) => {
+const getToken = async options => {
   const { getTokenSilently, isAuthenticated } = useAuth()
   if (isAuthenticated.value) {
-    return await getTokenSilently.value(options)
-  } else {
-    return options
+    return getTokenSilently.value(options)
   }
-};
+  return options
+}
 
 const authLink = setContext(async (_, { headers }) => {
   const token = await getToken()
   return {
     headers: {
       ...headers,
-      authorization: token ? `Bearer ${token}` : '',
+      authorization: token ? `Bearer ${token}` : ''
     }
-  };
+  }
 })
 
 const client = new ApolloClient({
@@ -37,84 +36,83 @@ const client = new ApolloClient({
   cache: new InMemoryCache(),
   defaultOptions: {
     watchQuery: {
-      fetchPolicy: 'cache-and-network',
-    },
-  },
+      fetchPolicy: 'cache-and-network'
+    }
+  }
 })
 
 instance = client
 
 export const useMutation = (mutation, options) => {
-  const opts = options;
-  const doMutate = options => new Promise((resolve, reject) => {
-    out.loading = true
-    instance.mutate({
-      mutation,
-      ...opts,
-      ...options
-    })
-      .then(result => {
-        out.loading = false
-        out.data = result.data
-        resolve(result)
-      })
-      .catch(e => {
-        out.loading = false
-        out.error = e
-        reject(e)
-      })
-  })
   const out = reactive({
     data: {},
     error: null,
-    loading: false,
+    loading: false
   })
+  const doMutate = mutateOptions =>
+    new Promise((resolve, reject) => {
+      out.loading = true
+      instance
+        .mutate({
+          mutation,
+          ...options,
+          ...mutateOptions
+        })
+        .then(result => {
+          out.loading = false
+          out.data = result.data
+          resolve(result)
+        })
+        .catch(e => {
+          out.loading = false
+          out.error = e
+          reject(e)
+        })
+    })
   return [doMutate, toRefs(out)]
 }
 
 export const useLazyQuery = (query, options) => {
-  const opts = options
   let watchedQuery = null
-  const doQuery = options => new Promise((resolve, reject) => {
-    out.loading = true
-    let effectiveOptions = {
-      query,
-      ...(opts || {}),
-      ...(options || {})
-    }
-    watchedQuery = instance.watchQuery(effectiveOptions)
-    watchedQuery.subscribe(({loading, data}) => {
-        out.loading = loading
-        out.data = data || {}
-        out.error = null
-        resolve(data)
-      }, error => {
-        out.loading = false
-        out.error = error
-        reject(error)
-      })
+  const out = reactive({
+    data: {},
+    error: null,
+    loading: false
   })
-  const refetch = variables => {
+  const doQuery = queryOptions =>
+    new Promise((resolve, reject) => {
+      out.loading = true
+      const effectiveOptions = {
+        query,
+        ...(options || {}),
+        ...(queryOptions || {})
+      }
+      watchedQuery = instance.watchQuery(effectiveOptions)
+      watchedQuery.subscribe(
+        ({ loading, data }) => {
+          out.loading = loading
+          out.data = data || {}
+          out.error = null
+          resolve(data)
+        },
+        error => {
+          out.loading = false
+          out.error = error
+          reject(error)
+        }
+      )
+    })
+  out.refetch = variables => {
     const opts = {}
-    if (variables) (
-      opts.variables = variables
-    )
+    if (variables) opts.variables = variables
     doQuery(opts)
   }
-  const startPolling = interval => doQuery({pollInterval: interval})
-  const stopPolling = () => {
+  out.startPolling = interval => doQuery({ pollInterval: interval })
+  out.stopPolling = () => {
     if (watchedQuery) {
       watchedQuery.stopPolling()
     }
   }
-  const out = reactive({
-    data: {},
-    error: null,
-    loading: false,
-    refetch,
-    startPolling,
-    stopPolling
-  })
   return [doQuery, toRefs(out)]
 }
 

plugins/auth.js

@@ -3,23 +3,23 @@ import { reactive, toRefs } from '@vue/composition-api'
 
 /** Define a default action to perform after authentication */
 const DEFAULT_REDIRECT_CALLBACK = () =>
-  window.history.replaceState({}, document.title, window.location.pathname);
+  window.history.replaceState({}, document.title, window.location.pathname)
 
-let instance;
+let instance
 
-const params = (new URL(window.location)).searchParams
+const params = new URL(window.location).searchParams
 const domain = params.get('domain') || 'unbound.eu.auth0.com'
 
-export const useAuth = (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
+export default (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
   if (instance) {
     return toRefs(instance)
   }
 
   const options = {
-    domain: domain,
+    domain,
     client_id: 'orQfnvCPUR5C3mJkKoiWLQHOVQsBn60e',
     audience: 'http://dancefinder.unbound.se',
-    redirect_uri: window.location.origin,
+    redirect_uri: window.location.origin
   }
 
   instance = reactive({
@@ -31,95 +31,91 @@ export const useAuth = (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
     error: null,
     /** Authenticates the user using a popup window */
     loginWithPopup: async o => {
-      this.popupOpen = true;
+      this.popupOpen = true
 
       try {
-        await instance.auth0Client.loginWithPopup(o);
+        await instance.auth0Client.loginWithPopup(o)
       } catch (e) {
         // eslint-disable-next-line
         console.error(e);
       } finally {
-        instance.popupOpen = false;
+        instance.popupOpen = false
       }
 
-      instance.user = await instance.auth0Client.getUser();
-      instance.isAuthenticated = true;
+      instance.user = await instance.auth0Client.getUser()
+      instance.isAuthenticated = true
     },
     /** Handles the callback when logging in using a redirect */
     handleRedirectCallback: async () => {
-      instance.loading = true;
+      instance.loading = true
       try {
-        await instance.auth0Client.handleRedirectCallback();
-        instance.user = await instance.auth0Client.getUser();
-        instance.isAuthenticated = true;
+        await instance.auth0Client.handleRedirectCallback()
+        instance.user = await instance.auth0Client.getUser()
+        instance.isAuthenticated = true
       } catch (e) {
-        instance.error = e;
+        instance.error = e
       } finally {
-        instance.loading = false;
+        instance.loading = false
       }
     },
     /** Authenticates the user using the redirect method */
     loginWithRedirect: o => {
-      return instance.auth0Client.loginWithRedirect(o);
+      return instance.auth0Client.loginWithRedirect(o)
     },
     /** Returns all the claims present in the ID token */
     getIdTokenClaims: o => {
-      return instance.auth0Client.getIdTokenClaims(o);
+      return instance.auth0Client.getIdTokenClaims(o)
     },
     /** Returns the access token. If the token is invalid or missing, a new one is retrieved */
     getTokenSilently: o => {
-      return instance.auth0Client.getTokenSilently(o);
+      return instance.auth0Client.getTokenSilently(o)
     },
     /** Gets the access token using a popup window */
     getTokenWithPopup: o => {
-      return instance.auth0Client.getTokenWithPopup(o);
+      return instance.auth0Client.getTokenWithPopup(o)
     },
     /** Logs the user out and removes their session on the authorization server */
     logout: o => {
-      return instance.auth0Client.logout(o);
+      return instance.auth0Client.logout(o)
     }
   })
 
   const fetchUser = () => {
-    instance.auth0Client.isAuthenticated()
-      .then(a => {
-        instance.isAuthenticated = a
-        instance.auth0Client.getUser()
-          .then(u => {
-            instance.user = u
-            instance.loading = false;
-          });
-      });
-  }
-// Create a new instance of the SDK client using members of the given options object
-  createAuth0Client(options)
-    .then(client => {
-      instance.loading = true
-      instance.auth0Client = client
-      try {
-        // If the user is returning to the app after authentication..
-        if (
-          window.location.search.includes('code=') &&
-          window.location.search.includes('state=')
-        ) {
-          // handle the redirect and retrieve tokens
-          instance.auth0Client.handleRedirectCallback()
-            .then(appState => {
-              // Notify subscribers that the redirect callback has happened, passing the appState
-              // (useful for retrieving any pre-authentication state)
-              onRedirectCallback(appState);
-              // Initialize our internal authentication state
-              fetchUser()
-            })
-        } else {
-          fetchUser()
-        }
-      } catch (e) {
-        instance.error = e;
-      } finally {
+    instance.auth0Client.isAuthenticated().then(a => {
+      instance.isAuthenticated = a
+      instance.auth0Client.getUser().then(u => {
+        instance.user = u
         instance.loading = false
-      }
+      })
     })
+  }
+  // Create a new instance of the SDK client using members of the given options object
+  createAuth0Client(options).then(client => {
+    instance.loading = true
+    instance.auth0Client = client
+    try {
+      // If the user is returning to the app after authentication..
+      if (
+        window.location.search.includes('code=') &&
+        window.location.search.includes('state=')
+      ) {
+        // handle the redirect and retrieve tokens
+        instance.auth0Client.handleRedirectCallback().then(appState => {
+          // Notify subscribers that the redirect callback has happened, passing the appState
+          // (useful for retrieving any pre-authentication state)
+          onRedirectCallback(appState)
+          // Initialize our internal authentication state
+          fetchUser()
+        })
+      } else {
+        fetchUser()
+      }
+    } catch (e) {
+      instance.error = e
+    } finally {
+      instance.loading = false
+    }
+  })
 
   return toRefs(instance)
 }

plugins/composition.js

@@ -1,4 +1,4 @@
-import Vue from 'vue';
-import VueCompositionApi from '@vue/composition-api';
+import Vue from 'vue'
+import VueCompositionApi from '@vue/composition-api'
 
-Vue.use(VueCompositionApi);
+Vue.use(VueCompositionApi)

plugins/hooks.js

@@ -1,4 +1,4 @@
-import Vue from 'vue';
-import hooks from '@u3u/vue-hooks';
+import Vue from 'vue'
+import hooks from '@u3u/vue-hooks'
 
-Vue.use(hooks);
+Vue.use(hooks)

plugins/i18n.js

@@ -8,7 +8,7 @@ export const useTranslation = () => {
   }
 }
 
-export default ({app}) => {
+export default ({ app }) => {
   i18n = app.i18n
   localePath = app.localePath
 }

plugins/vue-numeral-filter.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import vueNumeralFilterInstaller from 'vue-numeral-filter';
+import vueNumeralFilterInstaller from 'vue-numeral-filter'
 
 // TODO: Switch to sv-se when PR (https://github.com/adamwdraper/Numeral-js/pull/534) is merged
-Vue.use(vueNumeralFilterInstaller, { locale: 'no' });
+Vue.use(vueNumeralFilterInstaller, { locale: 'no' })

plugins/vuetify.js

@@ -1,4 +1,4 @@
 import Vue from 'vue'
 import Vuetify from 'vuetify'
 
-Vue.use(Vuetify);
+Vue.use(Vuetify)

store/index.js

@@ -1,9 +1,9 @@
 export const state = () => ({
-  title: ""
-});
+  title: ''
+})
 
 export const mutations = {
-  setTitle(state, title) {
-    state.title = title
+  setTitle(currentState, title) {
+    currentState.title = title
   }
-};
+}

translations/app.js

@@ -5,9 +5,9 @@ export default {
     logout: 'Log out',
     darkMode: 'Dark mode',
     links: {
-      events: "Events",
-      filters: "Filters",
-      origins: "Origins",
+      events: 'Events',
+      filters: 'Filters',
+      origins: 'Origins'
     }
   },
   sv: {
@@ -16,9 +16,9 @@ export default {
     logout: 'Logga ut',
     darkMode: 'Mörkt läge',
     links: {
-      events: "Evenemang",
-      filters: "Hantera filter",
-      origins: "Hantera startpunkter",
-    },
+      events: 'Evenemang',
+      filters: 'Hantera filter',
+      origins: 'Hantera startpunkter'
+    }
   }
 }

translations/index.js

@@ -8,12 +8,12 @@ export default {
     app: app.en,
     events: events.en,
     filters: filters.en,
-    origins: origins.en,
+    origins: origins.en
   },
   sv: {
     app: app.sv,
     events: events.sv,
     filters: filters.sv,
-    origins: origins.sv,
-  },
+    origins: origins.sv
+  }
 }

translations/numberFormats.js

@@ -1,12 +1,14 @@
 export default {
-  'en': {
+  en: {
     currency: {
-      style: 'currency', currency: 'USD'
+      style: 'currency',
+      currency: 'USD'
     }
   },
-  'sv': {
+  sv: {
     currency: {
-      style: 'currency', currency: 'SEK'
+      style: 'currency',
+      currency: 'SEK'
     }
   }
 }

translations/vuetify.js

@@ -9,7 +9,8 @@ export default {
     dataTable: {
       itemsPerPageText: 'Rader per sida:',
       ariaLabel: {
-        sortDescending: ': Sorterad minskande. Aktivera för att ta bort sortering.',
+        sortDescending:
+          ': Sorterad minskande. Aktivera för att ta bort sortering.',
         sortAscending: ': Sorterad ökande. Aktivera för att sortera minskande.',
         sortNone: ': Ej sorterad. Aktivera för att sortera ökande.'
       }

utils/graph-client/__tests__/queries.test.js

@@ -1,15 +0,0 @@
-import {
-  findEvents,
-} from '../index';
-
-const verifyResponse = (response) => {
-  expect(response.errors).toBe(undefined);
-};
-
-const verifyError = (response) => {
-  expect(response.errors.length).toBeGreaterThan(0);
-};
-
-describe('GQL Queries', () => {
-  test('findEvents', () => findEvents().then(verifyResponse));
-});

utils/graph-client/index.js

@@ -1,9 +1,4 @@
-export {
-  findEvents,
-  findOrigins,
-  fetchAddress,
-  fetchFilters,
-} from './queries';
+export { findEvents, findOrigins, fetchAddress, fetchFilters } from './queries'
 
 export {
   toggleIgnoreBand,
@@ -13,4 +8,4 @@ export {
   toggleIgnoreState,
   saveOrigin,
   removeOrigin
-} from './mutations';
+} from './mutations'

utils/graph-client/mutations.js

@@ -1,37 +1,37 @@
 import gql from 'graphql-tag'
 
 export const toggleIgnoreBand = gql`
-    mutation ToggleIgnoreBand($name: String!) {
-      ignore: ToggleIgnoreBand(name: $name)
-    }
-  `
+  mutation ToggleIgnoreBand($name: String!) {
+    ignore: ToggleIgnoreBand(name: $name)
+  }
+`
 export const toggleIgnoreDanceHall = gql`
-    mutation ToggleIgnoreDanceHall($name: String!) {
-      ignore: ToggleIgnoreDanceHall(name: $name)
-    }
-  `
+  mutation ToggleIgnoreDanceHall($name: String!) {
+    ignore: ToggleIgnoreDanceHall(name: $name)
+  }
+`
 export const toggleIgnoreCity = gql`
-    mutation ToggleIgnoreCity($name: String!) {
-      ignore: ToggleIgnoreCity(name: $name)
-    }
-  `
+  mutation ToggleIgnoreCity($name: String!) {
+    ignore: ToggleIgnoreCity(name: $name)
+  }
+`
 export const toggleIgnoreMunicipality = gql`
-    mutation ToggleIgnoreMunicipality($name: String!) {
-      ignore: ToggleIgnoreMunicipality(name: $name)
-    }
-  `
+  mutation ToggleIgnoreMunicipality($name: String!) {
+    ignore: ToggleIgnoreMunicipality(name: $name)
+  }
+`
 export const toggleIgnoreState = gql`
-    mutation ToggleIgnoreState($name: String!) {
-      ignore: ToggleIgnoreState(name: $name)
-    }
-  `
+  mutation ToggleIgnoreState($name: String!) {
+    ignore: ToggleIgnoreState(name: $name)
+  }
+`
 export const saveOrigin = gql`
-    mutation SaveOrigin($origin: String!) {
-      saved: SaveOrigin(origin: $origin)
-    }
-  `
+  mutation SaveOrigin($origin: String!) {
+    saved: SaveOrigin(origin: $origin)
+  }
+`
 export const removeOrigin = gql`
-    mutation RemoveOrigin($origin: String!) {
-      removed: RemoveOrigin(origin: $origin)
-    }
-  `
+  mutation RemoveOrigin($origin: String!) {
+    removed: RemoveOrigin(origin: $origin)
+  }
+`

utils/graph-client/queries.js

@@ -1,8 +1,8 @@
 import gql from 'graphql-tag'
 
 export const findEvents = gql`
-  query events($range: Range $origins: [String!] $includeOrigins: Boolean!) {
-    events: Events(range: $range origins: $origins) {
+  query events($range: Range, $origins: [String!], $includeOrigins: Boolean!) {
+    events: Events(range: $range, origins: $origins) {
       date
       time
       band {
@@ -23,19 +23,19 @@ export const findEvents = gql`
     }
     origins: Origins @include(if: $includeOrigins)
   }
-`;
+`
 
 export const findOrigins = gql`
   query origins {
     origins: Origins
   }
-`;
+`
 
 export const fetchAddress = gql`
   query adressFromLatLng($latlng: String!) {
     address: AddressFromLatLng(latlng: $latlng)
   }
-`;
+`
 
 export const fetchFilters = gql`
   query {
@@ -45,4 +45,4 @@ export const fetchFilters = gql`
     danceHalls: IgnoredDanceHalls
     municipalities: IgnoredMunicipalities
   }
-`;
+`

utils/localStorage.js

@@ -2,8 +2,8 @@ const DARK_MODE_KEY = 'dancefinder-dark-mode'
 const LOCALE_KEY = 'dancefinder-locale'
 
 const getDarkMode = () => localStorage.getItem(DARK_MODE_KEY)
-const setDarkMode = (mode) => localStorage.setItem(DARK_MODE_KEY, mode)
+const setDarkMode = mode => localStorage.setItem(DARK_MODE_KEY, mode)
 const getLocale = () => localStorage.getItem(LOCALE_KEY)
-const setLocale = (locale) => localStorage.setItem(LOCALE_KEY, locale)
+const setLocale = locale => localStorage.setItem(LOCALE_KEY, locale)
 
-export { getDarkMode, setDarkMode, getLocale, setLocale };
+export { getDarkMode, setDarkMode, getLocale, setLocale }