Add identity pickers on event creation & join

Also it now saves current actor in localStorage and initalizes it in Apollo Cache (just like user stuff). This allows not relying on loggedPerson query anymore. Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2019-09-11 09:59:01 +02:00
parent e3150a685c
commit 6bceb5b463
23 changed files with 469 additions and 146 deletions
--- a/js/src/views/Account/IdentityPicker.vue
+++ b/js/src/views/Account/IdentityPicker.vue
@@ -0,0 +1,59 @@
+<template>
+    <div class="identity-picker">
+        <img class="image" v-if="currentIdentity.avatar" :src="currentIdentity.avatar.url"  :alt="currentIdentity.avatar.alt"/> {{ currentIdentity.name || `@${currentIdentity.preferredUsername}` }}
+        <b-button type="is-text" @click="isComponentModalActive = true"><translate>Change</translate></b-button>
+        <b-modal :active.sync="isComponentModalActive" has-modal-card>
+            <div class="modal-card">
+                <header class="modal-card-head">
+                    <p class="modal-card-title">Pick an identity</p>
+                </header>
+                <section class="modal-card-body">
+                    <div class="list is-hoverable">
+                        <a class="list-item" v-for="identity in identities" :class="{ 'is-active': identity.id === currentIdentity.id }" @click="changeCurrentIdentity(identity)">
+                            <div class="media">
+                                <img class="media-left image" v-if="identity.avatar" :src="identity.avatar.url" />
+                                <div class="media-content">
+                                    <h3>@{{ identity.preferredUsername }}</h3>
+                                    <small>{{ identity.name }}</small>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                </section>
+            </div>
+        </b-modal>
+    </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { IActor } from '@/types/actor';
+import { IDENTITIES } from '@/graphql/actor';
+
+@Component({
+  apollo: {
+    identities: {
+      query: IDENTITIES,
+    },
+  },
+})
+export default class IdentityPicker extends Vue {
+  @Prop() value!: IActor;
+  isComponentModalActive: boolean = false;
+  identities: IActor[] = [];
+  currentIdentity: IActor = this.value;
+
+  changeCurrentIdentity(identity: IActor) {
+    this.currentIdentity = identity;
+    this.$emit('input', identity);
+    this.isComponentModalActive = false;
+  }
+
+}
+</script>
+<style lang="scss">
+    .identity-picker img.image {
+        display: inline;
+        height: 1.5em;
+        vertical-align: text-bottom;
+    }
+</style>
--- a/js/src/views/Account/MyAccount.vue
+++ b/js/src/views/Account/MyAccount.vue
@@ -1,9 +1,9 @@
 <template>
  <section class="container">
-    <div v-if="loggedPerson">
+    <div v-if="currentActor">
      <div class="header">
-        <figure v-if="loggedPerson.banner" class="image is-3by1">
-          <img :src="loggedPerson.banner.url" alt="banner">
+        <figure v-if="currentActor.banner" class="image is-3by1">
+          <img :src="currentActor.banner.url" alt="banner">
        </figure>
      </div>

@@ -31,7 +31,7 @@
 </style>

 <script lang="ts">
-import { LOGGED_PERSON } from '@/graphql/actor';
+import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 import { Component, Vue, Watch } from 'vue-property-decorator';
 import EventCard from '@/components/Event/EventCard.vue';
 import { IPerson } from '@/types/actor';
@@ -42,17 +42,18 @@ import Identities from '@/components/Account/Identities.vue';
    EventCard,
    Identities,
  },
