All components now use typescript

js/package.json

@@ -19,7 +19,7 @@
     "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",
@@ -38,12 +38,10 @@
     "@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",

js/src/App.vue

@@ -156,58 +156,56 @@
 
 @Component({
   components: {
-      NavBar
+    NavBar,
-    }
+  },
 })
 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 = [
     {
-        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: 'content_copy', text: 'Categories', route: 'CategoryList', role: 'ROLE_ADMIN'
+      icon: 'content_copy', text: 'Categories', route: 'CategoryList', role: 'ROLE_ADMIN',
     },
     { 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: 'phonelink', text: 'App downloads', role: null },
-    ]
+  ];
   error = {
     timeout: 3000,
     show: false,
-      text: ''
+    text: '',
-    }
+  };
 
-    show_new_event_button = false
+  actor = localStorage.getItem(AUTH_USER_ACTOR);
-    actor = localStorage.getItem(AUTH_USER_ACTOR)
 
   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
   }
 
   showMenuItem (elem) {
     // FIXME: load actor
-      return false
+    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
+    return this.user === undefined ? false : this.user;
   }
 
   toggleDrawer () {
-      this.drawer = !this.drawer
+    this.drawer = !this.drawer;
   }
 }
-
 </script>
 
 <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 { 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 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 { 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,25 +89,35 @@ 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' });
@@ -133,15 +126,16 @@ export default {
         this.error.show = true;
         this.error.text = e.message;
       });
-    },
+    }
+
     validEmail() {
       return this.rules.email(this.credentials.email) === true ? 'v-gravatar' : 'avatar';
-    },
+    }
+
     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 RegisterAvatar from './RegisterAvatar';
+  import RegisterAvatar from './RegisterAvatar.vue';
   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,14 +168,15 @@ 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;
   }

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 { 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,
@@ -47,12 +48,13 @@ export default {
         console.log(error);
         this.failed = true;
       });
-    },
+    }
+
     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,49 +42,47 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
-import { UPLOAD_PICTURE } from '@/graphql/upload';
   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 ()
+      (this.$refs['image'] as any).click();
-    },
+    }
+
     onFilePicked(e) {
       const files = e.target.files;
       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;
-    },
+    }
-  },
+
   };
 </script>
 

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,36 +34,33 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
   import { FETCH_CATEGORIES } from '@/graphql/category';
+  import { Component, Vue } from 'vue-property-decorator';
 
   // 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>
 

js/src/components/Event/Create.vue

@@ -65,30 +65,31 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
   // import Location from '@/components/Location';
   import VueMarkdown from 'vue-markdown';
   import { CREATE_EVENT, EDIT_EVENT } from '@/graphql/event';
   import { FETCH_CATEGORIES } from '@/graphql/category';
   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,24 +103,19 @@ 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: {
-      query: FETCH_CATEGORIES,
-    },
-  },
-  methods: {
     create () {
       // this.event.seats = parseInt(this.event.seats, 10);
       // this.tagsToSend.forEach((tag) => {
@@ -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,32 +143,24 @@ 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)
-    //     .then(response => response.json())
-    //     .then((data) => {
-    //       this.loading = false;
-    //       this.event = data;
-    //       console.log(this.event);
-    //     });
-    // },
     getAddressData (addressData) {
       if (addressData !== null) {
         this.event.address = {
@@ -187,10 +176,10 @@ export default {
           addressRegion: addressData.administrative_area_level_1,
           postalCode: addressData.postal_code,
           streetAddress: `${addressData.street_number} ${addressData.route}`,
-        };
         }
-    },
+      }
-  },
+    }
+
   };
 </script>
 

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 { LOGGED_ACTOR } from '@/graphql/actor';
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+  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,53 +170,71 @@ 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 -->

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 VueMarkdown from 'vue-markdown';
   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,36 +105,42 @@ 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>
 

js/src/components/Group/Create.vue

@@ -64,51 +64,54 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
   import VueMarkdown from 'vue-markdown';
   import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
+  import { Component, Vue } from 'vue-property-decorator';
 
-export default {
+  @Component({
-  name: 'create-group',
-
     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,8 +124,8 @@ export default {
         postalCode: addressData.postal_code,
         streetAddress: `${addressData.street_number} ${addressData.route}`,
       };
-    },
+    }
-  },
+
   };
 </script>
 

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,47 +42,53 @@
   </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>
 

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 { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
   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,20 +142,22 @@ 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 -->

js/src/components/Location.vue

@@ -24,18 +24,17 @@
   </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(),
@@ -44,9 +43,9 @@ export default {
       this.markers = [ {
         position: { lat: this.center.lat, lng: this.center.lng },
       } ];
+
       this.$emit('input', place.formatted_address);
-    },
+    }
-  },
   };
 
 </script>

js/src/components/NavBar.vue

@@ -113,7 +113,7 @@
         return !this.searchText;
       },
     },
-    }
+  },
 })
 export default class NavBar extends Vue {
   @Prop({ required: true, type: Function }) toggleDrawer!: Function;
@@ -127,8 +127,8 @@
   search: any[] = [];
   searchText: string | null = null;
   searchSelect = null;
-    actor: string | null = localStorage.getItem(AUTH_USER_ACTOR);
+  actor = localStorage.getItem(AUTH_USER_ACTOR);
-    user: string | null = localStorage.getItem(AUTH_USER_ID);
+  user = localStorage.getItem(AUTH_USER_ID);
 
   get items() {
     return this.search.map(searchEntry => {
@@ -166,5 +166,4 @@
   }
 
 }
-
 </script>

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/shims-tsx.d.ts

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

js/src/shims-vue.d.ts

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

js/tslint.json

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