refactor: use Context in the SelectedAnvil component

main
Josue 4 years ago committed by Tsu-ba-me
parent ed79116296
commit a5ba0a7c50
  1. 48
      striker-ui/components/Anvils/SelectedAnvil.tsx

@ -1,10 +1,11 @@
import { useState } from 'react'; import { useState, useContext } from 'react';
import { Switch, Box } from '@material-ui/core'; import { Switch, Box } from '@material-ui/core';
import { ClassNameMap } from '@material-ui/styles'; import { ClassNameMap } from '@material-ui/styles';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
import { HeaderText } from '../Text'; import { HeaderText } from '../Text';
import { BLUE, PURPLE_OFF, RED_ON } from '../../lib/consts/DEFAULT_THEME'; import { BLUE, PURPLE_OFF, RED_ON } from '../../lib/consts/DEFAULT_THEME';
import anvilState from './CONSTS'; import anvilState from './CONSTS';
import { AnvilContext } from '../AnvilContext';
const useStyles = makeStyles(() => ({ const useStyles = makeStyles(() => ({
root: { root: {
@ -47,28 +48,39 @@ const selectDecorator = (
} }
}; };
const SelectedAnvil = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => { const SelectedAnvil = ({ list }: { list: AnvilListItem[] }): JSX.Element => {
const { uuid } = useContext(AnvilContext);
const classes = useStyles(); const classes = useStyles();
const [checked, setChecked] = useState<boolean>(true); const [checked, setChecked] = useState<boolean>(true);
const index = list.findIndex(
(anvil: AnvilListItem) => anvil.anvil_uuid === uuid,
);
return ( return (
<Box display="flex" flexDirection="row" width="100%"> <Box display="flex" flexDirection="row" width="100%">
<Box p={1}> {uuid !== '' && (
<div <>
className={`${classes.decorator} ${ <Box p={1}>
classes[selectDecorator(anvil.anvil_state)] <div
}`} className={`${classes.decorator} ${
/> classes[selectDecorator(list[index].anvil_state)]
</Box> }`}
<Box p={1} flexGrow={1} className={classes.anvilName}> />
<HeaderText text={anvil?.anvil_name} /> </Box>
<HeaderText <Box p={1} flexGrow={1} className={classes.anvilName}>
text={anvilState.get(anvil.anvil_state) || 'State unavailable'} <HeaderText text={list[index].anvil_name} />
/> <HeaderText
</Box> text={
<Box p={1}> anvilState.get(list[index].anvil_state) || 'State unavailable'
<Switch checked={checked} onChange={() => setChecked(!checked)} /> }
</Box> />
</Box>
<Box p={1}>
<Switch checked={checked} onChange={() => setChecked(!checked)} />
</Box>
</>
)}
</Box> </Box>
); );
}; };

Loading…
Cancel
Save