import { finished } from "stream";

import React, {Component, useEffect } from 'react'
import {fetchSingleEmployee} from "../redux/actions";
import {connect, useDispatch, useSelector} from 'react-redux'


const EmployeePage = props => {
    const {employee, isFetching} = this.props;
    return (
        <div>
            {
                isFetching ? (
                    <span>Loading...</span>

                ) : (
                    <div>
                        <h2>{employee.first_name} {employee.hasMeet}</h2>
                    </div>
                )
            }
        </div>
    )
}

const ConnectedEmployeePage = props => {
    const { match: { params: id }} = props;
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(fetchSingleEmployee(id))
    }, [id])

    const employee = useSelector(state => state.employees.find(employee => employee.id === id))
    const isFetching = useSelector(state => state.isFetchingEmployees)

    return <EmployeePage employee={employee} isFetching={}/>
}