Port to typescript

webUI/react/src/App.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import {
+    BrowserRouter as Router,
+    Switch,
+    Route,
+} from 'react-router-dom';
+import Button from '@material-ui/core/Button';
+import NavBar from './components/NavBar';
+import ExtensionCard from './components/ExtensionCard';
+
+function Extensions() {
+    let mapped;
+    const [extensions, setExtensions] = useState<IExtension[]>([]);
+
+    if (extensions.length === 0) {
+        mapped = <h3>wait</h3>;
+        fetch('http://127.0.0.1:4567/api/v1/extensions')
+            .then((response) => response.json())
+            .then((data) => setExtensions(data));
+    } else {
+        mapped = extensions.map((it) => <ExtensionCard extension={it} />);
+    }
+
+    return <h2>{mapped}</h2>;
+}
+
+function Home() {
+    return (
+        <Button variant="contained" color="primary">
+            Hello World
+        </Button>
+    );
+}
+
+function Users() {
+    return <h2>Users</h2>;
+}
+
+export default function App() {
+    return (
+        <Router>
+            {/* <TemporaryDrawer/> */}
+            <NavBar />
+
+            <Switch>
+                <Route path="/extensions">
+                    <Extensions />
+                </Route>
+                <Route path="/users">
+                    <Users />
+                </Route>
+                <Route path="/">
+                    <Home />
+                </Route>
+            </Switch>
+        </Router>
+    );
+}