import React, { useEffect } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import PropTypes from "prop-types";
import { loadSystemDateTime, loadSystemVersion } from "../actionCreators";
import ServerComponent from "./ServerComponent";
import ActiveSessionComponent from "./ActiveSessionComponent";

const ServerContainer = ({ actions }) => {
  useEffect(() => {
    actions.loadSystemDateTime();
    actions.loadSystemVersion();
  }, []);

  return (
    <>
      <ServerComponent />
      <br />
      <br />
      <ActiveSessionComponent />
    </>
  );
};

ServerContainer.propTypes = {
  actions: PropTypes.object.isRequired,
  server: PropTypes.object.isRequired
};

function mapStateToProps(state) {
  return {
    server: state.server
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(
      { loadSystemDateTime, loadSystemVersion },
      dispatch
    )
  };
}

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