decidim-comments 0.19.0 → 0.22.0

data/app/frontend/comments/comment_order_selector.component.tsx

@@ -43,28 +43,47 @@ class CommentOrderSelector extends React.Component<CommentOrderSelectorProps, Co
         <ul
           className="dropdown menu"
           data-dropdown-menu="data-dropdown-menu"
+          data-autoclose="false"
+          data-disable-hover="true"
+          data-click-open="true"
+          data-close-on-click="true"
+          tabIndex={-1}
           ref={this.setDropdown}
         >
-          <li>
-            <a>{I18n.t(`components.comment_order_selector.order.${orderBy}`)}</a>
-            <ul className="menu">
+          <li className="is-dropdown-submenu-parent" tabIndex={-1}>
+            <a
+              href="#"
+              id="comments-order-menu-control"
+              aria-label={I18n.t("components.comment_order_selector.title")}
+              aria-controls="comments-order-menu"
+              aria-haspopup="true"
+            >
+              {I18n.t(`components.comment_order_selector.order.${orderBy}`)}
+            </a>
+            <ul
+              className="menu is-dropdown-submenu"
+              id="language-chooser-menu"
+              role="menu"
+              aria-labelledby="comments-order-menu-control"
+              tabIndex={-1}
+            >
               <li>
-                <a href="" className="test" onClick={this.updateOrder("best_rated")} >
+                <a href="#" className="test" onClick={this.updateOrder("best_rated")} tabIndex={-1}>
                   {I18n.t("components.comment_order_selector.order.best_rated")}
                 </a>
               </li>
               <li>
-                <a href="" onClick={this.updateOrder("recent")} >
+                <a href="#" onClick={this.updateOrder("recent")} tabIndex={-1}>
                   {I18n.t("components.comment_order_selector.order.recent")}
                 </a>
               </li>
               <li>
-                <a href="" onClick={this.updateOrder("older")} >
+                <a href="#" onClick={this.updateOrder("older")} tabIndex={-1}>
                   {I18n.t("components.comment_order_selector.order.older")}
                 </a>
               </li>
               <li>
-                <a href="" onClick={this.updateOrder("most_discussed")} >
+                <a href="" onClick={this.updateOrder("most_discussed")} tabIndex={-1}>
                   {I18n.t("components.comment_order_selector.order.most_discussed")}
                 </a>
               </li>

data/app/frontend/comments/comments.component.tsx

@@ -12,11 +12,12 @@ import {
   GetCommentsQueryVariables
 } from "../support/schema";
 
-const { I18n } = require("react-i18nify");
+const { I18n, Translate } = require("react-i18nify");
 
 interface CommentsProps extends GetCommentsQuery {
   loading?: boolean;
   orderBy: string;
+  singleCommentId?: string;
   reorderComments: (orderBy: string) => void;
 }
 
@@ -37,9 +38,12 @@ export class Comments extends React.Component<CommentsProps> {
   };
 
   public render() {
-    const { commentable: { comments, totalCommentsCount = 0, userAllowedToComment }, reorderComments, orderBy, loading } = this.props;
+    const { commentable: { totalCommentsCount = 0 }, singleCommentId, loading } = this.props;
     let commentClasses = "comments";
     let commentHeader = I18n.t("components.comments.title", { count: totalCommentsCount });
+    if (singleCommentId && singleCommentId !== "") {
+      commentHeader = I18n.t("components.comments.comment_details_title");
+    }
 
     if (loading) {
       commentClasses += " loading-comments";
@@ -53,11 +57,9 @@ export class Comments extends React.Component<CommentsProps> {
             <h2 className="order-by__text section-heading">
               {commentHeader}
             </h2>
-            <CommentOrderSelector
-              reorderComments={reorderComments}
-              defaultOrderBy={orderBy}
-            />
+            {this._renderCommentOrderSelector()}
           </div>
+          {this._renderSingleCommentWarning()}
           {this._renderBlockedCommentsWarning()}
           {this._renderCommentThreads()}
           {this._renderAddCommentForm()}
@@ -67,6 +69,54 @@ export class Comments extends React.Component<CommentsProps> {
     );
   }
 
+  /**
+   * Renders warning message when viewing a single comment.
+   * @private
+   * @returns {Void|DOMElement} - A warning message or nothing.
+   */
+  private _renderSingleCommentWarning() {
+    const { singleCommentId, reorderComments, orderBy } = this.props;
+
+    if (singleCommentId && singleCommentId !== "") {
+      const newUrl = `${window.location.pathname}${window.location.search.replace(`commentId=${singleCommentId}`, "")}`;
+
+      return (
+        <div className="callout secondary">
+          <h5>{I18n.t("components.comments.single_comment_warning_title")}</h5>
+          <p>
+            <Translate
+              value="components.comments.single_comment_warning"
+              url={newUrl}
+              dangerousHTML={true}
+            />
+          </p>
+        </div>
+      );
+    }
+
+    return null;
+  }
+
+  /**
+   * Renders an order selector.
+   * @private
+   * @returns {Void|DOMElement} - A warning message or nothing.
+   */
+  private _renderCommentOrderSelector() {
+    const { singleCommentId, reorderComments, orderBy } = this.props;
+
+    if (singleCommentId && singleCommentId !== "") {
+      return null;
+    }
+
+    return (
+      <CommentOrderSelector
+        reorderComments={reorderComments}
+        defaultOrderBy={orderBy}
+      />
+    );
+  }
+
   /**
    * Renders a warning message if the commentable doesn't accept new comments.
    * @private
@@ -135,9 +185,13 @@ export class Comments extends React.Component<CommentsProps> {
    * @returns {Void|ReactComponent} - A AddCommentForm component or nothing
    */
   private _renderAddCommentForm() {
-    const { session, commentable, orderBy } = this.props;
+    const { session, commentable, orderBy, singleCommentId } = this.props;
     const { acceptsNewComments, commentsHaveAlignment, userAllowedToComment } = commentable;
 
+    if (singleCommentId && singleCommentId !== "") {
+      return null;
+    }
+
     if (acceptsNewComments && userAllowedToComment) {
       return (
         <AddCommentForm
@@ -176,6 +230,7 @@ const CommentsWithData: any = graphql<GetCommentsQuery, CommentsProps>(commentsQ
         session,
         commentable,
         orderBy: ownProps.orderBy,
+        singleCommentId: ownProps.singleCommentId,
         reorderComments: (orderBy: string) => {
           return refetch({
             orderBy
@@ -187,6 +242,7 @@ const CommentsWithData: any = graphql<GetCommentsQuery, CommentsProps>(commentsQ
 })(Comments);
 
 export interface CommentsApplicationProps extends GetCommentsQueryVariables {
+  singleCommentId: string;
   locale: string;
 }
 
@@ -195,12 +251,13 @@ export interface CommentsApplicationProps extends GetCommentsQueryVariables {
  * connect it with Apollo client and store.
  * @returns {ReactComponent} - A component wrapped within an Application component
  */
-const CommentsApplication: React.SFC<CommentsApplicationProps> = ({ locale, commentableId, commentableType }) => (
+const CommentsApplication: React.SFC<CommentsApplicationProps> = ({ locale, commentableId, commentableType, singleCommentId }) => (
   <Application locale={locale}>
     <CommentsWithData
       commentableId={commentableId}
       commentableType={commentableType}
       orderBy="older"
+      singleCommentId={singleCommentId}
     />
   </Application>
 );

data/app/frontend/comments/down_vote_button.component.tsx

@@ -12,6 +12,8 @@ import {
   GetCommentsQuery
 } from "../support/schema";
 
+const { I18n } = require("react-i18nify");
+
 interface DownVoteButtonProps {
   session: AddCommentFormSessionFragment & {
     user: any;
@@ -42,6 +44,7 @@ export const DownVoteButton: React.SFC<DownVoteButtonProps> = ({
     <VoteButton
       buttonClassName="comment__votes--down"
       iconName="icon-chevron-bottom"
+      text={I18n.t("components.down_vote_button.text")}
       votes={downVotes}
       voteAction={downVote}
       disabled={disabled}

data/app/frontend/comments/up_vote_button.component.tsx

@@ -3,6 +3,8 @@ import { graphql, MutationFunc } from "react-apollo";
 
 import VoteButton from "./vote_button.component";
 
+const { I18n } = require("react-i18nify");
+
 import {
   AddCommentFormCommentableFragment,
   AddCommentFormSessionFragment,
@@ -42,6 +44,7 @@ export const UpVoteButton: React.SFC<UpVoteButtonProps> = ({
     <VoteButton
       buttonClassName="comment__votes--up"
       iconName="icon-chevron-top"
+      text={I18n.t("components.up_vote_button.text")}
       votes={upVotes}
       voteAction={upVote}
       disabled={disabled}

data/app/frontend/comments/vote_button.component.tsx

@@ -4,6 +4,7 @@ import Icon from "../application/icon.component";
 interface VoteButtonProps {
   buttonClassName: string;
   iconName: string;
+  text: string;
   votes: number;
   voteAction?: () => void;
   disabled?: boolean;
@@ -18,6 +19,7 @@ const preventDefault = (event: any) => {
 const VoteButton: React.SFC<VoteButtonProps> = ({
   buttonClassName,
   iconName,
+  text,
   votes,
   voteAction,
   disabled,
@@ -28,8 +30,10 @@ const VoteButton: React.SFC<VoteButtonProps> = ({
     className={`${buttonClassName} ${selectedClass}`}
     onClick={userLoggedIn ? voteAction : preventDefault}
     disabled={disabled}
+    title={text}
     data-open={userLoggedIn ? null : "loginModal"}
   >
+    <span className="show-for-sr">{text}</span>
     <Icon name={iconName} iconExtraClassName="icon--small" />
     {` ${votes}`}
   </button>

data/app/frontend/comments/vote_button_component.test.tsx

@@ -13,44 +13,50 @@ describe("<VoteButton />", () => {
   });
 
   it("should render the number of votes passed as a prop", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} userLoggedIn={true} />);
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={true} />);
     expect(wrapper.find("button").text()).toMatch(/10/);
   });
 
   it("should render a button with the given buttonClassName", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} userLoggedIn={true} />);
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={true} />);
     expect(wrapper.find("button.vote-button").exists()).toBeTruthy();
   });
 
   it("should render a Icon component with the correct name prop", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} userLoggedIn={true} />);
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={true} />);
     expect(wrapper.find(Icon).prop("name")).toEqual("vote-icon");
   });
 
+  it("should render a button with the text as title attribute and screen reader visible element", () => {
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={true} />);
+    expect(wrapper.find("button").prop("title")).toBe("Test");
+    expect(wrapper.find("button span.show-for-sr").text()).toEqual("Test");
+  });
+
   it("should call the voteAction prop on click", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} userLoggedIn={true} />);
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={true} />);
     wrapper.find("button").simulate("click");
     expect(voteAction).toHaveBeenCalled();
   });
 
   it("should disable the button based on the disabled prop", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} disabled={true} userLoggedIn={true} />);
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} disabled={true} userLoggedIn={true} />);
     expect(wrapper.find("button").props()).toHaveProperty("disabled");
   });
 
   it("should render a button with the given selectedClass", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} disabled={true} selectedClass="is-vote-selected" userLoggedIn={true} />);
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} disabled={true} selectedClass="is-vote-selected" userLoggedIn={true} />);
     expect(wrapper.find(".is-vote-selected").exists()).toBeTruthy();
   });
 
   describe("when userLoggedIn prop is false", () => {
     it("should add data-open prop as 'loginModal' to the button", () => {
-      const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} userLoggedIn={false} />);
+      const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={false} />);
       expect(wrapper.find("button").prop("data-open")).toBe("loginModal");
     });
 
     it("should call the event preventDefault method", () => {
-      const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} userLoggedIn={false} />);
+      const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={false} />);
       wrapper.find("button").simulate("click", { preventDefault });
       expect(preventDefault).toHaveBeenCalled();
     });

