add demo project implementation

interface/src/components/LoadingNotification.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import LinearProgress from '@material-ui/core/LinearProgress';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles(theme => ({
+  loadingSettings: {
+    margin: theme.spacing(0.5),
+  },
+  loadingSettingsDetails: {
+    margin: theme.spacing(4),
+    textAlign: "center"
+  },
+  button: {
+    marginRight: theme.spacing(2),
+    marginTop: theme.spacing(2),
+  }
+}));
+
+export default function LoadingNotification(props) {
+  const classes = useStyles();
+  const { fetched, errorMessage, onReset, children } = props;
+  return (
+    <div>
+      {
+        fetched ?
+          errorMessage ?
+            <div className={classes.loadingSettings}>
+              <Typography variant="h4" className={classes.loadingSettingsDetails}>
+                {errorMessage}
+              </Typography>
+              <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
+                Reset
+              </Button>
+            </div>
+            :
+            children
+          :
+          <div className={classes.loadingSettings}>
+            <LinearProgress className={classes.loadingSettingsDetails} />
+            <Typography variant="h4" className={classes.loadingSettingsDetails}>
+              Loading...
+            </Typography>
+          </div>
+      }
+    </div>
+  );
+}
+
+LoadingNotification.propTypes = {
+  fetched: PropTypes.bool.isRequired,
+  onReset: PropTypes.func.isRequired,
+  errorMessage: PropTypes.string
+};

interface/src/components/RestComponent.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { withSnackbar } from 'notistack';
 import { redirectingAuthorizedFetch } from '../authentication/Authentication';
+
 /*
 * It is unlikely this application will grow complex enough to require redux.
 *
@@ -86,9 +87,9 @@ export const restComponent = (endpointUrl, FormComponent) => {
           });
       }
 
-      handleValueChange = name => event => {
+      handleValueChange = name => (event, newValue) => {
         const { data } = this.state;
-        data[name] = event.target.value;
+        data[name] = newValue;
         this.setState({ data });
       };