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>

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 () {