fix(lint): fix lint after upgrades

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

js/src/apollo/utils.ts

@@ -24,12 +24,15 @@ type schemaType = {
 
 // eslint-disable-next-line no-underscore-dangle
 const types = introspectionQueryResultData.__schema.types as schemaType[];
-export const possibleTypes = types.reduce((acc, type) => {
+export const possibleTypes = types.reduce(
+  (acc, type) => {
     if (type.kind === "INTERFACE") {
       acc[type.name] = type.possibleTypes.map(({ name }) => name);
     }
     return acc;
-}, {} as Record<string, string[]>);
+  },
+  {} as Record<string, string[]>
+);
 
 const replaceMergePolicy = <TExisting = any, TIncoming = any>(
   _existing: TExisting,

js/src/components/Activity/DiscussionActivityItem.vue

@@ -62,34 +62,40 @@ const props = defineProps<{
   activity: IActivity;
 }>();
 
-const isAuthorCurrentActor = useIsActivityAuthorCurrentActor()(props.activity);
+const useIsActivityAuthorCurrentActorFct = useIsActivityAuthorCurrentActor();
+const useActivitySubjectParamsFct = useActivitySubjectParams();
 
-const subjectParams = useActivitySubjectParams()(props.activity);
+const isAuthorCurrentActor = computed(() =>
+  useIsActivityAuthorCurrentActorFct(props.activity)
+);
+const subjectParams = computed(() =>
+  useActivitySubjectParamsFct(props.activity)
+);
 
 const translation = computed((): string | undefined => {
   switch (props.activity.subject) {
     case ActivityDiscussionSubject.DISCUSSION_CREATED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You created the discussion {discussion}.";
       }
       return "{profile} created the discussion {discussion}.";
     case ActivityDiscussionSubject.DISCUSSION_REPLIED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You replied to the discussion {discussion}.";
       }
       return "{profile} replied to the discussion {discussion}.";
     case ActivityDiscussionSubject.DISCUSSION_RENAMED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You renamed the discussion from {old_discussion} to {discussion}.";
       }
       return "{profile} renamed the discussion from {old_discussion} to {discussion}.";
     case ActivityDiscussionSubject.DISCUSSION_ARCHIVED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You archived the discussion {discussion}.";
       }
       return "{profile} archived the discussion {discussion}.";
     case ActivityDiscussionSubject.DISCUSSION_DELETED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You deleted the discussion {discussion}.";
       }
       return "{profile} deleted the discussion {discussion}.";

js/src/components/Activity/EventActivityItem.vue

@@ -52,35 +52,41 @@ const props = defineProps<{
   activity: IActivity;
 }>();
 
-const isAuthorCurrentActor = useIsActivityAuthorCurrentActor()(props.activity);
+const useIsActivityAuthorCurrentActorFct = useIsActivityAuthorCurrentActor();
+const useActivitySubjectParamsFct = useActivitySubjectParams();
 
-const subjectParams = useActivitySubjectParams()(props.activity);
+const isAuthorCurrentActor = computed(() =>
+  useIsActivityAuthorCurrentActorFct(props.activity)
+);
+const subjectParams = computed(() =>
+  useActivitySubjectParamsFct(props.activity)
+);
 
 const translation = computed((): string | undefined => {
   switch (props.activity.subject) {
     case ActivityEventSubject.EVENT_CREATED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You created the event {event}.";
       }
       return "The event {event} was created by {profile}.";
     case ActivityEventSubject.EVENT_UPDATED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You updated the event {event}.";
       }
       return "The event {event} was updated by {profile}.";
     case ActivityEventSubject.EVENT_DELETED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You deleted the event {event}.";
       }
       return "The event {event} was deleted by {profile}.";
     case ActivityEventCommentSubject.COMMENT_POSTED:
-      if (subjectParams.comment_reply_to) {
+      if (subjectParams.value.comment_reply_to) {
-        if (isAuthorCurrentActor) {
+        if (isAuthorCurrentActor.value) {
           return "You replied to a comment on the event {event}.";
         }
         return "{profile} replied to a comment on the event {event}.";
       }
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You posted a comment on the event {event}.";
       }
       return "{profile} posted a comment on the event {event}.";

js/src/components/Activity/GroupActivityItem.vue

@@ -45,7 +45,11 @@
             v-if="activity.object"
             :to="{
               name: RouteName.GROUP,
-            params: { preferredUsername: usernameWithDomain(activity.object as IActor) },
+              params: {
+                preferredUsername: usernameWithDomain(
+                  activity.object as IActor
+                ),
+              },
             }"
             >{{ subjectParams.group_name }}</router-link
           >
@@ -78,19 +82,25 @@ const props = defineProps<{
   activity: IActivity;
 }>();
 
-const isAuthorCurrentActor = useIsActivityAuthorCurrentActor()(props.activity);
+const useIsActivityAuthorCurrentActorFct = useIsActivityAuthorCurrentActor();
+const useActivitySubjectParamsFct = useActivitySubjectParams();
 
