Merge branch 'feature/typescript' into 'master'

Migration to typescript: first step

See merge request framasoft/mobilizon!33

js/.eslintrc.js

@@ -1,7 +0,0 @@
-module.exports = {
-  root: true,
-  extends: [
-    'plugin:vue/essential',
-    '@vue/airbnb',
-  ],
-};

js/package.json

@@ -2,16 +2,13 @@
   "name": "mobilizon",
   "version": "0.1.0",
   "private": true,
-  "engines": {
-    "node": ">=10.0.0"
-  },
   "scripts": {
-    "dev": "vue-cli-service serve",
     "build": "vue-cli-service build --modern",
     "lint": "vue-cli-service lint",
+    "analyze-bundle": "npm run build -- --report-json && webpack-bundle-analyzer ../priv/static/report.json",
+    "dev": "vue-cli-service serve",
     "test:e2e": "vue-cli-service test:e2e",
-    "test:unit": "vue-cli-service test:unit",
+    "test:unit": "vue-cli-service test:unit"
-    "analyze-bundle": "npm run build -- --report-json && webpack-bundle-analyzer ../priv/static/report.json"
   },
   "dependencies": {
     "apollo-absinthe-upload-link": "^1.4.0",
@@ -22,31 +19,37 @@
     "graphql-tag": "^2.9.0",
     "material-design-icons": "^3.0.1",
     "moment": "^2.22.2",
-    "ngeohash": "^0.6.0",
+    "ngeohash": "^0.6.3",
     "register-service-worker": "^1.4.1",
     "vue": "^2.5.17",
     "vue-apollo": "^3.0.0-beta.26",
+    "vue-class-component": "^6.3.2",
     "vue-gettext": "^2.1.1",
     "vue-gravatar": "^1.3.0",
     "vue-markdown": "^2.2.4",
+    "vue-property-decorator": "^7.2.0",
     "vue-router": "^3.0.2",
     "vuetify": "^1.3.9",
     "vuetify-google-autocomplete": "^2.0.0-beta.5",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
+    "@types/chai": "^4.1.0",
+    "@types/mocha": "^5.2.4",
     "@vue/cli-plugin-babel": "^3.1.1",
     "@vue/cli-plugin-e2e-nightwatch": "^3.1.1",
-    "@vue/cli-plugin-eslint": "^3.1.5",
     "@vue/cli-plugin-pwa": "^3.1.2",
+    "@vue/cli-plugin-typescript": "^3.2.0",
     "@vue/cli-plugin-unit-mocha": "^3.1.1",
     "@vue/cli-service": "^3.1.4",
-    "@vue/eslint-config-airbnb": "^3.0.5",
+    "@vue/eslint-config-typescript": "^3.1.0",
     "@vue/test-utils": "^1.0.0-beta.26",
     "chai": "^4.2.0",
     "dotenv-webpack": "^1.5.7",
     "node-sass": "^4.10.0",
     "sass-loader": "^7.1.0",
+    "tslint-config-airbnb": "^5.11.1",
+    "typescript": "^3.0.0",
     "vue-cli-plugin-apollo": "^0.17.4",
     "vue-template-compiler": "^2.5.17",
     "webpack-bundle-analyzer": "^3.0.3"
@@ -55,5 +58,8 @@
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
-  ]
+  ],
+  "engines": {
+    "node": ">=10.0.0"
+  }
 }

js/src/App.vue

@@ -134,7 +134,8 @@
         class="white--text"
         v-translate="{
           date: new Date().getFullYear(),
-          }">© The Mobilizon Contributors %{date} - Made with Elixir, Phoenix & <a href="https://vuejs.org/">VueJS</a> & <a href="https://www.vuetifyjs.com/">Vuetify</a> with some love and some weeks
+          }">© The Mobilizon Contributors %{date} - Made with Elixir, Phoenix & <a href="https://vuejs.org/">VueJS</a> & <a
+        href="https://www.vuetifyjs.com/">Vuetify</a> with some love and some weeks
       </span>
     </v-footer>
     <v-snackbar
@@ -148,22 +149,21 @@
   </v-app>
 </template>
 
-<script>
+<script lang="ts">
-import gql from 'graphql-tag';
+import NavBar from '@/components/NavBar.vue';
-import NavBar from '@/components/NavBar';
+import { Component, Vue } from 'vue-property-decorator';
 import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
 
-export default {
+@Component({
-  name: 'app',
   components: {
     NavBar,
   },
-  data() {
+})
-    return {
+export default class App extends Vue {
-      drawer: false,
+  drawer = false;
-      fab: false,
+  fab = false;
-      user: localStorage.getItem(AUTH_USER_ID),
+  user = localStorage.getItem(AUTH_USER_ID);
-      items: [
+  items = [
     {
       icon: 'poll', text: 'Events', route: 'EventList', role: null,
     },
@@ -177,46 +177,48 @@ export default {
     { icon: 'chat_bubble', text: 'Send feedback', role: 'ROLE_USER' },
     { icon: 'help', text: 'Help', role: null },
     { icon: 'phonelink', text: 'App downloads', role: null },
-      ],
+  ];
-      error: {
+  error = {
     timeout: 3000,
     show: false,
     text: '',
-      },
-      show_new_event_button: false,
-      actor: localStorage.getItem(AUTH_USER_ACTOR),
   };
-  },
+
-  methods: {
+  actor = localStorage.getItem(AUTH_USER_ACTOR);
-    showMenuItem(elem) {
+
-      return elem !== null && this.user && this.user.roles !== undefined ? this.user.roles.includes(elem) : true;
+  get displayed_name () {
-    },
+    // FIXME: load actor
-    getUser() {
+    return 'no implemented';
+    // return this.actor.display_name === null ? this.actor.username : this.actor.display_name
+  }
+
+  showMenuItem (elem) {
+    // FIXME: load actor
+    return false;
+    // return elem !== null && this.user && this.user.roles !== undefined ? this.user.roles.includes(elem) : true
+  }
+
+  getUser () {
     return this.user === undefined ? false : this.user;
-    },
+  }
-    toggleDrawer() {
+
+  toggleDrawer () {
     this.drawer = !this.drawer;
-    },
+  }
-  },
+}
-  computed: {
-    displayed_name() {
-      return this.actor.display_name === null ? this.actor.username : this.actor.display_name;
-    },
-  },
-};
 </script>
 
 <style>
-.router-enter-active, .router-leave-active {
+  .router-enter-active, .router-leave-active {
     transition-property: opacity;
     transition-duration: .25s;
-}
+  }
 
-.router-enter-active {
+  .router-enter-active {
     transition-delay: .25s;
-}
+  }
 
-.router-enter, .router-leave-active {
+  .router-enter, .router-leave-active {
     opacity: 0
-}
+  }
 </style>

js/src/components/Account/Account.vue

@@ -44,7 +44,8 @@
               <v-layout row>
                 <v-flex xs7>
                   <div class="headline">{{ actor.name }}</div>
-                  <div><span class="subheading">@{{ actor.preferredUsername }}<span v-if="actor.domain">@{{ actor.domain }}</span></span></div>
+                  <div><span class="subheading">@{{ actor.preferredUsername }}<span v-if="actor.domain">@{{ actor.domain }}</span></span>
+                  </div>
                   <v-card-text v-if="actor.description" v-html="actor.description"></v-card-text>
                 </v-flex>
               </v-layout>
@@ -107,7 +108,9 @@
                   <div>
                     <span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
                     <p>{{ event.description }}</p>
-                    <p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
+                    <p v-if="event.organizer">Organisé par
+                      <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link>
+                    </p>
                   </div>
                 </v-card-title>
                 <v-card-actions>
@@ -171,22 +174,11 @@
   </v-layout>
 </template>
 
-<script>
+<script lang="ts">
-import { FETCH_ACTOR } from '@/graphql/actor';
+  import { FETCH_ACTOR } from '@/graphql/actor';
+  import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 
-export default {
+  @Component({
-  name: 'Account',
-  data() {
-    return {
-      actor: null,
-    };
-  },
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-  },
     apollo: {
       actor: {
         query: FETCH_ACTOR,
@@ -197,20 +189,25 @@ export default {
         },
       },
     },
-  created() {
+  })
-  },
+  export default class Account extends Vue {
-  watch: {
+    @Prop({ type: String, required: true }) name!: string;
+
+    actor = null;
+
     // call again the method if the route changes
-    $route: 'fetchData',
+    @Watch('$route')
-  },
+    onRouteChange() {
-  methods: {
+      // this.fetchData()
+    }
+
     logoutUser() {
       // TODO : implement logout
       this.$router.push({ name: 'Home' });
-    },
+    }
-    nl2br: function(text) {
+
+    nl2br(text) {
       return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
     }
-  },
+  };
-};
 </script>

js/src/components/Account/Identities.vue

@@ -66,64 +66,68 @@
   </v-layout>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+  import { Component, Vue } from 'vue-property-decorator';
-  name: 'Identities',
+
-  data() {
+  @Component
-    return {
+  export default class Identities extends Vue {
-      actors: [],
+    actors = [];
-      newActor: {
+    newActor = {
       preferred_username: '',
       summary: '',
-      },
+    };
-      loading: true,
+    loading = true;
-      showForm: false,
+    showForm = false;
-      rules: {
+    rules = {
       required: value => !!value || 'Required.',
-      },
+    };
-      state: {
+    state = {
       username: {
         status: false,
         msg: [],
       },
-      },
     };
-  },
+
     created() {
       this.fetchData();
-  },
+    }
-  methods: {
+
     fetchData() {
-      eventFetch('/user', this.$store)
+      // Implements eventFetch
-        .then(response => response.json())
+      // eventFetch('/user', this.$store)
-        .then((response) => {
+      //   .then(response => response.json())
-          this.actors = response.data.actors;
+      //   .then((response) => {
-          this.loading = false;
+      //     this.actors = response.data.actors;
-        });
+      //     this.loading = false;
-    },
+      //   });
+    }
+
     sendData() {
       this.loading = true;
       this.showForm = false;
-      eventFetch('/actors', this.$store, {
+
-        method: 'POST',
+      // Implements eventFetch
-        body: JSON.stringify({ actor: this.newActor }),
+      // eventFetch('/actors', this.$store, {
-      })
+      //   method: 'POST',
-        .then(response => response.json())
+      //   body: JSON.stringify({ actor: this.newActor }),
-        .then((response) => {
+      // })
-          this.actors.push(response.data);
+      //   .then(response => response.json())
-          this.loading = false;
+      //   .then((response) => {
-        });
+      //     this.actors.push(response.data);
-    },
+      //     this.loading = false;
+      //   });
+    }
+
     toggleForm() {
       if (this.showForm === true) {
         this.sendData();
       } else {
         this.showForm = true;
       }
-    },
+    }
+
     host() {
       return `@${window.location.host}`;
-    },
+    }
-  },
+  }
-};
 </script>

