Update deps and fix some front-end stuff

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

js/package.json

@@ -50,7 +50,7 @@
     "@tiptap/vue-3": "^2.0.0-beta.96",
     "@vue-a11y/announcer": "^2.1.0",
     "@vue-a11y/skip-to": "^2.1.2",
-    "@vue-leaflet/vue-leaflet": "^0.8.0",
+    "@vue-leaflet/vue-leaflet": "^0.9.0",
     "@vue/apollo-composable": "^4.0.0-beta.1",
     "@vue/compiler-sfc": "^3.2.37",
     "@vueuse/core": "^9.1.0",
@@ -123,7 +123,7 @@
     "prettier-eslint": "^15.0.1",
     "rollup-plugin-visualizer": "^5.7.1",
     "sass": "^1.34.1",
-    "typescript": "~4.9.4",
+    "typescript": "~5.0.0",
     "vite": "^4.0.4",
     "vite-plugin-pwa": "^0.14.1",
     "vitest": "^0.29.2",

js/src/components/Event/EventMetadataList.vue

@@ -70,8 +70,14 @@
     >
       <div class="">
         <header class="">
-          <h2>{{ t('Create a new metadata element') }}</h2>
-          <p>{{  t('You can put any arbitrary content in this element. URLs will be clickable.') }}</p>
+          <h2>{{ t("Create a new metadata element") }}</h2>
+          <p>
+            {{
+              t(
+                "You can put any arbitrary content in this element. URLs will be clickable."
+              )
+            }}
+          </p>
         </header>
         <div class="">
           <form @submit="addNewElement">

js/src/components/Event/OrganizerPickerWrapper.story.vue

