import React, { useContext, useEffect, useCallback } from "react";
import {
  ApplicationStateContext,
  ApplicationDispatchContext
} from "../../../state/ApplicationContexts";
import useApi from "../../../api";
import MachinesList from "./MachinesList";

const MachinesContainer = () => {
  const state = useContext(ApplicationStateContext);
  const dispatchActions = useContext(ApplicationDispatchContext);

  const api = useApi();

  const handleReadMachines = useCallback(async () => {
    await api.readMachines({
      onCompleted: machines => {
        const data = Object.assign(machines, { loaded: true });
        dispatchActions.onNetworkChange("machines", data);
      }
    });
  }, [dispatchActions, api]);

  useEffect(() => {
    if (!state.network.machines.loaded) {
      handleReadMachines();
    }
  }, [handleReadMachines, state.network.machines.loaded]);

  return <MachinesList dense={true} machines={state.network.machines} />;
};

export default MachinesContainer;