js/src/components/Account/Login.vue

@@ -58,47 +58,30 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
 
-import Gravatar from 'vue-gravatar';
+  import Gravatar from 'vue-gravatar';
-import RegisterAvatar from './RegisterAvatar';
+  import RegisterAvatar from './RegisterAvatar.vue';
-import { AUTH_TOKEN, AUTH_USER_ID, AUTH_USER_ACTOR } from '@/constants';
+  import { AUTH_TOKEN, AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
-import { LOGIN } from '@/graphql/auth';
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+  import { LOGIN } from '@/graphql/auth';
 
-export default {
+  @Component({
-  props: {
-    email: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    password: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  beforeCreate() {
-    if (this.user) {
-      this.$router.push('/');
-    }
-  },
     components: {
       'v-gravatar': Gravatar,
       avatar: RegisterAvatar,
     },
-  mounted() {
+  })
-    this.credentials.email = this.email;
+  export default class Login extends Vue {
-    this.credentials.password = this.password;
+    @Prop({ type: String, required: false, default: '' }) email!: string;
-  },
+    @Prop({ type: String, required: false, default: '' }) password!: string;
-  data() {
+
-    return {
+    credentials = {
-      credentials: {
       email: '',
       password: '',
-      },
+    };
-      validationSent: false,
+    validationSent = false;
-      error: {
+    error = {
       show: false,
       text: '',
       timeout: 3000,
@@ -106,42 +89,53 @@ export default {
         email: false,
         password: false,
       },
-      },
+    };
-      rules: {
+    rules = {
       required: value => !!value || 'Required.',
       email: (value) => {
         const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
         return pattern.test(value) || 'Invalid e-mail.';
       },
-      },
     };
-  },
+    user: any;
-  methods: {
+
+    beforeCreate() {
+      if (this.user) {
+        this.$router.push('/');
+      }
+    }
+
+    mounted() {
+      this.credentials.email = this.email;
+      this.credentials.password = this.password;
+    }
+
     loginAction(e) {
       e.preventDefault();
       this.$apollo.mutate({
         mutation: LOGIN,
         variables: {
           email: this.credentials.email,
-          password: this.credentials.password
+          password: this.credentials.password,
-        }
+        },
       }).then((result) => {
         this.saveUserData(result.data);
-        this.$router.push({name: 'Home'});
+        this.$router.push({ name: 'Home' });
       }).catch((e) => {
         console.log(e);
         this.error.show = true;
         this.error.text = e.message;
       });
-    },
+    }
+
     validEmail() {
       return this.rules.email(this.credentials.email) === true ? 'v-gravatar' : 'avatar';
-    },
+    }
-    saveUserData({login: login}) {
+
+    saveUserData({ login: login }) {
       localStorage.setItem(AUTH_USER_ID, login.user.id);
       localStorage.setItem(AUTH_USER_ACTOR, JSON.stringify(login.actor));
       localStorage.setItem(AUTH_TOKEN, login.token);
     }
-  },
+  }
-};
 </script>

js/src/components/Account/PasswordReset.vue

@@ -36,31 +36,22 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+
-  name: 'PasswordReset',
+  import { Component, Prop, Vue } from 'vue-property-decorator';
-  props: {
+
-    token: {
+  @Component
-      type: String,
+  export default class PasswordReset extends Vue {
-      required: true,
+    @Prop({ type: String, required: true }) token!: string;
-    },
+
-  },
+    credentials = {
-  computed: {
-    samePasswords() {
-      return this.rules.password_length(this.credentials.password) === true &&
-          this.credentials.password === this.credentials.password_confirmation;
-    },
-  },
-  data() {
-    return {
-      credentials: {
       password: '',
       password_confirmation: '',
-      },
+    };
-      error: {
+    error = {
       show: false,
-      },
+    };
-      state: {
+    state = {
       token: {
         status: null,
         msg: '',
@@ -73,38 +64,46 @@ export default {
         status: null,
         msg: '',
       },
-      },
+    };
-      rules: {
+    rules = {
       password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
       required: value => !!value || 'Required.',
       password_equal: value => value === this.credentials.password || 'Passwords must be the same',
-      },
     };
-  },
+
-  methods: {
+    get samePasswords() {
+      return this.rules.password_length(this.credentials.password) === true &&
+        this.credentials.password === this.credentials.password_confirmation;
+    }
+
     resetAction(e) {
       this.resetState();
       e.preventDefault();
       console.log(this.token);
-      fetchStory('/users/password-reset/post', this.$store, { method: 'POST', body: JSON.stringify({ password: this.credentials.password, token: this.token }) }).then((data) => {
+      // FIXME: implements fetchStory
-        localStorage.setItem('token', data.token);
+      // fetchStory('/users/password-reset/post', this.$store, {
-        localStorage.setItem('refresh_token', data.refresh_token);
+      //   method: 'POST',
-        this.$store.commit('LOGIN_USER', data.account);
+      //   body: JSON.stringify({ password: this.credentials.password, token: this.token }),
-        this.$snotify.success(this.$t('registration.success.login', { username: data.account.username }));
+      // }).then((data) => {
-        this.$router.push({ name: 'Home' });
+      //   localStorage.setItem('token', data.token);
-      }, (error) => {
+      //   localStorage.setItem('refresh_token', data.refresh_token);
-        Promise.resolve(error).then((errormsg) => {
+      //   this.$store.commit('LOGIN_USER', data.account);
-          console.log('errormsg', errormsg);
+      //   this.$snotify.success(this.$t('registration.success.login', { username: data.account.username }));
-          this.error.show = true;
+      //   this.$router.push({ name: 'Home' });
-          Object.entries(JSON.parse(errormsg).errors).forEach(([key, val]) => {
+      // }, (error) => {
-            console.log('key', key);
+      //   Promise.resolve(error).then((errormsg) => {
-            console.log('val', val[0]);
+      //     console.log('errormsg', errormsg);
-            this.state[key] = { status: false, msg: val[0] };
+      //     this.error.show = true;
-            console.log('state', this.state);
+      //     Object.entries(JSON.parse(errormsg).errors).forEach(([ key, val ]) => {
-          });
+      //       console.log('key', key);
-        });
+      //       console.log('val', val[ 0 ]);
-      });
+      //       this.state[ key ] = { status: false, msg: val[ 0 ] };
-    },
+      //       console.log('state', this.state);
+      //     });
+      //   });
+      // });
+    }
+
     resetState() {
       this.state = {
         token: {
@@ -120,7 +119,6 @@ export default {
           msg: '',
         },
       };
-    },
+    }
-  },
+  };
-};
 </script>

js/src/components/Account/Register.vue

@@ -68,8 +68,12 @@
               <router-link :to="{ name: 'ResendConfirmation', params: { email }}">Didn't receive the instructions ?</router-link>
             </v-form>
             <div v-if="validationSent">
-              <h2><translate>A validation email was sent to %{email}</translate></h2>
+              <h2>
-              <v-alert :value="true" type="info"><translate>Before you can login, you need to click on the link inside it to validate your account</translate></v-alert>
+                <translate>A validation email was sent to %{email}</translate>
+              </h2>
+              <v-alert :value="true" type="info">
+                <translate>Before you can login, you need to click on the link inside it to validate your account</translate>
+              </v-alert>
             </div>
           </v-card-text>
         </v-card>
@@ -78,39 +82,31 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
-import Gravatar from 'vue-gravatar';
+  import Gravatar from 'vue-gravatar';
-import RegisterAvatar from './RegisterAvatar';
+  import RegisterAvatar from './RegisterAvatar.vue';
-import { CREATE_USER } from '@/graphql/user';
+  import { CREATE_USER } from '@/graphql/user';
+  import { Component, Prop, Vue } from 'vue-property-decorator';
 
-export default {
+  @Component({
-  props: {
-    default_email: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    default_password: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
     components: {
       'v-gravatar': Gravatar,
       avatar: RegisterAvatar,
     },
-  data() {
+  })
-    return {
+  export default class Register extends Vue {
-      username: '',
+    @Prop({ type: String, required: false, default: '' }) default_email!: string;
-      email: this.default_email,
+    @Prop({ type: String, required: false, default: '' }) default_password!: string;
-      password: this.default_password,
+
-      error: {
+    username = '';
+    email = this.default_email;
+    password = this.default_password;
+    error = {
       show: false,
-      },
+    };
-      showPassword: false,
+    showPassword = false;
-      validationSent: false,
+    validationSent = false;
-      state: {
+    state = {
       email: {
         status: false,
         msg: [],
@@ -123,40 +119,41 @@ export default {
         status: false,
         msg: [],
       },
-      },
+    };
-      rules: {
+    rules = {
       password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
       required: value => !!value || 'Required.',
       email: (value) => {
         const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
         return pattern.test(value) || 'Invalid e-mail.';
       },
-      },
     };
-  },
+
-  methods: {
     resetState() {
       this.state = {
         email: {
           status: false,
-          msg: '',
+          msg: [],
         },
         username: {
           status: false,
-          msg: '',
+          msg: [],
         },
         password: {
           status: false,
-          msg: '',
+          msg: [],
         },
       };
-    },
+    }
+
     host() {
       return `@${window.location.host}`;
-    },
+    }
+
     validEmail() {
       return this.rules.email(this.email) === true ? 'v-gravatar' : 'avatar';
-    },
+    }
+
     submit() {
       this.$apollo.mutate({
         mutation: CREATE_USER,
@@ -171,19 +168,20 @@ export default {
       }).catch((error) => {
         console.error(error);
       });
-    },
+    }
-  },
+  };
-};
 </script>
-<style lang="scss">
-.avatar-enter-active {
-  transition: opacity 1s ease;
-}
-.avatar-enter, .avatar-leave-to {
-  opacity: 0;
-}
 
-.avatar-leave {
+<style lang="scss">
+  .avatar-enter-active {
+    transition: opacity 1s ease;
+  }
+
+  .avatar-enter, .avatar-leave-to {
+    opacity: 0;
+  }
+
+  .avatar-leave {
     display: none;
-}
+  }
 </style>

js/src/components/Account/RegisterAvatar.vue

@@ -1,9 +1,12 @@
 <template>
   <img class="img-circle elevation-7 mb-1" src="@/assets/profile.svg">
 </template>
-<script>
+
-export default {
+<script lang="ts">
-  name: 'RegisterAvatar',
+  import { Component, Vue } from 'vue-property-decorator';
-};
+
+  @Component
+  export default class RegisterAvatar extends Vue {
+  }
 </script>
 

js/src/components/Account/ResendConfirmation.vue

@@ -30,53 +30,48 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+  import { Component, Prop, Vue } from 'vue-property-decorator';
-  name: 'ResendConfirmation',
+
-  props: {
+  @Component
-    email: {
+  export default class ResendConfirmation extends Vue {
-      type: String,
+    @Prop({ type: String, required: false, default: '' }) email!: string;
-      required: false,
+
-      default: '',
+    credentials = {
-    },
-  },
-  data() {
-    return {
-      credentials: {
       email: '',
-      },
+    };
-      validationSent: false,
+    validationSent = false;
-      error: false,
+    error = false;
-      state: {
+    state = {
       email: {
         status: null,
         msg: '',
       },
-      },
+    };
-      rules: {
+    rules = {
       required: value => !!value || 'Required.',
       email: (value) => {
         const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
         return pattern.test(value) || 'Invalid e-mail.';
       },
-      },
     };
-  },
+
     mounted() {
       this.credentials.email = this.email;
-  },
+    }
-  methods: {
+
     resendConfirmationAction(e) {
       e.preventDefault();
-      fetchStory('/users/resend', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
+
-        this.validationSent = true;
+      // FIXME: implement fetchStory
-      }).catch((err) => {
+      // fetchStory('/users/resend', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
-        Promise.resolve(err).then(() => {
+      //   this.validationSent = true;
-          this.error = true;
+      // }).catch((err) => {
-          this.validationSent = true;
+      //   Promise.resolve(err).then(() => {
-        });
+      //     this.error = true;
-      });
+      //     this.validationSent = true;
-    },
+      //   });
-  },
+      // });
-};
+    }
+  };
 </script>

