Implement device editing

2 files changed, 62 insertions, 7 deletions

diff --git a/modern/src/App.js b/modern/src/App.js
index cc15ca59..7921a2c8 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -13,7 +13,7 @@ const App = () => {
       <Switch>
         <Route exact path='/' component={MainPage} />
         <Route exact path='/login' component={LoginPage} />
-        <Route exact path='/device' component={DevicePage} />
+        <Route exact path='/device/:id?' component={DevicePage} />
         <Route exact path='/reports/route' component={RouteReportPage} />
       </Switch>
     </>
diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js
index 24a06d19..c9362deb 100644
--- a/modern/src/DevicePage.js
+++ b/modern/src/DevicePage.js
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import MainToobar from './MainToolbar';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useParams } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import Container from '@material-ui/core/Container';
@@ -25,20 +25,75 @@ const useStyles = makeStyles(theme => ({
 const DevicePage = () => {
   const history = useHistory();
   const classes = useStyles();
+  const { id } = useParams();
+  const [device, setDevice] = useState();
+  const [name, setName] = useState('');
+  const [uniqueId, setUniqueId] = useState('');
+
+  useEffect(() => {
+    fetch(`/api/devices/${id}`).then(response => {
+      if (response.ok) {
+        response.json().then(setDevice);
+      }
+    });
+  }, [id]);
+
+  const handleSave = () => {
+    const updatedDevice = id ? device : {};
+    updatedDevice.name = name || updatedDevice.name;
+    updatedDevice.uniqueId = uniqueId || updatedDevice.uniqueId;
+
+    let request;
+    if (id) {
+      request = fetch(`/api/devices/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(updatedDevice),
+      });
+    } else {
+      request = fetch('/api/devices', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(updatedDevice),
+      });
+    }
+
+    request.then(response => {
+      if (response.ok) {
+        history.goBack();
+      }
+    });
+  }
 
   return (
     <>
       <MainToobar history={history} />
       <Container maxWidth='xs' className={classes.container}>
         <form>
-          <TextField margin="normal" fullWidth label={t('sharedName')} variant="filled" />
-          <TextField margin="normal" fullWidth label={t('deviceIdentifier')} variant="filled" />
+          {(!id || device) &&
+            <TextField
+              margin="normal"
+              fullWidth
+              defaultValue={device && device.name}
+              onChange={(event) => setName(event.target.value)}
+              label={t('sharedName')}
+              variant="filled" />
+          }
+          {(!id || device) &&
+            <TextField
+              margin="normal"
+              fullWidth
+              defaultValue={device && device.uniqueId}
+              onChange={(event) => setUniqueId(event.target.value)}
+              label={t('deviceIdentifier')}
+              variant="filled" />
+          }
           <FormControl fullWidth margin="normal">
             <div className={classes.buttons}>
-              <Button type="button" color="primary" variant="outlined">
+              <Button type="button" color="primary" variant="outlined" onClick={() => history.goBack()}>
                 {t('sharedCancel')}
               </Button>
-              <Button type="button" color="primary" variant="contained">
+              <Button type="button" color="primary" variant="contained" onClick={handleSave}>
                 {t('sharedSave')}
               </Button>
             </div>