network-resurrector-frontend/src/features/machines/components/MachinesContainer.js

56 lines
1.5 KiB
JavaScript

import React, { useContext, useEffect, useCallback, useState } from "react";
import {
NetworkStateContext,
NetworkDispatchContext
} from "../../network/state/contexts";
import MachinesListComponent from "./MachinesListComponent";
import PageTitle from "../../../components/common/PageTitle";
import { useTranslation } from "react-i18next";
import ViewModeSelection, { ViewModes } from "./ViewModeSelection";
import { routes, get } from "../../../utils/api";
const MachinesContainer = () => {
const [viewMode, setViewMode] = useState(null);
const state = useContext(NetworkStateContext);
const dispatchActions = useContext(NetworkDispatchContext);
const { t } = useTranslation();
const handleReadMachines = useCallback(async () => {
await get(routes.machines, {
onCompleted: machines => {
const data = Object.assign(machines, { loaded: true });
dispatchActions.onNetworkChange("machines", data);
}
});
}, [dispatchActions]);
useEffect(() => {
if (!state.network.machines.loaded) {
handleReadMachines();
}
}, [handleReadMachines, state.network.machines.loaded]);
return (
<>
<PageTitle
text={t("Menu.Machines")}
toolBar={
<ViewModeSelection
callback={setViewMode}
initialMode={ViewModes.TABLE}
/>
}
/>
{viewMode && (
<MachinesListComponent
machines={state.network.machines}
viewMode={viewMode}
/>
)}
</>
);
};
export default MachinesContainer;