js/src/components/Account/SendPasswordReset.vue

@@ -30,54 +30,51 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+  import { Component, Prop, Vue } from 'vue-property-decorator';
-  name: 'SendPasswordReset',
+
-  props: {
+  @Component
-    email: {
+  export default class SendPasswordReset extends Vue {
-      type: String,
+    @Prop({ type: String, required: false, default: '' }) email!: string;
-      required: false,
+
-      default: '',
+    credentials = {
-    },
-  },
-  mounted() {
-    this.credentials.email = this.email;
-  },
-  data() {
-    return {
-      credentials: {
       email: '',
-      },
+    };
-      validationSent: false,
+    validationSent = false;
-      error: false,
+    error = false;
-      state: {
+    state = {
       email: {
         status: null,
         msg: '',
       },
-      },
+    };
-      rules: {
+
+    rules = {
       required: value => !!value || 'Required.',
       email: (value) => {
         const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
         return pattern.test(value) || 'Invalid e-mail.';
       },
-      },
     };
-  },
+
-  methods: {
+    mounted() {
+      this.credentials.email = this.email;
+    }
+
     resendConfirmationAction(e) {
       e.preventDefault();
-      fetchStory('/users/password-reset/send', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
+      // FIXME: implement fetchStory
-        this.error = false;
+      // fetchStory('/users/password-reset/send', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
-        this.validationSent = true;
+      //   this.error = false;
-      }).catch((err) => {
+      //   this.validationSent = true;
-        Promise.resolve(err).then((data) => {
+      // }).catch((err) => {
-          this.error = true;
+      //   Promise.resolve(err).then((data) => {
-          this.state.email = { status: false, msg: data.errors };
+      //     this.error = true;
-        });
+      //     this.state.email = { status: false, msg: data.errors };
-      });
+      //   });
-    },
+      // });
+    }
+
     resetState() {
       this.state = {
         email: {
@@ -85,7 +82,6 @@ export default {
           msg: '',
         },
       };
-    },
+    }
-  },
+  };
-};
 </script>

js/src/components/Account/Validate.vue

@@ -1,36 +1,37 @@
 <template>
   <v-container>
-    <h1 v-if="loading"><translate>Your account is being validated</translate></h1>
+    <h1 v-if="loading">
+      <translate>Your account is being validated</translate>
+    </h1>
     <div v-else>
       <div v-if="failed">
-        <v-alert :value="true" variant="danger"><translate>Error while validating account</translate></v-alert>
+        <v-alert :value="true" variant="danger">
+          <translate>Error while validating account</translate>
+        </v-alert>
       </div>
