From 230d7d277d0386101dfcf88d8fabed58e4adde3d Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Wed, 30 Sep 2020 22:17:42 -0700 Subject: Implement common select field component --- modern/src/form/SelectField.js | 35 +++++++++++++++++++++++++++++++++++ modern/src/settings/GroupPage.js | 33 +++++++++------------------------ 2 files changed, 44 insertions(+), 24 deletions(-) create mode 100644 modern/src/form/SelectField.js diff --git a/modern/src/form/SelectField.js b/modern/src/form/SelectField.js new file mode 100644 index 0000000..78a1688 --- /dev/null +++ b/modern/src/form/SelectField.js @@ -0,0 +1,35 @@ +import { FormControl, InputLabel, Select } from '@material-ui/core'; +import React, { useState } from 'react'; +import { useEffectAsync } from '../reactHelper'; + +const SelectField = ({ margin, variant, label, defaultValue, onChange, endpoint }) => { + const [items, setItems] = useState(); + + useEffectAsync(async () => { + const response = await fetch(endpoint); + if (response.ok) { + setItems(await response.json()); + } + }, []); + + if (items) { + return ( + + {label} + + + ); + } else { + return null; + } +} + +export default SelectField; diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js index 0dc61e5..b6a2859 100644 --- a/modern/src/settings/GroupPage.js +++ b/modern/src/settings/GroupPage.js @@ -3,11 +3,11 @@ import TextField from '@material-ui/core/TextField'; import t from '../common/localization'; import EditItemView from '../EditItemView'; -import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControl, InputLabel, Select } from '@material-ui/core'; +import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import EditAttributesView from '../attributes/EditAttributesView'; -import { useEffectAsync } from '../reactHelper'; import deviceAttributes from '../attributes/deviceAttributes'; +import SelectField from '../form/SelectField'; const useStyles = makeStyles(() => ({ details: { @@ -19,14 +19,6 @@ const GroupPage = () => { const classes = useStyles(); const [item, setItem] = useState(); - const [groups, setGroups] = useState(); - - useEffectAsync(async () => { - const response = await fetch('/api/groups'); - if (response.ok) { - setGroups(await response.json()); - } - }, []); return ( @@ -54,20 +46,13 @@ const GroupPage = () => { - {groups && - - {t('groupParent')} - - - } + setItem({...item, groupId: Number(event.target.value)})} + endpoint="/api/groups" + label={t('groupParent')} + variant="filled" /> -- cgit v1.2.3