Properly handle remote interactions

Previously we used instance1 event local URL but now we use the URL
property of an event (so that we don't need to follow the redirection to
the original event)

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

js/src/components/Group/JoinGroupWithAccount.vue

@@ -1,5 +1,6 @@
 <template>
   <redirect-with-account
+    v-if="uri"
     :uri="uri"
     :pathAfterLogin="`/@${preferredUsername}`"
     :sentence="sentence"
@@ -8,21 +9,35 @@
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
 import RedirectWithAccount from "@/components/Utils/RedirectWithAccount.vue";
-import RouteName from "../../router/name";
+import { FETCH_GROUP } from "@/graphql/group";
+import { IGroup } from "@/types/actor";
 
 @Component({
   components: { RedirectWithAccount },
+  apollo: {
+    group: {
+      query: FETCH_GROUP,
+      fetchPolicy: "cache-and-network",
+      variables() {
+        return {
+          name: this.$route.params.preferredUsername,
+          beforeDateTime: null,
+          afterDateTime: new Date(),
+        };
+      },
+      skip() {
+        return !this.$route.params.preferredUsername;
+      },
+    },
+  },
 })
 export default class JoinGroupWithAccount extends Vue {
   @Prop({ type: String, required: true }) preferredUsername!: string;
 
+  group!: IGroup;
+
   get uri(): string {
-    return `${window.location.origin}${
+    return this.group?.url;
-      this.$router.resolve({
-        name: RouteName.GROUP,
-        params: { preferredUsername: this.preferredUsername },
-      }).href
-    }`;
   }
 
   sentence = this.$t(

js/src/components/Participation/ParticipationWithAccount.vue

@@ -1,5 +1,6 @@
 <template>
   <redirect-with-account
+    v-if="uri"
     :uri="uri"
     :pathAfterLogin="`/events/${uuid}`"
     :sentence="sentence"
@@ -8,21 +9,33 @@
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
 import RedirectWithAccount from "@/components/Utils/RedirectWithAccount.vue";
-import RouteName from "../../router/name";
+import { FETCH_EVENT } from "@/graphql/event";
+import { IEvent } from "@/types/event.model";
 
 @Component({
   components: { RedirectWithAccount },
+  apollo: {
+    event: {
+      query: FETCH_EVENT,
+      fetchPolicy: "cache-and-network",
+      variables() {
+        return {
+          uuid: this.uuid,
+        };
+      },
+      skip() {
+        return !this.uuid;
+      },
+    },
+  },
 })
 export default class ParticipationWithAccount extends Vue {
   @Prop({ type: String, required: true }) uuid!: string;
 
-  get uri(): string {
+  event!: IEvent;
-    return `${window.location.origin}${
+
-      this.$router.resolve({
+  get uri(): string | undefined {
-        name: RouteName.EVENT,
+    return this.event?.url;
-        params: { uuid: this.uuid },
-      }).href
-    }`;
   }
 
   sentence = this.$t(

js/src/i18n/en_US.json

@@ -824,5 +824,9 @@
   "Type or select a date…": "Type or select a date…",
   "Getting there": "Getting there",
   "Groups are not enabled on this instance.": "Groups are not enabled on this instance.",
-  "The events you created are not shown here.": "The events you created are not shown here."
+  "The events you created are not shown here.": "The events you created are not shown here.",
+  "There's no discussions yet": "There's no discussions yet",
+  "Only group members can access discussions": "Only group members can access discussions",
+  "Return to the group page": "Return to the group page",
+  "It is possible that the content is not accessible on this instance, because this instance has blocked the profiles or groups behind this content.": "It is possible that the content is not accessible on this instance, because this instance has blocked the profiles or groups behind this content."
 }

js/src/i18n/fr_FR.json

@@ -918,5 +918,9 @@
   "Type or select a date…": "Entrez ou sélectionnez une date…",
   "Getting there": "S'y rendre",
   "Groups are not enabled on this instance.": "Les groupes ne sont pas activés sur cette instance.",
-  "The events you created are not shown here.": "Les événements que vous avez créé ne s'affichent pas ici."
+  "The events you created are not shown here.": "Les événements que vous avez créé ne s'affichent pas ici.",
+  "There's no discussions yet": "Il n'y a pas encore de discussions",
+  "Only group members can access discussions": "Seul⋅es les membres du groupes peuvent accéder aux discussions",
+  "Return to the group page": "Retourner à la page du groupe",
+  "It is possible that the content is not accessible on this instance, because this instance has blocked the profiles or groups behind this content.": "Il est possible que le contenu ne soit pas accessible depuis cette instance, car cette instance a bloqué le profil ou le groupe derrière ce contenu."
 }

js/src/views/Interact.vue

@@ -6,6 +6,24 @@
     <b-notification v-if="$apollo.queries.interact.skip" type="is-danger">
       {{ $t("Resource provided is not an URL") }}
     </b-notification>
+    <b-message
+      :title="$t('Error')"
+      type="is-danger"
+      has-icon
+      :closable="false"
+      v-if="!$apollo.loading && errors.length > 0"
+    >
+      <p v-for="error in errors" :key="error">
+        <b>{{ error }}</b>
+      </p>
+      <p>
+        {{
+          $t(
+            "It is possible that the content is not accessible on this instance, because this instance has blocked the profiles or groups behind this content."
+          )
+        }}
+      </p>
+    </b-message>
   </div>
 </template>
 
@@ -34,6 +52,12 @@ import RouteName from "../router/name";
           return true;
         }
       },
+      error({ graphQLErrors, networkError }) {
+        if (networkError) {
+          this.errors = [networkError.message];
+        }
+        this.errors = graphQLErrors.map((error) => error.message);
+      },
       async result({ data: { interact } }) {
         switch (interact.__typename) {
           case "Group":
@@ -49,7 +73,7 @@ import RouteName from "../router/name";
             });
             break;
           default:
-            this.error = this.$t("This URL is not supported");
+            this.error = [this.$t("This URL is not supported")];
         }
         // await this.$router.replace({
         //   name: RouteName.EVENT,
@@ -62,7 +86,7 @@ import RouteName from "../router/name";
 export default class Interact extends Vue {
   interact!: IEvent | IGroup;
 
-  error!: string;
+  errors: string[] = [];
 }
 </script>
 <style lang="scss">