-      <h1 v-else><translate>Your account has been validated</translate></h1>
+      <h1 v-else>
+        <translate>Your account has been validated</translate>
+      </h1>
     </div>
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
-import { VALIDATE_USER } from '@/graphql/user';
+  import { VALIDATE_USER } from '@/graphql/user';
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+  import { AUTH_TOKEN, AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
+
+  @Component
+  export default class Validate extends Vue {
+    @Prop({ type: String, required: true }) token!: string;
+
+    loading = true;
+    failed = false;
 
-export default {
-  name: 'Validate',
-  data() {
-    return {
-      loading: true,
-      failed: false,
-    };
-  },
-  props: {
-    token: {
-      type: String,
-      required: true,
-    },
-  },
     created() {
       this.validateAction();
-  },
+    }
-  methods: {
+
     validateAction() {
       this.$apollo.mutate({
         mutation: VALIDATE_USER,
@@ -41,18 +42,19 @@ export default {
         this.loading = false;
         console.log(data);
         this.saveUserData(data.data);
-        this.$router.push({name: 'Home'});
+        this.$router.push({ name: 'Home' });
       }).catch((error) => {
         this.loading = false;
         console.log(error);
         this.failed = true;
       });
-    },
+    }
-    saveUserData({validateUser: login}) {
+
+    saveUserData({ validateUser: login }) {
       localStorage.setItem(AUTH_USER_ID, login.user.id);
       localStorage.setItem(AUTH_USER_ACTOR, JSON.stringify(login.actor));
       localStorage.setItem(AUTH_TOKEN, login.token);
     }
-  },
+
-};
+  };
 </script>

js/src/components/Category/Create.vue

@@ -4,7 +4,9 @@
       <v-flex xs12 sm8 md4>
         <v-card class="elevation-12">
           <v-toolbar dark color="primary">
-              <v-toolbar-title><translate>Create a new category</translate></v-toolbar-title>
+            <v-toolbar-title>
+              <translate>Create a new category</translate>
+            </v-toolbar-title>
           </v-toolbar>
           <v-card-text>
             <v-form>
@@ -29,7 +31,9 @@
                   @change="onFilePicked"
                 >
               </v-flex>
-              <v-btn color="primary" @click="create"><translate>Create category</translate></v-btn>
+              <v-btn color="primary" @click="create">
+                <translate>Create category</translate>
+              </v-btn>
             </v-form>
           </v-card-text>
         </v-card>
@@ -38,50 +42,48 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
-import { UPLOAD_PICTURE } from '@/graphql/upload';
+  import { CREATE_CATEGORY } from '@/graphql/category';
-import { CREATE_CATEGORY } from '@/graphql/category';
+  import { Component, Vue } from 'vue-property-decorator';
 
-export default {
+  @Component
-  name: 'create-category',
+  export default class CreateCategory extends Vue {
-  data() {
+    title = '';
-    return {
+    description = '';
-      title: '',
+    image = {
-      description: '',
-      image: {
       url: '',
       name: '',
       file: '',
-      },
     };
-  },
+
-  methods: {
     create() {
       this.$apollo.mutate({
         mutation: CREATE_CATEGORY,
         variables: {
           title: this.title,
           description: this.description,
-          picture: this.$refs.image.files[0],
+          picture: (this.$refs['image'] as any).files[ 0 ],
-        }
+        },
       }).then((data) => {
         console.log(data);
       }).catch((error) => {
         console.error(error);
       });
-    },
+    }
-    pickFile () {
+
-      this.$refs.image.click ()
+    pickFile() {
-    },
+      (this.$refs['image'] as any).click();
+    }
+
     onFilePicked(e) {
       const files = e.target.files;
-      if(files[0] === undefined || files[0].name.lastIndexOf('.') <= 0) {
+      if (files[ 0 ] === undefined || files[ 0 ].name.lastIndexOf('.') <= 0) {
-					console.error("File is incorrect")
+        console.error('File is incorrect');
       }
-      this.image.name = files[0].name;
+      this.image.name = files[ 0 ].name;
-    },
+    }
-  },
+
-};
+  };
 </script>
 
 <style>

js/src/components/Category/List.vue

@@ -15,8 +15,12 @@
               </div>
             </v-card-title>
             <v-card-actions>
-              <v-btn flat class="orange--text"><translate>Explore</translate></v-btn>
+              <v-btn flat class="orange--text">
-              <v-btn flat class="red--text" v-on:click="deleteCategory(category.id)"><translate>Delete</translate></v-btn>
+                <translate>Explore</translate>
+              </v-btn>
+              <v-btn flat class="red--text" v-on:click="deleteCategory(category.id)">
+                <translate>Delete</translate>
+              </v-btn>
             </v-card-actions>
           </v-card>
         </v-flex>
@@ -30,37 +34,34 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
-import { FETCH_CATEGORIES } from '@/graphql/category';
+  import { FETCH_CATEGORIES } from '@/graphql/category';
+  import { Component, Vue } from 'vue-property-decorator';
 
-// TODO : remove this hardcode
+  // TODO : remove this hardcode
 
-
+  @Component({
-export default {
-  name: 'Home',
-  data() {
-    return {
-      categories: [],
-      loading: true,
-      HTTP_ENDPOINT: 'http://localhost:4000',
-    };
-  },
     apollo: {
       categories: {
         query: FETCH_CATEGORIES,
       },
     },
-  methods: {
+  })
+  export default class List extends Vue {
+    categories = [];
+    loading = true;
+    HTTP_ENDPOINT = 'http://localhost:4000';
+
     deleteCategory(categoryId) {
       const router = this.$router;
-      eventFetch(`/categories/${categoryId}`, this.$store, { method: 'DELETE' })
+      // FIXME: remove eventFetch
-        .then(() => {
+      // eventFetch(`/categories/${categoryId}`, this.$store, { method: 'DELETE' })
-          this.categories = this.categories.filter(category => category.id !== categoryId);
+      //   .then(() => {
-          router.push('/category');
+      //     this.categories = this.categories.filter(category => category.id !== categoryId);
-        });
+      //     router.push('/category');
-    },
+      //   });
-  },
+    }
-};
+  };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

js/src/components/Event/Create.vue

@@ -65,30 +65,31 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
-// import Location from '@/components/Location';
+  // import Location from '@/components/Location';
-import VueMarkdown from 'vue-markdown';
+  import VueMarkdown from 'vue-markdown';
-import { CREATE_EVENT, EDIT_EVENT } from '@/graphql/event';
+  import { CREATE_EVENT, EDIT_EVENT } from '@/graphql/event';
-import { FETCH_CATEGORIES } from '@/graphql/category';
+  import { FETCH_CATEGORIES } from '@/graphql/category';
-import { AUTH_USER_ACTOR } from '@/constants';
+  import { AUTH_USER_ACTOR } from '@/constants';
+  import { Component, Prop, Vue } from 'vue-property-decorator';
 
-export default {
+  @Component({
-  name: 'create-event',
-  props: {
-    uuid: {
-      required: false,
-      type: String,
-    },
-  },
     components: {
-    /*      Location, */
+      VueMarkdown
-    VueMarkdown,
     },
-  data() {
+    apollo: {
-    return {
+      categories: {
-      e1: 0,
+        query: FETCH_CATEGORIES,
-      event: {
+      },
+    }
+  })
+  export default class CreateEvent extends Vue {
+    @Prop({required: false, type: String}) uuid!: string
+
+    e1 = 0
+    event = {
       title: null,
+      organizer_actor_id: null,
       description: '',
       begins_on: (new Date()).toISOString().substr(0, 10),
       ends_on: new Date(),
@@ -102,25 +103,20 @@ export default {
       category_id: null,
       tags: [],
       participants: [],
-      },
+    } as any // FIXME: correctly type an event
-      categories: [],
+    categories = []
-      tags: [],
+    tags = []
-      tagsToSend: [],
+    tagsToSend = []
-      tagsFetched: [],
+    tagsFetched = []
-    };
+    loading = false
-  },
+
     // created() {
     //   if (this.uuid) {
     //     this.fetchEvent();
     //   }
-  // },
+    // }
-  apollo: {
+
-    categories: {
+    create () {
-      query: FETCH_CATEGORIES,
-    },
-  },
-  methods: {
-    create() {
       // this.event.seats = parseInt(this.event.seats, 10);
       // this.tagsToSend.forEach((tag) => {
       //   this.event.tags.push({
@@ -128,10 +124,11 @@ export default {
       //     // '@type': 'Tag',
       //   });
       // });
-      const actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR));
+      // FIXME: correctly parse actor JSON
-      this.event.category_id = this.event.category;
+      const actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR) || '{}')
-      this.event.organizer_actor_id = actor.id;
+      this.event.category_id = this.event.category
-      this.event.participants = [actor.id];
+      this.event.organizer_actor_id = actor.id
+      this.event.participants = [actor.id]
       // this.event.price = parseFloat(this.event.price);
 
       if (this.uuid === undefined) {
@@ -146,33 +143,25 @@ export default {
             addressType: this.event.location_type,
           }
         }).then((data) => {
-          this.loading = false;
+          this.loading = false
-          this.$router.push({ name: 'Event', params: { uuid: data.data.uuid } });
+          this.$router.push({name: 'Event', params: {uuid: data.data.uuid}})
         }).catch((error) => {
-          console.log(error);
+          console.log(error)
-        });
+        })
       } else {
         this.$apollo.mutate({
           mutation: EDIT_EVENT,
         }).then((data) => {
-          this.loading = false;
+          this.loading = false
-          this.$router.push({ name: 'Event', params: { uuid: data.data.uuid } });
+          this.$router.push({name: 'Event', params: {uuid: data.data.uuid}})
         }).catch((error) => {
-          console.log(error);
+          console.log(error)
-        });
+        })
       }
