dancefinder/dancefinder-app
5
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Activity

build: add name to components which failed lint check

Browse Source
This commit is contained in:
Joakim Olsson
2021-11-19 21:44:36 +01:00
parent 9af6f37d74
commit 0b8f77372f
19 changed files with 69 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/common/app-lazy-background/index.vue
-38
View File
@@ -1,38 +0,0 @@
<template>
<div v-lazy:background-image="image" class="image" @click="onClick">
<slot />
</div>
</template>
<script>
export default {
props: {
image: {
type: String,
required: true
},
onClick: {
type: Function,
default: f => f
}
}
}
</script>
<style lang="scss" scoped>
.image {
height: 100%;
width: 100%;
max-width: 100%;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 300ms ease;
will-change: opacity;
&[lazy='loaded'] {
opacity: 1;
}
}
</style>
components/common/app-loader/index.vue
-96
View File
@@ -1,96 +0,0 @@
<template>
<div :class="{ 'is-shown': show, 'is-contained': contained }" class="cover">
<ul class="loader">
<li />
<li />
<li />
<li />
<li />
<li />
</ul>
</div>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
required: false,
default: false
},
contained: {
type: Boolean,
required: false,
default: false
}
}
}
</script>
<style lang="scss" scoped>
.cover {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100000;
background-color: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: all 350ms ease;
&.is-contained {
position: absolute;
}
.loader li {
background: #535353;
margin-left: 1px;
width: 14px;
height: 22px;
display: inline-block;
opacity: 0;
border-radius: 2px;
box-shadow: 0px 0px 1px #b4b4b4;
transform: skew(-25deg, 0deg) scale(0.1);
animation: loader 0.5s ease-in-out infinite alternate;
}
@keyframes loader {
to {
transform: skew(-25deg, 0deg) scale(1);
opacity: 1;
}
}
.loader li:nth-child(2) {
animation-delay: 0.1s;
}
.loader li:nth-child(3) {
animation-delay: 0.2s;
}
.loader li:nth-child(4) {
animation-delay: 0.3s;
}
.loader li:nth-child(5) {
animation-delay: 0.4s;
}
.loader li:nth-child(6) {
animation-delay: 0.5s;
}
&.is-shown {
pointer-events: all;
opacity: 1;
.spinner {
transform: scale(1);
}
}
}
</style>
components/common/app-message/index.vue
-53
View File
@@ -1,53 +0,0 @@
<template>
<div class="message-container">
<div class="message">
<div class="icon">
<slot name="icon" />
</div>
<h3>{{ message }}</h3>
<p>{{ description }}</p>
<slot name="extras" />
</div>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true
},
description: {
type: String,
required: false,
default: ''
}
}
}
</script>
<style lang="scss" scoped>
.message-container {
margin: 10vh auto;
max-width: 420px;
display: flex;
justify-content: center;
align-items: center;
}
.message {
padding: 2rem;
border-radius: 1rem;
text-align: center;
box-shadow: 0px 1px 2px #b4b4b494;
.icon > * {
font-size: 3rem;
}
> * {
margin: 1rem 0;
}
}
</style>
components/pages/events/Event/index.vue
+1
View File
@@ -97,6 +97,7 @@
import dayjs from 'dayjs' import dayjs from 'dayjs'
export default { export default {
name: 'EventDetail',
props: { props: {
event: { event: {
type: Object, type: Object,
components/pages/events/List/index.vue
+1
View File
@@ -16,6 +16,7 @@
import Event from '../Event' import Event from '../Event'
export default { export default {
name: 'EventList',
components: { components: {
Event Event
}, },
components/pages/events/index.vue
+9 -9
View File
@@ -1,6 +1,5 @@
<template> <template>
<div :key="isAuthenticated"> <div :key="isAuthenticated">
<span v-text="isAuthenticated" />
<v-container fluid grid-list-md class="app-fade-in" :key="range"> <v-container fluid grid-list-md class="app-fade-in" :key="range">
<v-layout row wrap v-if="!isAuthenticated"> <v-layout row wrap v-if="!isAuthenticated">
<v-flex xs12> <v-flex xs12>
@@ -97,6 +96,7 @@ import {
import { useTranslation } from '../../../plugins/i18n' import { useTranslation } from '../../../plugins/i18n'
export default { export default {
name: 'EventsPage',
components: { components: {
List List
}, },
@@ -108,7 +108,7 @@ export default {
const { route, router } = useRouter() const { route, router } = useRouter()
const range = computed({ const range = computed({
get: () => route.value.query.range || 'ONE_WEEK', get: () => route.value.query.range || 'ONE_WEEK',
set: value => router.push(`/?range=${value}`) set: (value) => router.push(`/?range=${value}`)
}) })
const enabled = ref(false) const enabled = ref(false)
const { result: data, refetch } = useQuery( const { result: data, refetch } = useQuery(
@@ -116,11 +116,11 @@ export default {
{ includeOrigins: false }, { includeOrigins: false },
() => ({ enabled: enabled.value }) () => ({ enabled: enabled.value })
) )
const events = useResult(data, [], result => result.events) const events = useResult(data, [], (result) => result.events)
const origins = useResult(data, [], result => result.origins) const origins = useResult(data, [], (result) => result.origins)
watch( watch(
range, range,
r => { (r) => {
enabled.value = true enabled.value = true
console.log('isAuthenticated', isAuthenticated.value) console.log('isAuthenticated', isAuthenticated.value)
refetch({ refetch({
@@ -164,7 +164,7 @@ export default {
) )
const { mutate: doToggleIgnoreState } = useMutation(toggleIgnoreState) const { mutate: doToggleIgnoreState } = useMutation(toggleIgnoreState)
const toggleIgnoreSuccess = name => { const toggleIgnoreSuccess = (name) => {
return () => { return () => {
fetchEvents() fetchEvents()
snackbar.value.color = 'success' snackbar.value.color = 'success'
@@ -173,7 +173,7 @@ export default {
} }
} }
const toggleIgnoreFailed = name => { const toggleIgnoreFailed = (name) => {
return () => { return () => {
snackbar.value.color = 'error' snackbar.value.color = 'error'
snackbar.value.text = `${name} kunde inte döljas` snackbar.value.text = `${name} kunde inte döljas`
@@ -221,7 +221,7 @@ export default {
) )
const fetchAddressFn = () => { const fetchAddressFn = () => {
if (window.navigator) { if (window.navigator) {
window.navigator.geolocation.getCurrentPosition(pos => { window.navigator.geolocation.getCurrentPosition((pos) => {
addressEnabled.value = true addressEnabled.value = true
doFetchAddress({ doFetchAddress({
latlng: `${pos.coords.latitude},${pos.coords.longitude}` latlng: `${pos.coords.latitude},${pos.coords.longitude}`
@@ -231,7 +231,7 @@ export default {
}) })
} }
} }
const saveOriginFn = o => const saveOriginFn = (o) =>
doSaveOrigin({ origin: o }).then(() => { doSaveOrigin({ origin: o }).then(() => {
origin.value = '' origin.value = ''
fetchEvents() fetchEvents()
components/pages/filters/List/index.vue
+1
View File
@@ -23,6 +23,7 @@
<script> <script>
export default { export default {
name: 'FiltersList',
props: { props: {
model: { model: {
type: Array, type: Array,
components/pages/filters/index.vue
+12 -7
View File
@@ -74,6 +74,7 @@ import { useAuth } from '../../../plugins/auth'
import { useTranslation } from '../../../plugins/i18n' import { useTranslation } from '../../../plugins/i18n'
export default { export default {
name: 'FiltersPage',
components: { components: {
List List
}, },
@@ -83,11 +84,15 @@ export default {
setTitle(t('app.links.filters')) setTitle(t('app.links.filters'))
const { isAuthenticated } = useAuth() const { isAuthenticated } = useAuth()
const { result: data, loading, refetch } = useQuery(fetchFilters) const { result: data, loading, refetch } = useQuery(fetchFilters)
const bands = useResult(data, [], result => result.bands) const bands = useResult(data, [], (result) => result.bands)
const cities = useResult(data, [], result => result.cities) const cities = useResult(data, [], (result) => result.cities)
const danceHalls = useResult(data, [], result => result.danceHalls) const danceHalls = useResult(data, [], (result) => result.danceHalls)
const municipalities = useResult(data, [], result => result.municipalities) const municipalities = useResult(
const states = useResult(data, [], result => result.states) data,
[],
(result) => result.municipalities
)
const states = useResult(data, [], (result) => result.states)
const snackbar = ref({ active: false, color: 'success', text: '' }) const snackbar = ref({ active: false, color: 'success', text: '' })
const { mutate: doToggleIgnoreBand } = useMutation(toggleIgnoreBand) const { mutate: doToggleIgnoreBand } = useMutation(toggleIgnoreBand)
const { mutate: doToggleIgnoreDanceHall } = useMutation( const { mutate: doToggleIgnoreDanceHall } = useMutation(
@@ -99,7 +104,7 @@ export default {
) )
const { mutate: doToggleIgnoreState } = useMutation(toggleIgnoreState) const { mutate: doToggleIgnoreState } = useMutation(toggleIgnoreState)
const toggleIgnoreSuccess = name => { const toggleIgnoreSuccess = (name) => {
return () => { return () => {
refetch() refetch()
snackbar.value.color = 'success' snackbar.value.color = 'success'
@@ -108,7 +113,7 @@ export default {
} }
} }
const toggleIgnoreFailed = name => { const toggleIgnoreFailed = (name) => {
return () => { return () => {
snackbar.value.color = 'error' snackbar.value.color = 'error'
snackbar.value.text = t('filters.failure', { name }) snackbar.value.text = t('filters.failure', { name })
components/pages/origins/index.vue
+5 -4
View File
@@ -70,6 +70,7 @@ import { useAuth } from '../../../plugins/auth'
import { useTranslation } from '../../../plugins/i18n' import { useTranslation } from '../../../plugins/i18n'
export default { export default {
name: 'OriginsPage',
setup() { setup() {
const { setTitle } = useMutations(['setTitle']) const { setTitle } = useMutations(['setTitle'])
const { t } = useTranslation() const { t } = useTranslation()
@@ -87,22 +88,22 @@ export default {
const origin = ref('') const origin = ref('')
const fetchAddressFn = () => { const fetchAddressFn = () => {
if (window.navigator) { if (window.navigator) {
window.navigator.geolocation.getCurrentPosition(pos => { window.navigator.geolocation.getCurrentPosition((pos) => {
enabled.value = true enabled.value = true
doFetchAddress({ doFetchAddress({
latlng: `${pos.coords.latitude},${pos.coords.longitude}` latlng: `${pos.coords.latitude},${pos.coords.longitude}`
}).then(res => { }).then((res) => {
origin.value = res.address origin.value = res.address
}) })
}) })
} }
} }
const saveOriginFn = o => const saveOriginFn = (o) =>
doSaveOrigin({ origin: o }).then(() => { doSaveOrigin({ origin: o }).then(() => {
refetch() refetch()
origin.value = '' origin.value = ''
}) })
const removeOriginFn = o => const removeOriginFn = (o) =>
doRemoveOrigin({ origin: o }).then(() => refetch()) doRemoveOrigin({ origin: o }).then(() => refetch())
return { return {
isAuthenticated, isAuthenticated,
layouts/components/themed.vue
+1
View File
@@ -8,6 +8,7 @@
import { getDarkMode } from '../../utils/localStorage' import { getDarkMode } from '../../utils/localStorage'
export default { export default {
name: 'ThemedLayout',
setup(props, context) { setup(props, context) {
context.root.$vuetify.theme.dark = getDarkMode() context.root.$vuetify.theme.dark = getDarkMode()
} }
layouts/default.vue
+6 -10
View File
@@ -103,26 +103,22 @@ import Themed from './components/themed'
import { useAuth } from '../plugins/auth' import { useAuth } from '../plugins/auth'
export default { export default {
name: 'DefaultLayout',
components: { components: {
Themed Themed
}, },
setup(props, context) { setup(props, context) {
const { router } = useRouter() const { router } = useRouter()
const { title } = useState(['title']) const { title } = useState(['title'])
const onRedirectCallback = appState => { const onRedirectCallback = (appState) => {
router.push( router.push(
appState && appState.targetUrl appState && appState.targetUrl
? appState.targetUrl ? appState.targetUrl
: window.location.pathname : window.location.pathname
) )
} }
const { const { loading, isAuthenticated, user, loginWithRedirect, logout } =
loading, useAuth(onRedirectCallback)
isAuthenticated,
user,
loginWithRedirect,
logout
} = useAuth(onRedirectCallback)
const doLogin = () => { const doLogin = () => {
loginWithRedirect.value() loginWithRedirect.value()
} }
@@ -133,14 +129,14 @@ export default {
} }
const darkMode = computed({ const darkMode = computed({
get: () => context.root.$vuetify.theme.dark, get: () => context.root.$vuetify.theme.dark,
set: val => { set: (val) => {
context.root.$vuetify.theme.dark = val context.root.$vuetify.theme.dark = val
setDarkMode(context.root.$vuetify.theme.dark) setDarkMode(context.root.$vuetify.theme.dark)
} }
}) })
const locale = computed({ const locale = computed({
get: () => context.root.$i18n.locale, get: () => context.root.$i18n.locale,
set: newLocale => { set: (newLocale) => {
if (newLocale === 'en') { if (newLocale === 'en') {
dayjs.locale(newLocale) dayjs.locale(newLocale)
} else if (newLocale === 'sv') { } else if (newLocale === 'sv') {
middleware/auth.js
+1 -1
View File
@@ -1,7 +1,7 @@
import { useAuth } from '../plugins/auth' import { useAuth } from '../plugins/auth'
export default async ({ app: { router } }) => { export default async ({ app: { router } }) => {
const onRedirectCallback = appState => { const onRedirectCallback = (appState) => {
router.push( router.push(
appState && appState.targetUrl appState && appState.targetUrl
? appState.targetUrl ? appState.targetUrl
nuxt.config.js
+2 -4
View File
@@ -47,8 +47,7 @@ export default {
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ {
rel: 'stylesheet', rel: 'stylesheet',
href: href: 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'
'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'
}, },
{ {
rel: 'stylesheet', rel: 'stylesheet',
@@ -56,8 +55,7 @@ export default {
}, },
{ {
rel: 'stylesheet', rel: 'stylesheet',
href: href: 'https://cdn.materialdesignicons.com/3.3.92/css/materialdesignicons.min.css'
'https://cdn.materialdesignicons.com/3.3.92/css/materialdesignicons.min.css'
} }
], ],
meta: [ meta: [
pages/filters.vue
+1
View File
@@ -7,6 +7,7 @@ import Filters from '../components/pages/filters'
import { useTranslation } from '../plugins/i18n' import { useTranslation } from '../plugins/i18n'
export default { export default {
name: 'FiltersPage',
components: { components: {
Filters Filters
}, },
pages/index.vue
+1
View File
@@ -7,6 +7,7 @@ import Events from '../components/pages/events'
import { useTranslation } from '../plugins/i18n' import { useTranslation } from '../plugins/i18n'
export default { export default {
name: 'IndexPage',
components: { components: {
Events Events
}, },
pages/origins.vue
+1
View File
@@ -7,6 +7,7 @@ import Origins from '../components/pages/origins'
import { useTranslation } from '../plugins/i18n' import { useTranslation } from '../plugins/i18n'
export default { export default {
name: 'OriginsPage',
components: { components: {
Origins Origins
}, },
plugins/apollo.js
+3 -3
View File
@@ -22,13 +22,13 @@ const httpLink = createHttpLink({
uri: apiUrl uri: apiUrl
}) })
const getToken = async options => { const getToken = async (options) => {
const { getTokenSilently } = useAuth() const { getTokenSilently } = useAuth()
return getTokenSilently.value(options) return getTokenSilently.value(options)
} }
const authLink = setContext(async (_, { headers }) => { const authLink = setContext(async (_, { headers }) => {
return getToken().then(token => ({ return getToken().then((token) => ({
headers: { headers: {
...headers, ...headers,
authorization: token ? `Bearer ${token}` : '' authorization: token ? `Bearer ${token}` : ''
@@ -52,7 +52,7 @@ const instance = new ApolloClient({
} }
}) })
export default function ({app}) { export default function ({ app }) {
app.setup = () => { app.setup = () => {
provide(DefaultApolloClient, instance) provide(DefaultApolloClient, instance)
} }
plugins/auth.js
+22 -22
View File
@@ -31,11 +31,11 @@ export const useAuth = (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
popupOpen: false, popupOpen: false,
error: null, error: null,
/** Authenticates the user using a popup window */ /** Authenticates the user using a popup window */
loginWithPopup: async o => { loginWithPopup: async (o) => {
this.popupOpen = true this.popupOpen = true
try { try {
await instance.auth0Client.then(client => client.loginWithPopup(o)) await instance.auth0Client.then((client) => client.loginWithPopup(o))
} catch (e) { } catch (e) {
// eslint-disable-next-line // eslint-disable-next-line
console.error(e) console.error(e)
@@ -43,7 +43,7 @@ export const useAuth = (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
instance.popupOpen = false instance.popupOpen = false
} }
instance.user = await instance.auth0Client.then(client => instance.user = await instance.auth0Client.then((client) =>
client.getUser() client.getUser()
) )
instance.isAuthenticated = true instance.isAuthenticated = true
@@ -52,10 +52,10 @@ export const useAuth = (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
handleRedirectCallback: async () => { handleRedirectCallback: async () => {
instance.loading = true instance.loading = true
try { try {
await instance.auth0Client.then(client => await instance.auth0Client.then((client) =>
client.handleRedirectCallback() client.handleRedirectCallback()
) )
instance.user = await instance.auth0Client.then(client => instance.user = await instance.auth0Client.then((client) =>
client.getUser() client.getUser()
) )
instance.isAuthenticated = true instance.isAuthenticated = true
@@ -66,36 +66,36 @@ export const useAuth = (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
} }
}, },
/** Authenticates the user using the redirect method */ /** Authenticates the user using the redirect method */
loginWithRedirect: o => { loginWithRedirect: (o) => {
return instance.auth0Client.then(client => client.loginWithRedirect(o)) return instance.auth0Client.then((client) => client.loginWithRedirect(o))
}, },
/** Returns all the claims present in the ID token */ /** Returns all the claims present in the ID token */
getIdTokenClaims: o => { getIdTokenClaims: (o) => {
return instance.auth0Client.then(client => client.getIdTokenClaims(o)) return instance.auth0Client.then((client) => client.getIdTokenClaims(o))
}, },
/** Returns the access token. If the token is invalid or missing, a new one is retrieved */ /** Returns the access token. If the token is invalid or missing, a new one is retrieved */
getTokenSilently: o => { getTokenSilently: (o) => {
return instance.auth0Client.then(client => { return instance.auth0Client.then((client) => {
return client.getTokenSilently(o) return client.getTokenSilently(o)
}) })
}, },
/** Gets the access token using a popup window */ /** Gets the access token using a popup window */
getTokenWithPopup: o => { getTokenWithPopup: (o) => {
return instance.auth0Client.then(client => client.getTokenWithPopup(o)) return instance.auth0Client.then((client) => client.getTokenWithPopup(o))
}, },
/** Logs the user out and removes their session on the authorization server */ /** Logs the user out and removes their session on the authorization server */
logout: o => { logout: (o) => {
return instance.auth0Client.then(client => client.logout(o)) return instance.auth0Client.then((client) => client.logout(o))
} }
}) })
const fetchUser = () => { const fetchUser = () => {
instance.auth0Client instance.auth0Client
.then(client => client.isAuthenticated()) .then((client) => client.isAuthenticated())
.then(a => { .then((a) => {
instance.isAuthenticated = a instance.isAuthenticated = a
instance.auth0Client.then(client => instance.auth0Client.then((client) =>
client.getUser().then(u => { client.getUser().then((u) => {
instance.user = u instance.user = u
instance.loading = false instance.loading = false
}) })
@@ -104,7 +104,7 @@ export const useAuth = (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
} }
// Create a new instance of the SDK client using members of the given options object // Create a new instance of the SDK client using members of the given options object
instance.auth0Client = createAuth0Client(options) instance.auth0Client = createAuth0Client(options)
instance.auth0Client.then(client => { instance.auth0Client.then((client) => {
instance.loading = true instance.loading = true
try { try {
// If the user is returning to the app after authentication.. // If the user is returning to the app after authentication..
@@ -115,7 +115,7 @@ export const useAuth = (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
// handle the redirect and retrieve tokens // handle the redirect and retrieve tokens
client client
.handleRedirectCallback() .handleRedirectCallback()
.then(appState => { .then((appState) => {
// Notify subscribers that the redirect callback has happened, passing the appState // Notify subscribers that the redirect callback has happened, passing the appState
// (useful for retrieving any pre-authentication state) // (useful for retrieving any pre-authentication state)
onRedirectCallback(appState) onRedirectCallback(appState)
@@ -123,7 +123,7 @@ export const useAuth = (onRedirectCallback = DEFAULT_REDIRECT_CALLBACK) => {
fetchUser() fetchUser()
}) })
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
.catch(e => console.error('error handling redirect callback', e)) .catch((e) => console.error('error handling redirect callback', e))
} else { } else {
fetchUser() fetchUser()
} }
utils/localStorage.js
+2 -2
View File
@@ -2,8 +2,8 @@ const DARK_MODE_KEY = 'dancefinder-dark-mode'
const LOCALE_KEY = 'dancefinder-locale' const LOCALE_KEY = 'dancefinder-locale'
const getDarkMode = () => localStorage.getItem(DARK_MODE_KEY) 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 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 }