Refactor router

js/src/views/Account/Profile.vue

@@ -69,6 +69,7 @@
 import { FETCH_PERSON, LOGGED_PERSON } from "@/graphql/actor";
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import EventCard from "@/components/Event/EventCard.vue";
+import { RouteName } from '@/router'
 
 @Component({
   apollo: {
@@ -101,7 +102,7 @@ export default class Profile extends Vue {
 
   logoutUser() {
     // TODO : implement logout
-    this.$router.push({ name: "Home" });
+    this.$router.push({ name: RouteName.HOME });
   }
 
   nl2br(text) {

js/src/views/Account/Register.vue

@@ -80,17 +80,13 @@
 </template>
 
 <script lang="ts">
-import Gravatar from "vue-gravatar";
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { IPerson } from "@/types/actor.model";
 import { REGISTER_PERSON } from "@/graphql/actor";
 import { MOBILIZON_INSTANCE_HOST } from "@/api/_entrypoint";
+import { RouteName } from '@/router'
 
-@Component({
-  components: {
-    "v-gravatar": Gravatar
-  }
-})
+@Component
 export default class Register extends Vue {
   @Prop({ type: String, required: true }) email!: string;
   @Prop({ type: Boolean, required: false, default: false }) userAlreadyActivated!: boolean;
@@ -98,20 +94,19 @@ export default class Register extends Vue {
   host: string = MOBILIZON_INSTANCE_HOST;
 
   person: IPerson = {
-    preferredUsername: "",
-    name: "",
-    summary: "",
-    id: "",
-    url: "",
+    preferredUsername: '',
+    name: '',
+    summary: '',
+    id: '',
+    url: '',
     suspended: false,
-    avatarUrl: "", // TODO : Use Gravatar here
-    bannerUrl: "",
+    avatarUrl: '',
+    bannerUrl: '',
     domain: null,
   };
   errors: object = {};
   validationSent: boolean = false;
   sendingValidation: boolean = false;
-  showGravatar: boolean = false;
 
   async submit() {
     try {
@@ -124,7 +119,7 @@ export default class Register extends Vue {
       this.validationSent = true;
 
       if (this.userAlreadyActivated) {
-        this.$router.push({name: "Home"});
+        this.$router.push({ name: RouteName.HOME });
       }
     } catch (error) {
       this.errors = error.graphQLErrors.reduce((acc, error) => {

js/src/views/Event/Event.vue

@@ -99,6 +99,7 @@ import { LOGGED_PERSON } from '@/graphql/actor';
 import { IEvent, IParticipant } from '@/types/event.model';
 import { JOIN_EVENT } from '@/graphql/event';
 import { IPerson } from '@/types/actor.model';
+import { RouteName } from '@/router'
 
 // No typings for this component, so we use require
 const VueMarkdown = require('vue-markdown');
@@ -140,7 +141,7 @@ export default class Event extends Vue {
         }
       });
 
-      router.push({ name: 'EventList' })
+      router.push({ name: RouteName.EVENT })
     } catch (error) {
       console.error(error);
     }

js/src/views/Event/EventList.vue

@@ -19,10 +19,13 @@
 </template>
 
 <script lang="ts">
-import ngeohash from "ngeohash";
-import VueMarkdown from "vue-markdown";
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-import EventCard from "@/components/Event/EventCard.vue";
+import ngeohash from 'ngeohash';
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import EventCard from '@/components/Event/EventCard.vue';
+import { RouteName } from '@/router';
+
+// VueMarkdown is untyped
+const VueMarkdown = require('vue-markdown');
 
 @Component({
   components: {
@@ -36,7 +39,7 @@ export default class EventList extends Vue {
   events = [];
   loading = true;
   locationChip = false;
-  locationText = "";
+  locationText = '';
 
   created() {
     this.fetchData(this.$router.currentRoute.params["location"]);
@@ -50,7 +53,7 @@ export default class EventList extends Vue {
   @Watch("locationChip")
   onLocationChipChange(val) {
     if (val === false) {
-      this.$router.push({ name: "EventList" });
+      this.$router.push({ name: RouteName.EVENT_LIST });
     }
   }
 
@@ -86,7 +89,7 @@ export default class EventList extends Vue {
   }
 
   viewEvent(event) {
-    this.$router.push({ name: "Event", params: { uuid: event.uuid } });
+    this.$router.push({ name: RouteName.EVENT, params: { uuid: event.uuid } });
   }
 
   downloadIcsEvent(event) {

js/src/views/Group/Create.vue

@@ -26,9 +26,11 @@
 </template>
 
 <script lang="ts">
-import VueMarkdown from "vue-markdown";
 import { Component, Vue } from "vue-property-decorator";
 
+// VueMarkdown is untyped
+const VueMarkdown = require('vue-markdown')
+
 @Component({
   components: {
     VueMarkdown
@@ -43,9 +45,9 @@ export default class CreateGroup extends Vue {
     summary: string;
     address?: any;
   } = {
-    preferred_username: "",
-    name: "",
-    summary: ""
+    preferred_username: '',
+    name: '',
+    summary: '',
     // category: null,
   };
   categories = [];

js/src/views/Group/GroupList.vue

@@ -19,7 +19,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue } from 'vue-property-decorator';
+import { RouteName } from '@/router';
 
 @Component
 export default class GroupList extends Vue {
@@ -55,7 +56,7 @@ export default class GroupList extends Vue {
 
   viewActor(actor) {
     this.$router.push({
-      name: "Group",
+      name: RouteName.GROUP,
       params: { name: this.usernameWithDomain(actor) }
     });
   }

js/src/views/Home.vue

@@ -37,15 +37,15 @@
 </template>
 
 <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";
-import EventCard from "@/components/Event/EventCard.vue";
-import { LOGGED_PERSON } from "@/graphql/actor";
-import { IPerson } from "@/types/actor.model";
-import { ICurrentUser } from "@/types/current-user.model";
-import { CURRENT_USER_CLIENT } from "@/graphql/user";
+import ngeohash from 'ngeohash';
+import { FETCH_EVENTS } from '@/graphql/event';
+import { Component, Vue } from 'vue-property-decorator';
+import EventCard from '@/components/Event/EventCard.vue';
+import { LOGGED_PERSON } from '@/graphql/actor';
+import { IPerson } from '@/types/actor.model';
+import { ICurrentUser } from '@/types/current-user.model';
+import { CURRENT_USER_CLIENT } from '@/graphql/user';
+import { RouteName } from '@/router';
 
 @Component({
   apollo: {
@@ -95,40 +95,44 @@ export default class Home extends Vue {
 
   geoLocalize() {
     const router = this.$router;
-    const sessionCity = sessionStorage.getItem("City");
-    if (sessionCity) {
-      router.push({ name: "EventList", params: { location: sessionCity } });
-    } else {
-      navigator.geolocation.getCurrentPosition(
-        pos => {
-          const crd = pos.coords;
+    const sessionCity = sessionStorage.getItem('City');
 
-          const geohash = ngeohash.encode(crd.latitude, crd.longitude, 11);
-          sessionStorage.setItem("City", geohash);
-          router.push({ name: "EventList", params: { location: geohash } });
-        },
-        err => console.warn(`ERROR(${err.code}): ${err.message}`),
-        {
-          enableHighAccuracy: true,
-          timeout: 5000,
-          maximumAge: 0
-        }
-      );
+    if (sessionCity) {
+      return router.push({ name: 'EventList', params: { location: sessionCity } });
     }
+
+    navigator.geolocation.getCurrentPosition(
+      pos => {
+        const crd = pos.coords;
+
+        const geoHash = ngeohash.encode(crd.latitude, crd.longitude, 11);
+        sessionStorage.setItem('City', geoHash);
+        router.push({ name: RouteName.EVENT_LIST, params: { location: geoHash } });
+      },
+
+      err => console.warn(`ERROR(${err.code}): ${err.message}`),
+
+      {
+        enableHighAccuracy: true,
+        timeout: 5000,
+        maximumAge: 0,
+      },
+    );
   }
 
   getAddressData(addressData) {
-    const geohash = ngeohash.encode(
+    const geoHash = ngeohash.encode(
       addressData.latitude,
       addressData.longitude,
       11
     );
-    sessionStorage.setItem("City", geohash);
-    this.$router.push({ name: "EventList", params: { location: geohash } });
+    sessionStorage.setItem("City", geoHash);
+
+    this.$router.push({ name: RouteName.EVENT_LIST, params: { location: geoHash } });
   }
 
   viewEvent(event) {
-    this.$router.push({ name: "Event", params: { uuid: event.uuid } });
+    this.$router.push({ name: RouteName.EVENT, params: { uuid: event.uuid } });
   }
 
   ipLocation() {

js/src/views/User/Login.vue

@@ -53,7 +53,6 @@
 </template>
 
 <script lang="ts">
-import Gravatar from "vue-gravatar";
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { LOGIN } from "@/graphql/auth";
 import { validateEmailField, validateRequiredField } from "@/utils/validators";
@@ -61,12 +60,9 @@ import { saveUserData } from "@/utils/auth";
 import { ILogin } from "@/types/login.model";
 import { UPDATE_CURRENT_USER_CLIENT } from "@/graphql/user";
 import { onLogin } from "@/vue-apollo";
+import { RouteName } from '@/router'
 
-@Component({
-  components: {
-    "v-gravatar": Gravatar
-  }
-})
+@Component
 export default class Login extends Vue {
   @Prop({ type: String, required: false, default: "" }) email!: string;
   @Prop({ type: String, required: false, default: "" }) password!: string;
@@ -85,7 +81,7 @@ export default class Login extends Vue {
 
   beforeCreate() {
     if (this.user) {
-      this.$router.push("/");
+      this.$router.push('/');
     }
   }
 
@@ -119,7 +115,7 @@ export default class Login extends Vue {
 
       onLogin(this.$apollo);
 
-      this.$router.push({ name: "Home" });
+      this.$router.push({ name: RouteName.HOME });
     } catch (err) {
       console.error(err);
       err.graphQLErrors.forEach(({ message }) => {
@@ -127,11 +123,5 @@ export default class Login extends Vue {
       });
     }
   }
-
-  validEmail() {
-    return this.rules.email(this.credentials.email) === true
-      ? "v-gravatar"
-      : "avatar";
-  }
 }
 </script>

js/src/views/User/PasswordReset.vue

@@ -40,6 +40,7 @@ import { validateRequiredField } from "@/utils/validators";
 import { RESET_PASSWORD } from "@/graphql/auth";
 import { saveUserData } from "@/utils/auth";
 import { ILogin } from "@/types/login.model";
+import { RouteName } from '@/router'
 
 @Component
 export default class PasswordReset extends Vue {
@@ -79,7 +80,7 @@ export default class PasswordReset extends Vue {
       });
 
       saveUserData(result.data.resetPassword);
-      this.$router.push({ name: "Home" });
+      this.$router.push({ name: RouteName.HOME });
     } catch (err) {
       console.error(err);
       err.graphQLErrors.forEach(({ message }) => {

js/src/views/User/Register.vue

@@ -108,15 +108,11 @@
 </template>
 
 <script lang="ts">
-import Gravatar from "vue-gravatar";
 import { CREATE_USER } from "@/graphql/user";
 import { Component, Prop, Vue } from "vue-property-decorator";
+import { UserRouteName } from '@/router/user'
 
-@Component({
-  components: {
-    "v-gravatar": Gravatar
-  }
-})
+@Component
 export default class Register extends Vue {
   @Prop({ type: String, required: false, default: "" }) email!: string;
   @Prop({ type: String, required: false, default: "" }) password!: string;
@@ -124,29 +120,25 @@ export default class Register extends Vue {
   credentials = {
     email: this.email,
     password: this.password
-  } as { email: string; password: string };
+  }
   errors: object = {};
   sendingValidation: boolean = false;
   validationSent: boolean = false;
-  showGravatar: boolean = false;
-
-  validEmail() {
-    return this.credentials.email.includes("@") === true
-      ? "v-gravatar"
-      : "avatar";
-  }
 
   async submit() {
     try {
       this.sendingValidation = true;
       this.errors = {};
+
       await this.$apollo.mutate({
         mutation: CREATE_USER,
         variables: this.credentials
       });
+
       this.validationSent = true;
+
       this.$router.push({
-        name: "RegisterProfile",
+        name: UserRouteName.REGISTER_PROFILE,
         params: { email: this.credentials.email }
       });
     } catch (error) {

js/src/views/User/Validate.vue

@@ -20,6 +20,8 @@
 import { VALIDATE_USER } from "@/graphql/user";
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { AUTH_TOKEN, AUTH_USER_ID } from "@/constants";
+import { RouteName } from '@/router'
+import { UserRouteName } from '@/router/user'
 
 @Component
 export default class Validate extends Vue {
@@ -46,9 +48,9 @@ export default class Validate extends Vue {
       const user = data.validateUser.user;
       console.log(user);
       if (user.defaultActor) {
-        this.$router.push({name: "Home"});
+        this.$router.push({ name: RouteName.HOME });
       } else { // If the user didn't register any profile yet, let's create one for them
-        this.$router.push({ name: 'RegisterProfile', params: {email: user.email, userAlreadyActivated: 'true'} });
+        this.$router.push({ name: UserRouteName.REGISTER_PROFILE, params: { email: user.email, userAlreadyActivated: 'true' } });
       }
     } catch (err) {
       console.error(err);