-      this.event.tags = [];
+      this.event.tags = []
-    },
+    }
-    // fetchEvent() {
+
-    //   eventFetch(`/events/${this.id}`, this.$store)
+    getAddressData (addressData) {
-    //     .then(response => response.json())
-    //     .then((data) => {
-    //       this.loading = false;
-    //       this.event = data;
-    //       console.log(this.event);
-    //     });
-    // },
-    getAddressData(addressData) {
       if (addressData !== null) {
         this.event.address = {
           geom: {
@@ -187,11 +176,11 @@ export default {
           addressRegion: addressData.administrative_area_level_1,
           postalCode: addressData.postal_code,
           streetAddress: `${addressData.street_number} ${addressData.route}`,
-        };
         }
-    },
+      }
-  },
+    }
-};
+
+  };
 </script>
 
 <style>

js/src/components/Event/Edit.vue

@@ -97,28 +97,29 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+  import { Component, Prop, Vue } from 'vue-property-decorator';
-  props: ['id'],
+
-  data() {
+  @Component
-    return {
+  export default class EventEdit extends Vue {
-      loading: true,
+    @Prop(String) id!: string;
-      event: null,
+
-    };
+    loading = true;
-  },
+    event = null;
+
     created() {
       this.fetchData();
-  },
+    }
-  methods: {
+
     fetchData() {
-      eventFetch(`/events/${this.id}`, this.$store)
+      // FIXME: remove eventFetch
-        .then(response => response.json())
+      // eventFetch(`/events/${this.id}`, this.$store)
-        .then((data) => {
+      //   .then(response => response.json())
-          this.loading = false;
+      //   .then((data) => {
-          this.event = data;
+      //     this.loading = false;
-          console.log(this.event);
+      //     this.event = data;
-        });
+      //     console.log(this.event);
-    },
+      //   });
-  },
+    }
-};
+  };
 </script>

js/src/components/Event/Event.vue

@@ -54,7 +54,9 @@
                 <!-- <span v-if="event.organizerActor">Organisé par {{ event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername }}</span> -->
               </div>
               <!-- <p><router-link :to="{ name: 'Account', params: {id: event.organizer.id} }"><span class="grey&#45;&#45;text">{{ event.organizer.username }}</span></router-link> organises {{ event.title }} <span v-if="event.address.addressLocality">in {{ event.address.addressLocality }}</span> on the {{ event.startDate | formatDate }}.</p> -->
-                <v-card-text v-if="event.description"><vue-markdown :source="event.description"></vue-markdown></v-card-text>
+              <v-card-text v-if="event.description">
+                <vue-markdown :source="event.description"></vue-markdown>
+              </v-card-text>
             </v-flex>
             <!-- <v-flex md2>
               <p v-if="actorIsOrganizer()">
@@ -146,32 +148,15 @@
   </v-layout>
 </template>
 
-<script>
+<script lang="ts">
-import VueMarkdown from 'vue-markdown';
+  import { FETCH_EVENT } from '@/graphql/event';
-import { FETCH_EVENT } from '@/graphql/event';
+  import { Component, Prop, Vue } from 'vue-property-decorator';
-import { LOGGED_ACTOR } from '@/graphql/actor';
+  import VueMarkdown from 'vue-markdown';
 
-export default {
+  @Component({
-  name: 'Home',
     components: {
       VueMarkdown,
     },
-  data() {
-    return {
-      event: {
-        name: '',
-        slug: '',
-        title: '',
-        uuid: this.uuid,
-        description: '',
-        organizer: {
-          id: null,
-          username: null,
-        },
-        participants: [],
-      },
-    };
-  },
     apollo: {
       event: {
         query: FETCH_EVENT,
@@ -185,58 +170,76 @@ export default {
       //   query: LOGGED_ACTOR,
       // }
     },
-  methods: {
+  })
+  export default class Event extends Vue {
+    @Prop({ type: String, required: true }) uuid!: string;
+
+    event = {
+      name: '',
+      slug: '',
+      title: '',
+      uuid: this.uuid,
+      description: '',
+      organizer: {
+        id: null,
+        username: null,
+      },
+      participants: [],
+    };
+
     deleteEvent() {
       const router = this.$router;
-      eventFetch(`/events/${this.uuid}`, this.$store, { method: 'DELETE' })
+      // FIXME: remove eventFetch
-        .then(() => router.push({ name: 'EventList' }));
+      // eventFetch(`/events/${this.uuid}`, this.$store, { method: 'DELETE' })
-    },
+      //   .then(() => router.push({ name: 'EventList' }));
+    }
+
     joinEvent() {
-      eventFetch(`/events/${this.uuid}/join`, this.$store, { method: 'POST' })
+      // FIXME: remove eventFetch
-        .then(response => response.json())
+      // eventFetch(`/events/${this.uuid}/join`, this.$store, { method: 'POST' })
-        .then((data) => {
+      //   .then(response => response.json())
-          console.log(data);
+      //   .then((data) => {
-        });
+      //     console.log(data);
-    },
+      //   });
+    }
+
     leaveEvent() {
-      eventFetch(`/events/${this.uuid}/leave`, this.$store)
+      // FIXME: remove eventFetch
-        .then(response => response.json())
+      // eventFetch(`/events/${this.uuid}/leave`, this.$store)
-        .then((data) => {
+      //   .then(response => response.json())
-          console.log(data);
+      //   .then((data) => {
-        });
+      //     console.log(data);
-    },
+      //   });
+    }
+
     downloadIcsEvent() {
-      eventFetch(`/events/${this.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
+      // FIXME: remove eventFetch
-        .then(response => response.text())
+      // eventFetch(`/events/${this.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
-        .then((response) => {
+      //   .then(response => response.text())
-          const blob = new Blob([response], { type: 'text/calendar' });
+      //   .then((response) => {
-          const link = document.createElement('a');
+      //     const blob = new Blob([ response ], { type: 'text/calendar' });
-          link.href = window.URL.createObjectURL(blob);
+      //     const link = document.createElement('a');
-          link.download = `${this.event.title}.ics`;
+      //     link.href = window.URL.createObjectURL(blob);
-          document.body.appendChild(link);
+      //     link.download = `${this.event.title}.ics`;
-          link.click();
+      //     document.body.appendChild(link);
-          document.body.removeChild(link);
+      //     link.click();
-        });
+      //     document.body.removeChild(link);
-    },
+      //   });
+    }
+
     // actorIsParticipant() {
     //   return this.loggedActor && this.event.participants.map(participant => participant.actor.preferredUsername).includes(this.loggedActor.preferredUsername) || this.actorIsOrganizer();
-    // },
+    // }
+    //
     // actorIsOrganizer() {
     //   return this.loggedActor && this.loggedActor.preferredUsername === this.event.organizer.preferredUsername;
-    // },
+    // }
-  },
+  }
-  props: {
-    uuid: {
-      type: String,
-      required: true,
-    },
-  },
-};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style>
-.v-card__media__background {
+  .v-card__media__background {
     filter: contrast(0.4);
-}
+  }
 </style>

js/src/components/Event/EventList.vue

@@ -2,11 +2,12 @@
   <v-layout>
     <v-flex xs12 sm8 offset-sm2>
       <v-card>
-    <h1>{{ $t("event.list.title") }}</h1>
+        <h1>{{ $t('event.list.title') }}</h1>
 
         <v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
         <v-chip close v-model="locationChip" label color="pink" text-color="white" v-if="$router.currentRoute.params.location">
-      <v-icon left>location_city</v-icon>{{ locationText }}
+          <v-icon left>location_city</v-icon>
+          {{ locationText }}
         </v-chip>
         <v-container grid-list-sm fluid>
           <v-layout row wrap>
@@ -35,7 +36,8 @@
                         >
                       </v-avatar>
                     </router-link>
-                    <span v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'name': event.organizer.username}}">{{ event.organizer.username }}</router-link></span>
+                    <span v-if="event.organizer">Organisé par <router-link
+                      :to="{name: 'Account', params: {'name': event.organizer.username}}">{{ event.organizer.username }}</router-link></span>
                   </div>
                 </v-card-title>
                 <v-card-actions>
@@ -53,46 +55,48 @@
   </v-layout>
 </template>
 
