tudor.stanciu
/
network-resurrector-frontend
mirror of https://dev.azure.com/tstanciu94/NetworkResurrector/_git/NetworkResurrector_Frontend
1
0
Fork 0
Code Issues 2 Packages Projects Releases Wiki Activity

handleReadMachines

master
Tudor Stanciu 2021-04-16 02:22:24 +03:00
parent 13ab8266c9
commit e966a54833
3 changed files with 39 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/features/network/components/MachinesList.js
View File

@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import Accordion from "@material-ui/core/Accordion"; import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary"; import AccordionSummary from "@material-ui/core/AccordionSummary";
@ -7,63 +8,40 @@ import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
root: {
width: "100%"
},
heading: { heading: {
fontSize: theme.typography.pxToRem(15), fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular fontWeight: theme.typography.fontWeightRegular
} }
})); }));
const MachinesList = () => { const MachinesList = ({ machines }) => {
const classes = useStyles(); const classes = useStyles();
return ( return (
<div className={classes.root}> <div>
<Accordion> {machines.map(m => (
<AccordionSummary <Accordion key={`machine-${m.machineId}`}>
expandIcon={<ExpandMoreIcon />} <AccordionSummary
aria-controls="panel1a-content" expandIcon={<ExpandMoreIcon />}
id="panel1a-header" id={`machine-${m.machineId}-summary`}
> >
<Typography className={classes.heading}>Accordion 1</Typography> <Typography className={classes.heading}>{m.machineName}</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<Typography> <Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse Lorem ipsum dolor sit amet, consectetur adipiscing elit.
malesuada lacus ex, sit amet blandit leo lobortis eget. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
</Typography> eget.
</AccordionDetails> </Typography>
</Accordion> </AccordionDetails>
<Accordion> </Accordion>
<AccordionSummary ))}
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2a-content"
id="panel2a-header"
>
<Typography className={classes.heading}>Accordion 2</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion disabled>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel3a-content"
id="panel3a-header"
>
<Typography className={classes.heading}>
Disabled Accordion
</Typography>
</AccordionSummary>
</Accordion>
</div> </div>
); );
}; };
MachinesList.propTypes = {
machines: PropTypes.array.isRequired
};
export default MachinesList; export default MachinesList;

10
src/features/network/components/NetworkComponent.js
View File

@ -7,20 +7,22 @@ import styles from "../styles";
const useStyles = makeStyles(styles); const useStyles = makeStyles(styles);
const NetworkComponent = ({ network, onPropertyChange, onReadMachines }) => { const NetworkComponent = ({ network, onPropertyChange }) => {
const classes = useStyles(); const classes = useStyles();
return ( return (
<div className={classes.root}> <div className={classes.root}>
<div>NetworkContainer</div> <MachinesList machines={network.machines} />
<MachinesList /> <br />
<TextField <TextField
id="ertet" id="ertet"
label="Test" label="Test"
onChange={onPropertyChange("test")} onChange={onPropertyChange("test")}
value={network.test} value={network.test}
/> />
<Button variant="contained" color="primary" onClick={onReadMachines}> <br />
<br />
<Button variant="contained" color="primary">
Read machines Read machines
</Button> </Button>
</div> </div>

17
src/features/network/components/NetworkContainer.js
View File

@ -1,4 +1,4 @@
import React, { useContext } from "react"; import React, { useContext, useEffect, useCallback } from "react";
import { import {
ApplicationStateContext, ApplicationStateContext,
ApplicationDispatchContext ApplicationDispatchContext
@ -14,17 +14,18 @@ const NetworkContainer = () => {
dispatchActions.onNetworkChange(prop, event.target.value); dispatchActions.onNetworkChange(prop, event.target.value);
}; };
const handleReadMachines = async () => { const handleReadMachines = useCallback(async () => {
alert("rad");
const machines = await readMachines(); const machines = await readMachines();
dispatchActions.onNetworkChange("machines", machines); dispatchActions.onNetworkChange("machines", machines);
}; }, [dispatchActions]);
useEffect(() => {
handleReadMachines();
}, [handleReadMachines]);
return ( return (
<NetworkComponent <NetworkComponent network={state.network} onPropertyChange={handleChange} />
network={state.network}
onPropertyChange={handleChange}
onReadMachines={handleReadMachines}
/>
); );
}; };