data/app/frontend/entry.ts

@@ -6,13 +6,32 @@ import loadTranslations from "./support/load_translations";
 
 window.DecidimComments = window.DecidimComments || {};
 
+interface StorageDict {
+  [key: string]: string;
+}
+
 window.DecidimComments.renderCommentsComponent = (nodeId: string, props: CommentsApplicationProps) => {
   const node = window.$(`#${nodeId}`)[0];
+  const queryDict: StorageDict = {};
+  window
+    .location
+    .search
+    .substr(1)
+    .split("&")
+    .forEach(item => queryDict[item.split("=")[0]] = item.split("=")[1]);
+
+  props = { ...props, singleCommentId: queryDict.commentId };
 
   ReactDOM.render(
     React.createElement(Comments, props),
     node
   );
+
+  if (queryDict.commentId) {
+    $([document.documentElement, document.body]).animate({
+      scrollTop: $("#comments").offset()!.top
+    }, 2000);
+  }
 };
 
 // Load component locales from yaml files

data/app/frontend/entry_test.ts

@@ -1,4 +1,6 @@
 import { configure } from "enzyme";
 import * as Adapter from "enzyme-adapter-react-16";
 
+import "jest-localstorage-mock";
+
 configure({ adapter: new Adapter() });

data/app/frontend/queries/comments.query.graphql

@@ -1,7 +1,7 @@
 #import "../fragments/add_comment_form_session.fragment.graphql"
 #import "../fragments/comment_thread.fragment.graphql"
 #import "../fragments/add_comment_form_commentable.fragment.graphql"