-<script>
+<script lang="ts">
-import ngeohash from 'ngeohash';
+  import ngeohash from 'ngeohash';
-import VueMarkdown from 'vue-markdown';
+  import VueMarkdown from 'vue-markdown';
-import VCardTitle from 'vuetify/es5/components/VCard/VCardTitle';
+  import VCardTitle from 'vuetify/es5/components/VCard/VCardTitle';
+  import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 
-export default {
+  @Component({
-  name: 'EventList',
     components: {
-    VCardTitle,
+      VCardTitle: VCardTitle as any,
       VueMarkdown,
     },
-  data() {
+  })
-    return {
+  export default class EventList extends Vue {
-      events: [],
+    @Prop(String) location!: string;
-      loading: true,
+
-      locationChip: false,
+    events = [];
-      locationText: '',
+    loading = true;
-    };
+    locationChip = false;
-  },
+    locationText = '';
-  props: ['location'],
+
     created() {
-    this.fetchData(this.$router.currentRoute.params.location);
+      this.fetchData(this.$router.currentRoute.params[ 'location' ]);
-  },
-  watch: {
-    locationChip(val) {
-      if (val === false) {
-        this.$router.push({ name: 'EventList' });
     }
-    },
+
-  },
     beforeRouteUpdate(to, from, next) {
       this.fetchData(to.params.location);
       next();
-  },
+    }
-  methods: {
+
+    @Watch('locationChip')
+    onLocationChipChange(val) {
+      if (val === false) {
+        this.$router.push({ name: 'EventList' });
+      }
+    }
+
     geocode(lat, lon) {
       console.log({ lat, lon });
       console.log(ngeohash.encode(lat, lon, 10));
       return ngeohash.encode(lat, lon, 10);
-    },
+    }
+
     fetchData(location) {
       let queryString = '/events';
       if (location) {
@@ -101,37 +105,43 @@ export default {
         this.locationText = `${latitude.toString()} : ${longitude.toString()}`;
       }
       this.locationChip = true;
-      eventFetch(queryString, this.$store)
+      // FIXME: remove eventFetch
-        .then(response => response.json())
+      // eventFetch(queryString, this.$store)
-        .then((response) => {
+      //   .then(response => response.json())
-          this.loading = false;
+      //   .then((response) => {
-          this.events = response.data;
+      //     this.loading = false;
-          console.log(this.events);
+      //     this.events = response.data;
-        });
+      //     console.log(this.events);
-    },
+      //   });
+    }
+
     deleteEvent(event) {
       const router = this.$router;
-      eventFetch(`/events/${event.uuid}`, this.$store, { method: 'DELETE' })
+      // FIXME: remove eventFetch
-        .then(() => router.push('/events'));
+      // eventFetch(`/events/${event.uuid}`, this.$store, { method: 'DELETE' })
-    },
+      //   .then(() => router.push('/events'));
+    }
+
     viewEvent(event) {
       this.$router.push({ name: 'Event', params: { uuid: event.uuid } });
-    },
+    }
+
     downloadIcsEvent(event) {
-      eventFetch(`/events/${event.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
+      // FIXME: remove eventFetch
-        .then(response => response.text())
+      // eventFetch(`/events/${event.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
-        .then((response) => {
+      //   .then(response => response.text())
-          const blob = new Blob([response], { type: 'text/calendar' });
+      //   .then((response) => {
-          const link = document.createElement('a');
+      //     const blob = new Blob([ response ], { type: 'text/calendar' });
-          link.href = window.URL.createObjectURL(blob);
+      //     const link = document.createElement('a');
-          link.download = `${event.title}.ics`;
+      //     link.href = window.URL.createObjectURL(blob);
-          document.body.appendChild(link);
+      //     link.download = `${event.title}.ics`;
-          link.click();
+      //     document.body.appendChild(link);
-          document.body.removeChild(link);
+      //     link.click();
-        });
+      //     document.body.removeChild(link);
-    },
+      //   });
-  },
+    }
-};
+
+  };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

js/src/components/Group/Create.vue

@@ -64,51 +64,54 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
-import VueMarkdown from 'vue-markdown';
+  import VueMarkdown from 'vue-markdown';
-import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
+  import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
-
+  import { Component, Vue } from 'vue-property-decorator';
-export default {
-  name: 'create-group',
 
+  @Component({
     components: {
       VueMarkdown,
       VuetifyGoogleAutocomplete,
     },
-  data() {
+  })
-    return {
+  export default class CreateGroup extends Vue {
-      e1: 0,
+    e1 = 0;
-      group: {
+    // FIXME: correctly type group
+    group: { preferred_username: string, name: string, summary: string, address?: any } = {
       preferred_username: '',
       name: '',
       summary: '',
       // category: null,
-      },
-      categories: [],
     };
-  },
+    categories = [];
+
     mounted() {
       this.fetchCategories();
-  },
+    }
-  methods: {
+
     create() {
       // this.group.organizer = "/accounts/" + this.$store.state.user.id;
 
-      eventFetch('/groups', this.$store, { method: 'POST', body: JSON.stringify({ group: this.group }) })
+      // FIXME: remove eventFetch
-        .then(response => response.json())
+      // eventFetch('/groups', this.$store, { method: 'POST', body: JSON.stringify({ group: this.group }) })
-        .then((data) => {
+      //   .then(response => response.json())
-          this.loading = false;
+      //   .then((data) => {
-          this.$router.push({ path: 'Group', params: { id: data.id } });
+      //     this.loading = false;
-        });
+      //     this.$router.push({ path: 'Group', params: { id: data.id } });
-    },
+      //   });
+    }
+
     fetchCategories() {
-      eventFetch('/categories', this.$store)
+      // FIXME: remove eventFetch
-        .then(response => response.json())
+      // eventFetch('/categories', this.$store)
-        .then((data) => {
+      //   .then(response => response.json())
-          this.loading = false;
+      //   .then((data) => {
-          this.categories = data.data;
+      //     this.loading = false;
-        });
+      //     this.categories = data.data;
-    },
+      //   });
+    }
+
     getAddressData(addressData) {
       this.group.address = {
         geo: {
@@ -121,9 +124,9 @@ export default {
         postalCode: addressData.postal_code,
         streetAddress: `${addressData.street_number} ${addressData.route}`,
       };
-    },
+    }
-  },
+
-};
+  };
 </script>
 
 <style>

js/src/components/Group/Group.vue

@@ -135,7 +135,10 @@
                     <div>
                       <span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
                       <p>{{ event.description }}</p>
-                      <p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
+                      <p v-if="event.organizer">Organisé par
+                        <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}
+                        </router-link>
+                      </p>
                     </div>
                   </v-card-title>
                   <v-card-actions>
@@ -176,7 +179,10 @@
                     <div>
                       <span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
                       <p>{{ event.description }}</p>
-                      <p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
+                      <p v-if="event.organizer">Organisé par
+                        <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}
+                        </router-link>
+                      </p>
                     </div>
                   </v-card-title>
                   <v-card-actions>
@@ -201,38 +207,35 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+  import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-  name: 'Group',
+
-  data() {
+  @Component
-    return {
+  export default class Group extends Vue {
-      group: null,
+    @Prop({ type: String, required: true }) name!: string;
-      loading: true,
+
-    };
+    group = null;
-  },
+    loading = true;
-  props: {
+
-    name: {
-      type: String,
-      required: true,
-    },
-  },
     created() {
       this.fetchData();
-  },
+    }
-  watch: {
+
+    @Watch('$route')
+    onRouteChanged() {
       // call again the method if the route changes
-    $route: 'fetchData',
+      this.fetchData();
-  },
+    }
-  methods: {
+
     fetchData() {
-      eventFetch(`/actors/${this.name}`, this.$store)
+      // FIXME: remove eventFetch
-        .then(response => response.json())
+      // eventFetch(`/actors/${this.name}`, this.$store)
-        .then((response) => {
+      //   .then(response => response.json())
-          this.group = response.data;
+      //   .then((response) => {
-          this.loading = false;
+      //     this.group = response.data;
-          console.log(this.group);
+      //     this.loading = false;
-        });
+      //     console.log(this.group);
-    },
+      //   });
-  },
+    }
-};
+  };
 </script>

js/src/components/Group/GroupList.vue

@@ -22,11 +22,16 @@
           <v-card-title>
             <div>
               <p>{{ group.summary }}</p>
-              <p v-if="group.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': group.organizer.id}}">{{ group.organizer.username }}</router-link></p>
+              <p v-if="group.organizer">Organisé par
+                <router-link :to="{name: 'Account', params: {'id': group.organizer.id}}">{{ group.organizer.username }}</router-link>
+              </p>
             </div>
           </v-card-title>
           <v-card-actions>
-            <v-btn flat color="green" @click="joinGroup(group)"><v-icon v-if="group.locked">lock</v-icon>Join</v-btn>
+            <v-btn flat color="green" @click="joinGroup(group)">
+              <v-icon v-if="group.locked">lock</v-icon>
+              Join
+            </v-btn>
             <v-btn flat color="orange" @click="viewActor(group)">Explore</v-btn>
             <v-btn flat color="red" @click="deleteGroup(group)">Delete</v-btn>
           </v-card-actions>
