import * as React from "react";
import { connect } from "react-redux";
import { compose } from "recompose";

import { db } from "../../firebase";
import { withAuthorization } from "../Session/withAuthorization";
import { UserList } from "./UserList";

class HomeComponent extends React.Component {
  componentDidMount() {
    const { onSetUsers }: any = this.props;

    db.onceGetUsers().then(snapshot => onSetUsers(snapshot.val()));
  }

  render() {
    const { users }: any = this.props;

    return (
      <div>
        <h1>Home</h1>
        <p>The Home Page is accessible by every signed in user.</p>

        {!!users && <UserList users={users} />}
      </div>
    );
  }
}

const mapStateToProps = (state: any) => ({
  users: state.userState.users
});

const mapDispatchToProps = (dispatch: any) => ({
  onSetUsers: (users: any) => dispatch({ type: "USERS_SET", users })
});

const authCondition = (authUser: any) => !!authUser;

export const Home = compose(
  withAuthorization(authCondition),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(HomeComponent);