Fix routing between BE & FE and fix event creation

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/NavBar.vue

@@ -43,14 +43,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { Component, Vue, Watch } from "vue-property-decorator";
-import { AUTH_USER_ACTOR } from "@/constants";
 import { SEARCH } from "@/graphql/search";
 import { CURRENT_USER_CLIENT } from "@/graphql/user";
 import { onLogout } from "@/vue-apollo";
 import { deleteUserData } from "@/utils/auth";
 import { LOGGED_PERSON } from "@/graphql/actor";
-import { IActor, IPerson } from '../types/actor.model';
+import { IActor, IPerson } from '@/types/actor.model';
 import { RouteName } from '@/router'
 
 @Component({

js/src/types/actor.model.ts

@@ -1,5 +1,5 @@
 export interface IActor {
-  id: string;
+  id?: string;
   url: string;
   name: string;
   domain: string|null;
@@ -10,6 +10,17 @@ export interface IActor {
   bannerUrl: string;
 }
 
+export class Actor implements IActor {
+  avatarUrl: string = '';
+  bannerUrl: string = '';
+  domain: string | null = null;
+  name: string = '';
+  preferredUsername: string = '';
+  summary: string = '';
+  suspended: boolean = false;
+  url: string = '';
+}
+
 export interface IPerson extends IActor {
 
 }
@@ -18,6 +29,8 @@ export interface IGroup extends IActor {
   members: IMember[];
 }
 
+export class Person extends Actor implements IPerson {}
+
 export enum MemberRole {
   PENDING,
   MEMBER,

js/src/types/event.model.ts

@@ -1,4 +1,4 @@
-import { IActor } from './actor.model';
+import {Actor, IActor} from './actor.model';
 
 export enum EventStatus {
   TENTATIVE,
@@ -70,3 +70,24 @@ export interface IEvent {
   // online_address: Address;
   // phone_address: string;
 }
+
+
+export class EventModel implements IEvent {
+  begins_on: Date = new Date();
+  category: Category = Category.MEETING;
+  description: string = '';
+  ends_on: Date = new Date();
+  join_options: EventJoinOptions = EventJoinOptions.FREE;
+  large_image: string = '';
+  local: boolean = true;
+  participants: IParticipant[] = [];
+  publish_at: Date = new Date();
+  status: EventStatus = EventStatus.CONFIRMED;
+  thumbnail: string = '';
+  title: string = '';
+  url: string = '';
+  uuid: string = '';
+  visibility: EventVisibility = EventVisibility.PUBLIC;
+  attributedTo: IActor = new Actor();
+  organizerActor: IActor = new Actor();
+}

js/src/views/Event/Create.vue

@@ -1,5 +1,3 @@
-import {Category} from "../../types/event.model";
-import {EventJoinOptions} from "../../types/event.model";
 <template>
   <section>
     <h1 class="title">
@@ -36,55 +34,34 @@ import {EventJoinOptions} from "../../types/event.model";
     // import Location from '@/components/Location';
     import {CREATE_EVENT, EDIT_EVENT} from "@/graphql/event";
     import {Component, Prop, Vue} from "vue-property-decorator";
-    import {Category, EventJoinOptions, EventStatus, EventVisibility, IEvent} from "@/types/event.model";
+    import {
+      Category,
+      IEvent,
+      EventModel,
+    } from "@/types/event.model";
     import {LOGGED_PERSON} from "@/graphql/actor";
-    import {IPerson} from "@/types/actor.model";
+    import {IPerson, Person} from "@/types/actor.model";
 
-@Component({})
+@Component({
+  apollo: {
+    loggedPerson: {
+      query: LOGGED_PERSON,
+    }
+  }
+})
 export default class CreateEvent extends Vue {
   @Prop({ required: false, type: String }) uuid!: string;
 
-  loggedPerson!: IPerson;
+  loggedPerson: IPerson = new Person();
   categories: string[] = Object.keys(Category);
-  event!: IEvent; // FIXME: correctly type an event
+  event: IEvent = new EventModel();
-
-  // created() {
-  //   if (this.uuid) {
-  //     this.fetchEvent();
-  //   }
-  // }
-
-  async created() {
-    // We put initialization here because we need loggedPerson to be ready before initializing event
-    const { data } = await this.$apollo.query({ query: LOGGED_PERSON });
-
-    this.loggedPerson = data.loggedPerson;
-
-    this.event = {
-      title: "",
-      organizerActor: this.loggedPerson,
-      attributedTo: this.loggedPerson,
-      description: "",
-      begins_on: new Date(),
-      ends_on: new Date(),
-      category: Category.MEETING,
-      participants: [],
-      uuid: "",
-      url: "",
-      local: true,
-      status: EventStatus.CONFIRMED,
-      visibility: EventVisibility.PUBLIC,
-      join_options: EventJoinOptions.FREE,
-      thumbnail: "",
-      large_image: "",
-      publish_at: new Date()
-    };
-  }
 
   createEvent(e: Event) {
     e.preventDefault();
+    this.event.organizerActor = this.loggedPerson;
+    this.event.attributedTo = this.loggedPerson;
 
-    if (this.uuid === undefined) {
+    if (this.event.uuid === "") {
       this.$apollo
         .mutate({
           mutation: CREATE_EVENT,
@@ -104,7 +81,7 @@ export default class CreateEvent extends Vue {
           });
         })
         .catch(error => {
-          console.log(error);
+          console.error(error);
         });
     } else {
       this.$apollo

lib/mobilizon_web/router.ex

@@ -65,6 +65,15 @@ defmodule MobilizonWeb.Router do
     get("/@:name/feed/:format", FeedController, :actor)
   end
 
+  scope "/", MobilizonWeb do
+    pipe_through(:browser)
+
+    # Because the "/events/:uuid" route caches all these, we need to force them
+    get("/events/create", PageController, :index)
+    get("/events/list", PageController, :index)
+    get("/events/:uuid/edit", PageController, :index)
+  end
+
   scope "/", MobilizonWeb do
     pipe_through(:activity_pub_and_html)
     get("/@:name", PageController, :actor)