@@ -37,48 +42,54 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+
-  name: 'GroupList',
+  import { Component, Vue } from 'vue-property-decorator';
-  data() {
+
-    return {
+  @Component
-      groups: [],
+  export default class GroupList extends Vue {
-      loading: true,
+    groups = [];
-    };
+    loading = true;
-  },
+
     created() {
       this.fetchData();
-  },
+    }
-  methods: {
+
-    username_with_domain(actor) {
+    usernameWithDomain(actor) {
       return actor.username + (actor.domain === null ? '' : `@${actor.domain}`);
-    },
+    }
+
     fetchData() {
-      eventFetch('/groups', this.$store)
+      // FIXME: remove eventFetch
-        .then(response => response.json())
+      // eventFetch('/groups', this.$store)
-        .then((data) => {
+      //   .then(response => response.json())
-          console.log(data);
+      //   .then((data) => {
-          this.loading = false;
+      //     console.log(data);
-          this.groups = data.data;
+      //     this.loading = false;
-        });
+      //     this.groups = data.data;
-    },
+      //   });
+    }
+
     deleteGroup(group) {
       const router = this.$router;
-      eventFetch(`/groups/${this.username_with_domain(group)}`, this.$store, { method: 'DELETE' })
+      // FIXME: remove eventFetch
-        .then(response => response.json())
+      // eventFetch(`/groups/${this.usernameWithDomain(group)}`, this.$store, { method: 'DELETE' })
-        .then(() => router.push('/groups'));
+      //   .then(response => response.json())
-    },
+      //   .then(() => router.push('/groups'));
+    }
+
     viewActor(actor) {
-      this.$router.push({ name: 'Group', params: { name: this.username_with_domain(actor) } });
+      this.$router.push({ name: 'Group', params: { name: this.usernameWithDomain(actor) } });
-    },
+    }
+
     joinGroup(group) {
       const router = this.$router;
-      eventFetch(`/groups/${this.username_with_domain(group)}/join`, this.$store, { method: 'POST' })
+      // FIXME: remove eventFetch
-        .then(response => response.json())
+      // eventFetch(`/groups/${this.usernameWithDomain(group)}/join`, this.$store, { method: 'POST' })
-        .then(() => router.push({ name: 'Group', params: { name: this.username_with_domain(group) } }));
+      //   .then(response => response.json())
-    },
+      //   .then(() => router.push({ name: 'Group', params: { name: this.usernameWithDomain(group) } }));
-  },
+    }
-};
+  };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

js/src/components/Home.vue

@@ -12,7 +12,9 @@
           <v-flex text-xs-center>
             <h1 class="display-3">Find events you like</h1>
             <h2>Share it with Mobilizon</h2>
-                      <v-btn :to="{ name: 'Register' }"><translate>Register</translate></v-btn>
+            <v-btn :to="{ name: 'Register' }">
+              <translate>Register</translate>
+            </v-btn>
           </v-flex>
         </v-layout>
       </v-container>
@@ -21,11 +23,14 @@
       <v-flex xs12 sm8 offset-sm2>
         <v-layout row wrap>
           <v-flex xs12 sm6>
-                  <h1><translate :translate-params="{username: actor.preferredUsername}">Welcome back %{username}</translate></h1>
+            <h1>
+              <translate :translate-params="{username: actor.preferredUsername}">Welcome back %{username}</translate>
+            </h1>
           </v-flex>
           <v-flex xs12 sm6>
             <v-layout align-center>
-                  <span class="events-nearby title">Events nearby </span><v-text-field
+              <span class="events-nearby title">Events nearby </span>
+              <v-text-field
                 solo
                 append-icon="place"
                 :value="ipLocation()"
@@ -78,51 +83,52 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
-import ngeohash from 'ngeohash';
+  import ngeohash from 'ngeohash';
-import {AUTH_USER_ACTOR, AUTH_USER_ID} from '@/constants';
+  import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
-import { FETCH_EVENTS } from '@/graphql/event';
+  import { FETCH_EVENTS } from '@/graphql/event';
+  import { Component, Vue } from 'vue-property-decorator';
 
-export default {
+  @Component({
-  name: 'Home',
-  data() {
-    return {
-      gradient: 'to top right, rgba(63,81,181, .7), rgba(25,32,72, .7)',
-      searchTerm: null,
-      location_field: {
-        loading: false,
-        search: null,
-      },
-      events: [],
-      locations: [],
-      city: { name: null },
-      country: { name: null },
-      actor: JSON.parse(localStorage.getItem(AUTH_USER_ACTOR)),
-      user: localStorage.getItem(AUTH_USER_ID),
-    };
-  },
     apollo: {
       events: {
         query: FETCH_EVENTS,
       },
     },
-  computed: {
+  })
-    displayed_name() {
+  export default class Home extends Vue {
+    gradient = 'to top right, rgba(63,81,181, .7), rgba(25,32,72, .7)';
+    searchTerm = null;
+    location_field = {
+      loading: false,
+      search: null,
+    };
+    events = [];
+    locations = [];
+    city = { name: null };
+    country = { name: null };
+    // FIXME: correctly parse local storage
+    actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR) || '{}');
+    user = localStorage.getItem(AUTH_USER_ID);
+
+    get displayed_name() {
       return this.actor.name === null ? this.actor.preferredUsername : this.actor.name;
-    },
+    }
-  },
+
-  methods: {
     fetchLocations() {
-      eventFetch('/locations', this.$store)
+      // FIXME: remove eventFetch
-        .then(response => (response.json()))
+      // eventFetch('/locations', this.$store)
-        .then((response) => {
+      //   .then(response => (response.json()))
-          this.locations = response;
+      //   .then((response) => {
-        });
+      //     this.locations = response;
-    },
+      //   });
+    }
+
     geoLocalize() {
       const router = this.$router;
-      if (sessionStorage.getItem('City')) {
+      const sessionCity = sessionStorage.getItem('City')
-        router.push({ name: 'EventList', params: { location: localStorage.getItem('City') } });
+      if (sessionCity) {
+        router.push({ name: 'EventList', params: { location: sessionCity } });
       } else {
         navigator.geolocation.getCurrentPosition((pos) => {
           const crd = pos.coords;
@@ -136,27 +142,29 @@ export default {
           maximumAge: 0,
         });
       }
-    },
+    }
+
     getAddressData(addressData) {
       const geohash = ngeohash.encode(addressData.latitude, addressData.longitude, 11);
       sessionStorage.setItem('City', geohash);
       this.$router.push({ name: 'EventList', params: { location: geohash } });
-    },
+    }
+
     viewEvent(event) {
       this.$router.push({ name: 'Event', params: { uuid: event.uuid } });
-    },
+    }
+
     ipLocation() {
       return this.city.name ? this.city.name : this.country.name;
-    },
+    }
-  },
+  }
-};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
   .search-autocomplete {
     border: 1px solid #dbdbdb;
-    color: rgba(0,0,0,.87);
+    color: rgba(0, 0, 0, .87);
   }
 
   .events-nearby {

js/src/components/Location.vue

@@ -24,29 +24,28 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+
+  @Component
+  export default class Location extends Vue {
+    @Prop(String) address!: string;
+
+    description = 'Paris, France';
+    center = { lat: 48.85, lng: 2.35 };
+    markers: any[] = [];
 
-export default {
-  data() {
-    return {
-      description: 'Paris, France',
-      center: { lat: 48.85, lng: 2.35 },
-      markers: [],
-    };
-  },
-  props: ['address'],
-  methods: {
     setPlace(place) {
       this.center = {
         lat: place.geometry.location.lat(),
         lng: place.geometry.location.lng(),
       };
-      this.markers = [{
+      this.markers = [ {
         position: { lat: this.center.lat, lng: this.center.lng },
-      }];
+      } ];
+
       this.$emit('input', place.formatted_address);
-    },
+    }
-  },
+  };
-};
 
 </script>

js/src/components/NavBar.vue

@@ -74,42 +74,33 @@
         </v-list>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn flat @click="notificationMenu = false"><translate>Close</translate></v-btn>
+          <v-btn flat @click="notificationMenu = false">
-          <v-btn color="primary" flat @click="notificationMenu = false"><translate>Save</translate></v-btn>
+            <translate>Close</translate>
+          </v-btn>
+          <v-btn color="primary" flat @click="notificationMenu = false">
+            <translate>Save</translate>
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-menu>
-    <v-btn v-if="!user" :to="{ name: 'Login' }"><translate>Login</translate></v-btn>
+    <v-btn v-if="!user" :to="{ name: 'Login' }">
+      <translate>Login</translate>
+    </v-btn>
   </v-toolbar>
 </template>
 
-<script>
+<style>
-import {AUTH_USER_ACTOR, AUTH_USER_ID} from '@/constants';
+  nav.v-toolbar .v-input__slot {
-import {SEARCH} from '@/graphql/search';
+    margin-bottom: 0;
+  }
+</style>
 
