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/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">