diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index c75990a63..f8eb5793b 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -53,6 +53,19 @@ js_deps: - js/node_modules allow_failure: true +js_check: + stage: front + before_script: + - cd js + - npm install + script: + - npm run lint + after_script: + - cd ../ + cache: + paths: + - js/node_modules + elixir_check: stage: back before_script: diff --git a/js/src/App.vue b/js/src/App.vue index 79b809b51..11f6b01d0 100644 --- a/js/src/App.vue +++ b/js/src/App.vue @@ -21,55 +21,55 @@ import NavBar from '@/components/NavBar.vue'; import { Component, Vue } from 'vue-property-decorator'; import { AUTH_TOKEN, AUTH_USER_ACTOR, AUTH_USER_EMAIL, AUTH_USER_ID } from '@/constants'; import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user'; -import { ICurrentUser } from '@/types/current-user.model' +import { ICurrentUser } from '@/types/current-user.model'; @Component({ apollo: { currentUser: { - query: CURRENT_USER_CLIENT - } + query: CURRENT_USER_CLIENT, + }, }, components: { - NavBar - } + NavBar, + }, }) export default class App extends Vue { drawer = false; fab = false; items = [ { - icon: "poll", - text: "Events", - route: "EventList", - role: null + icon: 'poll', + text: 'Events', + route: 'EventList', + role: null, }, { - icon: "group", - text: "Groups", - route: "GroupList", - role: null + icon: 'group', + text: 'Groups', + route: 'GroupList', + role: null, }, - { icon: "settings", text: "Settings", role: "ROLE_USER" }, - { icon: "chat_bubble", text: "Send feedback", role: "ROLE_USER" }, - { icon: "help", text: "Help", role: null }, - { icon: "phonelink", text: "App downloads", role: null } + { icon: 'settings', text: 'Settings', role: 'ROLE_USER' }, + { icon: 'chat_bubble', text: 'Send feedback', role: 'ROLE_USER' }, + { icon: 'help', text: 'Help', role: null }, + { icon: 'phonelink', text: 'App downloads', role: null }, ]; error = { timeout: 3000, show: false, - text: "" + text: '', }; currentUser!: ICurrentUser; actor = localStorage.getItem(AUTH_USER_ACTOR); mounted () { - this.initializeCurrentUser() + this.initializeCurrentUser(); } get displayed_name () { // FIXME: load actor - return "no implemented"; + return 'no implemented'; // return this.actor.display_name === null ? this.actor.username : this.actor.display_name } diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue index cb6a18f31..9023e1679 100644 --- a/js/src/components/Event/EventCard.vue +++ b/js/src/components/Event/EventCard.vue @@ -10,7 +10,7 @@ <router-link :to="{ name: 'Event', params:{ uuid: event.uuid } }"> <h2 class="title">{{ event.title }}</h2> </router-link> - <span>{{ event.begins_on | formatDay }}</span> + <span>{{ event.beginsOn | formatDay }}</span> </div> <div v-if="!hideDetails"> <div v-if="event.participants.length === 1"> @@ -33,8 +33,8 @@ </template> <script lang="ts"> - import {IEvent, ParticipantRole} from "@/types/event.model"; -import { Component, Prop, Vue } from "vue-property-decorator"; +import { IEvent, ParticipantRole } from '@/types/event.model'; +import { Component, Prop, Vue } from 'vue-property-decorator'; @Component export default class EventCard extends Vue { @@ -43,8 +43,8 @@ export default class EventCard extends Vue { data() { return { - ParticipantRole: ParticipantRole - } + ParticipantRole, + }; } } </script> diff --git a/js/src/components/Group/GroupCard.vue b/js/src/components/Group/GroupCard.vue index 895aee0cd..a476821ce 100644 --- a/js/src/components/Group/GroupCard.vue +++ b/js/src/components/Group/GroupCard.vue @@ -19,8 +19,8 @@ </template> <script lang="ts"> -import { Component, Prop, Vue } from "vue-property-decorator"; -import { IGroup } from "../../types/actor.model"; +import { Component, Prop, Vue } from 'vue-property-decorator'; +import { IGroup } from '../../types/actor.model'; @Component export default class GroupCard extends Vue { diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue index 350c0b172..4eac95233 100644 --- a/js/src/components/NavBar.vue +++ b/js/src/components/NavBar.vue @@ -43,14 +43,14 @@ </template> <script lang="ts"> -import { Component, Vue, Watch } from "vue-property-decorator"; -import { SEARCH } from "@/graphql/search"; -import { CURRENT_USER_CLIENT } from "@/graphql/user"; -import { onLogout } from "@/vue-apollo"; -import { deleteUserData } from "@/utils/auth"; -import { LOGGED_PERSON } from "@/graphql/actor"; +import { Component, Vue, Watch } from 'vue-property-decorator'; +import { SEARCH } from '@/graphql/search'; +import { CURRENT_USER_CLIENT } from '@/graphql/user'; +import { onLogout } from '@/vue-apollo'; +import { deleteUserData } from '@/utils/auth'; +import { LOGGED_PERSON } from '@/graphql/actor'; import { IActor, IPerson } from '@/types/actor.model'; -import { RouteName } from '@/router' +import { RouteName } from '@/router'; @Component({ apollo: { @@ -58,25 +58,25 @@ import { RouteName } from '@/router' query: SEARCH, variables() { return { - searchText: this.searchText + searchText: this.searchText, }; }, skip() { return !this.searchText; - } + }, }, currentUser: { - query: CURRENT_USER_CLIENT + query: CURRENT_USER_CLIENT, }, loggedPerson: { - query: LOGGED_PERSON - } - } + query: LOGGED_PERSON, + }, + }, }) export default class NavBar extends Vue { notifications = [ - { header: "Coucou" }, - { title: "T'as une notification", subtitle: "Et elle est cool" } + { header: 'Coucou' }, + { title: "T'as une notification", subtitle: 'Et elle est cool' }, ]; model = null; search: any[] = []; @@ -87,12 +87,12 @@ export default class NavBar extends Vue { get items() { return this.search.map(searchEntry => { switch (searchEntry.__typename) { - case "Actor": + case 'Actor': searchEntry.label = searchEntry.preferredUsername + - (searchEntry.domain === null ? "" : `@${searchEntry.domain}`); + (searchEntry.domain === null ? '' : `@${searchEntry.domain}`); break; - case "Event": + case 'Event': searchEntry.label = searchEntry.title; break; } @@ -124,8 +124,8 @@ export default class NavBar extends Vue { } enter() { - console.log("enter"); - this.$apollo.queries["search"].refetch(); + console.log('enter'); + this.$apollo.queries['search'].refetch(); } logout() { diff --git a/js/src/graphql/event.ts b/js/src/graphql/event.ts index d4225b9ea..76171e59a 100644 --- a/js/src/graphql/event.ts +++ b/js/src/graphql/event.ts @@ -24,8 +24,8 @@ export const FETCH_EVENT = gql` status, visibility, thumbnail, - large_image, - publish_at, + largeImage, + publishAt, category, # online_address, # phone_address, @@ -60,8 +60,8 @@ export const FETCH_EVENTS = gql` status, visibility, thumbnail, - large_image, - publish_at, + largeImage, + publishAt, # online_address, # phone_address, organizerActor { diff --git a/js/src/main.ts b/js/src/main.ts index 4b666b339..b45563d96 100644 --- a/js/src/main.ts +++ b/js/src/main.ts @@ -3,7 +3,7 @@ import Vue from 'vue'; // import * as VueGoogleMaps from 'vue2-google-maps'; import VueSimpleMarkdown from 'vue-simple-markdown'; -import Buefy from 'buefy' +import Buefy from 'buefy'; import 'buefy/dist/buefy.css'; import GetTextPlugin from 'vue-gettext'; import App from '@/App.vue'; @@ -16,7 +16,7 @@ Vue.config.productionTip = false; Vue.use(VueSimpleMarkdown); Vue.use(Buefy, { - defaultContainerElement: '#mobilizon' + defaultContainerElement: '#mobilizon', }); const language = (window.navigator as any).userLanguage || window.navigator.language; @@ -34,8 +34,8 @@ Vue.config.language = language.replace('-', '_'); /* eslint-disable no-new */ new Vue({ router, + apolloProvider, el: '#app', template: '<App/>', - apolloProvider, components: { App }, }); diff --git a/js/src/types/current-user.model.ts b/js/src/types/current-user.model.ts index 394776ae1..94f32b1b1 100644 --- a/js/src/types/current-user.model.ts +++ b/js/src/types/current-user.model.ts @@ -1,4 +1,4 @@ export interface ICurrentUser { - id: number, - email: string, + id: number; + email: string; } diff --git a/js/src/types/event.model.ts b/js/src/types/event.model.ts index 9acf0cade..826df09bd 100644 --- a/js/src/types/event.model.ts +++ b/js/src/types/event.model.ts @@ -1,4 +1,4 @@ -import {Actor, IActor} from './actor.model'; +import { Actor, IActor } from './actor.model'; export enum EventStatus { TENTATIVE, @@ -51,17 +51,17 @@ export interface IEvent { description: string; category: Category; - begins_on: Date; - ends_on: Date; - publish_at: Date; + beginsOn: Date; + endsOn: Date; + publishAt: Date; status: EventStatus; visibility: EventVisibility; - join_options: EventJoinOptions; + joinOptions: EventJoinOptions; thumbnail: string; - large_image: string; + largeImage: string; organizerActor: IActor; attributedTo: IActor; @@ -73,15 +73,15 @@ export interface IEvent { export class EventModel implements IEvent { - begins_on: Date = new Date(); + beginsOn: Date = new Date(); category: Category = Category.MEETING; description: string = ''; - ends_on: Date = new Date(); - join_options: EventJoinOptions = EventJoinOptions.FREE; - large_image: string = ''; + endsOn: Date = new Date(); + joinOptions: EventJoinOptions = EventJoinOptions.FREE; + largeImage: string = ''; local: boolean = true; participants: IParticipant[] = []; - publish_at: Date = new Date(); + publishAt: Date = new Date(); status: EventStatus = EventStatus.CONFIRMED; thumbnail: string = ''; title: string = ''; @@ -90,4 +90,4 @@ export class EventModel implements IEvent { visibility: EventVisibility = EventVisibility.PUBLIC; attributedTo: IActor = new Actor(); organizerActor: IActor = new Actor(); -} \ No newline at end of file +} diff --git a/js/src/types/login.model.ts b/js/src/types/login.model.ts index d3d3335e8..73289a066 100644 --- a/js/src/types/login.model.ts +++ b/js/src/types/login.model.ts @@ -1,7 +1,7 @@ import { ICurrentUser } from '@/types/current-user.model'; export interface ILogin { - user: ICurrentUser, + user: ICurrentUser; - token: string, + token: string; } diff --git a/js/src/utils/auth.ts b/js/src/utils/auth.ts index 0592696c3..c2cb8010a 100644 --- a/js/src/utils/auth.ts +++ b/js/src/utils/auth.ts @@ -8,7 +8,7 @@ export function saveUserData(obj: ILogin) { } export function deleteUserData() { - for (const key of [ AUTH_USER_ID, AUTH_USER_EMAIL, AUTH_TOKEN ]) { + for (const key of [AUTH_USER_ID, AUTH_USER_EMAIL, AUTH_TOKEN]) { localStorage.removeItem(key); } } diff --git a/js/src/views/Account/Identities.vue b/js/src/views/Account/Identities.vue index 3b70a6bfc..d196486c2 100644 --- a/js/src/views/Account/Identities.vue +++ b/js/src/views/Account/Identities.vue @@ -46,19 +46,19 @@ </template> <script lang="ts"> -import { Component, Vue } from "vue-property-decorator"; -import { IDENTITIES, LOGGED_PERSON, CREATE_PERSON } from "../../graphql/actor"; -import { IPerson } from "@/types/actor.model"; +import { Component, Vue } from 'vue-property-decorator'; +import { IDENTITIES, LOGGED_PERSON, CREATE_PERSON } from '../../graphql/actor'; +import { IPerson } from '@/types/actor.model'; @Component({ apollo: { identities: { - query: IDENTITIES + query: IDENTITIES, }, loggedPerson: { - query: LOGGED_PERSON - } - } + query: LOGGED_PERSON, + }, + }, }) export default class Identities extends Vue { identities: IPerson[] = []; @@ -73,7 +73,7 @@ export default class Identities extends Vue { try { await this.$apollo.mutate({ mutation: CREATE_PERSON, - variables: this.newPerson + variables: this.newPerson, }); this.showCreateProfileForm = false; this.$apollo.queries.identities.refresh(); diff --git a/js/src/views/Account/Profile.vue b/js/src/views/Account/Profile.vue index 33d7f8d32..628fbd9b1 100644 --- a/js/src/views/Account/Profile.vue +++ b/js/src/views/Account/Profile.vue @@ -66,10 +66,10 @@ </template> <script lang="ts"> -import { FETCH_PERSON, LOGGED_PERSON } from "@/graphql/actor"; -import { Component, Prop, Vue, Watch } from "vue-property-decorator"; -import EventCard from "@/components/Event/EventCard.vue"; -import { RouteName } from '@/router' +import { FETCH_PERSON, LOGGED_PERSON } from '@/graphql/actor'; +import { Component, Prop, Vue, Watch } from 'vue-property-decorator'; +import EventCard from '@/components/Event/EventCard.vue'; +import { RouteName } from '@/router'; @Component({ apollo: { @@ -77,17 +77,17 @@ import { RouteName } from '@/router' query: FETCH_PERSON, variables() { return { - name: this.$route.params.name + name: this.$route.params.name, }; - } + }, }, loggedPerson: { - query: LOGGED_PERSON - } + query: LOGGED_PERSON, + }, }, components: { - EventCard - } + EventCard, + }, }) export default class Profile extends Vue { @Prop({ type: String, required: true }) name!: string; @@ -95,7 +95,7 @@ export default class Profile extends Vue { person = null; // call again the method if the route changes - @Watch("$route") + @Watch('$route') onRouteChange() { // this.fetchData() } @@ -106,7 +106,7 @@ export default class Profile extends Vue { } nl2br(text) { - return text.replace(/(?:\r\n|\r|\n)/g, "<br>"); + return text.replace(/(?:\r\n|\r|\n)/g, '<br>'); } } </script> diff --git a/js/src/views/Account/Register.vue b/js/src/views/Account/Register.vue index 112afe724..b872b6290 100644 --- a/js/src/views/Account/Register.vue +++ b/js/src/views/Account/Register.vue @@ -70,11 +70,11 @@ </template> <script lang="ts"> -import { Component, Prop, Vue } from "vue-property-decorator"; -import { IPerson } from "@/types/actor.model"; -import { REGISTER_PERSON } from "@/graphql/actor"; -import { MOBILIZON_INSTANCE_HOST } from "@/api/_entrypoint"; -import { RouteName } from '@/router' +import { Component, Prop, Vue } from 'vue-property-decorator'; +import { IPerson } from '@/types/actor.model'; +import { REGISTER_PERSON } from '@/graphql/actor'; +import { MOBILIZON_INSTANCE_HOST } from '@/api/_entrypoint'; +import { RouteName } from '@/router'; @Component export default class Register extends Vue { @@ -104,7 +104,7 @@ export default class Register extends Vue { this.errors = {}; await this.$apollo.mutate({ mutation: REGISTER_PERSON, - variables: Object.assign({ email: this.email }, this.person) + variables: Object.assign({ email: this.email }, this.person), }); this.validationSent = true; @@ -115,7 +115,7 @@ export default class Register extends Vue { this.errors = error.graphQLErrors.reduce((acc, error) => { acc[error.details] = error.message; return acc; - }, {}); + }, {}); console.error(error); console.error(this.errors); } diff --git a/js/src/views/Event/Create.vue b/js/src/views/Event/Create.vue index 93efde77f..e29ae7228 100644 --- a/js/src/views/Event/Create.vue +++ b/js/src/views/Event/Create.vue @@ -10,7 +10,7 @@ <b-input aria-required="true" required v-model="event.title"/> </b-field> - <b-datepicker v-model="event.begins_on" inline></b-datepicker> + <b-datepicker v-model="event.beginsOn" inline></b-datepicker> <b-field :label="$gettext('Category')"> <b-select placeholder="Select a category" v-model="event.category"> @@ -31,23 +31,23 @@ </template> <script lang="ts"> - // import Location from '@/components/Location'; - import {CREATE_EVENT, EDIT_EVENT} from "@/graphql/event"; - import {Component, Prop, Vue} from "vue-property-decorator"; - import { +// import Location from '@/components/Location'; +import { CREATE_EVENT, EDIT_EVENT } from '@/graphql/event'; +import { Component, Prop, Vue } from 'vue-property-decorator'; +import { Category, IEvent, EventModel, - } from "@/types/event.model"; - import {LOGGED_PERSON} from "@/graphql/actor"; - import {IPerson, Person} from "@/types/actor.model"; + } from '@/types/event.model'; +import { LOGGED_PERSON } from '@/graphql/actor'; +import { IPerson, Person } from '@/types/actor.model'; @Component({ apollo: { loggedPerson: { query: LOGGED_PERSON, - } - } + }, + }, }) export default class CreateEvent extends Vue { @Prop({ required: false, type: String }) uuid!: string; @@ -61,23 +61,23 @@ export default class CreateEvent extends Vue { this.event.organizerActor = this.loggedPerson; this.event.attributedTo = this.loggedPerson; - if (this.event.uuid === "") { + if (this.event.uuid === '') { this.$apollo .mutate({ mutation: CREATE_EVENT, variables: { title: this.event.title, description: this.event.description, - beginsOn: this.event.begins_on, + beginsOn: this.event.beginsOn, category: this.event.category, - organizerActorId: this.event.organizerActor.id - } + organizerActorId: this.event.organizerActor.id, + }, }) .then(data => { - console.log("event created", data); + console.log('event created', data); this.$router.push({ - name: "Event", - params: { uuid: data.data.createEvent.uuid } + name: 'Event', + params: { uuid: data.data.createEvent.uuid }, }); }) .catch(error => { @@ -86,12 +86,12 @@ export default class CreateEvent extends Vue { } else { this.$apollo .mutate({ - mutation: EDIT_EVENT + mutation: EDIT_EVENT, }) .then(data => { this.$router.push({ - name: "Event", - params: { uuid: data.data.uuid } + name: 'Event', + params: { uuid: data.data.uuid }, }); }) .catch(error => { diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue index d16082ea8..c3acf532b 100644 --- a/js/src/views/Event/Event.vue +++ b/js/src/views/Event/Event.vue @@ -9,7 +9,7 @@ </figure> </div> <div class="card-content"> - <span>{{ event.begins_on | formatDay }}</span> + <span>{{ event.beginsOn | formatDay }}</span> <span class="tag is-primary">{{ event.category }}</span> <h1 class="title">{{ event.title }}</h1> <router-link @@ -44,7 +44,7 @@ </p> </div> <div> - <span>{{ event.begins_on | formatDate }} - {{ event.ends_on | formatDate }}</span> + <span>{{ event.beginsOn | formatDate }} - {{ event.endsOn | formatDate }}</span> </div> <p v-if="actorIsOrganizer()"> <translate>You are an organizer.</translate> @@ -100,11 +100,10 @@ </template> <script lang="ts"> -import { DELETE_EVENT, FETCH_EVENT, LEAVE_EVENT } from '@/graphql/event'; +import { DELETE_EVENT, FETCH_EVENT, JOIN_EVENT, LEAVE_EVENT } from '@/graphql/event'; import { Component, Prop, Vue } from 'vue-property-decorator'; import { LOGGED_PERSON } from '@/graphql/actor'; import { IEvent, IParticipant } from '@/types/event.model'; -import { JOIN_EVENT } from '@/graphql/event'; import { IPerson } from '@/types/actor.model'; import { RouteName } from '@/router'; import 'vue-simple-markdown/dist/vue-simple-markdown.css'; @@ -115,14 +114,14 @@ import 'vue-simple-markdown/dist/vue-simple-markdown.css'; query: FETCH_EVENT, variables() { return { - uuid: this.uuid + uuid: this.uuid, }; - } + }, }, loggedPerson: { - query: LOGGED_PERSON - } - } + query: LOGGED_PERSON, + }, + }, }) export default class Event extends Vue { @Prop({ type: String, required: true }) uuid!: string; @@ -140,10 +139,10 @@ export default class Event extends Vue { variables: { id: this.event.id, actorId: this.loggedPerson.id, - } + }, }); - router.push({ name: RouteName.EVENT }) + router.push({ name: RouteName.EVENT }); } catch (error) { console.error(error); } @@ -161,13 +160,13 @@ export default class Event extends Vue { const event = store.readQuery<IEvent>({ query: FETCH_EVENT }); if (event === null) { console.error('Cannot update event participant cache, because of null value.'); - return + return; } - event.participants = event.participants.concat([ joinEvent ]); + event.participants = event.participants.concat([joinEvent]); store.writeQuery({ query: FETCH_EVENT, data: event }); - } + }, }); } catch (error) { console.error(error); @@ -186,14 +185,14 @@ export default class Event extends Vue { const event = store.readQuery<IEvent>({ query: FETCH_EVENT }); if (event === null) { console.error('Cannot update event participant cache, because of null value.'); - return + return; } event.participants = event.participants .filter(p => p.actor.id !== leaveEvent.actor.id); store.writeQuery({ query: FETCH_EVENT, data: event }); - } + }, }); } catch (error) { console.error(error); diff --git a/js/src/views/Event/EventList.vue b/js/src/views/Event/EventList.vue index 2578b3dc7..638465af6 100644 --- a/js/src/views/Event/EventList.vue +++ b/js/src/views/Event/EventList.vue @@ -27,8 +27,8 @@ const ngeohash = require('ngeohash'); @Component({ components: { - EventCard - } + EventCard, + }, }) export default class EventList extends Vue { @Prop(String) location!: string; @@ -39,7 +39,7 @@ export default class EventList extends Vue { locationText = ''; created() { - this.fetchData(this.$router.currentRoute.params["location"]); + this.fetchData(this.$router.currentRoute.params['location']); } beforeRouteUpdate(to, from, next) { @@ -47,7 +47,7 @@ export default class EventList extends Vue { next(); } - @Watch("locationChip") + @Watch('locationChip') onLocationChipChange(val) { if (val === false) { this.$router.push({ name: RouteName.EVENT_LIST }); @@ -61,7 +61,7 @@ export default class EventList extends Vue { } fetchData(location) { - let queryString = "/events"; + let queryString = '/events'; if (location) { queryString += `?geohash=${location}`; const { latitude, longitude } = ngeohash.decode(location); diff --git a/js/src/views/Group/Create.vue b/js/src/views/Group/Create.vue index c155ba59d..fa90b1479 100644 --- a/js/src/views/Group/Create.vue +++ b/js/src/views/Group/Create.vue @@ -26,7 +26,7 @@ </template> <script lang="ts"> -import { Component, Vue } from "vue-property-decorator"; +import { Component, Vue } from 'vue-property-decorator'; @Component({}) export default class CreateGroup extends Vue { @@ -74,13 +74,13 @@ export default class CreateGroup extends Vue { this.group.address = { geo: { latitude: addressData.latitude, - longitude: addressData.longitude + longitude: addressData.longitude, }, addressCountry: addressData.country, addressLocality: addressData.city, addressRegion: addressData.administrative_area_level_1, postalCode: addressData.postal_code, - streetAddress: `${addressData.street_number} ${addressData.route}` + streetAddress: `${addressData.street_number} ${addressData.route}`, }; } } diff --git a/js/src/views/Group/Group.vue b/js/src/views/Group/Group.vue index 018468279..29cb47aa8 100644 --- a/js/src/views/Group/Group.vue +++ b/js/src/views/Group/Group.vue @@ -60,9 +60,9 @@ </template> <script lang="ts"> -import { Component, Prop, Vue, Watch } from "vue-property-decorator"; -import EventCard from "@/components/Event/EventCard.vue"; -import { FETCH_PERSON, LOGGED_PERSON } from "@/graphql/actor"; +import { Component, Prop, Vue, Watch } from 'vue-property-decorator'; +import EventCard from '@/components/Event/EventCard.vue'; +import { FETCH_PERSON, LOGGED_PERSON } from '@/graphql/actor'; @Component({ apollo: { @@ -70,17 +70,17 @@ import { FETCH_PERSON, LOGGED_PERSON } from "@/graphql/actor"; query: FETCH_PERSON, variables() { return { - name: this.$route.params.name + name: this.$route.params.name, }; - } + }, }, loggedPerson: { - query: LOGGED_PERSON - } + query: LOGGED_PERSON, + }, }, components: { - EventCard - } + EventCard, + }, }) export default class Group extends Vue { @Prop({ type: String, required: true }) name!: string; @@ -92,7 +92,7 @@ export default class Group extends Vue { this.fetchData(); } - @Watch("$route") + @Watch('$route') onRouteChanged() { // call again the method if the route changes this.fetchData(); diff --git a/js/src/views/Group/GroupList.vue b/js/src/views/Group/GroupList.vue index 354c8e97c..dcc814af9 100644 --- a/js/src/views/Group/GroupList.vue +++ b/js/src/views/Group/GroupList.vue @@ -32,7 +32,7 @@ export default class GroupList extends Vue { } usernameWithDomain(actor) { - return actor.username + (actor.domain === null ? "" : `@${actor.domain}`); + return actor.username + (actor.domain === null ? '' : `@${actor.domain}`); } fetchData() { @@ -57,7 +57,7 @@ export default class GroupList extends Vue { viewActor(actor) { this.$router.push({ name: RouteName.GROUP, - params: { name: this.usernameWithDomain(actor) } + params: { name: this.usernameWithDomain(actor) }, }); } diff --git a/js/src/views/Home.vue b/js/src/views/Home.vue index 488a270eb..25a6fb911 100644 --- a/js/src/views/Home.vue +++ b/js/src/views/Home.vue @@ -51,25 +51,20 @@ import { RouteName } from '@/router'; apollo: { events: { query: FETCH_EVENTS, - fetchPolicy: "no-cache" // Debug me: https://github.com/apollographql/apollo-client/issues/3030 + fetchPolicy: 'no-cache', // Debug me: https://github.com/apollographql/apollo-client/issues/3030 }, loggedPerson: { - query: LOGGED_PERSON + query: LOGGED_PERSON, }, currentUser: { - query: CURRENT_USER_CLIENT - } + query: CURRENT_USER_CLIENT, + }, }, components: { - EventCard - } + EventCard, + }, }) export default class Home extends Vue { - searchTerm = null; - location_field = { - loading: false, - search: null - }; events = []; locations = []; city = { name: null }; @@ -124,9 +119,9 @@ export default class Home extends Vue { const geoHash = ngeohash.encode( addressData.latitude, addressData.longitude, - 11 + 11, ); - sessionStorage.setItem("City", geoHash); + sessionStorage.setItem('City', geoHash); this.$router.push({ name: RouteName.EVENT_LIST, params: { location: geoHash } }); } diff --git a/js/src/views/Location.vue b/js/src/views/Location.vue index 0c0c7dd8d..49e4cf138 100644 --- a/js/src/views/Location.vue +++ b/js/src/views/Location.vue @@ -3,28 +3,28 @@ </template> <script lang="ts"> -import { Component, Prop, Vue } from "vue-property-decorator"; +import { Component, Prop, Vue } from 'vue-property-decorator'; @Component export default class Location extends Vue { @Prop(String) address!: string; - description = "Paris, France"; + description = 'Paris, France'; center = { lat: 48.85, lng: 2.35 }; markers: any[] = []; setPlace(place) { this.center = { lat: place.geometry.location.lat(), - lng: place.geometry.location.lng() + lng: place.geometry.location.lng(), }; this.markers = [ { - position: { lat: this.center.lat, lng: this.center.lng } - } + position: { lat: this.center.lat, lng: this.center.lng }, + }, ]; - this.$emit("input", place.formatted_address); + this.$emit('input', place.formatted_address); } } </script> diff --git a/js/src/views/User/Login.vue b/js/src/views/User/Login.vue index 5bdbbdabc..770649bda 100644 --- a/js/src/views/User/Login.vue +++ b/js/src/views/User/Login.vue @@ -53,29 +53,29 @@ </template> <script lang="ts"> -import { Component, Prop, Vue } from "vue-property-decorator"; -import { LOGIN } from "@/graphql/auth"; -import { validateEmailField, validateRequiredField } from "@/utils/validators"; -import { saveUserData } from "@/utils/auth"; -import { ILogin } from "@/types/login.model"; -import { UPDATE_CURRENT_USER_CLIENT } from "@/graphql/user"; -import { onLogin } from "@/vue-apollo"; -import { RouteName } from '@/router' +import { Component, Prop, Vue } from 'vue-property-decorator'; +import { LOGIN } from '@/graphql/auth'; +import { validateEmailField, validateRequiredField } from '@/utils/validators'; +import { saveUserData } from '@/utils/auth'; +import { ILogin } from '@/types/login.model'; +import { UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user'; +import { onLogin } from '@/vue-apollo'; +import { RouteName } from '@/router'; @Component export default class Login extends Vue { - @Prop({ type: String, required: false, default: "" }) email!: string; - @Prop({ type: String, required: false, default: "" }) password!: string; + @Prop({ type: String, required: false, default: '' }) email!: string; + @Prop({ type: String, required: false, default: '' }) password!: string; credentials = { - email: "", - password: "" + email: '', + password: '', }; validationSent = false; errors: string[] = []; rules = { required: validateRequiredField, - email: validateEmailField + email: validateEmailField, }; user: any; @@ -99,8 +99,8 @@ export default class Login extends Vue { mutation: LOGIN, variables: { email: this.credentials.email, - password: this.credentials.password - } + password: this.credentials.password, + }, }); saveUserData(result.data.login); @@ -109,8 +109,8 @@ export default class Login extends Vue { mutation: UPDATE_CURRENT_USER_CLIENT, variables: { id: result.data.login.user.id, - email: this.credentials.email - } + email: this.credentials.email, + }, }); onLogin(this.$apollo); diff --git a/js/src/views/User/PasswordReset.vue b/js/src/views/User/PasswordReset.vue index 7fb58109b..61676fd23 100644 --- a/js/src/views/User/PasswordReset.vue +++ b/js/src/views/User/PasswordReset.vue @@ -35,28 +35,28 @@ </template> <script lang="ts"> -import { Component, Prop, Vue } from "vue-property-decorator"; -import { validateRequiredField } from "@/utils/validators"; -import { RESET_PASSWORD } from "@/graphql/auth"; -import { saveUserData } from "@/utils/auth"; -import { ILogin } from "@/types/login.model"; -import { RouteName } from '@/router' +import { Component, Prop, Vue } from 'vue-property-decorator'; +import { validateRequiredField } from '@/utils/validators'; +import { RESET_PASSWORD } from '@/graphql/auth'; +import { saveUserData } from '@/utils/auth'; +import { ILogin } from '@/types/login.model'; +import { RouteName } from '@/router'; @Component export default class PasswordReset extends Vue { @Prop({ type: String, required: true }) token!: string; credentials = { - password: "", - password_confirmation: "" + password: '', + password_confirmation: '', } as { password: string; password_confirmation: string }; errors: string[] = []; rules = { - password_length: value => - value.length > 6 || "Password must be at least 6 characters long", + password_length: (value: string) => + value.length > 6 || 'Password must be at least 6 characters long', required: validateRequiredField, - password_equal: value => - value === this.credentials.password || "Passwords must be the same" + password_equal: (value: string) => + value === this.credentials.password || 'Passwords must be the same', }; get samePasswords() { @@ -75,8 +75,8 @@ export default class PasswordReset extends Vue { mutation: RESET_PASSWORD, variables: { password: this.credentials.password, - token: this.token - } + token: this.token, + }, }); saveUserData(result.data.resetPassword); diff --git a/js/src/views/User/Register.vue b/js/src/views/User/Register.vue index 12fcc9051..fde73f2ce 100644 --- a/js/src/views/User/Register.vue +++ b/js/src/views/User/Register.vue @@ -108,19 +108,19 @@ </template> <script lang="ts"> -import { CREATE_USER } from "@/graphql/user"; -import { Component, Prop, Vue } from "vue-property-decorator"; -import { UserRouteName } from '@/router/user' +import { CREATE_USER } from '@/graphql/user'; +import { Component, Prop, Vue } from 'vue-property-decorator'; +import { UserRouteName } from '@/router/user'; @Component export default class Register extends Vue { - @Prop({ type: String, required: false, default: "" }) email!: string; - @Prop({ type: String, required: false, default: "" }) password!: string; + @Prop({ type: String, required: false, default: '' }) email!: string; + @Prop({ type: String, required: false, default: '' }) password!: string; credentials = { email: this.email, - password: this.password - } + password: this.password, + }; errors: object = {}; sendingValidation: boolean = false; validationSent: boolean = false; @@ -132,21 +132,21 @@ export default class Register extends Vue { await this.$apollo.mutate({ mutation: CREATE_USER, - variables: this.credentials + variables: this.credentials, }); this.validationSent = true; this.$router.push({ name: UserRouteName.REGISTER_PROFILE, - params: { email: this.credentials.email } + params: { email: this.credentials.email }, }); } catch (error) { console.error(error); this.errors = error.graphQLErrors.reduce((acc, error) => { acc[error.details] = error.message; return acc; - }, {}); + }, {}); console.log(this.errors); } } diff --git a/js/src/views/User/ResendConfirmation.vue b/js/src/views/User/ResendConfirmation.vue index b0e566270..8e0cbebaf 100644 --- a/js/src/views/User/ResendConfirmation.vue +++ b/js/src/views/User/ResendConfirmation.vue @@ -27,28 +27,28 @@ </template> <script lang="ts"> -import { Component, Prop, Vue } from "vue-property-decorator"; -import { validateEmailField, validateRequiredField } from "@/utils/validators"; -import { RESEND_CONFIRMATION_EMAIL } from "@/graphql/auth"; +import { Component, Prop, Vue } from 'vue-property-decorator'; +import { validateEmailField, validateRequiredField } from '@/utils/validators'; +import { RESEND_CONFIRMATION_EMAIL } from '@/graphql/auth'; @Component export default class ResendConfirmation extends Vue { - @Prop({ type: String, required: false, default: "" }) email!: string; + @Prop({ type: String, required: false, default: '' }) email!: string; credentials = { - email: "" + email: '', }; validationSent = false; error = false; state = { email: { status: null, - msg: "" - } + msg: '', + }, }; rules = { required: validateRequiredField, - email: validateEmailField + email: validateEmailField, }; mounted() { @@ -63,8 +63,8 @@ export default class ResendConfirmation extends Vue { await this.$apollo.mutate({ mutation: RESEND_CONFIRMATION_EMAIL, variables: { - email: this.credentials.email - } + email: this.credentials.email, + }, }); } catch (err) { console.error(err); diff --git a/js/src/views/User/SendPasswordReset.vue b/js/src/views/User/SendPasswordReset.vue index 6b75c8b3d..85e438029 100644 --- a/js/src/views/User/SendPasswordReset.vue +++ b/js/src/views/User/SendPasswordReset.vue @@ -28,29 +28,29 @@ </template> <script lang="ts"> -import { Component, Prop, Vue } from "vue-property-decorator"; -import { validateEmailField, validateRequiredField } from "@/utils/validators"; -import { SEND_RESET_PASSWORD } from "@/graphql/auth"; +import { Component, Prop, Vue } from 'vue-property-decorator'; +import { validateEmailField, validateRequiredField } from '@/utils/validators'; +import { SEND_RESET_PASSWORD } from '@/graphql/auth'; @Component export default class SendPasswordReset extends Vue { - @Prop({ type: String, required: false, default: "" }) email!: string; + @Prop({ type: String, required: false, default: '' }) email!: string; credentials = { - email: "" + email: '', } as { email: string }; validationSent: boolean = false; errors: string[] = []; state = { email: { status: null, - msg: "" - } as { status: boolean | null; msg: string } + msg: '', + } as { status: boolean | null; msg: string }, }; rules = { required: validateRequiredField, - email: validateEmailField + email: validateEmailField, }; mounted() { @@ -64,8 +64,8 @@ export default class SendPasswordReset extends Vue { await this.$apollo.mutate({ mutation: SEND_RESET_PASSWORD, variables: { - email: this.credentials.email - } + email: this.credentials.email, + }, }); this.validationSent = true; @@ -81,8 +81,8 @@ export default class SendPasswordReset extends Vue { this.state = { email: { status: null, - msg: "" - } + msg: '', + }, }; } } diff --git a/js/src/views/User/Validate.vue b/js/src/views/User/Validate.vue index 59fa35d5b..7ac0a216e 100644 --- a/js/src/views/User/Validate.vue +++ b/js/src/views/User/Validate.vue @@ -17,11 +17,11 @@ </template> <script lang="ts"> -import { VALIDATE_USER } from "@/graphql/user"; -import { Component, Prop, Vue } from "vue-property-decorator"; -import { AUTH_TOKEN, AUTH_USER_ID } from "@/constants"; -import { RouteName } from '@/router' -import { UserRouteName } from '@/router/user' +import { VALIDATE_USER } from '@/graphql/user'; +import { Component, Prop, Vue } from 'vue-property-decorator'; +import { AUTH_TOKEN, AUTH_USER_ID } from '@/constants'; +import { RouteName } from '@/router'; +import { UserRouteName } from '@/router/user'; @Component export default class Validate extends Vue { @@ -39,8 +39,8 @@ export default class Validate extends Vue { const { data } = await this.$apollo.mutate({ mutation: VALIDATE_USER, variables: { - token: this.token - } + token: this.token, + }, }); this.saveUserData(data); diff --git a/support/guides/development/styleguide.md b/support/guides/development/styleguide.md index 5fd7af989..910814fdb 100644 --- a/support/guides/development/styleguide.md +++ b/support/guides/development/styleguide.md @@ -4,7 +4,7 @@ We format our code with the Elixir Formatter and check for issues with [Credo](https://github.com/rrrene/credo) (a few rules are not blocking). -Please run those two commands before pushing code : +Please run those two commands before pushing code: * `mix format` * `mix credo` @@ -15,4 +15,8 @@ These two commands must not return an error code, since they are required to pas We use `tslint` with the `tslint-config-airbnb` preset. Errors should be reported when running in dev mode `npm run dev` or when building a production bundle `npm run build`. +Please run the following command before pushing code `npm run lint`. + +This command must not return an error code, since it's required to pass inside CI. + We also try to follow the [official Vue.js style guide](https://vuejs.org/v2/style-guide/).