-const subjectParams = useActivitySubjectParams()(props.activity);
+const isAuthorCurrentActor = computed(() =>
+  useIsActivityAuthorCurrentActorFct(props.activity)
+);
+const subjectParams = computed(() =>
+  useActivitySubjectParamsFct(props.activity)
+);
 
 const translation = computed((): string | undefined => {
   switch (props.activity.subject) {
     case ActivityGroupSubject.GROUP_CREATED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You created the group {group}.";
       }
       return "{profile} created the group {group}.";
     case ActivityGroupSubject.GROUP_UPDATED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You updated the group {group}.";
       }
       return "{profile} updated the group {group}.";
@@ -114,8 +124,8 @@ const group = computed(() => props.activity.object as IGroup);
 
 const details = computed((): string[] => {
   const localDetails = [];
-  const changes = subjectParams.group_changes.split(",");
+  const changes = subjectParams.value.group_changes.split(",");
-  if (changes.includes("name") && subjectParams.old_group_name) {
+  if (changes.includes("name") && subjectParams.value.old_group_name) {
     localDetails.push("{old_group_name} was renamed to {group}.");
   }
   if (changes.includes("visibility") && group.value.visibility) {

js/src/components/Activity/MemberActivityItem.vue

@@ -51,58 +51,63 @@ const props = defineProps<{
   activity: IActivity;
 }>();
 
-const isAuthorCurrentActor = useIsActivityAuthorCurrentActor()(props.activity);
+const isActivityAuthorCurrentActorFct = useIsActivityAuthorCurrentActor();
+const activitySubjectParamsFct = useActivitySubjectParams();
+const isActivityObjectCurrentActor = useIsActivityObjectCurrentActor();
 
-const subjectParams = useActivitySubjectParams()(props.activity);
+const isAuthorCurrentActor = computed(() =>
+  isActivityAuthorCurrentActorFct(props.activity)
+);
+const subjectParams = computed(() => activitySubjectParamsFct(props.activity));
 const member = computed(() => props.activity.object as IMember);
 
-const isObjectMemberCurrentActor = useIsActivityObjectCurrentActor()(
+const isObjectMemberCurrentActor = computed(() =>
-  props.activity
+  isActivityObjectCurrentActor(props.activity)
 );
 
 const translation = computed((): string | undefined => {
   switch (props.activity.subject) {
     case ActivityMemberSubject.MEMBER_REQUEST:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You requested to join the group.";
       }
       return "{member} requested to join the group.";
     case ActivityMemberSubject.MEMBER_INVITED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You invited {member}.";
       }
       return "{member} was invited by {profile}.";
     case ActivityMemberSubject.MEMBER_ADDED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You added the member {member}.";
       }
       return "{profile} added the member {member}.";
     case ActivityMemberSubject.MEMBER_APPROVED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You approved {member}'s membership.";
       }
-      if (isObjectMemberCurrentActor) {
+      if (isObjectMemberCurrentActor.value) {
         return "Your membership was approved by {profile}.";
       }
       return "{profile} approved {member}'s membership.";
     case ActivityMemberSubject.MEMBER_JOINED:
       return "{member} joined the group.";
     case ActivityMemberSubject.MEMBER_UPDATED:
-      if (subjectParams.member_role && subjectParams.old_role) {
+      if (subjectParams.value.member_role && subjectParams.value.old_role) {
         return roleUpdate.value;
       }
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You updated the member {member}.";
       }
       return "{profile} updated the member {member}.";
     case ActivityMemberSubject.MEMBER_REMOVED:
-      if (subjectParams.member_role === MemberRole.NOT_APPROVED) {
+      if (subjectParams.value.member_role === MemberRole.NOT_APPROVED) {
-        if (isAuthorCurrentActor) {
+        if (isAuthorCurrentActor.value) {
           return "You rejected {member}'s membership request.";
         }
         return "{profile} rejected {member}'s membership request.";
       }
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You excluded member {member}.";
       }
       return "{profile} excluded member {member}.";
@@ -111,7 +116,7 @@ const translation = computed((): string | undefined => {
     case ActivityMemberSubject.MEMBER_REJECTED_INVITATION:
       return "{member} rejected the invitation to join the group.";
     case ActivityMemberSubject.MEMBER_ACCEPTED_INVITATION:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You accepted the invitation to join the group.";
       }
       return "{member} accepted the invitation to join the group.";
@@ -159,69 +164,69 @@ const iconColor = computed((): string | undefined => {
 
 const roleUpdate = computed((): string | undefined => {
   if (
-    Object.keys(MEMBER_ROLE_VALUE).includes(subjectParams.member_role) &&
+    Object.keys(MEMBER_ROLE_VALUE).includes(subjectParams.value.member_role) &&
-    Object.keys(MEMBER_ROLE_VALUE).includes(subjectParams.old_role)
+    Object.keys(MEMBER_ROLE_VALUE).includes(subjectParams.value.old_role)
   ) {
     if (
-      MEMBER_ROLE_VALUE[subjectParams.member_role] >
+      MEMBER_ROLE_VALUE[subjectParams.value.member_role] >
-      MEMBER_ROLE_VALUE[subjectParams.old_role]
+      MEMBER_ROLE_VALUE[subjectParams.value.old_role]
     ) {
-      switch (subjectParams.member_role) {
+      switch (subjectParams.value.member_role) {
         case MemberRole.MODERATOR:
-          if (isAuthorCurrentActor) {
+          if (isAuthorCurrentActor.value) {
             return "You promoted {member} to moderator.";
           }
-          if (isObjectMemberCurrentActor) {
+          if (isObjectMemberCurrentActor.value) {
             return "You were promoted to moderator by {profile}.";
           }
           return "{profile} promoted {member} to moderator.";
         case MemberRole.ADMINISTRATOR:
-          if (isAuthorCurrentActor) {
+          if (isAuthorCurrentActor.value) {
             return "You promoted {member} to administrator.";
           }
-          if (isObjectMemberCurrentActor) {
+          if (isObjectMemberCurrentActor.value) {
             return "You were promoted to administrator by {profile}.";
           }
           return "{profile} promoted {member} to administrator.";
         default:
-          if (isAuthorCurrentActor) {
+          if (isAuthorCurrentActor.value) {
             return "You promoted the member {member} to an unknown role.";
           }
-          if (isObjectMemberCurrentActor) {
+          if (isObjectMemberCurrentActor.value) {
             return "You were promoted to an unknown role by {profile}.";
           }
           return "{profile} promoted {member} to an unknown role.";
       }
     } else {
-      switch (subjectParams.member_role) {
+      switch (subjectParams.value.member_role) {
         case MemberRole.MODERATOR:
-          if (isAuthorCurrentActor) {
+          if (isAuthorCurrentActor.value) {
             return "You demoted {member} to moderator.";
           }
-          if (isObjectMemberCurrentActor) {
+          if (isObjectMemberCurrentActor.value) {
             return "You were demoted to moderator by {profile}.";
           }
           return "{profile} demoted {member} to moderator.";
         case MemberRole.MEMBER:
-          if (isAuthorCurrentActor) {
+          if (isAuthorCurrentActor.value) {
             return "You demoted {member} to simple member.";
           }
-          if (isObjectMemberCurrentActor) {
+          if (isObjectMemberCurrentActor.value) {
             return "You were demoted to simple member by {profile}.";
           }
           return "{profile} demoted {member} to simple member.";
         default:
-          if (isAuthorCurrentActor) {
+          if (isAuthorCurrentActor.value) {
             return "You demoted the member {member} to an unknown role.";
           }
-          if (isObjectMemberCurrentActor) {
+          if (isObjectMemberCurrentActor.value) {
             return "You were demoted to an unknown role by {profile}.";
           }
           return "{profile} demoted {member} to an unknown role.";
       }
     }
   } else {
-    if (isAuthorCurrentActor) {
+    if (isAuthorCurrentActor.value) {
       return "You updated the member {member}.";
     }
     return "{profile} updated the member {member}";

js/src/components/Activity/PostActivityItem.vue

@@ -49,24 +49,30 @@ const props = defineProps<{
   activity: IActivity;
 }>();
 
-const isAuthorCurrentActor = useIsActivityAuthorCurrentActor()(props.activity);
+const useIsActivityAuthorCurrentActorFct = useIsActivityAuthorCurrentActor();
+const useActivitySubjectParamsFct = useActivitySubjectParams();
 
-const subjectParams = useActivitySubjectParams()(props.activity);
+const isAuthorCurrentActor = computed(() =>
+  useIsActivityAuthorCurrentActorFct(props.activity)
+);
+const subjectParams = computed(() =>
+  useActivitySubjectParamsFct(props.activity)
+);
 
 const translation = computed((): string | undefined => {
   switch (props.activity.subject) {
     case ActivityPostSubject.POST_CREATED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You created the post {post}.";
       }
       return "The post {post} was created by {profile}.";
     case ActivityPostSubject.POST_UPDATED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You updated the post {post}.";
       }
       return "The post {post} was updated by {profile}.";
     case ActivityPostSubject.POST_DELETED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You deleted the post {post}.";
       }
       return "The post {post} was deleted by {profile}.";

js/src/components/Activity/ResourceActivityItem.vue

@@ -61,10 +61,15 @@ import { IResource } from "@/types/resource";
 const props = defineProps<{
   activity: IActivity;
 }>();
+const useIsActivityAuthorCurrentActorFct = useIsActivityAuthorCurrentActor();
+const useActivitySubjectParamsFct = useActivitySubjectParams();
 
-const isAuthorCurrentActor = useIsActivityAuthorCurrentActor()(props.activity);
+const isAuthorCurrentActor = computed(() =>
-
+  useIsActivityAuthorCurrentActorFct(props.activity)
-const subjectParams = useActivitySubjectParams()(props.activity);
+);
+const subjectParams = computed(() =>
+  useActivitySubjectParamsFct(props.activity)
+);
 
 const resource = computed(() => props.activity.object as IResource);
 
@@ -74,12 +79,12 @@ const translation = computed((): string | undefined => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       if (props.activity?.object?.type === "folder") {
-        if (isAuthorCurrentActor) {
+        if (isAuthorCurrentActor.value) {
           return "You created the folder {resource}.";
         }
         return "{profile} created the folder {resource}.";
       }
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You created the resource {resource}.";
       }
       return "{profile} created the resource {resource}.";
@@ -88,23 +93,23 @@ const translation = computed((): string | undefined => {
       // @ts-ignore
       if (props.activity?.object?.type === "folder") {
         if (parentDirectory.value === null) {
-          if (isAuthorCurrentActor) {
+          if (isAuthorCurrentActor.value) {
             return "You moved the folder {resource} to the root folder.";
           }
           return "{profile} moved the folder {resource} to the root folder.";
         }
-        if (isAuthorCurrentActor) {
+        if (isAuthorCurrentActor.value) {
           return "You moved the folder {resource} into {new_path}.";
         }
         return "{profile} moved the folder {resource} into {new_path}.";
       }
       if (parentDirectory.value === null) {
-        if (isAuthorCurrentActor) {
+        if (isAuthorCurrentActor.value) {
           return "You moved the resource {resource} to the root folder.";
         }
         return "{profile} moved the resource {resource} to the root folder.";
       }
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You moved the resource {resource} into {new_path}.";
       }
       return "{profile} moved the resource {resource} into {new_path}.";
@@ -112,12 +117,12 @@ const translation = computed((): string | undefined => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       if (props.activity?.object?.type === "folder") {
-        if (isAuthorCurrentActor) {
+        if (isAuthorCurrentActor.value) {
           return "You renamed the folder from {old_resource_title} to {resource}.";
         }
         return "{profile} renamed the folder from {old_resource_title} to {resource}.";
       }
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You renamed the resource from {old_resource_title} to {resource}.";
       }
       return "{profile} renamed the resource from {old_resource_title} to {resource}.";
@@ -125,12 +130,12 @@ const translation = computed((): string | undefined => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       if (props.activity?.object?.type === "folder") {
-        if (isAuthorCurrentActor) {
+        if (isAuthorCurrentActor.value) {
           return "You deleted the folder {resource}.";
         }
         return "{profile} deleted the folder {resource}.";
       }
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You deleted the resource {resource}.";
       }
       return "{profile} deleted the resource {resource}.";
@@ -180,8 +185,8 @@ const parentPath = (parent: string | undefined): string | undefined => {
 };
 
 const parentDirectory = computed((): string | undefined | null => {
-  if (subjectParams.resource_path) {
+  if (subjectParams.value.resource_path) {
-    const parentPathResult = parentPath(subjectParams.resource_path);
+    const parentPathResult = parentPath(subjectParams.value.resource_path);
     const directory = parentPathResult?.split("/");
     const res = directory?.pop();
     res === "" ? null : res;

js/src/components/Comment/CommentTree.vue

@@ -2,7 +2,7 @@
   <div>
     <form
       v-if="isAbleToComment"
-      @submit.prevent="createCommentForEvent(newComment)"
+      @submit.prevent="createCommentForEvent(newCommentValue)"
       class="mt-2"
     >
       <o-notification
@@ -12,8 +12,11 @@
         >{{ t("Comments are closed for everybody else.") }}</o-notification
       >
       <article class="flex flex-wrap items-start gap-2">
-        <figure class="" v-if="newComment.actor">
+        <figure class="" v-if="newCommentValue.actor">
-          <identity-picker-wrapper :inline="false" v-model="newComment.actor" />
+          <identity-picker-wrapper
+            :inline="false"
+            v-model="newCommentValue.actor"
+          />
         </figure>
         <div class="flex-1">
           <div class="flex flex-col gap-2">
@@ -23,9 +26,9 @@
                 v-if="currentActor"
                 :currentActor="currentActor"
                 mode="comment"
-                v-model="newComment.text"
+                v-model="newCommentValue.text"
                 :aria-label="t('Comment body')"
-                @submit="createCommentForEvent(newComment)"
+                @submit="createCommentForEvent(newCommentValue)"
                 :placeholder="t('Write a new comment')"
               />
               <p class="" v-if="emptyCommentError">
@@ -35,7 +38,7 @@
             <div class="" v-if="isEventOrganiser">
               <o-switch
                 aria-labelledby="notify-participants-toggle"
-                v-model="newComment.isAnnouncement"
+                v-model="newCommentValue.isAnnouncement"
                 >{{ t("Notify participants") }}</o-switch
               >
             </div>
@@ -70,7 +73,9 @@
           v-for="comment in filteredOrderedComments"
           :key="comment.id"
           @create-comment="createCommentForEvent"
-          @delete-comment="commentToDelete => deleteComment({
+          @delete-comment="
+            (commentToDelete) =>
+              deleteComment({
                 commentId: commentToDelete.id as string,
                 originCommentId: commentToDelete.originComment?.id,
               })
@@ -126,17 +131,19 @@ const Editor = defineAsyncComponent(
   () => import("@/components/TextEditor.vue")
 );
 
-const newComment = ref<IComment>(props.newComment ?? new CommentModel());
+const newCommentProps = computed(() => props.newComment);
+
+const newCommentValue = ref<IComment>(new CommentModel(newCommentProps.value));
 
 const emptyCommentError = ref(false);
 
 const { t } = useI18n({ useScope: "global" });
 
 watch(currentActor, () => {
-  newComment.value.actor = currentActor.value as IPerson;
+  newCommentValue.value.actor = currentActor.value as IPerson;
 });
 
-watch(newComment, (newCommentUpdated: IComment) => {
+watch(newCommentValue, (newCommentUpdated: IComment) => {
   if (emptyCommentError.value) {
     emptyCommentError.value = ["", "<p></p>"].includes(newCommentUpdated.text);
   }
@@ -212,7 +219,7 @@ const {
 
 createCommentForEventMutationDone(() => {
   // and reset the new comment field
-  newComment.value = new CommentModel();
+  newCommentValue.value = new CommentModel();
 });
 
 const notifier = inject<Notifier>("notifier");

js/src/components/Editor/MentionList.vue

@@ -27,9 +27,12 @@ const props = defineProps<{
 
 const selectedIndex = ref(0);
 
-watch(props.items, () => {
+watch(
+  () => props.items,
+  () => {
     selectedIndex.value = 0;
-});
+  }
+);
 
 // const onKeyDown = ({ event }: { event: KeyboardEvent }): boolean => {
 //   if (event.key === "ArrowUp") {
@@ -80,7 +83,9 @@ const selectItem = (index: number): void => {
   color: rgba(black, 0.8);
   overflow: hidden;
   font-size: 0.9rem;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0px 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .item {

js/src/components/Event/GroupedMultiEventMinimalistCard.vue

@@ -41,12 +41,12 @@ const keys = computed((): string[] => {
   return Array.from(monthlyGroupedEvents.value.keys()).sort((a, b) => {
     const aParams = a.split("-").map((x) => parseInt(x, 10)) as [
       number,
-      number
+      number,
     ];
     const aDate = new Date(...aParams);
     const bParams = b.split("-").map((x) => parseInt(x, 10)) as [
       number,
-      number
+      number,
     ];
     const bDate = new Date(...bParams);
     return props.order === "DESC"

js/src/components/Group/JoinGroupWithAccount.vue

@@ -22,7 +22,7 @@ const props = defineProps<{
   preferredUsername: string;
 }>();
 
-const { group } = useGroup(props.preferredUsername);
+const { group } = useGroup(computed(() => props.preferredUsername));
 
 const { t } = useI18n({ useScope: "global" });
 

js/src/components/Local/MoreContent.vue

@@ -86,6 +86,8 @@ const imageSource = computed(
     rgba(2, 0, 36, 0.75) 90%,
     rgba(2, 0, 36, 0.85) 100%
   );
-  transition: opacity 0.1s ease-in-out, visibility 0.1s ease-in-out;
+  transition:
+    opacity 0.1s ease-in-out,
+    visibility 0.1s ease-in-out;
 }
 </style>

js/src/components/Participation/ConfirmParticipation.vue

@@ -90,9 +90,9 @@ const { onDone, onError, mutate } = useMutation<{
   confirmParticipation: IParticipant;
 }>(CONFIRM_PARTICIPATION);
 
-mutate({
+mutate(() => ({
   token: props.token,
-});
+}));
 
 onDone(async ({ data }) => {
   participation.value = data?.confirmParticipation;

js/src/components/Participation/ParticipationWithAccount.vue

@@ -17,7 +17,7 @@ const props = defineProps<{
   uuid: string;
 }>();
 
-const { event } = useFetchEvent(props.uuid);
+const { event } = useFetchEvent(computed(() => props.uuid));
 
 const { t } = useI18n({ useScope: "global" });
 

js/src/components/Participation/ParticipationWithoutAccount.vue

@@ -156,7 +156,7 @@ const { anonymousActorId } = useAnonymousActorId();
 const props = defineProps<{
   uuid: string;
 }>();
-const { event, loading } = useFetchEventBasic(props.uuid);
+const { event, loading } = useFetchEventBasic(computed(() => props.uuid));
 
 const { t, locale } = useI18n({ useScope: "global" });
 

js/src/components/Participation/UnloggedParticipation.vue

@@ -104,7 +104,7 @@ import { useI18n } from "vue-i18n";
 
 const props = defineProps<{ uuid: string }>();
 
-const { event } = useFetchEvent(props.uuid);
+const { event } = useFetchEvent(computed(() => props.uuid));
 
 const { anonymousParticipationConfig } = useAnonymousParticipationConfig();
 

js/src/components/Resource/FolderItem.vue

@@ -49,7 +49,7 @@ import RouteName from "@/router/name";
 import { IMinimalActor, usernameWithDomain } from "@/types/actor";
 import ResourceDropdown from "./ResourceDropdown.vue";
 import { UPDATE_RESOURCE } from "@/graphql/resources";
-import { inject, ref } from "vue";
+import { ComputedRef, computed, inject, ref } from "vue";
 import { formatDateTimeString } from "@/filters/datetime";
 import { useMutation } from "@vue/apollo-composable";
 import { resourcePathArray } from "@/components/Resource/utils";
@@ -73,11 +73,11 @@ const emit = defineEmits<{
 
 const list = ref([]);
 
-const groupObject: Record<string, unknown> = {
+const groupObject: ComputedRef<Record<string, unknown>> = computed(() => ({
   name: `folder-${props.resource?.title}`,
   pull: false,
   put: ["resources"],
-};
+}));
 
 const onChange = async (evt: any) => {
   if (evt.added && evt.added.element) {

js/src/components/Resource/ResourceSelector.vue

@@ -92,14 +92,17 @@ const emit = defineEmits(["update-resource", "close-move-modal"]);
 
 const { t } = useI18n({ useScope: "global" });
 
+const initialResourceProp = computed(() => props.initialResource);
+const usernameProp = computed(() => props.username);
+
 const resourcePath = reactive<{
   path: string | undefined;
   username: string;
   id: string | undefined;
 }>({
-  id: props.initialResource.parent?.id,
+  id: initialResourceProp.value.parent?.id,
-  path: props.initialResource.parent?.path,
+  path: initialResourceProp.value.parent?.path,
-  username: props.username,
+  username: usernameProp.value,
 });
 
 const RESOURCES_PER_PAGE = 10;
@@ -111,27 +114,30 @@ const { result: resourceResult, refetch } = useQuery<{ resource: IResource }>(
     if (resourcePath?.path) {
       return {
         path: resourcePath?.path,
-        username: props.username,
+        username: usernameProp.value,
         page: page.value,
         limit: RESOURCES_PER_PAGE,
       };
     }
-    return { path: "/", username: props.username };
+    return { path: "/", username: usernameProp.value };
   }
 );
 
 const resource = computed(() => resourceResult.value?.resource);
 
 const goDown = (element: IResource): void => {
-  if (element.type === "folder" && element.id !== props.initialResource.id) {
+  if (
+    element.type === "folder" &&
+    element.id !== initialResourceProp.value.id
+  ) {
     resourcePath.id = element.id;
     resourcePath.path = element.path;
     console.debug("Gone into folder", resourcePath);
   }
 };
 
-watch(props.initialResource, () => {
+watch(initialResourceProp, () => {
-  if (props.initialResource) {
+  if (initialResourceProp.value) {
     resourcePath.id = props.initialResource?.parent?.id;
     resourcePath.path = props.initialResource?.parent?.path;
     refetch();
@@ -144,21 +150,21 @@ const updateResource = (): void => {
   emit(
     "update-resource",
     {
-      id: props.initialResource.id,
+      id: initialResourceProp.value.id,
-      title: props.initialResource.title,
+      title: initialResourceProp.value.title,
       parent: parent,
       path: parent?.path ?? "/",
     },
-    props.initialResource.parent
+    initialResourceProp.value.parent
   );
 };
 
 const moveDisabled = computed((): boolean | undefined => {
   return (
-    (props.initialResource.parent &&
+    (initialResourceProp.value.parent &&
       resourcePath &&
-      props.initialResource.parent.path === resourcePath.path) ||
+      initialResourceProp.value.parent.path === resourcePath.path) ||
-    (props.initialResource.parent === undefined &&
+    (initialResourceProp.value.parent === undefined &&
       resourcePath &&
       resourcePath.path === "/")
   );

js/src/components/Search/EventMarkerMap.vue

@@ -10,7 +10,7 @@
     >
       <event-card
         v-if="instanceOfIEvent(activeElement)"
-        :event="(activeElement as IEvent)"
+        :event="activeElement as IEvent"
         mode="column"
         :options="{
           isRemoteEvent: activeElement.__typename === 'EventResult',
@@ -19,7 +19,7 @@
       />
       <group-card
         v-else
-        :group="(activeElement as IGroup)"
+        :group="activeElement as IGroup"
         mode="column"
         :isRemoteGroup="activeElement.__typename === 'GroupResult'"
         :isLoggedIn="isLoggedIn"
@@ -31,7 +31,7 @@
     >
       <event-card
         v-if="instanceOfIEvent(activeElement)"
-        :event="(activeElement as IEvent)"
+        :event="activeElement as IEvent"
         mode="column"
         :options="{
           isRemoteEvent: activeElement.__typename === 'EventResult',
@@ -40,7 +40,7 @@
       />
       <group-card
         v-else
-        :group="(activeElement as IGroup)"
+        :group="activeElement as IGroup"
         mode="column"
         :isRemoteGroup="activeElement.__typename === 'GroupResult'"
         :isLoggedIn="isLoggedIn"
@@ -330,7 +330,11 @@ watch([markers, eventMarkers, groupMarkers], () => {
 
   text-align: center;
   border-radius: 15px;
-  font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+  font:
+    12px "Helvetica Neue",
+    Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .marker-cluster span {

js/src/components/TextEditor.vue

@@ -325,13 +325,18 @@ const transformPastedHTML = (html: string): string => {
   return html;
 };
 
+const ariaLabel = computed(() => props.ariaLabel);
+const headingLevel = computed(() => props.headingLevel);
+const placeholder = computed(() => props.placeholder);
+const value = computed(() => props.modelValue);
+
 const { t } = useI18n({ useScope: "global" });
 
 const editor = useEditor({
   editorProps: {
     attributes: {
       "aria-multiline": isShortMode.value.toString(),
-      "aria-label": props.ariaLabel ?? "",
+      "aria-label": ariaLabel.value ?? "",
       role: "textbox",
       class:
         "prose dark:prose-invert prose-sm lg:prose-lg xl:prose-xl bg-zinc-50 dark:bg-zinc-700 focus:outline-none !max-w-full",
@@ -342,7 +347,7 @@ const editor = useEditor({
     Blockquote,
     BulletList,
     Heading.configure({
-      levels: props.headingLevel,
+      levels: headingLevel.value,
     }),
     Document,
     Paragraph,
@@ -366,18 +371,16 @@ const editor = useEditor({
       submit: () => emit("submit"),
     }),
     Placeholder.configure({
-      placeholder: props.placeholder ?? t("Write something"),
+      placeholder: placeholder.value ?? t("Write something"),
     }),
   ],
   injectCSS: false,
-  content: props.modelValue,
+  content: value.value,
   onUpdate: () => {
     emit("update:modelValue", editor.value?.getHTML());
   },
 });
 
-const value = computed(() => props.modelValue);
-
 watch(value, (val: string) => {
   if (!editor.value) return;
   if (val !== editor.value.getHTML()) {
@@ -479,7 +482,9 @@ onBeforeUnmount(() => {
 @import "./Editor/style.scss";
 
 .menubar {
-  transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s;
+  transition:
+    visibility 0.2s 0.4s,
+    opacity 0.2s 0.4s;
 
   &__button {
     font-weight: bold;

js/src/components/core/CustomDialog.vue

@@ -84,14 +84,19 @@ const emit = defineEmits(["confirm", "cancel", "close"]);
 
 const { t } = useI18n({ useScope: "global" });
 
+const hasInput = computed(() => props.hasInput);
+const onConfirm = computed(() => props.onConfirm);
+const onCancel = computed(() => props.onCancel);
+const inputAttrs = computed(() => props.inputAttrs);
+
 // const modalOpened = ref(false);
 
-const prompt = ref<string>(props.hasInput ? props.inputAttrs?.value ?? "" : "");
+const prompt = ref<string>(hasInput.value ? inputAttrs.value.value ?? "" : "");
 const input = ref();
 
 // https://github.com/oruga-ui/oruga/issues/339
 const promptInputComp = computed(() => input.value?.$refs.input);
-if (props.hasInput) {
+if (hasInput.value) {
   useFocus(promptInputComp, { initialValue: true });
 }
 
@@ -128,7 +133,7 @@ const confirm = () => {
       return;
     }
   }
-  props.onConfirm(prompt.value);
+  onConfirm.value(prompt.value);
   close();
 };
 
@@ -144,8 +149,8 @@ const close = () => {
  */
 const cancel = (source: string) => {
   emit("cancel", source);
-  if (props?.onCancel) {
+  if (onCancel.value) {
-    props?.onCancel(source);
+    onCancel.value(source);
   }
   close();
 };

js/src/composition/apollo/event.ts

@@ -1,9 +1,10 @@
 import { DELETE_EVENT, FETCH_EVENT, FETCH_EVENT_BASIC } from "@/graphql/event";
 import { IEvent } from "@/types/event.model";
 import { useMutation, useQuery } from "@vue/apollo-composable";
-import { computed } from "vue";
+import { Ref, computed, unref } from "vue";
 
-export function useFetchEvent(uuid?: string) {
+export function useFetchEvent(uuidValue?: string | Ref<string>) {
+  const uuid = unref(uuidValue);
   const {
     result: fetchEventResult,
     loading,
@@ -26,7 +27,8 @@ export function useFetchEvent(uuid?: string) {
   return { event, loading, error, onError, onResult, refetch };
 }
 
-export function useFetchEventBasic(uuid: string) {
+export function useFetchEventBasic(uuidValue?: string | Ref<string>) {
+  const uuid = unref(uuidValue);
   const {
     result: fetchEventResult,
     loading,

js/src/services/statistics/index.ts

@@ -34,10 +34,13 @@ export const checkProviderConfig = (
 export const convertConfig = (
   configs: IKeyValueConfig[]
 ): Record<string, any> => {
-  return configs.reduce((acc, config) => {
+  return configs.reduce(
+    (acc, config) => {
       acc[config.key] = toType(config.value, config.type);
       return acc;
-  }, {} as Record<string, any>);
+    },
+    {} as Record<string, any>
+  );
 };
 
 const toType = (value: string, type: string): string | number | boolean => {

js/src/types/actor/actor.model.ts

@@ -16,6 +16,10 @@ export interface IActor {
 }
 
 export type IMinimalActor = Pick<IActor, "preferredUsername" | "domain">;
+export type IMinimalActorWithName = Pick<
+  IActor,
+  "preferredUsername" | "domain" | "name"
+>;
 
 export class Actor implements IActor {
   id?: string;
@@ -72,13 +76,13 @@ export function usernameWithDomain(
   return actor.preferredUsername;
 }
 
-export function displayName(actor: IActor | undefined): string {
+export function displayName(actor: IMinimalActorWithName | undefined): string {
   return actor && actor.name != null && actor.name !== ""
     ? actor.name
     : usernameWithDomain(actor);
 }
 
-export function displayNameAndUsername(actor: IActor): string {
+export function displayNameAndUsername(actor: IMinimalActorWithName): string {
   if (actor.name) {
     return `${actor.name} (@${usernameWithDomain(actor)})`;
   }

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

@@ -125,7 +125,8 @@
                 tag="a"
                 icon-left="rss"
                 @click="
-                  (e: Event) => copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
+                  (e: Event) =>
+                    copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
                 "
                 :href="tokenToURL(feedToken.token, 'atom')"
                 target="_blank"
@@ -142,7 +143,8 @@
               <o-button
                 tag="a"
                 @click="
-                  (e: Event) => copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
+                  (e: Event) =>
+                    copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
                 "
                 icon-left="calendar-sync"
                 :href="tokenToURL(feedToken.token, 'ics')"

js/src/views/Discussions/CreateView.vue

@@ -80,8 +80,9 @@ const Editor = defineAsyncComponent(
 const props = defineProps<{ preferredUsername: string }>();
 
 const { currentActor } = useCurrentActorClient();
+const preferredUsername = computed(() => props.preferredUsername);
 
-const { group } = useGroup(props.preferredUsername);
+const { group } = useGroup(preferredUsername);
 
 const { t } = useI18n({ useScope: "global" });
 

js/src/views/Discussions/DiscussionView.vue

@@ -108,9 +108,12 @@
               text: comment.text,
             })
         "
-        @delete-comment="(comment: IComment) => deleteComment({
+        @delete-comment="
+          (comment: IComment) =>
+            deleteComment({
               commentId: comment.id as string,
-    })"
+            })
+        "
       />
       <o-button
         v-if="discussion.comments.elements.length < discussion.comments.total"
@@ -198,11 +201,11 @@ const {
 
 subscribeToMore({
   document: DISCUSSION_COMMENT_CHANGED,
-  variables: {
+  variables: () => ({
     slug: props.slug,
     page: page.value,
     limit: COMMENTS_PER_PAGE,
-  },
+  }),
   updateQuery(
     previousResult: any,
     { subscriptionData }: { subscriptionData: any }

js/src/views/Discussions/DiscussionsListView.vue

@@ -90,9 +90,10 @@ const page = useRouteQuery("page", 1, integerTransformer);
 const DISCUSSIONS_PER_PAGE = 10;
 
 const props = defineProps<{ preferredUsername: string }>();
+const preferredUsername = computed(() => props.preferredUsername);
 
 const { group, loading: groupLoading } = useGroupDiscussionsList(
-  props.preferredUsername,
+  preferredUsername.value,
   {
     discussionsPage: page.value,
     discussionsLimit: DISCUSSIONS_PER_PAGE,
@@ -100,7 +101,7 @@ const { group, loading: groupLoading } = useGroupDiscussionsList(
 );
 
 const { person, loading: personLoading } = usePersonStatusGroup(
-  props.preferredUsername
+  preferredUsername.value
 );
 
 const { t } = useI18n({ useScope: "global" });

js/src/views/Event/EditView.vue

@@ -127,7 +127,7 @@
         <label class="o-field__label field-label">{{ t("Description") }}</label>
         <editor-component
           v-if="currentActor"
-          :current-actor="(currentActor as IPerson)"
+          :current-actor="currentActor as IPerson"
           v-model="event.description"
           :aria-label="t('Event description body')"
           :placeholder="t('Describe your event')"

js/src/views/Event/EventView.vue

@@ -360,7 +360,7 @@ const {
   onError: onFetchEventError,
   loading: eventLoading,
   refetch: refetchEvent,
-} = useFetchEvent(props.uuid);
+} = useFetchEvent(propsUUID);
 
 watch(propsUUID, (newUUid) => {
   refetchEvent({ uuid: newUUid });

js/src/views/Event/MyEventsView.vue

@@ -188,7 +188,7 @@
               <event-participation-card
                 v-for="participation in month[1]"
                 :key="participation.id"
-                :participation="(participation as IParticipant)"
+                :participation="participation as IParticipant"
                 :options="{ hideDate: false }"
                 @event-deleted="eventDeleted"
                 class="participation"

js/src/views/Event/ParticipantsView.vue

@@ -83,7 +83,9 @@
       detail-key="id"
       v-model:checked-rows="checkedRows"
       checkable
-      :is-row-checkable="(row: IParticipant) => row.role !== ParticipantRole.CREATOR"
+      :is-row-checkable="
+        (row: IParticipant) => row.role !== ParticipantRole.CREATOR
+      "
       checkbox-position="left"
       :show-detail-icon="false"
       :loading="participantsLoading"

js/src/views/Group/GroupFollowers.vue

@@ -47,7 +47,7 @@
         :default-sort-direction="'desc'"
         :default-sort="['insertedAt', 'desc']"
         @page-change="loadMoreFollowers"
-        @sort="(field, order) => $emit('sort', field, order)"
+        @sort="(field: any, order: any) => $emit('sort', field, order)"
       >
         <o-table-column
           field="actor.preferredUsername"
@@ -136,6 +136,8 @@ import { Notifier } from "@/plugins/notifier";
 
 const props = defineProps<{ preferredUsername: string }>();
 
+const preferredUsername = computed(() => props.preferredUsername);
+
 const page = useRouteQuery("page", 1, integerTransformer);
 
 const pending = useRouteQuery("pending", false, booleanTransformer);
@@ -241,5 +243,5 @@ const personMemberships = computed(
   () => person.value?.memberships ?? { total: 0, elements: [] }
 );
 
-const { person } = usePersonStatusGroup(props.preferredUsername);
+const { person } = usePersonStatusGroup(preferredUsername.value);
 </script>

js/src/views/Group/GroupMembers.vue

@@ -275,6 +275,7 @@ useHead({
 });
 
 const props = defineProps<{ preferredUsername: string }>();
+const preferredUsername = computed(() => props.preferredUsername);
 
 const emit = defineEmits(["sort"]);
 
@@ -440,7 +441,7 @@ const {
       {
         query: GROUP_MEMBERS,
         variables: {
-          groupName: props.preferredUsername,
+          groupName: preferredUsername.value,
           page: page.value,
           limit: MEMBERS_PER_PAGE,
           roles: roles.value,
@@ -547,5 +548,5 @@ const personMemberships = computed(
   () => person.value?.memberships ?? { total: 0, elements: [] }
 );
 
-const { person } = usePersonStatusGroup(props.preferredUsername);
+const { person } = usePersonStatusGroup(preferredUsername.value);
 </script>

js/src/views/Group/GroupSettings.vue

@@ -189,7 +189,7 @@
 import PictureUpload from "@/components/PictureUpload.vue";
 import { GroupVisibility, MemberRole, Openness } from "@/types/enums";
 import { IGroup, usernameWithDomain, displayName } from "@/types/actor";
-import { Address, IAddress } from "@/types/address.model";
+import { IAddress } from "@/types/address.model";
 import { ServerParseError } from "@apollo/client/link/http";
 import { ErrorResponse } from "@apollo/client/link/error";
 import RouteName from "@/router/name";
@@ -218,14 +218,11 @@ const FullAddressAutoComplete = defineAsyncComponent(
 );
 
 const props = defineProps<{ preferredUsername: string }>();
+const preferredUsername = computed(() => props.preferredUsername);
 
 const { currentActor } = useCurrentActorClient();
 
-const {
+const { group, loading, onResult: onGroupResult } = useGroup(preferredUsername);
-  group,
-  loading,
-  onResult: onGroupResult,
-} = useGroup(props.preferredUsername);
 
 const { t } = useI18n({ useScope: "global" });
 
@@ -395,7 +392,7 @@ const personMemberships = computed(
   () => person.value?.memberships ?? { total: 0, elements: [] }
 );
 
-const { person } = usePersonStatusGroup(props.preferredUsername);
+const { person } = usePersonStatusGroup(preferredUsername);
 
 const dialog = inject<Dialog>("dialog");
 

js/src/views/Group/GroupView.vue

@@ -703,22 +703,22 @@ const props = defineProps<{
   preferredUsername: string;
 }>();
 
+const preferredUsername = computed(() => props.preferredUsername);
+
 const { anonymousReportsConfig } = useAnonymousReportsConfig();
 const { currentActor } = useCurrentActorClient();
 const {
   group,
   loading: groupLoading,
   refetch: refetchGroup,
-} = useGroup(props.preferredUsername, { afterDateTime: new Date() });
+} = useGroup(preferredUsername, { afterDateTime: new Date() });
 const router = useRouter();
 
-const { group: discussionGroup } = useGroupDiscussionsList(
+const { group: discussionGroup } = useGroupDiscussionsList(preferredUsername);
-  props.preferredUsername
+const { group: resourcesGroup } = useGroupResourcesList(preferredUsername, {
-);
+  resourcesPage: 1,
-const { group: resourcesGroup } = useGroupResourcesList(
+  resourcesLimit: 3,
-  props.preferredUsername,
+});
-  { resourcesPage: 1, resourcesLimit: 3 }
-);
 
 const { t } = useI18n({ useScope: "global" });
 

js/src/views/OAuth/DeviceActivationView.vue

@@ -27,10 +27,12 @@
           >
           <o-input
             autocapitalize="characters"
-            @update:modelValue="(val: string) => inputs[i] = val.toUpperCase()"
+            @update:modelValue="
+              (val: string) => (inputs[i] = val.toUpperCase())
+            "
             :useHtml5Validation="true"
             :id="`user-code-${i}`"
-            :ref="(el: Element) => userCodeInputs[i] = el"
+            :ref="(el: Element) => (userCodeInputs[i] = el)"
             :modelValue="inputs[i]"
             v-else
             size="large"

js/src/views/Posts/EditView.vue

@@ -169,9 +169,10 @@ const props = withDefaults(
   }>(),
   { isUpdate: false }
 );
+const preferredUsername = computed(() => props.preferredUsername);
 
 const { currentActor } = useCurrentActorClient();
-const { group } = useGroup(props.preferredUsername);
+const { group } = useGroup(preferredUsername);
 
 const { result: postResult, loading: postLoading } = useQuery<{
   post: IPost;

js/src/views/Resources/ResourceFolder.vue

@@ -36,9 +36,12 @@
       :resources="resource.children.elements"
       :isRoot="resource.path === '/'"
       :group="resource.actor"
-      @delete="(resourceID: string) => deleteResource({
+      @delete="
+        (resourceID: string) =>
+          deleteResource({
             id: resourceID,
-      })"
+          })
+      "
       @update="updateResource"
       @rename="handleRename"
       @move="handleMove"

js/src/views/SearchView.vue

@@ -852,6 +852,7 @@ const arrayTransformer: RouteQueryTransformer<string[]> = {
 const props = defineProps<{
   tag?: string;
 }>();
+const tag = computed(() => props.tag);
 
 const page = useRouteQuery("page", 1, integerTransformer);
 const eventPage = useRouteQuery("eventPage", 1, integerTransformer);
@@ -864,7 +865,7 @@ const distance = useRouteQuery("distance", "10_km");
 const when = useRouteQuery("when", "any");
 const contentType = useRouteQuery(
   "contentType",
-  props.tag ? ContentType.EVENTS : ContentType.ALL,
+  tag.value ? ContentType.EVENTS : ContentType.ALL,
   enumTransformer(ContentType)
 );
 
@@ -1286,7 +1287,7 @@ const { result: searchElementsResult, loading: searchLoading } = useQuery<{
   searchGroups: Paginate<TypeNamed<IGroup>>;
 }>(SEARCH_EVENTS_AND_GROUPS, () => ({
   term: searchDebounced.value,
-  tags: props.tag,
+  tags: tag.value,
   location: geoHashLocation.value,
   beginsOn: start.value,
   endsOn: end.value,

js/src/views/Settings/NotificationsView.vue

@@ -248,10 +248,12 @@
               tag="a"
               icon-left="rss"
               @click="
-                (e: Event) => copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
+                (e: Event) =>
+                  copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
               "
               @keyup.enter="
-                (e: Event) => copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
+                (e: Event) =>
+                  copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
               "
               :href="tokenToURL(feedToken.token, 'atom')"
               target="_blank"
@@ -268,10 +270,12 @@
             <o-button
               tag="a"
               @click="
-                (e: Event) => copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
+                (e: Event) =>
+                  copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
               "
               @keyup.enter="
-                (e: Event) => copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
+                (e: Event) =>
+                  copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
               "
               icon-left="calendar-sync"
               :href="tokenToURL(feedToken.token, 'ics')"
@@ -348,7 +352,8 @@ const { result: loggedUserResult } = useQuery<{ loggedUser: IUser }>(
   USER_NOTIFICATIONS
 );
 const loggedUser = computed(() => loggedUserResult.value?.loggedUser);
-const feedTokens = computed(() =>
+const feedTokens = computed(
+  () =>
     loggedUser.value?.feedTokens.filter(
       (token: IFeedToken) => token.actor === null
     )

js/src/views/Todos/TodoLists.vue

@@ -75,8 +75,9 @@ import { useI18n } from "vue-i18n";
 import { useMutation } from "@vue/apollo-composable";
 
 const props = defineProps<{ preferredUsername: string }>();
+const preferredUsername = computed(() => props.preferredUsername);
 
-const { group } = useGroup(props.preferredUsername);
+const { group } = useGroup(preferredUsername);
 
 const { t } = useI18n({ useScope: "global" });
 

js/src/views/User/ResendConfirmation.vue

@@ -13,7 +13,7 @@
           required
           type="email"
           id="emailAddress"
-          v-model="credentials.email"
+          v-model="emailValue"
         />
       </o-field>
       <p class="flex flex-wrap gap-1 mt-2">
@@ -34,7 +34,7 @@
         {{
           $t(
             "If an account with this email exists, we just sent another confirmation email to {email}",
-            { email: credentials.email }
+            { email: emailValue }
           )
         }}
       </o-notification>
@@ -50,7 +50,7 @@
 <script lang="ts" setup>
 import { RESEND_CONFIRMATION_EMAIL } from "@/graphql/auth";
 import RouteName from "@/router/name";
-import { reactive, ref, computed } from "vue";
+import { ref, computed } from "vue";
 import { useMutation } from "@vue/apollo-composable";
 import { useI18n } from "vue-i18n";
 import { useHead } from "@vueuse/head";
@@ -62,10 +62,9 @@ useHead({
 });
 
 const props = withDefaults(defineProps<{ email: string }>(), { email: "" });
+const defaultEmail = computed(() => props.email);
 
-const credentials = reactive({
+const emailValue = ref<string>(defaultEmail.value);
-  email: props.email,
-});
 
 const validationSent = ref(false);
 const error = ref(false);
@@ -92,7 +91,7 @@ const resendConfirmationAction = async (e: Event): Promise<void> => {
   error.value = false;
 
   resendConfirmationEmail({
-    email: credentials.email,
+    email: emailValue.value,
   });
 };
 </script>

js/src/views/User/SendPasswordReset.vue

@@ -25,7 +25,7 @@
           aria-required="true"
           required
           type="email"
-          v-model="credentials.email"
+          v-model="emailValue"
         />
       </o-field>
       <p class="control">
@@ -41,7 +41,7 @@
       <o-notification variant="success" :closable="false" title="Success">
         {{
           t("We just sent an email to {email}", {
-            email: credentials.email,
+            email: emailValue,
           })
         }}
       </o-notification>
@@ -57,7 +57,7 @@
 <script lang="ts" setup>
 import { SEND_RESET_PASSWORD } from "../../graphql/auth";
 import RouteName from "../../router/name";
-import { computed, reactive, ref } from "vue";
+import { computed, ref } from "vue";
 import { useMutation } from "@vue/apollo-composable";
 import { useHead } from "@vueuse/head";
 import { useI18n } from "vue-i18n";
@@ -74,9 +74,8 @@ const props = withDefaults(
   { email: "" }
 );
 
-const credentials = reactive<{ email: string }>({
+const defaultEmail = computed(() => props.email);
-  email: props.email,
+const emailValue = ref<string>(defaultEmail.value);
-});
 
 const validationSent = ref(false);
 
@@ -110,7 +109,7 @@ const sendResetPasswordTokenAction = async (e: Event): Promise<void> => {
   e.preventDefault();
 
   sendResetPasswordMutation({
-    email: credentials.email,
+    email: emailValue.value,
   });
 };
 </script>