@@ -70,7 +70,9 @@ function setupApp({ app }) {
       new Promise((resolve) =>
         resolve({
           data: {
-            loggedUser: { actors: [{ id: "9", preferredUsername: "sam", name: "Samuel" }] },
+            loggedUser: {
+              actors: [{ id: "9", preferredUsername: "sam", name: "Samuel" }],
+            },
           },
         })
       )

js/src/components/OAuth/AuthorizeApplication.vue

@@ -31,7 +31,7 @@
           </p>
         </div>
         <p v-else class="px-4 font-bold">
-          {{ t('This application asks for the following permissions:') }}
+          {{ t("This application asks for the following permissions:") }}
         </p>
         <o-collapse
           class="mt-3 border-b pb-2 border-zinc-700 text-black dark:text-white"
@@ -87,7 +87,7 @@ import { useMutation } from "@vue/apollo-composable";
 import { AUTORIZE_APPLICATION } from "@/graphql/application";
 import RouteName from "@/router/name";
 import { IApplication } from "@/types/application.model";
-import { scope } from "./scope";
+import { scope } from "./scopes";
 import AlertCircle from "vue-material-design-icons/AlertCircle.vue";
 
 const { t } = useI18n({ useScope: "global" });
@@ -104,8 +104,8 @@ const isOpen = ref<number>(-1);
 const collapses = computed(() =>
   (props.scope ?? "")
     .split(" ")
-    .map((scope) => scope[scope])
-    .filter((scope) => scope)
+    .map((localScope) => scope[localScope])
+    .filter((localScope) => localScope)
 );
 
 const { mutate: authorizeMutation, onDone: onAuthorizeMutationDone } =

js/src/composition/apollo/actor.ts

@@ -25,16 +25,14 @@ export function useCurrentActorClient() {
 export function useCurrentUserIdentities() {
   const { currentUser } = useCurrentUserClient();
 
-  const { result, error, loading } = useQuery<{ loggedUser: Pick<ICurrentUser, 'actors'> }>(
-    IDENTITIES,
-    {},
-    () => ({
-      enabled:
-        currentUser.value?.id !== undefined &&
-        currentUser.value?.id !== null &&
-        currentUser.value?.isLoggedIn === true,
-    })
-  );
+  const { result, error, loading } = useQuery<{
+    loggedUser: Pick<ICurrentUser, "actors">;
+  }>(IDENTITIES, {}, () => ({
+    enabled:
+      currentUser.value?.id !== undefined &&
+      currentUser.value?.id !== null &&
+      currentUser.value?.isLoggedIn === true,
+  }));
 
   const identities = computed(() => result.value?.loggedUser?.actors);
   return { identities, error, loading };

js/src/composition/apollo/user.ts

@@ -82,7 +82,9 @@ export function registerAccount() {
       { context }
     ) => {
       if (context?.userAlreadyActivated) {
-        const currentUserData = store.readQuery<{ loggedUser: Pick<ICurrentUser, 'actors'> }>({
+        const currentUserData = store.readQuery<{
+          loggedUser: Pick<ICurrentUser, "actors">;
+        }>({
           query: IDENTITIES,
         });
 
@@ -96,9 +98,7 @@ export function registerAccount() {
             query: IDENTITIES,
             data: {
               ...currentUserData.loggedUser,
-              actors: [
-                [...currentUserData.loggedUser.actors, newPersonData]
-              ]
+              actors: [[...currentUserData.loggedUser.actors, newPersonData]],
             },
           });
         }

js/src/graphql/actor.ts

@@ -283,6 +283,7 @@ export const LOGGED_USER_MEMBERSHIPS = gql`
 export const IDENTITIES = gql`
   query Identities {
     loggedUser {
+      id
       actors {
         ...ActorFragment
       }
@@ -291,8 +292,6 @@ export const IDENTITIES = gql`
   ${ACTOR_FRAGMENT}
 `;
 
-
-
 export const PERSON_MEMBERSHIPS = gql`
   query PersonMemberships($id: ID!) {
     person(id: $id) {

js/src/utils/identity.ts

@@ -5,10 +5,10 @@ import { ICurrentUser } from "@/types/current-user.model";
 import { apolloClient } from "@/vue-apollo";
 import {
   provideApolloClient,
+  useLazyQuery,
   useMutation,
-  useQuery,
 } from "@vue/apollo-composable";
-import { computed, watch } from "vue";
+import { computed } from "vue";
 
 export class NoIdentitiesException extends Error {}
 
@@ -28,6 +28,10 @@ export async function changeIdentity(identity: IPerson): Promise<void> {
   }
 }
 
+const { onResult: setIdentities, load: loadIdentities } = provideApolloClient(
+  apolloClient
+)(() => useLazyQuery<{ loggedUser: Pick<ICurrentUser, "actors"> }>(IDENTITIES));
+
 /**
  * We fetch from localStorage the latest actor ID used,
  * then fetch the current identities to set in cache
@@ -36,13 +40,15 @@ export async function changeIdentity(identity: IPerson): Promise<void> {
 export async function initializeCurrentActor(): Promise<void> {
   const actorId = localStorage.getItem(AUTH_USER_ACTOR_ID);
 
-  const { result: identitiesResult } = provideApolloClient(apolloClient)(() =>
-    useQuery<{ currentUser: Pick<ICurrentUser, 'actors'> }>(IDENTITIES)
-  );
+  loadIdentities();
 
-  const identities = computed(() => identitiesResult.value?.currentUser.actors);
+  setIdentities(async ({ data }) => {
+    const identities = computed(() => data?.loggedUser?.actors);
+    console.debug(
+      "initializing current actor based on identities",
+      identities.value
+    );
 
-  watch(identities, async () => {
     if (identities.value && identities.value.length < 1) {
       console.warn("Logged user has no identities!");
       throw new NoIdentitiesException();

js/src/views/Account/children/EditIdentity.vue

@@ -349,7 +349,7 @@ const {
   onError: deletePersonError,
 } = useMutation(DELETE_PERSON, () => ({
   update: (store: ApolloCache<InMemoryCache>) => {
-    const data = store.readQuery<{ loggedUser: Pick<ICurrentUser, 'actors'> }>({
+    const data = store.readQuery<{ loggedUser: Pick<ICurrentUser, "actors"> }>({
       query: IDENTITIES,
     });
 
@@ -359,8 +359,10 @@ const {
         data: {
           loggedUser: {
             ...data.loggedUser,
-            actors: data.loggedUser.actors.filter((i) => i.id !== identity.value.id)
-          }
+            actors: data.loggedUser.actors.filter(
+              (i) => i.id !== identity.value.id
+            ),
+          },
         },
       });
     }
@@ -383,7 +385,7 @@ deletePersonDone(async () => {
    */
   const client = resolveClient();
   const data = client.readQuery<{
-    loggedUser: Pick<ICurrentUser, 'actors'>
+    loggedUser: Pick<ICurrentUser, "actors">;
   }>({ query: IDENTITIES });
   if (data) {
     await maybeUpdateCurrentActorCache(data.loggedUser.actors[0]);
@@ -412,7 +414,7 @@ const {
     store: ApolloCache<InMemoryCache>,
     { data: updateData }: FetchResult
   ) => {
-    const data = store.readQuery<{ loggedUser: Pick<ICurrentUser, 'actors'> }>({
+    const data = store.readQuery<{ loggedUser: Pick<ICurrentUser, "actors"> }>({
       query: IDENTITIES,
     });
 
@@ -456,7 +458,7 @@ const {
     store: ApolloCache<InMemoryCache>,
     { data: updateData }: FetchResult
   ) => {
-    const data = store.readQuery<{ loggedUser: Pick<ICurrentUser, 'actors'> }>({
+    const data = store.readQuery<{ loggedUser: Pick<ICurrentUser, "actors"> }>({
       query: IDENTITIES,
     });
 
@@ -467,10 +469,10 @@ const {
           loggedUser: {
             ...data.loggedUser,
             actors: [
-            ...data.loggedUser.actors,
-            { ...updateData?.createPerson, type: ActorType.PERSON },
-            ]
-          }
+              ...data.loggedUser.actors,
+              { ...updateData?.createPerson, type: ActorType.PERSON },
+            ],
+          },
         },
       });
     }