app/frontend/comments/comments.component.tsx in decidim-comments-0.3.2 vs app/frontend/comments/comments.component.tsx in decidim-comments-0.4.0

@@ -25,11 +25,11 @@
  * It renders a collection of comments given a commentable id and type.
  * @global
  * @class
  * @augments Component
  */
-export class Comments extends React.Component<CommentsProps, undefined> {
+export class Comments extends React.Component<CommentsProps> {
   public static defaultProps: any = {
     loading: false,
     session: null,
     commentable: {
       comments: [],
@@ -89,37 +89,42 @@
    * Iterates the comment's collection and render a CommentThread for each one
    * @private
    * @returns {ReactComponent[]} - A collection of CommentThread components
    */
   private _renderCommentThreads() {
-    const { session, commentable: { comments, commentsHaveVotes } } = this.props;
+    const { session, commentable, orderBy } = this.props;
+    const { comments, commentsHaveVotes } = commentable;
 
     return comments.map((comment) => (
       <CommentThread
         key={comment.id}
         comment={comment}
         session={session}
         votable={commentsHaveVotes}
+        rootCommentable={commentable}
+        orderBy={orderBy}
       />
     ));
   }
 
   /**
    * If current user is present it renders the add comment form
    * @private
    * @returns {Void|ReactComponent} - A AddCommentForm component or nothing
    */
   private _renderAddCommentForm() {
-    const { session, commentable } = this.props;
+    const { session, commentable, orderBy } = this.props;
     const { acceptsNewComments, commentsHaveAlignment } = commentable;
 
     if (acceptsNewComments) {
       return (
         <AddCommentForm
           session={session}
           commentable={commentable}
           arguable={commentsHaveAlignment}
+          rootCommentable={commentable}
+          orderBy={orderBy}
         />
       );
     }
 
     return null;
@@ -133,24 +138,30 @@
 
 window.Comments = Comments;
 
 export const commentsQuery = require("../queries/comments.query.graphql");
 
-const CommentsWithData: any = graphql(commentsQuery, {
+const CommentsWithData: any = graphql<GetCommentsQuery, CommentsProps>(commentsQuery, {
   options: {
     pollInterval: 15000,
   },
-  props: ({ ownProps, data: { loading, session, commentable, refetch }}) => ({
-    loading,
-    session,
-    commentable,
-    orderBy: ownProps.orderBy,
-    reorderComments: (orderBy: string) => {
-      return refetch({
-        orderBy,
-      });
-    },
-  }),
+  props: ({ ownProps, data }) => {
+    if (data) {
+      const { loading, session, commentable, refetch } = data;
+
+      return {
+        loading,
+        session,
+        commentable,
+        orderBy: ownProps.orderBy,
+        reorderComments: (orderBy: string) => {
+          return refetch({
+            orderBy,
+          });
+        },
+      };
+    }
+  },
 })(Comments);
 
 export interface CommentsApplicationProps extends GetCommentsQueryVariables {
   locale: string;
 }