Нормально ли написаны компоненты??

import React, { Component, Fragment } from "react";
import { connect } from "react-redux";

/**Components */
import InfiniteScroll from "react-infinite-scroll-component";
import { BeatLoader } from "react-spinners";
import User from "./User";

/**Actions */
import { getListOfUsers, clearData, setUserChat } from "../../../actions";

/**Configs, Utils */

/**Material UI */

class UserList extends Component {
  state = {
    per_page: 15
  };

  componentDidMount() {
    this.getChatsUser();
  }

  /**Called when we change chat type (all, unread, read etc.) */
  componentDidUpdate(prevProps) {
    const { clearData } = this.props;
    if (prevProps.params !== this.props.params) {
      clearData();
      this.getChatsUser();
    }
  }

  fetchMoreData = () => {
    this.getChatsUser();
  };

  /**
   * Get query of params from props and called api action for getting users.
   * When fetchMoreData is called, we should increase per_page and
   * override userData at reducer (getListOfUsers action)
   */
  getChatsUser = () => {
    const { getListOfUsers, params } = this.props;
    const { per_page } = this.state;
    const query = Object.assign({}, params, { per_page });
    getListOfUsers(query).then(() => {
      this.setState({
        per_page: this.state.per_page + 5
      });
    });
  };

  render() {
    const {
      chatReducer: { userData },
      setUserChat
    } = this.props;
    return (
      <Fragment>
        <InfiniteScroll
          dataLength={userData.length}
          next={this.fetchMoreData}
          hasMore={true}
          height={520}
          loader={
            <BeatLoader
              className="chat-loader"
              sizeUnit="px"
              size={12}
              color="#123abc"
            />
          }
          endMessage={
            <p style={{ textAlign: "center" }}>
              <b>Yay! You have seen it all</b>
            </p>
          }
        >
          {userData.map((row, index) => (
            <User setUserForChat={setUserChat} key={row.id} userData={row} />
          ))}
        </InfiniteScroll>
      </Fragment>
    );
  }
}

const mapDispatchToProps = {
  getListOfUsers,
  clearData,
  setUserChat
};

const mapStateToProps = (state) => ({
  chatReducer: state.chatReducer
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(UserList);

import React from "react";
import moment from "moment";

class User extends React.Component {
  formatTime = (data) => {
    if (data) {
      const started = moment.unix(data).format("HH:mm MM/DD/YYYY");
      const finished = moment().format("HH:mm MM/DD/YYYY");
      let minutes = moment(finished).diff(moment(started), "minutes");
      const days = moment(finished).diff(moment(started), "days");
      const hours = Math.floor(minutes / 60);
      minutes %= 60;
      if (days > 0) {
        return moment.unix(data).format("MM/DD/YYYY");
      }
      if (hours > 0) {
        return `${hours}h`;
      }
      return `${minutes}m`;
    }
  };

  render() {
    const {
      userData,
      userData: { user_id, message_created_at, message, unread_amount },
      setUserForChat
    } = this.props;
    return (
      <div
        className="user-data-container"
        onClick={() => setUserForChat(userData)}
      >
        <div className="user-cell-container">
          <div className="user-id-container">User # {user_id}</div>
          <div className="message-time-container">
            {this.formatTime(message_created_at)}
          </div>
        </div>
        <div className="user-cell-container">
          <div className="last-message-container">
            {message || "No messages"}
          </div>
          {unread_amount > 0 ? (
            <div className="unread-message-container">{unread_amount}</div>
          ) : (
            ""
          )}
        </div>
      </div>
    );
  }
}

export default User;