-query GetComments($commentableId: String!, $commentableType: String!, $orderBy: String) {
+query GetComments($commentableId: String!, $commentableType: String!, $orderBy: String, $singleCommentId: String) {
   session {
     user {
       name
@@ -17,7 +17,7 @@ query GetComments($commentableId: String!, $commentableType: String!, $orderBy:
     commentsHaveAlignment
     commentsHaveVotes
     totalCommentsCount
-    comments(orderBy: $orderBy) {
+    comments(orderBy: $orderBy, singleCommentId: $singleCommentId) {
       id
       ...CommentThread
     }

data/app/frontend/support/schema.ts

@@ -11,9 +11,9 @@ export interface addCommentMutationVariables {
 
 export interface addCommentMutation {
   // A commentable
-  commentable:  {
+  commentable: {
     // Add a new comment to a commentable
-    addComment:  {
+    addComment: {
       // Check if the commentable has comments
       hasComments: boolean,
       // The Comment's unique ID
@@ -31,33 +31,33 @@ export interface addCommentMutation {
       // The creation date of the comment in relative format
       formattedCreatedAt: string,
       // The resource author
-      author: ( {
-          // The author's name
-          name: string,
-          // The author's nickname
-          nickname: string,
-          // The author's avatar url
-          avatarUrl: string,
-          // The author's profile path
-          profilePath: string,
-          // Whether the author's account has been deleted or not
-          deleted: boolean,
-          // The author's badge icon
-          badge: string,
-        } | {
-          // The author's name
-          name: string,
-          // The author's nickname
-          nickname: string,
-          // The author's avatar url
-          avatarUrl: string,
-          // The author's profile path
-          profilePath: string,
-          // Whether the author's account has been deleted or not
-          deleted: boolean,
-          // The author's badge icon
-          badge: string,
-        }
+      author: ({
+        // The author's name
+        name: string,
+        // The author's nickname
+        nickname: string,
+        // The author's avatar url
+        avatarUrl: string,
+        // The author's profile path
+        profilePath: string,
+        // Whether the author's account has been deleted or not
+        deleted: boolean,
+        // The author's badge icon
+        badge: string,
+      } | {
+        // The author's name
+        name: string,
+        // The author's nickname
+        nickname: string,
+        // The author's avatar url
+        avatarUrl: string,
+        // The author's profile path
+        profilePath: string,
+        // Whether the author's account has been deleted or not
+        deleted: boolean,
+        // The author's badge icon
+        badge: string,
+      }
       ),
       // Whether the object can have new comments or not
       acceptsNewComments: boolean,
@@ -75,7 +75,7 @@ export interface addCommentMutation {
       downVoted: boolean,
       // The number of comment's downVotes
       downVotes: number,
-      comments:  Array< {
+      comments: Array<{
         // The Comment's unique ID
         id: string,
         // The Comment's signed global id
@@ -91,33 +91,33 @@ export interface addCommentMutation {
         // The creation date of the comment in relative format
         formattedCreatedAt: string,
         // The resource author
-        author: ( {
-            // The author's name
-            name: string,
-            // The author's nickname
-            nickname: string,
-            // The author's avatar url
-            avatarUrl: string,
-            // The author's profile path
-            profilePath: string,
-            // Whether the author's account has been deleted or not
-            deleted: boolean,
-            // The author's badge icon
-            badge: string,
-          } | {
-            // The author's name
-            name: string,
-            // The author's nickname
-            nickname: string,
-            // The author's avatar url
-            avatarUrl: string,
-            // The author's profile path
-            profilePath: string,
-            // Whether the author's account has been deleted or not
-            deleted: boolean,
-            // The author's badge icon
-            badge: string,
-          }
+        author: ({
+          // The author's name
+          name: string,
+          // The author's nickname
+          nickname: string,
+          // The author's avatar url
+          avatarUrl: string,
+          // The author's profile path
+          profilePath: string,
+          // Whether the author's account has been deleted or not
+          deleted: boolean,
+          // The author's badge icon
+          badge: string,
+        } | {
+          // The author's name
+          name: string,
+          // The author's nickname
+          nickname: string,
+          // The author's avatar url
+          avatarUrl: string,
+          // The author's profile path
+          profilePath: string,
+          // Whether the author's account has been deleted or not
+          deleted: boolean,
+          // The author's badge icon
+          badge: string,
+        }
         ),
         // Check if the commentable has comments
         hasComments: boolean,
@@ -137,7 +137,7 @@ export interface addCommentMutation {
         downVoted: boolean,
         // The number of comment's downVotes
         downVotes: number,
-        comments:  Array< {
+        comments: Array<{
           // The Comment's unique ID
           id: string,
           // The Comment's signed global id
@@ -153,33 +153,33 @@ export interface addCommentMutation {
           // The creation date of the comment in relative format
           formattedCreatedAt: string,
           // The resource author
-          author: ( {
-              // The author's name
-              name: string,
-              // The author's nickname
-              nickname: string,
-              // The author's avatar url
-              avatarUrl: string,
-              // The author's profile path
-              profilePath: string,
-              // Whether the author's account has been deleted or not
-              deleted: boolean,
-              // The author's badge icon
-              badge: string,
-            } | {
-              // The author's name
-              name: string,
-              // The author's nickname
-              nickname: string,
-              // The author's avatar url
-              avatarUrl: string,
-              // The author's profile path
-              profilePath: string,
-              // Whether the author's account has been deleted or not
-              deleted: boolean,
-              // The author's badge icon
-              badge: string,
-            }
+          author: ({
+            // The author's name
+            name: string,
+            // The author's nickname
+            nickname: string,
+            // The author's avatar url
+            avatarUrl: string,
+            // The author's profile path
+            profilePath: string,
+            // Whether the author's account has been deleted or not
+            deleted: boolean,
+            // The author's badge icon
+            badge: string,
+          } | {
+            // The author's name
+            name: string,
+            // The author's nickname
+            nickname: string,
+            // The author's avatar url
+            avatarUrl: string,
+            // The author's profile path
+            profilePath: string,
+            // Whether the author's account has been deleted or not
+            deleted: boolean,
+            // The author's badge icon
+            badge: string,
+          }
           ),
           // Check if the commentable has comments
           hasComments: boolean,
@@ -199,7 +199,7 @@ export interface addCommentMutation {
           downVoted: boolean,
           // The number of comment's downVotes
           downVotes: number,
-          comments:  Array< {
+          comments: Array<{
             // The Comment's unique ID
             id: string,
             // The Comment's signed global id
@@ -215,33 +215,33 @@ export interface addCommentMutation {
             // The creation date of the comment in relative format
             formattedCreatedAt: string,
             // The resource author
-            author: ( {
-                // The author's name
-                name: string,
-                // The author's nickname
-                nickname: string,
-                // The author's avatar url
-                avatarUrl: string,
-                // The author's profile path
-                profilePath: string,
-                // Whether the author's account has been deleted or not
-                deleted: boolean,
-                // The author's badge icon
-                badge: string,
-              } | {
-                // The author's name
-                name: string,
-                // The author's nickname
-                nickname: string,
-                // The author's avatar url
-                avatarUrl: string,
-                // The author's profile path
-                profilePath: string,
-                // Whether the author's account has been deleted or not
-                deleted: boolean,
-                // The author's badge icon
-                badge: string,
-              }
+            author: ({
+              // The author's name
+              name: string,
+              // The author's nickname
+              nickname: string,
+              // The author's avatar url
+              avatarUrl: string,
+              // The author's profile path
+              profilePath: string,
+              // Whether the author's account has been deleted or not
+              deleted: boolean,
+              // The author's badge icon
+              badge: string,
+            } | {
+              // The author's name
+              name: string,
+              // The author's nickname
+              nickname: string,
+              // The author's avatar url
+              avatarUrl: string,
+              // The author's profile path
+              profilePath: string,
+              // Whether the author's account has been deleted or not
+              deleted: boolean,
+              // The author's badge icon
+              badge: string,
+            }
             ),
             // Check if the commentable has comments
             hasComments: boolean,
@@ -261,9 +261,9 @@ export interface addCommentMutation {
             downVoted: boolean,
             // The number of comment's downVotes
             downVotes: number,
-          } >,
-        } >,
-      } >,
+          }>,
+        }>,
+      }>,
     } | null,
   } | null,
 };
@@ -274,8 +274,8 @@ export interface DownVoteMutationVariables {
 
 export interface DownVoteMutation {
   // A comment
-  comment:  {
-    downVote:  {
+  comment: {
+    downVote: {
       // The Comment's unique ID
       id: string,
       // The Comment's signed global id
@@ -291,33 +291,33 @@ export interface DownVoteMutation {
       // The creation date of the comment in relative format
       formattedCreatedAt: string,
       // The resource author
-      author: ( {
-          // The author's name
-          name: string,
-          // The author's nickname
-          nickname: string,
-          // The author's avatar url
-          avatarUrl: string,
-          // The author's profile path
-          profilePath: string,
-          // Whether the author's account has been deleted or not
-          deleted: boolean,
-          // The author's badge icon
-          badge: string,
-        } | {
-          // The author's name
-          name: string,
-          // The author's nickname
-          nickname: string,
-          // The author's avatar url
-          avatarUrl: string,
-          // The author's profile path
-          profilePath: string,
-          // Whether the author's account has been deleted or not
-          deleted: boolean,
-          // The author's badge icon
-          badge: string,
-        }
+      author: ({
+        // The author's name
+        name: string,
+        // The author's nickname
+        nickname: string,
+        // The author's avatar url
+        avatarUrl: string,
+        // The author's profile path
+        profilePath: string,
+        // Whether the author's account has been deleted or not
+        deleted: boolean,
+        // The author's badge icon
+        badge: string,
+      } | {
+        // The author's name
+        name: string,
+        // The author's nickname
+        nickname: string,
+        // The author's avatar url
+        avatarUrl: string,
+        // The author's profile path
+        profilePath: string,
+        // Whether the author's account has been deleted or not
+        deleted: boolean,
+        // The author's badge icon
+        badge: string,
+      }
       ),
       // Check if the commentable has comments
       hasComments: boolean,
@@ -337,7 +337,7 @@ export interface DownVoteMutation {
       downVoted: boolean,
       // The number of comment's downVotes
       downVotes: number,
-      comments:  Array< {
+      comments: Array<{
         // The Comment's unique ID
         id: string,
         // The Comment's signed global id
@@ -353,33 +353,33 @@ export interface DownVoteMutation {
         // The creation date of the comment in relative format
         formattedCreatedAt: string,
         // The resource author
-        author: ( {
-            // The author's name
-            name: string,
-            // The author's nickname
-            nickname: string,
-            // The author's avatar url
-            avatarUrl: string,
-            // The author's profile path
-            profilePath: string,
-            // Whether the author's account has been deleted or not
-            deleted: boolean,
-            // The author's badge icon
-            badge: string,
-          } | {
-            // The author's name
-            name: string,
-            // The author's nickname
-            nickname: string,
-            // The author's avatar url
-            avatarUrl: string,
-            // The author's profile path
-            profilePath: string,
-            // Whether the author's account has been deleted or not
-            deleted: boolean,
-            // The author's badge icon
-            badge: string,
-          }
+        author: ({
+          // The author's name
+          name: string,
+          // The author's nickname
+          nickname: string,
+          // The author's avatar url
+          avatarUrl: string,
+          // The author's profile path
+          profilePath: string,
+          // Whether the author's account has been deleted or not
+          deleted: boolean,
+          // The author's badge icon
+          badge: string,
+        } | {
+          // The author's name
+          name: string,
+          // The author's nickname
+          nickname: string,
+          // The author's avatar url
+          avatarUrl: string,
+          // The author's profile path
+          profilePath: string,
+          // Whether the author's account has been deleted or not
+          deleted: boolean,
+          // The author's badge icon
+          badge: string,
+        }
         ),
         // Check if the commentable has comments
         hasComments: boolean,
@@ -399,7 +399,7 @@ export interface DownVoteMutation {
         downVoted: boolean,
         // The number of comment's downVotes
         downVotes: number,
-        comments:  Array< {
+        comments: Array<{
           // The Comment's unique ID
           id: string,
           // The Comment's signed global id
@@ -415,33 +415,33 @@ export interface DownVoteMutation {
           // The creation date of the comment in relative format
           formattedCreatedAt: string,
           // The resource author
-          author: ( {
-              // The author's name
-              name: string,
-              // The author's nickname
-              nickname: string,
-              // The author's avatar url
-              avatarUrl: string,
-              // The author's profile path
-              profilePath: string,
-              // Whether the author's account has been deleted or not
-              deleted: boolean,
-              // The author's badge icon
-              badge: string,
-            } | {
-              // The author's name
-              name: string,
-              // The author's nickname
-              nickname: string,
-              // The author's avatar url
-              avatarUrl: string,
-              // The author's profile path
-              profilePath: string,
-              // Whether the author's account has been deleted or not
-              deleted: boolean,
-              // The author's badge icon
-              badge: string,
-            }
+          author: ({
+            // The author's name
+            name: string,
+            // The author's nickname
+            nickname: string,
+            // The author's avatar url
+            avatarUrl: string,
+            // The author's profile path
+            profilePath: string,
+            // Whether the author's account has been deleted or not
+            deleted: boolean,
+            // The author's badge icon
+            badge: string,
+          } | {
+            // The author's name
+            name: string,
+            // The author's nickname
+            nickname: string,
+            // The author's avatar url
+            avatarUrl: string,
+            // The author's profile path
+            profilePath: string,
+            // Whether the author's account has been deleted or not
+            deleted: boolean,
+            // The author's badge icon
+            badge: string,
+          }
           ),
           // Check if the commentable has comments
           hasComments: boolean,
@@ -461,7 +461,7 @@ export interface DownVoteMutation {
           downVoted: boolean,
           // The number of comment's downVotes
           downVotes: number,
-          comments:  Array< {
+          comments: Array<{
             // The Comment's unique ID
             id: string,
             // The Comment's signed global id
@@ -477,33 +477,33 @@ export interface DownVoteMutation {
             // The creation date of the comment in relative format
             formattedCreatedAt: string,
             // The resource author
-            author: ( {
-                // The author's name
-                name: string,
-                // The author's nickname
-                nickname: string,
-                // The author's avatar url
-                avatarUrl: string,
-                // The author's profile path
-                profilePath: string,
-                // Whether the author's account has been deleted or not
-                deleted: boolean,
-                // The author's badge icon
-                badge: string,
-              } | {
-                // The author's name
-                name: string,
-                // The author's nickname
-                nickname: string,
-                // The author's avatar url
-                avatarUrl: string,
-                // The author's profile path
-                profilePath: string,
-                // Whether the author's account has been deleted or not
-                deleted: boolean,
-                // The author's badge icon
-                badge: string,
-              }
+            author: ({
+              // The author's name
+              name: string,
+              // The author's nickname
+              nickname: string,
+              // The author's avatar url
+              avatarUrl: string,
+              // The author's profile path
+              profilePath: string,
+              // Whether the author's account has been deleted or not
+              deleted: boolean,
+              // The author's badge icon
+              badge: string,
+            } | {
+              // The author's name
+              name: string,
+              // The author's nickname
+              nickname: string,
+              // The author's avatar url
+              avatarUrl: string,
+              // The author's profile path
+              profilePath: string,
+              // Whether the author's account has been deleted or not
+              deleted: boolean,
+              // The author's badge icon
+              badge: string,
+            }
             ),
             // Check if the commentable has comments
             hasComments: boolean,
@@ -523,9 +523,9 @@ export interface DownVoteMutation {
             downVoted: boolean,
             // The number of comment's downVotes
             downVotes: number,
-          } >,
-        } >,
-      } >,
+          }>,
+        }>,
+      }>,
     },
   } | null,
 };
@@ -536,8 +536,8 @@ export interface UpVoteMutationVariables {
 
 export interface UpVoteMutation {
   // A comment
-  comment:  {
-    upVote:  {
+  comment: {
+    upVote: {
       // The Comment's unique ID
       id: string,
       // The Comment's signed global id
@@ -553,33 +553,33 @@ export interface UpVoteMutation {
       // The creation date of the comment in relative format
       formattedCreatedAt: string,
       // The resource author
-      author: ( {
-          // The author's name
-          name: string,
-          // The author's nickname
-          nickname: string,
-          // The author's avatar url
-          avatarUrl: string,
-          // The author's profile path
-          profilePath: string,
-          // Whether the author's account has been deleted or not
-          deleted: boolean,
-          // The author's badge icon
-          badge: string,
-        } | {
-          // The author's name
-          name: string,
-          // The author's nickname
-          nickname: string,
-          // The author's avatar url
-          avatarUrl: string,
-          // The author's profile path
-          profilePath: string,
-          // Whether the author's account has been deleted or not
-          deleted: boolean,
-          // The author's badge icon
-          badge: string,
-        }
+      author: ({
+        // The author's name
+        name: string,
+        // The author's nickname
+        nickname: string,
+        // The author's avatar url
+        avatarUrl: string,
+        // The author's profile path
+        profilePath: string,
+        // Whether the author's account has been deleted or not
+        deleted: boolean,
+        // The author's badge icon
+        badge: string,
+      } | {
+        // The author's name
+        name: string,
+        // The author's nickname
+        nickname: string,
+        // The author's avatar url
+        avatarUrl: string,
+        // The author's profile path
+        profilePath: string,
+        // Whether the author's account has been deleted or not
+        deleted: boolean,
+        // The author's badge icon
+        badge: string,
+      }
       ),
       // Check if the commentable has comments
       hasComments: boolean,
@@ -599,7 +599,7 @@ export interface UpVoteMutation {
       downVoted: boolean,
       // The number of comment's downVotes
       downVotes: number,
-      comments:  Array< {
+      comments: Array<{
         // The Comment's unique ID
         id: string,
         // The Comment's signed global id
@@ -615,33 +615,33 @@ export interface UpVoteMutation {
         // The creation date of the comment in relative format
         formattedCreatedAt: string,
         // The resource author
-        author: ( {
-            // The author's name
-            name: string,
-            // The author's nickname
-            nickname: string,
-            // The author's avatar url
-            avatarUrl: string,
-            // The author's profile path
-            profilePath: string,
-            // Whether the author's account has been deleted or not
-            deleted: boolean,
-            // The author's badge icon
-            badge: string,
-          } | {
-            // The author's name
-            name: string,
-            // The author's nickname
-            nickname: string,
-            // The author's avatar url
-            avatarUrl: string,
-            // The author's profile path
-            profilePath: string,
-            // Whether the author's account has been deleted or not
-            deleted: boolean,
-            // The author's badge icon
-            badge: string,
-          }
+        author: ({
+          // The author's name
+          name: string,
+          // The author's nickname
+          nickname: string,
+          // The author's avatar url
+          avatarUrl: string,
+          // The author's profile path
+          profilePath: string,
+          // Whether the author's account has been deleted or not
+          deleted: boolean,
+          // The author's badge icon
+          badge: string,
+        } | {
+          // The author's name
+          name: string,
+          // The author's nickname
+          nickname: string,
+          // The author's avatar url
+          avatarUrl: string,
+          // The author's profile path
+          profilePath: string,
+          // Whether the author's account has been deleted or not
+          deleted: boolean,
+          // The author's badge icon
+          badge: string,
+        }
         ),
         // Check if the commentable has comments
         hasComments: boolean,
@@ -661,7 +661,7 @@ export interface UpVoteMutation {
         downVoted: boolean,
         // The number of comment's downVotes
         downVotes: number,
-        comments:  Array< {
+        comments: Array<{
           // The Comment's unique ID
           id: string,
           // The Comment's signed global id
@@ -677,53 +677,53 @@ export interface UpVoteMutation {
           // The creation date of the comment in relative format
           formattedCreatedAt: string,
           // The resource author
-          author: ( {
-              // The author's name
-              name: string,
-              // The author's nickname
-              nickname: string,
-              // The author's avatar url
-              avatarUrl: string,
-              // The author's profile path
-              profilePath: string,
-              // Whether the author's account has been deleted or not
-              deleted: boolean,
-              // The author's badge icon
-              badge: string,
-            } | {
-              // The author's name
-              name: string,
-              // The author's nickname
-              nickname: string,
-              // The author's avatar url
-              avatarUrl: string,
-              // The author's profile path
-              profilePath: string,
-              // Whether the author's account has been deleted or not
-              deleted: boolean,
-              // The author's badge icon
-              badge: string,
-            }
-          ),
-          // Check if the commentable has comments
-          hasComments: boolean,
-          // Whether the object can have new comments or not
-          acceptsNewComments: boolean,
-          // Check if the current user can comment
-          userAllowedToComment: boolean,
-          // The comment's alignment. Can be 0 (neutral), 1 (in favor) or -1 (against)'
-          alignment: number | null,
-          // Check if the current user has reported the comment
-          alreadyReported: boolean,
-          // The number of comment's upVotes
-          upVotes: number,
-          // Check if the current user has upvoted the comment
-          upVoted: boolean,
-          // Check if the current user has downvoted the comment
-          downVoted: boolean,
-          // The number of comment's downVotes
+          author: ({
+            // The author's name
+            name: string,
+            // The author's nickname
+            nickname: string,
+            // The author's avatar url
+            avatarUrl: string,
+            // The author's profile path
+            profilePath: string,
+            // Whether the author's account has been deleted or not
+            deleted: boolean,
+            // The author's badge icon
+            badge: string,
+          } | {
+            // The author's name
+            name: string,
+            // The author's nickname
+            nickname: string,
+            // The author's avatar url
+            avatarUrl: string,
+            // The author's profile path
+            profilePath: string,
+            // Whether the author's account has been deleted or not
+            deleted: boolean,
+            // The author's badge icon
+            badge: string,
+          }
+          ),
+          // Check if the commentable has comments
+          hasComments: boolean,
+          // Whether the object can have new comments or not
+          acceptsNewComments: boolean,
+          // Check if the current user can comment
+          userAllowedToComment: boolean,
+          // The comment's alignment. Can be 0 (neutral), 1 (in favor) or -1 (against)'
+          alignment: number | null,
+          // Check if the current user has reported the comment
+          alreadyReported: boolean,
+          // The number of comment's upVotes
+          upVotes: number,
+          // Check if the current user has upvoted the comment
+          upVoted: boolean,
+          // Check if the current user has downvoted the comment
+          downVoted: boolean,
+          // The number of comment's downVotes
           downVotes: number,
-          comments:  Array< {
+          comments: Array<{
             // The Comment's unique ID
             id: string,
             // The Comment's signed global id
@@ -739,33 +739,33 @@ export interface UpVoteMutation {
             // The creation date of the comment in relative format
             formattedCreatedAt: string,
             // The resource author
-            author: ( {
-                // The author's name
-                name: string,
-                // The author's nickname
-                nickname: string,
-                // The author's avatar url
-                avatarUrl: string,
-                // The author's profile path
-                profilePath: string,
-                // Whether the author's account has been deleted or not
-                deleted: boolean,
-                // The author's badge icon
-                badge: string,
-              } | {
-                // The author's name
-                name: string,
-                // The author's nickname
-                nickname: string,
-                // The author's avatar url
-                avatarUrl: string,
-                // The author's profile path
-                profilePath: string,
-                // Whether the author's account has been deleted or not
-                deleted: boolean,
-                // The author's badge icon
-                badge: string,
-              }
+            author: ({
+              // The author's name
+              name: string,
+              // The author's nickname
+              nickname: string,
+              // The author's avatar url
+              avatarUrl: string,
+              // The author's profile path
+              profilePath: string,
+              // Whether the author's account has been deleted or not
+              deleted: boolean,
+              // The author's badge icon
+              badge: string,
+            } | {
+              // The author's name
+              name: string,
+              // The author's nickname
+              nickname: string,
+              // The author's avatar url
+              avatarUrl: string,
+              // The author's profile path
+              profilePath: string,
+              // Whether the author's account has been deleted or not
+              deleted: boolean,
+              // The author's badge icon
+              badge: string,
+            }
             ),
             // Check if the commentable has comments
             hasComments: boolean,
@@ -785,9 +785,9 @@ export interface UpVoteMutation {
             downVoted: boolean,
             // The number of comment's downVotes
             downVotes: number,
-          } >,
-        } >,
-      } >,
+          }>,
+        }>,
+      }>,
     },
   } | null,
 };
@@ -796,13 +796,14 @@ export interface GetCommentsQueryVariables {
   commentableId: string,
   commentableType: string,
   orderBy?: string | null,
+  singleCommentId?: string | null,
 };
 
 export interface GetCommentsQuery {
   // Return's information about the logged in user
-  session:  {
+  session: {
     // The current user
-    user:  {
+    user: {
       // The user's name
       name: string,
       // The user's nickname
@@ -813,14 +814,14 @@ export interface GetCommentsQuery {
       organizationName: string,
     } | null,
     // The current user verified user groups
-    verifiedUserGroups:  Array< {
+    verifiedUserGroups: Array<{
       // The user group's id
       id: string,
       // The user group's name
       name: string,
-    } >,
+    }>,
   } | null,
-  commentable:  {
+  commentable: {
     // Whether the object can have new comments or not
     acceptsNewComments: boolean,
     // Check if the current user can comment
@@ -831,7 +832,7 @@ export interface GetCommentsQuery {
     commentsHaveVotes: boolean,
     // The number of comments in all levels this resource holds
     totalCommentsCount: number,
-    comments:  Array< {
+    comments: Array<{
       // The Comment's unique ID
       id: string,
       // Check if the commentable has comments
@@ -849,33 +850,33 @@ export interface GetCommentsQuery {
       // The creation date of the comment in relative format
       formattedCreatedAt: string,
       // The resource author
-      author: ( {
-          // The author's name
-          name: string,
-          // The author's nickname
-          nickname: string,
-          // The author's avatar url
-          avatarUrl: string,
-          // The author's profile path
-          profilePath: string,
-          // Whether the author's account has been deleted or not
-          deleted: boolean,
-          // The author's badge icon
-          badge: string,
-        } | {
-          // The author's name
-          name: string,
-          // The author's nickname
-          nickname: string,
-          // The author's avatar url
-          avatarUrl: string,
-          // The author's profile path
-          profilePath: string,
-          // Whether the author's account has been deleted or not
-          deleted: boolean,
-          // The author's badge icon
-          badge: string,
-        }
+      author: ({
+        // The author's name
+        name: string,
+        // The author's nickname
+        nickname: string,
+        // The author's avatar url
+        avatarUrl: string,
+        // The author's profile path
+        profilePath: string,
+        // Whether the author's account has been deleted or not
+        deleted: boolean,
+        // The author's badge icon
+        badge: string,
+      } | {
+        // The author's name
+        name: string,
+        // The author's nickname
+        nickname: string,
+        // The author's avatar url
+        avatarUrl: string,
+        // The author's profile path
+        profilePath: string,
+        // Whether the author's account has been deleted or not
+        deleted: boolean,
+        // The author's badge icon
+        badge: string,
+      }
       ),
       // Whether the object can have new comments or not
       acceptsNewComments: boolean,
@@ -893,7 +894,7 @@ export interface GetCommentsQuery {
       downVoted: boolean,
       // The number of comment's downVotes
       downVotes: number,
-      comments:  Array< {
+      comments: Array<{
         // The Comment's unique ID
         id: string,
         // The Comment's signed global id
@@ -909,33 +910,33 @@ export interface GetCommentsQuery {
         // The creation date of the comment in relative format
         formattedCreatedAt: string,
         // The resource author
-        author: ( {
-            // The author's name
-            name: string,
-            // The author's nickname
-            nickname: string,
-            // The author's avatar url
-            avatarUrl: string,
-            // The author's profile path
-            profilePath: string,
-            // Whether the author's account has been deleted or not
-            deleted: boolean,
-            // The author's badge icon
-            badge: string,
-          } | {
-            // The author's name
-            name: string,
-            // The author's nickname
-            nickname: string,
-            // The author's avatar url
-            avatarUrl: string,
-            // The author's profile path
-            profilePath: string,
-            // Whether the author's account has been deleted or not
-            deleted: boolean,
-            // The author's badge icon
-            badge: string,
-          }
+        author: ({
+          // The author's name
+          name: string,
+          // The author's nickname
+          nickname: string,
+          // The author's avatar url
+          avatarUrl: string,
+          // The author's profile path
+          profilePath: string,
+          // Whether the author's account has been deleted or not
+          deleted: boolean,
+          // The author's badge icon
+          badge: string,
+        } | {
+          // The author's name
+          name: string,
+          // The author's nickname
+          nickname: string,
+          // The author's avatar url
+          avatarUrl: string,
+          // The author's profile path
+          profilePath: string,
+          // Whether the author's account has been deleted or not
+          deleted: boolean,
+          // The author's badge icon
+          badge: string,
+        }
         ),
         // Check if the commentable has comments
         hasComments: boolean,
@@ -955,7 +956,7 @@ export interface GetCommentsQuery {
         downVoted: boolean,
         // The number of comment's downVotes
         downVotes: number,
-        comments:  Array< {
+        comments: Array<{
           // The Comment's unique ID
           id: string,
           // The Comment's signed global id
@@ -971,33 +972,33 @@ export interface GetCommentsQuery {
           // The creation date of the comment in relative format
           formattedCreatedAt: string,
           // The resource author
-          author: ( {
-              // The author's name
-              name: string,
-              // The author's nickname
-              nickname: string,
-              // The author's avatar url
-              avatarUrl: string,
-              // The author's profile path
-              profilePath: string,
-              // Whether the author's account has been deleted or not
-              deleted: boolean,
-              // The author's badge icon
-              badge: string,
-            } | {
-              // The author's name
-              name: string,
-              // The author's nickname
-              nickname: string,
-              // The author's avatar url
-              avatarUrl: string,
-              // The author's profile path
-              profilePath: string,
-              // Whether the author's account has been deleted or not
-              deleted: boolean,
-              // The author's badge icon
-              badge: string,
-            }
+          author: ({
+            // The author's name
+            name: string,
+            // The author's nickname
+            nickname: string,
+            // The author's avatar url
+            avatarUrl: string,
+            // The author's profile path
+            profilePath: string,
+            // Whether the author's account has been deleted or not
+            deleted: boolean,
+            // The author's badge icon
+            badge: string,
+          } | {
+            // The author's name
+            name: string,
+            // The author's nickname
+            nickname: string,
+            // The author's avatar url
+            avatarUrl: string,
+            // The author's profile path
+            profilePath: string,
+            // Whether the author's account has been deleted or not
+            deleted: boolean,
+            // The author's badge icon
+            badge: string,
+          }
           ),
           // Check if the commentable has comments
           hasComments: boolean,
@@ -1017,7 +1018,7 @@ export interface GetCommentsQuery {
           downVoted: boolean,
           // The number of comment's downVotes
           downVotes: number,
-          comments:  Array< {
+          comments: Array<{
             // The Comment's unique ID
             id: string,
             // The Comment's signed global id
@@ -1033,33 +1034,33 @@ export interface GetCommentsQuery {
             // The creation date of the comment in relative format
             formattedCreatedAt: string,
             // The resource author
-            author: ( {
-                // The author's name
-                name: string,
-                // The author's nickname
-                nickname: string,
-                // The author's avatar url
-                avatarUrl: string,
-                // The author's profile path
-                profilePath: string,
-                // Whether the author's account has been deleted or not
-                deleted: boolean,
-                // The author's badge icon
-                badge: string,
-              } | {
-                // The author's name
-                name: string,
-                // The author's nickname
-                nickname: string,
-                // The author's avatar url
-                avatarUrl: string,
-                // The author's profile path
-                profilePath: string,
-                // Whether the author's account has been deleted or not
-                deleted: boolean,
-                // The author's badge icon
-                badge: string,
-              }
+            author: ({
+              // The author's name
+              name: string,
+              // The author's nickname
+              nickname: string,
+              // The author's avatar url
+              avatarUrl: string,
+              // The author's profile path
+              profilePath: string,
+              // Whether the author's account has been deleted or not
+              deleted: boolean,
+              // The author's badge icon
+              badge: string,
+            } | {
+              // The author's name
+              name: string,
+              // The author's nickname
+              nickname: string,
+              // The author's avatar url
+              avatarUrl: string,
+              // The author's profile path
+              profilePath: string,
+              // Whether the author's account has been deleted or not
+              deleted: boolean,
+              // The author's badge icon
+              badge: string,
+            }
             ),
             // Check if the commentable has comments
             hasComments: boolean,
@@ -1079,10 +1080,10 @@ export interface GetCommentsQuery {
             downVoted: boolean,
             // The number of comment's downVotes
             downVotes: number,
-          } >,
-        } >,
-      } >,
-    } >,
+          }>,
+        }>,
+      }>,
+    }>,
     // The commentable's ID
     id: string,
     // The commentable's class name. i.e. `Decidim::ParticipatoryProcess`
@@ -1099,12 +1100,12 @@ export interface AddCommentFormCommentableFragment {
 
 export interface AddCommentFormSessionFragment {
   // The current user verified user groups
-  verifiedUserGroups:  Array< {
+  verifiedUserGroups: Array<{
     // The user group's id
     id: string,
     // The user group's name
     name: string,
-  } >,
+  }>,
 };
 
 export interface CommentFragment {
@@ -1123,33 +1124,33 @@ export interface CommentFragment {
   // The creation date of the comment in relative format
   formattedCreatedAt: string,
   // The resource author
-  author: ( {
-      // The author's name
-      name: string,
-      // The author's nickname
-      nickname: string,
-      // The author's avatar url
-      avatarUrl: string,
-      // The author's profile path
-      profilePath: string,
-      // Whether the author's account has been deleted or not
-      deleted: boolean,
-      // The author's badge icon
-      badge: string,
-    } | {
-      // The author's name
-      name: string,
-      // The author's nickname
-      nickname: string,
-      // The author's avatar url
-      avatarUrl: string,
-      // The author's profile path
-      profilePath: string,
-      // Whether the author's account has been deleted or not
-      deleted: boolean,
-      // The author's badge icon
-      badge: string,
-    }
+  author: ({
+    // The author's name
+    name: string,
+    // The author's nickname
+    nickname: string,
+    // The author's avatar url
+    avatarUrl: string,
+    // The author's profile path
+    profilePath: string,
+    // Whether the author's account has been deleted or not
+    deleted: boolean,
+    // The author's badge icon
+    badge: string,
+  } | {
+    // The author's name
+    name: string,
+    // The author's nickname
+    nickname: string,
+    // The author's avatar url
+    avatarUrl: string,
+    // The author's profile path
+    profilePath: string,
+    // Whether the author's account has been deleted or not
+    deleted: boolean,
+    // The author's badge icon
+    badge: string,
+  }
   ),
   // Check if the commentable has comments
   hasComments: boolean,
@@ -1169,7 +1170,7 @@ export interface CommentFragment {
   downVoted: boolean,
   // The number of comment's downVotes
   downVotes: number,
-  comments:  Array< {
+  comments: Array<{
     // The Comment's unique ID
     id: string,
     // The Comment's signed global id
@@ -1185,33 +1186,33 @@ export interface CommentFragment {
     // The creation date of the comment in relative format
     formattedCreatedAt: string,
     // The resource author
-    author: ( {
-        // The author's name
-        name: string,
-        // The author's nickname
-        nickname: string,
-        // The author's avatar url
-        avatarUrl: string,
-        // The author's profile path
-        profilePath: string,
-        // Whether the author's account has been deleted or not
-        deleted: boolean,
-        // The author's badge icon
-        badge: string,
-      } | {
-        // The author's name
-        name: string,
-        // The author's nickname
-        nickname: string,
-        // The author's avatar url
-        avatarUrl: string,
-        // The author's profile path
-        profilePath: string,
-        // Whether the author's account has been deleted or not
-        deleted: boolean,
-        // The author's badge icon
-        badge: string,
-      }
+    author: ({
+      // The author's name
+      name: string,
+      // The author's nickname
+      nickname: string,
+      // The author's avatar url
+      avatarUrl: string,
+      // The author's profile path
+      profilePath: string,
+      // Whether the author's account has been deleted or not
+      deleted: boolean,
+      // The author's badge icon
+      badge: string,
+    } | {
+      // The author's name
+      name: string,
+      // The author's nickname
+      nickname: string,
+      // The author's avatar url
+      avatarUrl: string,
+      // The author's profile path
+      profilePath: string,
+      // Whether the author's account has been deleted or not
+      deleted: boolean,
+      // The author's badge icon
+      badge: string,
+    }
     ),
     // Check if the commentable has comments
     hasComments: boolean,
@@ -1231,7 +1232,7 @@ export interface CommentFragment {
     downVoted: boolean,
     // The number of comment's downVotes
     downVotes: number,
-    comments:  Array< {
+    comments: Array<{
       // The Comment's unique ID
       id: string,
       // The Comment's signed global id
@@ -1247,33 +1248,33 @@ export interface CommentFragment {
       // The creation date of the comment in relative format
       formattedCreatedAt: string,
       // The resource author
-      author: ( {
-          // The author's name
-          name: string,
-          // The author's nickname
-          nickname: string,
-          // The author's avatar url
-          avatarUrl: string,
-          // The author's profile path
-          profilePath: string,
-          // Whether the author's account has been deleted or not
-          deleted: boolean,
-          // The author's badge icon
-          badge: string,
-        } | {
-          // The author's name
-          name: string,
-          // The author's nickname
-          nickname: string,
-          // The author's avatar url
-          avatarUrl: string,
-          // The author's profile path
-          profilePath: string,
-          // Whether the author's account has been deleted or not
-          deleted: boolean,
-          // The author's badge icon
-          badge: string,
-        }
+      author: ({
+        // The author's name
+        name: string,
+        // The author's nickname
+        nickname: string,
+        // The author's avatar url
+        avatarUrl: string,
+        // The author's profile path
+        profilePath: string,
+        // Whether the author's account has been deleted or not
+        deleted: boolean,
+        // The author's badge icon
+        badge: string,
+      } | {
+        // The author's name
+        name: string,
+        // The author's nickname
+        nickname: string,
+        // The author's avatar url
+        avatarUrl: string,
+        // The author's profile path
+        profilePath: string,
+        // Whether the author's account has been deleted or not
+        deleted: boolean,
+        // The author's badge icon
+        badge: string,
+      }
       ),
       // Check if the commentable has comments
       hasComments: boolean,
@@ -1293,7 +1294,7 @@ export interface CommentFragment {
       downVoted: boolean,
       // The number of comment's downVotes
       downVotes: number,
-      comments:  Array< {
+      comments: Array<{
         // The Comment's unique ID
         id: string,
         // The Comment's signed global id
@@ -1309,33 +1310,33 @@ export interface CommentFragment {
         // The creation date of the comment in relative format
         formattedCreatedAt: string,
         // The resource author
-        author: ( {
-            // The author's name
-            name: string,
-            // The author's nickname
-            nickname: string,
-            // The author's avatar url
-            avatarUrl: string,
-            // The author's profile path
-            profilePath: string,
-            // Whether the author's account has been deleted or not
-            deleted: boolean,
-            // The author's badge icon
-            badge: string,
-          } | {
-            // The author's name
-            name: string,
-            // The author's nickname
-            nickname: string,
-            // The author's avatar url
-            avatarUrl: string,
-            // The author's profile path
-            profilePath: string,
-            // Whether the author's account has been deleted or not
-            deleted: boolean,
-            // The author's badge icon
-            badge: string,
-          }
+        author: ({
+          // The author's name
+          name: string,
+          // The author's nickname
+          nickname: string,
+          // The author's avatar url
+          avatarUrl: string,
+          // The author's profile path
+          profilePath: string,
+          // Whether the author's account has been deleted or not
+          deleted: boolean,
+          // The author's badge icon
+          badge: string,
+        } | {
+          // The author's name
+          name: string,
+          // The author's nickname
+          nickname: string,
+          // The author's avatar url
+          avatarUrl: string,
+          // The author's profile path
+          profilePath: string,
+          // Whether the author's account has been deleted or not
+          deleted: boolean,
+          // The author's badge icon
+          badge: string,
+        }
         ),
         // Check if the commentable has comments
         hasComments: boolean,
@@ -1355,9 +1356,9 @@ export interface CommentFragment {
         downVoted: boolean,
         // The number of comment's downVotes
         downVotes: number,
-      } >,
-    } >,
-  } >,
+      }>,
+    }>,
+  }>,
 };
 
 export interface CommentDataFragment {
@@ -1376,33 +1377,33 @@ export interface CommentDataFragment {
   // The creation date of the comment in relative format
   formattedCreatedAt: string,
   // The resource author
-  author: ( {
-      // The author's name
-      name: string,
-      // The author's nickname
-      nickname: string,
-      // The author's avatar url
-      avatarUrl: string,
-      // The author's profile path
-      profilePath: string,
-      // Whether the author's account has been deleted or not
-      deleted: boolean,
-      // The author's badge icon
-      badge: string,
-    } | {
-      // The author's name
-      name: string,
-      // The author's nickname
-      nickname: string,
-      // The author's avatar url
-      avatarUrl: string,
-      // The author's profile path
-      profilePath: string,
-      // Whether the author's account has been deleted or not
-      deleted: boolean,
-      // The author's badge icon
-      badge: string,
-    }
+  author: ({
+    // The author's name
+    name: string,
+    // The author's nickname
+    nickname: string,
+    // The author's avatar url
+    avatarUrl: string,
+    // The author's profile path
+    profilePath: string,
+    // Whether the author's account has been deleted or not
+    deleted: boolean,
+    // The author's badge icon
+    badge: string,
+  } | {
+    // The author's name
+    name: string,
+    // The author's nickname
+    nickname: string,
+    // The author's avatar url
+    avatarUrl: string,
+    // The author's profile path
+    profilePath: string,
+    // Whether the author's account has been deleted or not
+    deleted: boolean,
+    // The author's badge icon
+    badge: string,
+  }
   ),
   // Check if the commentable has comments
   hasComments: boolean,
@@ -1442,33 +1443,33 @@ export interface CommentThreadFragment {
   // The creation date of the comment in relative format
   formattedCreatedAt: string,
   // The resource author
-  author: ( {
-      // The author's name
-      name: string,
-      // The author's nickname
-      nickname: string,
-      // The author's avatar url
-      avatarUrl: string,
-      // The author's profile path
-      profilePath: string,
-      // Whether the author's account has been deleted or not
-      deleted: boolean,
-      // The author's badge icon
-      badge: string,
-    } | {
-      // The author's name
-      name: string,
-      // The author's nickname
-      nickname: string,
-      // The author's avatar url
-      avatarUrl: string,
-      // The author's profile path
-      profilePath: string,
-      // Whether the author's account has been deleted or not
-      deleted: boolean,
-      // The author's badge icon
-      badge: string,
-    }
+  author: ({
+    // The author's name
+    name: string,
+    // The author's nickname
+    nickname: string,
+    // The author's avatar url
+    avatarUrl: string,
+    // The author's profile path
+    profilePath: string,
+    // Whether the author's account has been deleted or not
+    deleted: boolean,
+    // The author's badge icon
+    badge: string,
+  } | {
+    // The author's name
+    name: string,
+    // The author's nickname
+    nickname: string,
+    // The author's avatar url
+    avatarUrl: string,
+    // The author's profile path
+    profilePath: string,
+    // Whether the author's account has been deleted or not
+    deleted: boolean,
+    // The author's badge icon
+    badge: string,
+  }
   ),
   // Whether the object can have new comments or not
   acceptsNewComments: boolean,
@@ -1486,7 +1487,7 @@ export interface CommentThreadFragment {
   downVoted: boolean,
   // The number of comment's downVotes
   downVotes: number,
-  comments:  Array< {
+  comments: Array<{
     // The Comment's unique ID
     id: string,
     // The Comment's signed global id
@@ -1502,33 +1503,33 @@ export interface CommentThreadFragment {
     // The creation date of the comment in relative format
     formattedCreatedAt: string,
     // The resource author
-    author: ( {
-        // The author's name
-        name: string,
-        // The author's nickname
-        nickname: string,
-        // The author's avatar url
-        avatarUrl: string,
-        // The author's profile path
-        profilePath: string,
-        // Whether the author's account has been deleted or not
-        deleted: boolean,
-        // The author's badge icon
-        badge: string,
-      } | {
-        // The author's name
-        name: string,
-        // The author's nickname
-        nickname: string,
-        // The author's avatar url
-        avatarUrl: string,
-        // The author's profile path
-        profilePath: string,
-        // Whether the author's account has been deleted or not
-        deleted: boolean,
-        // The author's badge icon
-        badge: string,
-      }
+    author: ({
+      // The author's name
+      name: string,
+      // The author's nickname
+      nickname: string,
+      // The author's avatar url
+      avatarUrl: string,
+      // The author's profile path
+      profilePath: string,
+      // Whether the author's account has been deleted or not
+      deleted: boolean,
+      // The author's badge icon
+      badge: string,
+    } | {
+      // The author's name
+      name: string,
+      // The author's nickname
+      nickname: string,
+      // The author's avatar url
+      avatarUrl: string,
+      // The author's profile path
+      profilePath: string,
+      // Whether the author's account has been deleted or not
+      deleted: boolean,
+      // The author's badge icon
+      badge: string,
+    }
     ),
     // Check if the commentable has comments
     hasComments: boolean,
@@ -1548,7 +1549,7 @@ export interface CommentThreadFragment {
     downVoted: boolean,
     // The number of comment's downVotes
     downVotes: number,
-    comments:  Array< {
+    comments: Array<{
       // The Comment's unique ID
       id: string,
       // The Comment's signed global id
@@ -1564,33 +1565,33 @@ export interface CommentThreadFragment {
       // The creation date of the comment in relative format
       formattedCreatedAt: string,
       // The resource author
-      author: ( {
-          // The author's name
-          name: string,
-          // The author's nickname
-          nickname: string,
-          // The author's avatar url
-          avatarUrl: string,
-          // The author's profile path
-          profilePath: string,
-          // Whether the author's account has been deleted or not
-          deleted: boolean,
-          // The author's badge icon
-          badge: string,
-        } | {
-          // The author's name
-          name: string,
-          // The author's nickname
-          nickname: string,
-          // The author's avatar url
-          avatarUrl: string,
-          // The author's profile path
-          profilePath: string,
-          // Whether the author's account has been deleted or not
-          deleted: boolean,
-          // The author's badge icon
-          badge: string,
-        }
+      author: ({
+        // The author's name
+        name: string,
+        // The author's nickname
+        nickname: string,
+        // The author's avatar url
+        avatarUrl: string,
+        // The author's profile path
+        profilePath: string,
+        // Whether the author's account has been deleted or not
+        deleted: boolean,
+        // The author's badge icon
+        badge: string,
+      } | {
+        // The author's name
+        name: string,
+        // The author's nickname
+        nickname: string,
+        // The author's avatar url
+        avatarUrl: string,
+        // The author's profile path
+        profilePath: string,
+        // Whether the author's account has been deleted or not
+        deleted: boolean,
+        // The author's badge icon
+        badge: string,
+      }
       ),
       // Check if the commentable has comments
       hasComments: boolean,
@@ -1610,7 +1611,7 @@ export interface CommentThreadFragment {
       downVoted: boolean,
       // The number of comment's downVotes
       downVotes: number,
-      comments:  Array< {
+      comments: Array<{
         // The Comment's unique ID
         id: string,
         // The Comment's signed global id
@@ -1626,33 +1627,33 @@ export interface CommentThreadFragment {
         // The creation date of the comment in relative format
         formattedCreatedAt: string,
         // The resource author
-        author: ( {
-            // The author's name
-            name: string,
-            // The author's nickname
-            nickname: string,
-            // The author's avatar url
-            avatarUrl: string,
-            // The author's profile path
-            profilePath: string,
-            // Whether the author's account has been deleted or not
-            deleted: boolean,
-            // The author's badge icon
-            badge: string,
-          } | {
-            // The author's name
-            name: string,
-            // The author's nickname
-            nickname: string,
-            // The author's avatar url
-            avatarUrl: string,
-            // The author's profile path
-            profilePath: string,
-            // Whether the author's account has been deleted or not
-            deleted: boolean,
-            // The author's badge icon
-            badge: string,
-          }
+        author: ({
+          // The author's name
+          name: string,
+          // The author's nickname
+          nickname: string,
+          // The author's avatar url
+          avatarUrl: string,
+          // The author's profile path
+          profilePath: string,
+          // Whether the author's account has been deleted or not
+          deleted: boolean,
+          // The author's badge icon
+          badge: string,
+        } | {
+          // The author's name
+          name: string,
+          // The author's nickname
+          nickname: string,
+          // The author's avatar url
+          avatarUrl: string,
+          // The author's profile path
+          profilePath: string,
+          // Whether the author's account has been deleted or not
+          deleted: boolean,
+          // The author's badge icon
+          badge: string,
+        }
         ),
         // Check if the commentable has comments
         hasComments: boolean,
@@ -1672,9 +1673,9 @@ export interface CommentThreadFragment {
         downVoted: boolean,
         // The number of comment's downVotes
         downVotes: number,
-      } >,
-    } >,
-  } >,
+      }>,
+    }>,
+  }>,
 };
 
 export interface DownVoteButtonFragment {