fix: lint-error

This commit is contained in:
2020-06-21 19:06:41 +02:00
parent 84843cc3ed
commit 27ff91ed0b
6 changed files with 253 additions and 232 deletions
+172 -162
View File
@@ -1,10 +1,10 @@
<template>
<div :key="isAuthenticated">
<span v-text="isAuthenticated"/>
<span v-text="isAuthenticated" />
<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>
@@ -17,11 +17,10 @@
<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
>
>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 }">
@@ -29,11 +28,10 @@
v-on="on"
:disabled="!origin"
v-on:click="saveOrigin(origin)"
>mdi-bookmark-plus-outline
</v-icon
>
>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>
@@ -80,168 +78,180 @@
</template>
<script>
import { useMutations, useRouter } from '@u3u/vue-hooks'
import { computed, ref, watch } from '@vue/composition-api'
import { useAuth } from '../../../plugins/auth'
import { useMutations, useRouter } from '@u3u/vue-hooks'
import { computed, ref, watch } from '@vue/composition-api'
import { useMutation, useQuery, useResult } from '@vue/apollo-composable'
import { useAuth } from '../../../plugins/auth'
import List from './List'
import { useMutation, useQuery, useResult } from '@vue/apollo-composable'
import {
fetchAddress,
findEvents,
saveOrigin,
toggleIgnoreBand,
toggleIgnoreCity,
toggleIgnoreDanceHall,
toggleIgnoreMunicipality,
toggleIgnoreState
} from '../../../utils/graph-client'
import { useTranslation } from '../../../plugins/i18n'
import List from './List'
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 enabled = ref(false)
const { result: data, refetch } = useQuery(findEvents, { includeOrigins: false }, () => ({ enabled: enabled.value }))
const events = useResult(data, [], result => result.events)
const origins = useResult(data, [], result => result.origins)
watch(
range,
r => {
enabled.value = true
console.log('isAuthenticated', isAuthenticated.value)
refetch({
range: r,
includeOrigins: isAuthenticated.value || false
})
},
{ 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 originsTemp = [...(origins.value || [])]
if (origin.value) {
originsTemp.push(origin.value)
}
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 enabled = ref(false)
const { result: data, refetch } = useQuery(
findEvents,
{ includeOrigins: false },
() => ({ enabled: enabled.value })
)
const events = useResult(data, [], result => result.events)
const origins = useResult(data, [], result => result.origins)
watch(
range,
r => {
enabled.value = true
console.log('isAuthenticated', isAuthenticated.value)
refetch({
range: range.value,
origins: originsTemp,
range: r,
includeOrigins: isAuthenticated.value || false
})
},
{ 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 originsTemp = [...(origins.value || [])]
if (origin.value) {
originsTemp.push(origin.value)
}
enabled.value = true
refetch({
range: range.value,
origins: originsTemp,
includeOrigins: isAuthenticated.value || false
})
}
const { mutate: doToggleIgnoreBand } = useMutation(toggleIgnoreBand)
const { mutate: doToggleIgnoreDanceHall } = useMutation(toggleIgnoreDanceHall)
const { mutate: doToggleIgnoreCity } = useMutation(toggleIgnoreCity)
const { mutate: doToggleIgnoreMunicipality } = useMutation(toggleIgnoreMunicipality)
const { mutate: doToggleIgnoreState } = useMutation(toggleIgnoreState)
const { mutate: doToggleIgnoreBand } = useMutation(toggleIgnoreBand)
const { mutate: doToggleIgnoreDanceHall } = useMutation(
toggleIgnoreDanceHall
)
const { mutate: doToggleIgnoreCity } = useMutation(toggleIgnoreCity)
const { mutate: doToggleIgnoreMunicipality } = useMutation(
toggleIgnoreMunicipality
)
const { mutate: 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({ 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:
}
}
const { mutate: doSaveOrigin } = useMutation(saveOrigin)
const addressEnabled = ref(false)
const { result: address, refetch: doFetchAddress } = useQuery(fetchAddress, {}, () => ({ enabled: addressEnabled.value }))
const fetchAddressFn = () => {
if (window.navigator) {
window.navigator.geolocation.getCurrentPosition(pos => {
addressEnabled.value = true
doFetchAddress({
latlng: `${pos.coords.latitude},${pos.coords.longitude}`
}).then(() => {
origin.value = address.value.address
})
})
}
}
const saveOriginFn = o =>
doSaveOrigin({ origin: o }).then(() => {
origin.value = ''
fetchEvents()
})
return {
authLoading,
isAuthenticated,
range,
events,
origins,
query: fetchEvents,
submitting,
ranges,
snackbar,
toggleIgnore,
origin,
fetchAddress: fetchAddressFn,
saveOrigin: saveOriginFn
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({ 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:
}
}
const { mutate: doSaveOrigin } = useMutation(saveOrigin)
const addressEnabled = ref(false)
const { result: address, refetch: doFetchAddress } = useQuery(
fetchAddress,
{},
() => ({ enabled: addressEnabled.value })
)
const fetchAddressFn = () => {
if (window.navigator) {
window.navigator.geolocation.getCurrentPosition(pos => {
addressEnabled.value = true
doFetchAddress({
latlng: `${pos.coords.latitude},${pos.coords.longitude}`
}).then(() => {
origin.value = address.value.address
})
})
}
}
const saveOriginFn = o =>
doSaveOrigin({ origin: o }).then(() => {
origin.value = ''
fetchEvents()
})
return {
authLoading,
isAuthenticated,
range,
events,
origins,
query: fetchEvents,
submitting,
ranges,
snackbar,
toggleIgnore,
origin,
fetchAddress: fetchAddressFn,
saveOrigin: saveOriginFn
}
}
}
</script>
+10 -6
View File
@@ -59,6 +59,7 @@
<script>
import { ref } from '@vue/composition-api'
import { useMutations } from '@u3u/vue-hooks'
import { useMutation, useQuery, useResult } from '@vue/apollo-composable'
import {
fetchFilters,
toggleIgnoreBand,
@@ -69,7 +70,6 @@ import {
} from '~/utils/graph-client'
import List from './List'
import { useMutation, useQuery, useResult } from '@vue/apollo-composable'
import { useAuth } from '../../../plugins/auth'
import { useTranslation } from '../../../plugins/i18n'
@@ -89,11 +89,15 @@ export default {
const municipalities = useResult(data, [], result => result.municipalities)
const states = useResult(data, [], result => result.states)
const snackbar = ref({ active: false, color: 'success', text: '' })
const {mutate: doToggleIgnoreBand} = useMutation(toggleIgnoreBand)
const {mutate: doToggleIgnoreDanceHall} = useMutation(toggleIgnoreDanceHall)
const {mutate: doToggleIgnoreCity} = useMutation(toggleIgnoreCity)
const {mutate: doToggleIgnoreMunicipality} = useMutation(toggleIgnoreMunicipality)
const {mutate: doToggleIgnoreState} = useMutation(toggleIgnoreState)
const { mutate: doToggleIgnoreBand } = useMutation(toggleIgnoreBand)
const { mutate: doToggleIgnoreDanceHall } = useMutation(
toggleIgnoreDanceHall
)
const { mutate: doToggleIgnoreCity } = useMutation(toggleIgnoreCity)
const { mutate: doToggleIgnoreMunicipality } = useMutation(
toggleIgnoreMunicipality
)
const { mutate: doToggleIgnoreState } = useMutation(toggleIgnoreState)
const toggleIgnoreSuccess = name => {
return () => {
+61 -55
View File
@@ -11,11 +11,10 @@
<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
>
>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 }">
@@ -23,11 +22,10 @@
v-on="on"
:disabled="!origin"
v-on:click="saveOrigin(origin)"
>mdi-bookmark-plus-outline
</v-icon
>
>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>
@@ -38,10 +36,10 @@
<v-tooltip top slot="prepend">
<template v-slot:activator="{ on }">
<v-icon v-on="on" v-on:click="removeOrigin(origin)"
>mdi-delete-outline
>mdi-delete-outline
</v-icon>
</template>
<span v-text="$t('origins.remove')"/>
<span v-text="$t('origins.remove')" />
</v-tooltip>
<span>{{ origin }}</span>
</v-flex>
@@ -59,55 +57,63 @@
</template>
<script>
import { ref } from '@vue/composition-api'
import { useMutations } from '@u3u/vue-hooks'
import { fetchAddress, findOrigins, removeOrigin, saveOrigin } from '../../../utils/graph-client'
import { useMutation, useQuery, useResult } from '@vue/apollo-composable'
import { useAuth } from '../../../plugins/auth'
import { useTranslation } from '../../../plugins/i18n'
import { ref } from '@vue/composition-api'
import { useMutations } from '@u3u/vue-hooks'
import { useMutation, useQuery, useResult } from '@vue/apollo-composable'
import {
fetchAddress,
findOrigins,
removeOrigin,
saveOrigin
} from '../../../utils/graph-client'
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 { isAuthenticated } = useAuth()
const { result: data, loading, refetch } = useQuery(findOrigins)
const origins = useResult(data, [])
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 origin = ref('')
const fetchAddressFn = () => {
if (window.navigator) {
window.navigator.geolocation.getCurrentPosition(pos => {
enabled.value = true
doFetchAddress({ latlng: `${pos.coords.latitude},${pos.coords.longitude}` })
.then(res => {
origin.value = res.address
})
export default {
setup() {
const { setTitle } = useMutations(['setTitle'])
const { t } = useTranslation()
setTitle(t('app.links.origins'))
const { isAuthenticated } = useAuth()
const { result: data, loading, refetch } = useQuery(findOrigins)
const origins = useResult(data, [])
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 origin = ref('')
const fetchAddressFn = () => {
if (window.navigator) {
window.navigator.geolocation.getCurrentPosition(pos => {
enabled.value = true
doFetchAddress({
latlng: `${pos.coords.latitude},${pos.coords.longitude}`
}).then(res => {
origin.value = res.address
})
}
}
const saveOriginFn = o =>
doSaveOrigin({ origin: o }).then(() => {
refetch()
origin.value = ''
})
const removeOriginFn = o =>
doRemoveOrigin({ origin: o }).then(() => refetch())
return {
isAuthenticated,
loading,
origins,
snackbar,
origin,
saveOrigin: saveOriginFn,
removeOrigin: removeOriginFn,
fetchAddress: fetchAddressFn
}
}
const saveOriginFn = o =>
doSaveOrigin({ origin: o }).then(() => {
refetch()
origin.value = ''
})
const removeOriginFn = o =>
doRemoveOrigin({ origin: o }).then(() => refetch())
return {
isAuthenticated,
loading,
origins,
snackbar,
origin,
saveOrigin: saveOriginFn,
removeOrigin: removeOriginFn,
fetchAddress: fetchAddressFn
}
}
}
</script>
+1 -3
View File
@@ -18,9 +18,7 @@ export default {
}
}
},
buildModules: [
'nuxt-composition-api'
],
buildModules: ['nuxt-composition-api'],
css: ['vuetify/dist/vuetify.css', '~/assets/scss/global.scss'],
env: {
graphqlApi: process.env.GRAPHQL_API
+7 -4
View File
@@ -1,13 +1,16 @@
import { ApolloClient } from 'apollo-client'
import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'
import {
InMemoryCache,
IntrospectionFragmentMatcher
} from 'apollo-cache-inmemory'
import { createHttpLink } from 'apollo-link-http'
import { setContext } from 'apollo-link-context'
import { useAuth } from './auth'
import { provide } from '@vue/composition-api'
import introspectionQueryResultData from '../fragmentTypes.json'
import { onGlobalSetup } from 'nuxt-composition-api'
import { DefaultApolloClient } from '@vue/apollo-composable'
import Vue from 'vue'
import introspectionQueryResultData from '../fragmentTypes.json'
import { useAuth } from './auth'
const apiUrl = process.env.graphqlApi || '/query'
@@ -21,7 +24,7 @@ const httpLink = createHttpLink({
uri: apiUrl
})
const getToken = async (options) => {
const getToken = async options => {
const { getTokenSilently } = useAuth()
return getTokenSilently.value(options)
}
+2 -2
View File
@@ -10,6 +10,7 @@ let instance
const params = new URL(window.location).searchParams
const domain = params.get('domain') || 'unbound.eu.auth0.com'
// eslint-disable-next-line import/prefer-default-export
export const useAuth = (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
if (instance) {
return toRefs(instance)
@@ -105,14 +106,12 @@ export const useAuth = (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
instance.auth0Client = createAuth0Client(options)
instance.auth0Client.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=')
) {
console.log('location search', window.location.search)
// handle the redirect and retrieve tokens
client
.handleRedirectCallback()
@@ -123,6 +122,7 @@ export const useAuth = (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
// Initialize our internal authentication state
fetchUser()
})
// eslint-disable-next-line no-console
.catch(e => console.error('error handling redirect callback', e))
} else {
fetchUser()