-export default {
+<script lang="ts">
-  name: 'NavBar',
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-  props: {
+import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
-    toggleDrawer: {
+import { SEARCH } from '@/graphql/search';
-      type: Function,
+
-      required: true,
+@Component({
-    },
-  },
-  data() {
-    return {
-      notificationMenu: false,
-      notifications: [
-        { header: 'Coucou' },
-        { title: "T'as une notification", subtitle: 'Et elle est cool' },
-      ],
-      model: null,
-      search: [],
-      searchText: null,
-      searchSelect: null,
-      actor: localStorage.getItem(AUTH_USER_ACTOR),
-      user: localStorage.getItem(AUTH_USER_ID),
-    };
-  },
   apollo: {
     search: {
       query: SEARCH,
@@ -123,20 +114,23 @@ export default {
       },
     },
   },
-  watch: {
+})
-    model(val) {
+export default class NavBar extends Vue {
-      switch(val.__typename) {
+  @Prop({ required: true, type: Function }) toggleDrawer!: Function;
-        case 'Event':
+
-          this.$router.push({ name: 'Event', params: { uuid: val.uuid } });
+  notificationMenu = false;
-          break;
+  notifications = [
-        case 'Actor':
+    { header: 'Coucou' },
-          this.$router.push({ name: 'Account', params: { name: this.username_with_domain(val) } });
+    { title: 'T\'as une notification', subtitle: 'Et elle est cool' },
-          break;
+  ];
-      }
+  model = null;
-    },
+  search: any[] = [];
-  },
+  searchText: string | null = null;
-  computed: {
+  searchSelect = null;
-    items() {
+  actor = localStorage.getItem(AUTH_USER_ACTOR);
+  user = localStorage.getItem(AUTH_USER_ID);
+
+  get items() {
     return this.search.map(searchEntry => {
       switch (searchEntry.__typename) {
         case 'Actor':
@@ -148,22 +142,28 @@ export default {
       }
       return searchEntry;
     });
-    },
+  }
-  },
+
-  methods: {
+  @Watch('model')
+  onModelChanged(val) {
+    switch (val.__typename) {
+      case 'Event':
+        this.$router.push({ name: 'Event', params: { uuid: val.uuid } });
+        break;
+      case 'Actor':
+        this.$router.push({ name: 'Account', params: { name: this.username_with_domain(val) } });
+        break;
+    }
+  }
+
   username_with_domain(actor) {
     return actor.preferredUsername + (actor.domain === null ? '' : `@${actor.domain}`);
-    },
+  }
+
   enter() {
     console.log('enter');
-      this.$apollo.queries.search.refetch();
+    this.$apollo.queries['search'].refetch();
   }
-  },
-};
-</script>
 
-<style>
-nav.v-toolbar .v-input__slot {
-  margin-bottom: 0;
 }
-</style>
+</script>

js/src/main.ts

@@ -11,14 +11,16 @@ import 'vuetify/dist/vuetify.min.css';
 import App from '@/App.vue';
 import router from '@/router';
 // import store from './store';
-import translations from '@/i18n/translations.json';
 import { createProvider } from './vue-apollo';
 
+const translations = require('@/i18n/translations.json');
+
 Vue.config.productionTip = false;
 
 Vue.use(VueMarkdown);
 Vue.use(Vuetify);
-const language = window.navigator.userLanguage || window.navigator.language;
+
+const language = (window.navigator as any).userLanguage || window.navigator.language;
 moment.locale(language);
 
 Vue.filter('formatDate', value => (value ? moment(String(value)).format('LLLL') : null));
@@ -33,8 +35,8 @@ Vue.config.language = language.replace('-', '_');
 
 /* eslint-disable no-new */
 new Vue({
-  el: '#app',
   router,
+  el: '#app',
   template: '<App/>',
   apolloProvider: createProvider(),
   components: { App },

js/src/registerServiceWorker.ts

@@ -5,8 +5,7 @@ import { register } from 'register-service-worker';
 if (process.env.NODE_ENV === 'production') {
   register(`${process.env.BASE_URL}service-worker.js`, {
     ready() {
-      console.log('App is being served from cache by a service worker.\n' +
+      console.log('App is being served from cache by a service worker.\nFor more details, visit https://goo.gl/AFskqB');
-        'For more details, visit https://goo.gl/AFskqB');
     },
     cached() {
       console.log('Content has been cached for offline use.');

js/src/router/index.ts

@@ -1,23 +1,23 @@
 import Vue from 'vue';
 import Router from 'vue-router';
-import PageNotFound from '@/components/PageNotFound';
+import PageNotFound from '@/components/PageNotFound.vue';
-import Home from '@/components/Home';
+import Home from '@/components/Home.vue';
-import Event from '@/components/Event/Event';
+import Event from '@/components/Event/Event.vue';
-import EventList from '@/components/Event/EventList';
+import EventList from '@/components/Event/EventList.vue';
-import Location from '@/components/Location';
+import Location from '@/components/Location.vue';
-import CreateEvent from '@/components/Event/Create';
+import CreateEvent from '@/components/Event/Create.vue';
-import CategoryList from '@/components/Category/List';
+import CategoryList from '@/components/Category/List.vue';
-import CreateCategory from '@/components/Category/Create';
+import CreateCategory from '@/components/Category/Create.vue';
-import Register from '@/components/Account/Register';
+import Register from '@/components/Account/Register.vue';
-import Login from '@/components/Account/Login';
+import Login from '@/components/Account/Login.vue';
-import Validate from '@/components/Account/Validate';
+import Validate from '@/components/Account/Validate.vue';
-import ResendConfirmation from '@/components/Account/ResendConfirmation';
+import ResendConfirmation from '@/components/Account/ResendConfirmation.vue';
-import SendPasswordReset from '@/components/Account/SendPasswordReset';
+import SendPasswordReset from '@/components/Account/SendPasswordReset.vue';
-import PasswordReset from '@/components/Account/PasswordReset';
+import PasswordReset from '@/components/Account/PasswordReset.vue';
-import Account from '@/components/Account/Account';
+import Account from '@/components/Account/Account.vue';
-import CreateGroup from '@/components/Group/Create';
+import CreateGroup from '@/components/Group/Create.vue';
-import Group from '@/components/Group/Group';
+import Group from '@/components/Group/Group.vue';
-import GroupList from '@/components/Group/GroupList';
+import GroupList from '@/components/Group/GroupList.vue';
 import Identities from '../components/Account/Identities.vue';
 
 Vue.use(Router);

js/src/shims-tsx.d.ts

@@ -0,0 +1,13 @@
+import Vue, { VNode } from 'vue';
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+}

js/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}

js/src/vue-apollo.ts

@@ -33,7 +33,6 @@ const fragmentMatcher = new IntrospectionFragmentMatcher({
 
 const cache = new InMemoryCache({ fragmentMatcher });
 
-
 const authMiddleware = new ApolloLink((operation, forward) => {
   // add the authorization to the headers
   const token = localStorage.getItem(AUTH_TOKEN);
@@ -43,7 +42,9 @@ const authMiddleware = new ApolloLink((operation, forward) => {
     },
   });
 
-  return forward(operation);
+  if (forward) forward(operation);
+
+  return null;
 });
 
 const uploadLink = createLink({
@@ -60,6 +61,8 @@ const link = authMiddleware.concat(uploadLink);
 
 // Config
 const defaultOptions = {
+  cache,
+  link,
   // You can use `https` for secure connection (recommended in production)
   httpEndpoint,
   // You can use `wss` for secure connection (recommended in production)
@@ -74,9 +77,8 @@ const defaultOptions = {
   websocketsOnly: false,
   // Is being rendered on the server?
   ssr: false,
-  cache,
-  link,
   defaultHttpLink: false,
+  connectToDevTools: true,
 };
 
 // Call this in the Vue app file
@@ -89,23 +91,18 @@ export function createProvider(options = {}) {
   apolloClient.wsClient = wsClient;
 
   // Create vue apollo provider
-  const apolloProvider = new VueApollo({
+  return new VueApollo({
     defaultClient: apolloClient,
-    link,
+    // defaultOptions: {
-    cache,
+    //   $query: {
-    connectToDevTools: true,
-    defaultOptions: {
-      $query: {
     //     fetchPolicy: 'cache-and-network',
-      },
+    //   },
-    },
+    // },
     errorHandler(error) {
       // eslint-disable-next-line no-console
       console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message);
     },
   });
-
-  return apolloProvider;
 }
 
 // Manually call this when user log in

js/tests/unit/.eslintrc.js

@@ -1,8 +0,0 @@
-module.exports = {
-  env: {
-    mocha: true,
-  },
-  rules: {
-    'import/no-extraneous-dependencies': 'off',
-  },
-};

js/tests/unit/HelloWorld.spec.js

@@ -1,13 +0,0 @@
-import { expect } from 'chai';
-import { shallow } from '@vue/test-utils';
-import HelloWorld from '@/components/HelloWorld.vue';
-
-describe('HelloWorld.vue', () => {
-  it('renders props.msg when passed', () => {
-    const msg = 'new message';
-    const wrapper = shallow(HelloWorld, {
-      propsData: { msg },
-    });
-    expect(wrapper.text()).to.include(msg);
-  });
-});

js/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env",
+      "mocha",
+      "chai"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

js/tslint.json

@@ -0,0 +1,8 @@
+{
+  "extends": "tslint-config-airbnb",
+  "rules": {
+    "max-line-length": [ true, 140 ],
+    "import-name": false,
+    "ter-arrow-parens": false
+  }
+}