Migrate Select to SelectField

3 files changed, 73 insertions, 99 deletions

diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js
index 45eba3fa..d4b83e6e 100644
--- a/modern/src/DevicePage.js
+++ b/modern/src/DevicePage.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, FormControlLabel, Checkbox } from '@material-ui/core';
+import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { useEffectAsync } from './reactHelper';
 import EditAttributesView from './attributes/EditAttributesView';
 import deviceAttributes from './attributes/deviceAttributes';
+import SelectField from './form/SelectField';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -43,14 +43,6 @@ const DevicePage = () => {
   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 (
     <EditItemView endpoint="devices" item={item} setItem={setItem}>
@@ -84,20 +76,13 @@ const DevicePage = () => {
               </Typography>
             </AccordionSummary>
             <AccordionDetails className={classes.details}>
-              {groups &&
-                <FormControl margin="normal" variant="filled">
-                  <InputLabel>{t('groupParent')}</InputLabel>
-                  <Select
-                    native
-                    defaultValue={item.groupId}
-                    onChange={event => setItem({...item, groupId: Number(event.target.value)})}>
-                    <option value={0}></option>
-                    {groups.map(group => (
-                      <option key={group.id} value={group.id}>{group.name}</option>
-                    ))}
-                  </Select>
-                </FormControl>
-              }
+              <SelectField
+                margin="normal"
+                defaultValue={item.groupId}
+                onChange={event => setItem({...item, groupId: Number(event.target.value)})}
+                endpoint="/api/groups"
+                label={t('groupParent')}
+                variant="filled" />
               <TextField
                 margin="normal"
                 defaultValue={item.phone}
@@ -116,17 +101,16 @@ const DevicePage = () => {
                 onChange={event => setItem({...item, contact: event.target.value})}
                 label={t('deviceContact')}
                 variant="filled" />
-              <FormControl margin="normal" variant="filled">
-                <InputLabel>{t('deviceCategory')}</InputLabel>
-                <Select
-                  native
-                  defaultValue={item.category}
-                  onChange={event => setItem({...item, category: event.target.value})}>
-                  {deviceCategories.map(category => (
-                    <option key={category} value={category}>{t(`category${category.replace(/^\w/, c => c.toUpperCase())}`)}</option>
-                  ))}
-                </Select>
-              </FormControl>
+              <SelectField
+                margin="normal"
+                defaultValue={item.category}
+                onChange={event => setItem({...item, category: event.target.value})}
+                data={deviceCategories.map(category => ({
+                  id: category,
+                  name: t(`category${category.replace(/^\w/, c => c.toUpperCase())}`)
+                }))}
+                label={t('deviceCategory')}
+                variant="filled" />
               <FormControlLabel
                 control={<Checkbox checked={item.disabled} onChange={event => setItem({...item, disabled: event.target.checked})} />}
                 label={t('sharedDisabled')} />
diff --git a/modern/src/form/SelectField.js b/modern/src/form/SelectField.js
index 78a16887..fa51a366 100644
--- a/modern/src/form/SelectField.js
+++ b/modern/src/form/SelectField.js
@@ -1,14 +1,27 @@
-import { FormControl, InputLabel, Select } from '@material-ui/core';
+import { FormControl, InputLabel, MenuItem, 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();
+const SelectField = ({
+  margin,
+  variant,
+  label,
+  multiple,
+  defaultValue,
+  onChange,
+  endpoint,
+  data,
+  keyGetter = item => item.id,
+  titleGetter = item => item.name,
+}) => {
+  const [items, setItems] = useState(data);
 
   useEffectAsync(async () => {
-    const response = await fetch(endpoint);
-    if (response.ok) {
-      setItems(await response.json());
+    if (endpoint) {
+      const response = await fetch(endpoint);
+      if (response.ok) {
+        setItems(await response.json());
+      }
     }
   }, []);
 
@@ -17,12 +30,14 @@ const SelectField = ({ margin, variant, label, defaultValue, onChange, endpoint
       <FormControl margin={margin} variant={variant}>
         <InputLabel>{label}</InputLabel>
         <Select
-          native
+          multiple={multiple}
           defaultValue={defaultValue}
           onChange={onChange}>
-          <option value={0}></option>
+          {!multiple &&
+            <MenuItem value={0}>&nbsp;</MenuItem>
+          }
           {items.map(item => (
-            <option key={item.id} value={item.id}>{item.name}</option>
+            <MenuItem key={keyGetter(item)} value={keyGetter(item)}>{titleGetter(item)}</MenuItem>
           ))}
         </Select>
       </FormControl>
diff --git a/modern/src/settings/NotificationPage.js b/modern/src/settings/NotificationPage.js
index 5a772d0c..2cf8a62f 100644
--- a/modern/src/settings/NotificationPage.js
+++ b/modern/src/settings/NotificationPage.js
@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 
 import t, { findStringKeys } from '../common/localization';
 import EditItemView from '../EditItemView';
-import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { useEffectAsync } from '../reactHelper';
 import { prefixString, unprefixString } from '../common/stringUtils';
+import SelectField from '../form/SelectField';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -17,28 +17,12 @@ const NotificationPage = () => {
   const classes = useStyles();
 
   const [item, setItem] = useState();
-  const [types, setTypes] = useState();
-  const [notificators, setNotificators] = useState();
 
   const alarms = findStringKeys(it => it.startsWith('alarm')).map(it => ({
     key: unprefixString('alarm', it),
     name: t(it),
   }));
 
-  useEffectAsync(async () => {
-    const response = await fetch('/api/notifications/types');
-    if (response.ok) {
-      setTypes(await response.json());
-    }
-  }, []);
-
-  useEffectAsync(async () => {
-    const response = await fetch('/api/notifications/notificators');
-    if (response.ok) {
-      setNotificators(await response.json());
-    }
-  }, []);
-
   return (
     <EditItemView endpoint="notifications" item={item} setItem={setItem}>
       {item &&
@@ -50,44 +34,35 @@ const NotificationPage = () => {
               </Typography>
             </AccordionSummary>
             <AccordionDetails className={classes.details}>
-              {types &&
-                <FormControl margin="normal" variant="filled">
-                  <InputLabel>{t('sharedType')}</InputLabel>
-                  <Select
-                    native
-                    defaultValue={item.type}
-                    onChange={e => setItem({...item, type: e.target.value})}>
-                    {types.map(it => (
-                      <option key={it.type} value={it.type}>{t(prefixString('event', it.type))}</option>
-                    ))}
-                  </Select>
-                </FormControl>
-              }
-              {notificators &&
-                <FormControl margin="normal" variant="filled">
-                  <InputLabel>{t('notificationNotificators')}</InputLabel>
-                  <Select
-                    multiple
-                    defaultValue={item.notificators ? item.notificators.split(/[, ]+/) : []}
-                    onChange={e => setItem({...item, notificators: e.target.value.join()})}>
-                    {notificators.map(it => (
-                      <MenuItem key={it.type} value={it.type}>{t(prefixString('notificator', it.type))}</MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              }
+              <SelectField
+                margin="normal"
+                defaultValue={item.type}
+                onChange={e => setItem({...item, type: e.target.value})}
+                endpoint="/api/notifications/types"
+                keyGetter={it => it.type}
+                titleGetter={it => t(prefixString('event', it.type))}
+                label={t('sharedType')}
+                variant="filled" />
+              <SelectField
+                multiple
+                margin="normal"
+                defaultValue={item.notificators ? item.notificators.split(/[, ]+/) : []}
+                onChange={e => setItem({...item, notificators: e.target.value.join()})}
+                endpoint="/api/notifications/notificators"
+                keyGetter={it => it.type}
+                titleGetter={it => t(prefixString('notificator', it.type))}
+                label={t('notificationNotificators')}
+                variant="filled" />
               {item.type === 'alarm' &&
-                <FormControl margin="normal" variant="filled">
-                  <InputLabel>{t('sharedAlarms')}</InputLabel>
-                  <Select
-                    multiple
-                    defaultValue={item.attributes && item.attributes.alarms ? item.attributes.alarms.split(/[, ]+/) : []}
-                    onChange={e => setItem({...item, attributes: {...item.attributes, alarms: e.target.value.join()}})}>
-                    {alarms.map(it => (
-                      <MenuItem key={it.key} value={it.key}>{it.name}</MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
+                <SelectField
+                  multiple
+                  margin="normal"
+                  defaultValue={item.attributes && item.attributes.alarms ? item.attributes.alarms.split(/[, ]+/) : []}
+                  onChange={e => setItem({...item, attributes: {...item.attributes, alarms: e.target.value.join()}})}
+                  data={alarms}
+                  keyGetter={it => it.key}
+                  label={t('sharedAlarms')}
+                  variant="filled" />
               }
               <FormControlLabel
                 control={