Improve and activate groups

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

js/src/components/Comment/Comment.vue

@@ -126,6 +126,7 @@
 import { Component, Prop, Vue, Ref } from "vue-property-decorator";
 import EditorComponent from "@/components/Editor.vue";
 import TimeAgo from "javascript-time-ago";
+import { SnackbarProgrammatic as Snackbar } from "buefy";
 import { CommentModel, IComment } from "../../types/comment.model";
 import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
 import { IPerson, usernameWithDomain } from "../../types/actor";
@@ -171,7 +172,7 @@ export default class Comment extends Vue {
 
   usernameWithDomain = usernameWithDomain;
 
-  async mounted() {
+  async mounted(): Promise<void> {
     const localeName = this.$i18n.locale;
     const locale = await import(`javascript-time-ago/locale/${localeName}`);
     TimeAgo.addLocale(locale);
@@ -183,7 +184,7 @@ export default class Comment extends Vue {
     }
   }
 
-  async createReplyToComment(comment: IComment) {
+  async createReplyToComment(comment: IComment): Promise<void> {
     if (this.replyTo) {
       this.replyTo = false;
       this.newComment = new CommentModel();
@@ -196,7 +197,7 @@ export default class Comment extends Vue {
     this.commentEditor.replyToComment(comment);
   }
 
-  replyToComment() {
+  replyToComment(): void {
     this.newComment.inReplyToComment = this.comment;
     this.newComment.originComment = this.comment.originComment || this.comment;
     this.newComment.actor = this.currentActor;
@@ -205,7 +206,7 @@ export default class Comment extends Vue {
     this.replyTo = false;
   }
 
-  async fetchReplies() {
+  async fetchReplies(): Promise<void> {
     const parentId = this.comment.id;
     const { data } = await this.$apollo.query<{ thread: IComment[] }>({
       query: FETCH_THREAD_REPLIES,
@@ -267,7 +268,7 @@ export default class Comment extends Vue {
     return this.commentId;
   }
 
-  reportModal() {
+  reportModal(): void {
     if (!this.comment.actor) return;
     this.$buefy.modal.open({
       parent: this,
@@ -281,7 +282,7 @@ export default class Comment extends Vue {
     });
   }
 
-  async reportComment(content: string, forward: boolean) {
+  async reportComment(content: string, forward: boolean): Promise<void> {
     try {
       if (!this.comment.actor) return;
       await this.$apollo.mutate<IReport>({
@@ -303,8 +304,8 @@ export default class Comment extends Vue {
         position: "is-bottom-right",
         duration: 5000,
       });
-    } catch (error) {
-      console.error(error);
+    } catch (e) {
+      Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" });
     }
   }
 }

js/src/components/Comment/CommentTree.vue

@@ -51,6 +51,7 @@
 import { Prop, Vue, Component, Watch } from "vue-property-decorator";
 import Comment from "@/components/Comment/Comment.vue";
 import IdentityPickerWrapper from "@/views/Account/IdentityPickerWrapper.vue";
+import { SnackbarProgrammatic as Snackbar } from "buefy";
 import { CommentModel, IComment } from "../../types/comment.model";
 import {
   CREATE_COMMENT_FROM_EVENT,
@@ -100,11 +101,11 @@ export default class CommentTree extends Vue {
   CommentModeration = CommentModeration;
 
   @Watch("currentActor")
-  watchCurrentActor(currentActor: IPerson) {
+  watchCurrentActor(currentActor: IPerson): void {
     this.newComment.actor = currentActor;
   }
 
-  async createCommentForEvent(comment: IComment) {
+  async createCommentForEvent(comment: IComment): Promise<void> {
     try {
       if (!comment.actor) return;
       await this.$apollo.mutate({
@@ -190,74 +191,78 @@ export default class CommentTree extends Vue {
       // and reset the new comment field
       this.newComment = new CommentModel();
     } catch (e) {
-      console.error(e);
+      Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" });
     }
   }
 
-  async deleteComment(comment: IComment) {
-    await this.$apollo.mutate({
-      mutation: DELETE_COMMENT,
-      variables: {
-        commentId: comment.id,
-        actorId: this.currentActor.id,
-      },
-      update: (store, { data }) => {
-        if (data == null) return;
-        const deletedCommentId = data.deleteComment.id;
+  async deleteComment(comment: IComment): Promise<void> {
+    try {
+      await this.$apollo.mutate({
+        mutation: DELETE_COMMENT,
+        variables: {
+          commentId: comment.id,
+          actorId: this.currentActor.id,
+        },
+        update: (store, { data }) => {
+          if (data == null) return;
+          const deletedCommentId = data.deleteComment.id;
 
-        const commentsData = store.readQuery<{ event: IEvent }>({
-          query: COMMENTS_THREADS,
-          variables: {
-            eventUUID: this.event.uuid,
-          },
-        });
-        if (!commentsData) return;
-        const { event } = commentsData;
-        const { comments: oldComments } = event;
-
-        if (comment.originComment) {
-          // we have deleted a reply to a thread
-          const localData = store.readQuery<{ thread: IComment[] }>({
-            query: FETCH_THREAD_REPLIES,
+          const commentsData = store.readQuery<{ event: IEvent }>({
+            query: COMMENTS_THREADS,
             variables: {
-              threadId: comment.originComment.id,
+              eventUUID: this.event.uuid,
             },
           });
-          if (!localData) return;
-          const { thread: oldReplyList } = localData;
-          const replies = oldReplyList.filter((reply) => reply.id !== deletedCommentId);
+          if (!commentsData) return;
+          const { event } = commentsData;
+          const { comments: oldComments } = event;
+
+          if (comment.originComment) {
+            // we have deleted a reply to a thread
+            const localData = store.readQuery<{ thread: IComment[] }>({
+              query: FETCH_THREAD_REPLIES,
+              variables: {
+                threadId: comment.originComment.id,
+              },
+            });
+            if (!localData) return;
+            const { thread: oldReplyList } = localData;
+            const replies = oldReplyList.filter((reply) => reply.id !== deletedCommentId);
+            store.writeQuery({
+              query: FETCH_THREAD_REPLIES,
+              variables: {
+                threadId: comment.originComment.id,
+              },
+              data: { thread: replies },
+            });
+
+            const { originComment } = comment;
+
+            const parentCommentIndex = oldComments.findIndex(
+              (oldComment) => oldComment.id === originComment.id
+            );
+            const parentComment = oldComments[parentCommentIndex];
+            parentComment.replies = replies;
+            parentComment.totalReplies -= 1;
+            oldComments.splice(parentCommentIndex, 1, parentComment);
+            event.comments = oldComments;
+          } else {
+            // we have deleted a thread itself
+            event.comments = oldComments.filter((reply) => reply.id !== deletedCommentId);
+          }
           store.writeQuery({
-            query: FETCH_THREAD_REPLIES,
+            query: COMMENTS_THREADS,
             variables: {
-              threadId: comment.originComment.id,
+              eventUUID: this.event.uuid,
             },
-            data: { thread: replies },
+            data: { event },
           });
-
-          const { originComment } = comment;
-
-          const parentCommentIndex = oldComments.findIndex(
-            (oldComment) => oldComment.id === originComment.id
-          );
-          const parentComment = oldComments[parentCommentIndex];
-          parentComment.replies = replies;
-          parentComment.totalReplies -= 1;
-          oldComments.splice(parentCommentIndex, 1, parentComment);
-          event.comments = oldComments;
-        } else {
-          // we have deleted a thread itself
-          event.comments = oldComments.filter((reply) => reply.id !== deletedCommentId);
-        }
-        store.writeQuery({
-          query: COMMENTS_THREADS,
-          variables: {
-            eventUUID: this.event.uuid,
-          },
-          data: { event },
-        });
-      },
-    });
-    // this.comments = this.comments.filter(commentItem => commentItem.id !== comment.id);
+        },
+      });
+      // this.comments = this.comments.filter(commentItem => commentItem.id !== comment.id);
+    } catch (e) {
+      Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" });
+    }
   }
 
   get orderedComments(): IComment[] {