Cleanup user-info, make preloader and list-comments pure functions

web/app/components/list-comments/list-comments.jsx

@@ -1,20 +1,18 @@
 /** @jsx h */
-import { h, Component } from 'preact';
+import { h } from 'preact';
 
 import { NODE_ID } from 'common/constants';
 
 import Comment from 'components/comment';
 
-export default class ListComments extends Component {
-  render({ comments = [] }) {
-    return (
-      <div id={NODE_ID}>
-        <div className="list-comments">
-          {comments.map(comment => (
-            <Comment data={comment} mods={{ level: 0, guest: true, view: 'preview' }} mix="list-comments__item" />
-          ))}
-        </div>
-      </div>
-    );
-  }
-}
+const ListComments = ({ comments = [] }) => (
+  <div id={NODE_ID}>
+    <div className="list-comments">
+      {comments.map(comment => (
+        <Comment data={comment} mods={{ level: 0, guest: true, view: 'preview' }} mix="list-comments__item" />
+      ))}
+    </div>
+  </div>
+);
+
+export default ListComments;

web/app/components/preloader/preloader.jsx

@@ -1,14 +1,12 @@
 /** @jsx h */
-import { h, Component } from 'preact';
+import { h } from 'preact';
 
-export default class Preloader extends Component {
-  render(props) {
-    return (
-      <div className={b('preloader', props)}>
-        <div className="preloader__bounce" />
-        <div className="preloader__bounce" />
-        <div className="preloader__bounce" />
-      </div>
-    );
-  }
-}
+const Preloader = props => (
+  <div className={b('preloader', props)}>
+    <div className="preloader__bounce" />
+    <div className="preloader__bounce" />
+    <div className="preloader__bounce" />
+  </div>
+);
+
+export default Preloader;

web/app/components/user-info/last-comments-list.jsx

@@ -0,0 +1,15 @@
+/** @jsx h */
+import { h } from 'preact';
+
+import Comment from 'components/comment';
+import Preloader from 'components/preloader';
+
+const LastCommentsList = ({ comments, isLoading }) => {
+  if (isLoading) {
+    return <Preloader mix="user-info__preloader" />;
+  }
+
+  return <div>{comments.map(comment => <Comment data={comment} mods={{ level: 0, view: 'user' }} />)}</div>;
+};
+
+export default LastCommentsList;

web/app/components/user-info/user-info.jsx

@@ -4,10 +4,9 @@ import { h, Component } from 'preact';
 import api from 'common/api';
 import { getHandleClickProps } from 'common/accessibility';
 
-import Comment from 'components/comment';
-import Preloader from 'components/preloader';
+import LastCommentsList from './last-comments-list';
 
-export default class UserInfo extends Component {
+class UserInfo extends Component {
   constructor(props) {
     super(props);
 
@@ -39,18 +38,14 @@ export default class UserInfo extends Component {
         <p className="user-info__title">Last comments by {name}</p>
         <p className="user-info__id">{id}</p>
 
-        {isLoading && <Preloader mix="user-info__preloader" />}
+        <LastCommentsList isLoading={isLoading} comments={comments} />
 
-        {!isLoading && (
-          <div>{comments.map(comment => <Comment data={comment} mods={{ level: 0, view: 'user' }} />)}</div>
-        )}
-
-        <div>
-          <span {...getHandleClickProps(onClose)} className="user-info__close">
-            Close
-          </span>
-        </div>
+        <span {...getHandleClickProps(onClose)} className="user-info__close">
+          Close
+        </span>
       </div>
     );
   }
 }
+
+export default UserInfo;