+  apollo: {
+    currentActor: {
+      query: CURRENT_ACTOR_CLIENT,
+    },
+  },
 })
 export default class MyAccount extends Vue {
-  loggedPerson: IPerson | null = null;
+  currentActor!: IPerson;
  currentIdentityName: string | null = null;

  @Watch('$route.params.identityName', { immediate: true })
  async onIdentityParamChanged (val: string) {
-    if (!this.loggedPerson) {
-      this.loggedPerson = await this.loadLoggedPerson();
-    }
-
    await this.redirectIfNoIdentitySelected(val);

    this.currentIdentityName = val;
@@ -61,18 +62,10 @@ export default class MyAccount extends Vue {
  private async redirectIfNoIdentitySelected (identityParam?: string) {
    if (!!identityParam) return;

-    if (!!this.loggedPerson) {
-      this.$router.push({ params: { identityName: this.loggedPerson.preferredUsername } });
+    if (!!this.currentActor) {
+      await this.$router.push({ params: { identityName: this.currentActor.preferredUsername } });
    }
  }
-
-  private async loadLoggedPerson () {
-    const result = await this.$apollo.query({
-      query: LOGGED_PERSON,
-    });
-
-    return result.data.loggedPerson as IPerson;
-  }
 }
 </script>
 <style lang="scss">
--- a/js/src/views/Account/Profile.vue
+++ b/js/src/views/Account/Profile.vue
@@ -57,7 +57,7 @@
            </a>
          </b-dropdown-item>
        </b-dropdown>
-        <a class="button" v-if="loggedPerson.id === person.id" @click="createToken">
+        <a class="button" v-if="currentActor.id === person.id" @click="createToken">
          <translate>Create token</translate>
        </a>
      </div>
@@ -79,7 +79,7 @@
            <a
              class="button"
              @click="deleteProfile()"
-              v-if="loggedPerson && loggedPerson.id === person.id"
+              v-if="currentActor && currentActor.id === person.id"
            >
              <translate>Delete</translate>
            </a>
@@ -91,7 +91,7 @@
 </template>

 <script lang="ts">
-import { FETCH_PERSON, LOGGED_PERSON } from '@/graphql/actor';
+import { FETCH_PERSON, CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import EventCard from '@/components/Event/EventCard.vue';
 import { MOBILIZON_INSTANCE_HOST } from '@/api/_entrypoint';
@@ -108,8 +108,8 @@ import { CREATE_FEED_TOKEN_ACTOR } from '@/graphql/feed_tokens';
        };
      },
    },
-    loggedPerson: {
-      query: LOGGED_PERSON,
+    currentActor: {
+      query: CURRENT_ACTOR_CLIENT,
    },
  },
  components: {
@@ -120,6 +120,7 @@ export default class MyAccount extends Vue {
  @Prop({ type: String, required: true }) name!: string;

  person!: IPerson;
+  currentActor!: IPerson;

  // call again the method if the route changes
  @Watch('$route')
--- a/js/src/views/Account/children/EditIdentity.vue
+++ b/js/src/views/Account/children/EditIdentity.vue
@@ -25,6 +25,16 @@
      <b-input type="textarea" aria-required="false" v-model="identity.summary"/>
    </b-field>

+    <b-notification
+          type="is-danger"
+          has-icon
+          aria-close-label="Close notification"
+          role="alert"
+          v-for="error in errors"
+    >
+    {{ error }}
+  </b-notification>
+
    <b-field class="submit">
      <div class="control">
        <button v-translate type="button" class="button is-primary" @click="submit()">
@@ -70,19 +80,32 @@

 <script lang="ts">
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-import { CREATE_PERSON, DELETE_PERSON, FETCH_PERSON, IDENTITIES, LOGGED_PERSON, UPDATE_PERSON } from '../../../graphql/actor';
+import {
+  CREATE_PERSON,
+  CURRENT_ACTOR_CLIENT,
+  DELETE_PERSON,
+  FETCH_PERSON,
+  IDENTITIES,
+  UPDATE_PERSON,
+} from '@/graphql/actor';
 import { IPerson, Person } from '@/types/actor';
 import PictureUpload from '@/components/PictureUpload.vue';
 import { MOBILIZON_INSTANCE_HOST } from '@/api/_entrypoint';
 import { Dialog } from 'buefy/dist/components/dialog';
 import { RouteName } from '@/router';
 import { buildFileFromIPicture, buildFileVariable } from '@/utils/image';
+import { changeIdentity, saveActorData } from '@/utils/auth';

@Component({
  components: {
    PictureUpload,
    Dialog,
  },
+  apollo: {
+    currentActor: {
+      query: CURRENT_ACTOR_CLIENT,
+    },
+  },
 })
 export default class EditIdentity extends Vue {
  @Prop({ type: Boolean }) isUpdate!: boolean;
@@ -94,7 +117,7 @@ export default class EditIdentity extends Vue {
  identity = new Person();

  private oldDisplayName: string | null = null;
-  private loggedPerson: IPerson | null = null;
+  private currentActor: IPerson | null = null;

  @Watch('isUpdate')
  async isUpdateChanged () {
@@ -134,6 +157,9 @@ export default class EditIdentity extends Vue {
    this.oldDisplayName = newDisplayName;
  }

+  /**
+   * Delete an identity
+   */
  async deleteIdentity() {
    try {
      await this.$apollo.mutate({
@@ -150,17 +176,15 @@ export default class EditIdentity extends Vue {
        },
      });

-
      this.$notifier.success(
        this.$gettextInterpolate('Identity %{displayName} deleted', { displayName: this.identity.displayName() }),
      );
-
-      await this.loadLoggedPersonIfNeeded();
-
-      // Refresh the loaded person if we deleted the default identity
-      if (this.loggedPerson && this.identity.id === this.loggedPerson.id) {
-        this.loggedPerson = null;
-        await this.loadLoggedPersonIfNeeded(true);
+      /**
+       * If we just deleted the current identity, we need to change it to the next one
+       */
+      const data = this.$apollo.provider.defaultClient.readQuery<{ identities: IPerson[] }>({ query: IDENTITIES });
+      if (data) {
+        await this.maybeUpdateCurrentActorCache(data.identities[0]);
      }

      await this.redirectIfNoIdentitySelected();
@@ -181,6 +205,7 @@ export default class EditIdentity extends Vue {
            const index = data.identities.findIndex(i => i.id === this.identity.id);

            this.$set(data.identities, index, updatePerson);
+            this.maybeUpdateCurrentActorCache(updatePerson);

            store.writeQuery({ query: IDENTITIES, data });
          }
@@ -211,11 +236,11 @@ export default class EditIdentity extends Vue {
        },
      });

-      this.$router.push({ name: RouteName.UPDATE_IDENTITY, params: { identityName: this.identity.preferredUsername } });
-
      this.$notifier.success(
-        this.$gettextInterpolate('Identity %{displayName} created', { displayName: this.identity.displayName() }),
+              this.$gettextInterpolate('Identity %{displayName} created', { displayName: this.identity.displayName() }),
      );
+
+      await this.$router.push({ name: RouteName.UPDATE_IDENTITY, params: { identityName: this.identity.preferredUsername } });
    } catch (err) {
      this.handleError(err);
    }
@@ -263,9 +288,11 @@ export default class EditIdentity extends Vue {
  private handleError(err: any) {
    console.error(err);

-    err.graphQLErrors.forEach(({ message }) => {
-      this.errors.push(message);
-    });
+    if (err.graphQLErrors !== undefined) {
+      err.graphQLErrors.forEach(({ message }) => {
+        this.$notifier.error(message);
+      });
+    }
  }

  private convertToUsername(value: string | null) {
@@ -287,20 +314,29 @@ export default class EditIdentity extends Vue {

    await this.loadLoggedPersonIfNeeded();

-    if (!!this.loggedPerson) {
-      this.$router.push({ params: { identityName: this.loggedPerson.preferredUsername } });
+    if (!!this.currentActor) {
+      await this.$router.push({ params: { identityName: this.currentActor.preferredUsername } });
+    }
+  }
+
+  private async maybeUpdateCurrentActorCache(identity: IPerson) {
+    if (this.currentActor) {
+      if (this.currentActor.preferredUsername === this.identity.preferredUsername) {
+        await changeIdentity(this.$apollo.provider.defaultClient, identity);
+      }
+      this.currentActor = identity;
    }
  }

  private async loadLoggedPersonIfNeeded (bypassCache = false) {
-    if (this.loggedPerson) return;
+    if (this.currentActor) return;

    const result = await this.$apollo.query({
-      query: LOGGED_PERSON,
+      query: CURRENT_ACTOR_CLIENT,
      fetchPolicy: bypassCache ? 'network-only' : undefined,
    });

-    this.loggedPerson = result.data.loggedPerson;
+    this.currentActor = result.data.currentActor;
  }

  private resetFields () {
--- a/js/src/views/Event/Edit.vue
+++ b/js/src/views/Event/Edit.vue
@@ -22,11 +22,15 @@

        <tag-input v-model="event.tags" :data="tags" path="title" />

-        <address-auto-complete v-model="event.physicalAddress" />
-
        <date-time-picker v-model="event.beginsOn" :label="$gettext('Starts on…')" :step="15"/>
        <date-time-picker v-model="event.endsOn" :label="$gettext('Ends on…')" :step="15" />

+        <address-auto-complete v-model="event.physicalAddress" />
+
+        <b-field :label="$gettext('Organizer')">
+          <identity-picker v-model="event.organizerActor"></identity-picker>
+        </b-field>
+
        <div class="field">
          <label class="label">{{ $gettext('Description') }}</label>
          <editor v-model="event.description" />
@@ -192,7 +196,7 @@
 import { CREATE_EVENT, EDIT_EVENT, FETCH_EVENT, FETCH_EVENTS } from '@/graphql/event';
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import { EventModel, EventStatus, EventVisibility, EventVisibilityJoinOptions, CommentModeration, IEvent } from '@/types/event.model';
-import { LOGGED_PERSON } from '@/graphql/actor';
+import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 import { IPerson, Person } from '@/types/actor';
 import PictureUpload from '@/components/PictureUpload.vue';
 import Editor from '@/components/Editor.vue';
@@ -202,12 +206,13 @@ import { TAGS } from '@/graphql/tags';
 import { ITag } from '@/types/tag.model';
 import AddressAutoComplete from '@/components/Event/AddressAutoComplete.vue';
 import { buildFileFromIPicture, buildFileVariable } from '@/utils/image';
+import IdentityPicker from '@/views/Account/IdentityPicker.vue';

@Component({
-  components: { AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor },
+  components: { AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor, IdentityPicker },
  apollo: {
-    loggedPerson: {
-      query: LOGGED_PERSON,
+    currentActor: {
+      query: CURRENT_ACTOR_CLIENT,
    },
    tags: {
      query: TAGS,
@@ -220,7 +225,7 @@ export default class EditEvent extends Vue {

  eventId!: string | undefined;

-  loggedPerson = new Person();
+  currentActor = new Person();
  tags: ITag[] = [];
  event = new EventModel();
  pictureFile: File | null = null;
@@ -257,6 +262,7 @@ export default class EditEvent extends Vue {

    this.event.beginsOn = now;
    this.event.endsOn = end;
+    this.event.organizerActor = this.event.organizerActor || this.currentActor;
  }

  createOrUpdate(e: Event) {
@@ -305,7 +311,10 @@ export default class EditEvent extends Vue {
   * Build variables for Event GraphQL creation query
   */
  private buildVariables() {
-    const res = Object.assign(this.event.toEditJSON(), { organizerActorId: this.loggedPerson.id });
+    let res = this.event.toEditJSON();
+    if (this.event.organizerActor) {
+      res = Object.assign(res, { organizerActorId: this.event.organizerActor.id });
+    }

    delete this.event.options['__typename'];

--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -19,11 +19,11 @@
              <h1 class="title">{{ event.title }}</h1>
            </div>
            <div v-if="!actorIsOrganizer()" class="participate-button has-text-centered">
-              <a v-if="!actorIsParticipant()" @click="joinEvent" class="button is-large is-primary is-rounded">
+              <a v-if="!actorIsParticipant()" @click="isJoinModalActive = true" class="button is-large is-primary is-rounded">
                <b-icon icon="circle-outline"></b-icon>
                <translate>Join</translate>
              </a>
-              <a v-if="actorIsParticipant()" @click="leaveEvent" class="button is-large is-primary is-rounded">
+              <a v-if="actorIsParticipant()" @click="confirmLeave()" class="button is-large is-primary is-rounded">
                <b-icon icon="check-circle"></b-icon>
                <translate>Leave</translate>
              </a>
@@ -229,8 +229,11 @@
          </div>
        </div>
      </section>
-      <b-modal :active.sync="isReportModalActive" has-modal-card>
-        <report-modal :on-confirm="reportEvent" title="Report this event" :outside-domain="event.organizerActor.domain" />
+      <b-modal :active.sync="isReportModalActive" has-modal-card ref="reportModal">
+        <report-modal :on-confirm="reportEvent" title="Report this event" :outside-domain="event.organizerActor.domain" @close="$refs.reportModal.close()" />
+      </b-modal>
+      <b-modal :active.sync="isJoinModalActive" has-modal-card ref="participationModal">
+        <participation-modal :on-confirm="joinEvent" :event="event" :defaultIdentity="currentActor" @close="$refs.participationModal.close()" />
      </b-modal>
      </div>
    </div>
@@ -239,7 +242,7 @@
 <script lang="ts">
 import { DELETE_EVENT, FETCH_EVENT, JOIN_EVENT, LEAVE_EVENT } from '@/graphql/event';
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { LOGGED_PERSON } from '@/graphql/actor';
+import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 import { EventVisibility, IEvent, IParticipant } from '@/types/event.model';
 import { IPerson } from '@/types/actor';
 import { RouteName } from '@/router';
@@ -250,6 +253,7 @@ import EventCard from '@/components/Event/EventCard.vue';
 import EventFullDate from '@/components/Event/EventFullDate.vue';
 import ActorLink from '@/components/Account/ActorLink.vue';
 import ReportModal from '@/components/Report/ReportModal.vue';
+import ParticipationModal from '@/components/Event/ParticipationModal.vue';
 import { IReport } from '@/types/report.model';
 import { CREATE_REPORT } from '@/graphql/report';

@@ -261,6 +265,7 @@ import { CREATE_REPORT } from '@/graphql/report';
    BIcon,
    DateCalendarIcon,
    ReportModal,
+    ParticipationModal,
    // tslint:disable:space-in-parens
    'map-leaflet': () => import(/* webpackChunkName: "map" */ '@/components/Map.vue'),
    // tslint:enable
@@ -274,8 +279,8 @@ import { CREATE_REPORT } from '@/graphql/report';
        };
      },
    },
-    loggedPerson: {
-      query: LOGGED_PERSON,
+    currentActor: {
+      query: CURRENT_ACTOR_CLIENT,
    },
  },
 })
@@ -283,10 +288,11 @@ export default class Event extends Vue {
  @Prop({ type: String, required: true }) uuid!: string;

  event!: IEvent;
-  loggedPerson!: IPerson;
+  currentActor!: IPerson;
  validationSent: boolean = false;
  showMap: boolean = false;
  isReportModalActive: boolean = false;
+  isJoinModalActive: boolean = false;

  EventVisibility = EventVisibility;

@@ -317,13 +323,14 @@ export default class Event extends Vue {

  async reportEvent(content: string, forward: boolean) {
    this.isReportModalActive = false;
+    if (!this.event.organizerActor) return;
    const eventTitle = this.event.title;
    try {
      await this.$apollo.mutate<IReport>({
        mutation: CREATE_REPORT,
        variables: {
          eventId: this.event.id,
-          reporterActorId: this.loggedPerson.id,
+          reporterActorId: this.currentActor.id,
          reportedActorId: this.event.organizerActor.id,
          content,
        },
@@ -339,13 +346,14 @@ export default class Event extends Vue {
    }
  }

-  async joinEvent() {
+  async joinEvent(identity: IPerson) {
+    this.isJoinModalActive = false;
    try {
      await this.$apollo.mutate<{ joinEvent: IParticipant }>({
        mutation: JOIN_EVENT,
        variables: {
          eventId: this.event.id,
-          actorId: this.loggedPerson.id,
+          actorId: identity.id,
        },
        update: (store, { data }) => {
          if (data == null) return;
@@ -367,13 +375,24 @@ export default class Event extends Vue {
    }
  }

+  confirmLeave() {
+    this.$buefy.dialog.confirm({
+      title: `Leaving event « ${this.event.title} »`,
+      message: `Are you sure you want to leave event « ${this.event.title} »`,
+      confirmText: 'Leave event',
+      type: 'is-danger',
+      hasIcon: true,
+      onConfirm: () => this.leaveEvent(),
+    });
+  }
+
  async leaveEvent() {
    try {
      await this.$apollo.mutate<{ leaveEvent: IParticipant }>({
        mutation: LEAVE_EVENT,
        variables: {
          eventId: this.event.id,
-          actorId: this.loggedPerson.id,
+          actorId: this.currentActor.id,
        },
        update: (store, { data }) => {
          if (data == null) return;
@@ -410,14 +429,14 @@ export default class Event extends Vue {
  actorIsParticipant() {
    if (this.actorIsOrganizer()) return true;

-    return this.loggedPerson &&
+    return this.currentActor &&
      this.event.participants
-          .some(participant => participant.actor.id === this.loggedPerson.id);
+          .some(participant => participant.actor.id === this.currentActor.id);
  }

  actorIsOrganizer() {
-    return this.loggedPerson &&
-      this.loggedPerson.id === this.event.organizerActor.id;
+    return this.currentActor && this.event.organizerActor &&
+      this.currentActor.id === this.event.organizerActor.id;
  }

  get twitterShareUrl(): string {
@@ -445,7 +464,7 @@ export default class Event extends Vue {
        mutation: DELETE_EVENT,
        variables: {
          eventId: this.event.id,
-          actorId: this.loggedPerson.id,
+          actorId: this.currentActor.id,
        },
      });

--- a/js/src/views/Group/Create.vue
+++ b/js/src/views/Group/Create.vue
@@ -42,7 +42,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import { Group, IPerson } from '@/types/actor';
-import { CREATE_GROUP, LOGGED_PERSON } from '@/graphql/actor';
+import { CREATE_GROUP, CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 import { RouteName } from '@/router';
 import PictureUpload from '@/components/PictureUpload.vue';

@@ -51,13 +51,13 @@ import PictureUpload from '@/components/PictureUpload.vue';
    PictureUpload,
  },
  apollo: {
-    loggedPerson: {
-      query: LOGGED_PERSON,
+    currentActor: {
+      query: CURRENT_ACTOR_CLIENT,
    },
  },
 })
 export default class CreateGroup extends Vue {
-  loggedPerson!: IPerson;
+  currentActor!: IPerson;

  group = new Group();

@@ -74,7 +74,7 @@ export default class CreateGroup extends Vue {
        },
      });

-      this.$router.push({ name: RouteName.GROUP, params: { identityName: this.group.preferredUsername } });
+      await this.$router.push({ name: RouteName.GROUP, params: { identityName: this.group.preferredUsername } });

      this.$notifier.success(
        this.$gettextInterpolate('Group %{displayName} created', { displayName: this.group.displayName() }),
@@ -111,7 +111,7 @@ export default class CreateGroup extends Vue {
    }

    const currentActor = {
-      creatorActorId: this.loggedPerson.id,
+      creatorActorId: this.currentActor.id,
    };

    return Object.assign({}, this.group, avatarObj, bannerObj, currentActor);
--- a/js/src/views/Group/Group.vue
+++ b/js/src/views/Group/Group.vue
@@ -58,7 +58,7 @@
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import EventCard from '@/components/Event/EventCard.vue';
-import { FETCH_GROUP, LOGGED_PERSON } from '@/graphql/actor';
+import { FETCH_GROUP, CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 import { IGroup } from '@/types/actor';

@Component({
@@ -71,8 +71,8 @@ import { IGroup } from '@/types/actor';
        };
      },
    },
-    loggedPerson: {
-      query: LOGGED_PERSON,
+    currentActor: {
+      query: CURRENT_ACTOR_CLIENT,
    },
  },
  components: {
--- a/js/src/views/Moderation/Report.vue
+++ b/js/src/views/Moderation/Report.vue
@@ -109,7 +109,7 @@ import { EventRouteName } from '@/router/event';
 import { ActorRouteName } from '@/router/actor';
 import { AdminRouteName } from '@/router/admin';
 import { ModerationRouteName } from '@/router/moderation';
-import { LOGGED_PERSON } from '@/graphql/actor';
+import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 import { IPerson } from '@/types/actor';
 import { DELETE_EVENT } from '@/graphql/event';
 import { uniq } from 'lodash';
@@ -127,15 +127,15 @@ import { uniq } from 'lodash';
        this.errors = uniq(graphQLErrors.map(({ message }) => message));
      },
    },
-    loggedPerson: {
-      query: LOGGED_PERSON,
+    currentActor: {
+      query: CURRENT_ACTOR_CLIENT,
    },
  },
 })
 export default class Report extends Vue {
  @Prop({ required: true }) reportId!: number;
  report!: IReport;
-  loggedPerson!: IPerson;
+  currentActor!: IPerson;
  errors: string[] = [];

  ReportStatusEnum = ReportStatusEnum;
@@ -152,7 +152,7 @@ export default class Report extends Vue {
        mutation: CREATE_REPORT_NOTE,
        variables: {
          reportId: this.report.id,
-          moderatorId: this.loggedPerson.id,
+          moderatorId: this.currentActor.id,
          content: this.noteContent,
        },
        update: (store, { data }) => {
@@ -165,7 +165,7 @@ export default class Report extends Vue {
            return;
          }
          const note = data.createReportNote;
-          note.moderator = this.loggedPerson;
+          note.moderator = this.currentActor;

          report.notes = report.notes.concat([note]);

@@ -199,7 +199,7 @@ export default class Report extends Vue {
        mutation: DELETE_EVENT,
        variables: {
          eventId: this.report.event.id.toString(),
-          actorId: this.loggedPerson.id,
+          actorId: this.currentActor.id,
        },
      });

@@ -220,7 +220,7 @@ export default class Report extends Vue {
        mutation: UPDATE_REPORT,
        variables: {
          reportId: this.report.id,
-          moderatorId: this.loggedPerson.id,
+          moderatorId: this.currentActor.id,
          status,
        },
        update: (store, { data }) => {