Re-engineer UI in TypeScript (#89)

* Re-engineer UI in TypeScript
* Switch to named imports where possible
* Restructure file system layout
* Update depencencies
* Update README.md
* Change explicit colors for better support for dark theme

interface/src/components/RestFormLoader.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { Button, LinearProgress, Typography } from '@material-ui/core';
+import { RestControllerProps } from './RestController';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    loadingSettings: {
+      margin: theme.spacing(0.5),
+    },
+    loadingSettingsDetails: {
+      margin: theme.spacing(4),
+      textAlign: "center"
+    },
+    button: {
+      marginRight: theme.spacing(2),
+      marginTop: theme.spacing(2),
+    }
+  })
+);
+
+export type RestFormProps<D> = Omit<RestControllerProps<D>, "loading" | "errorMessage"> & { data: D };
+
+interface RestFormLoaderProps<D> extends RestControllerProps<D> {
+  render: (props: RestFormProps<D>) => JSX.Element;
+}
+
+export default function RestFormLoader<D>(props: RestFormLoaderProps<D>) {
+  const { loading, errorMessage, loadData, render, data, ...rest } = props;
+  const classes = useStyles();
+  if (loading || !data) {
+    return (
+      <div className={classes.loadingSettings}>
+        <LinearProgress className={classes.loadingSettingsDetails} />
+        <Typography variant="h6" className={classes.loadingSettingsDetails}>
+          Loading...
+        </Typography>
+      </div>
+    );
+  }
+  if (errorMessage) {
+    return (
+      <div className={classes.loadingSettings}>
+        <Typography variant="h6" className={classes.loadingSettingsDetails}>
+          {errorMessage}
+        </Typography>
+        <Button variant="contained" color="secondary" className={classes.button} onClick={loadData}>
+          Reset
+        </Button>
+      </div>
+    );
+  }
+  return render({ ...rest, loadData, data });
+}