Add react-router, Implement Token context

frontend/package-lock.json

@@ -15,8 +15,10 @@
         "@types/node": "^16.11.17",
         "@types/react": "^17.0.38",
         "@types/react-dom": "^17.0.11",
+        "@types/react-router-dom": "^5.3.2",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-router-dom": "^6.2.1",
         "react-scripts": "5.0.0",
         "typescript": "^4.5.4",
         "web-vitals": "^2.1.2"
@@ -3356,6 +3358,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/history": {
+      "version": "4.7.9",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz",
+      "integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ=="
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -3467,6 +3474,25 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-router": {
+      "version": "5.1.17",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.17.tgz",
+      "integrity": "sha512-RNSXOyb3VyRs/EOGmjBhhGKTbnN6fHWvy5FNLzWfOWOGjgVUKqJZXfpKzLmgoU8h6Hj8mpALj/mbXQASOb92wQ==",
+      "dependencies": {
+        "@types/history": "*",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.2.tgz",
+      "integrity": "sha512-ELEYRUie2czuJzaZ5+ziIp9Hhw+juEw8b7C11YNA4QdLCVbQ3qLi2l4aq8XnlqM7V31LZX8dxUuFUCrzHm6sqQ==",
+      "dependencies": {
+        "@types/history": "*",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -7905,6 +7931,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/history": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
+      "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -13228,6 +13262,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
+      "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
+      "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@@ -18384,6 +18442,11 @@
         "@types/node": "*"
       }
     },
+    "@types/history": {
+      "version": "4.7.9",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz",
+      "integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ=="
+    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -18495,6 +18558,25 @@
         "@types/react": "*"
       }
     },
+    "@types/react-router": {
+      "version": "5.1.17",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.17.tgz",
+      "integrity": "sha512-RNSXOyb3VyRs/EOGmjBhhGKTbnN6fHWvy5FNLzWfOWOGjgVUKqJZXfpKzLmgoU8h6Hj8mpALj/mbXQASOb92wQ==",
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router-dom": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.2.tgz",
+      "integrity": "sha512-ELEYRUie2czuJzaZ5+ziIp9Hhw+juEw8b7C11YNA4QdLCVbQ3qLi2l4aq8XnlqM7V31LZX8dxUuFUCrzHm6sqQ==",
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -21772,6 +21854,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
+      "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -25471,6 +25561,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
+      "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
+      "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.2.1"
+      }
+    },
     "react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",

frontend/package.json

@@ -11,8 +11,10 @@
     "@types/node": "^16.11.17",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
+    "@types/react-router-dom": "^5.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "typescript": "^4.5.4",
     "web-vitals": "^2.1.2"

frontend/src/App.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import MainView from './MainView';
+import { TokenProvider } from './tokenStorage';
 
 const App: React.FC = () => {
-  return <div>
+  return <TokenProvider>
-    Hallo i bims 1 frontend
+    <MainView />
-  </div>
+  </TokenProvider>
 }
 
 export default App;

frontend/src/Login.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+import { TokenContext } from "./tokenStorage";
+
+export const Login: React.FC = () => {
+
+    const [inputState, setInputState] = useState("");
+    const tokenStorage = React.useContext(TokenContext);
+
+    return <>
+        <h1>gib token</h1>
+        <form onSubmit={(e) => {
+            e.preventDefault();
+            tokenStorage.set(inputState);
+        }}>
+            <input
+                type="text"
+                value={inputState}
+                onChange={(e) => setInputState(e.target.value)}>
+            </input>
+            <button type="submit"> Submit </button>
+        </form>
+    </>
+}
+
+export default Login;

frontend/src/MainView.tsx

@@ -0,0 +1,14 @@
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Index from "./pages/Index";
+import Page404 from './pages/Page404';
+
+export const MainView: React.FC = () => {
+    return <Router>
+        <Routes>
+            <Route index element={<Index />} />
+            <Route path="*" element={<Page404 />} />
+        </Routes>
+    </Router >
+}
+
+export default MainView;

frontend/src/pages/Index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { TokenContext } from "../tokenStorage";
+
+export const Index: React.FC = () => {
+
+    const tokenStorage = React.useContext(TokenContext);
+
+    return <>
+        Hallo i bims 1 index u d1 token bimst {tokenStorage.token}
+        <button onClick={tokenStorage.reset}>Resetteroni</button>
+    </>
+}
+
+export default Index;

frontend/src/pages/Page404.tsx

@@ -0,0 +1,5 @@
+const Page404: React.FC = () => {
+    return <h1>404</h1>;
+};
+
+export default Page404;

frontend/src/proto.ts

@@ -0,0 +1,9 @@
+export type Computer = {
+    uuid: string,
+    label: string,
+    group: string,
+}
+
+export type State = {
+    computers: Array<Computer>
+};

frontend/src/tokenStorage.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import Login from "./Login";
+
+const LOCAL_STORAGE_KEY = "token";
+
+export type Token = string | null;
+export type TokenStorage = {
+    token: Token,
+    set: (newToken: string) => void,
+    reset: () => void,
+}
+
+export const TokenContext = React.createContext<TokenStorage>({
+    token: null,
+    set: () => { },
+    reset: () => { },
+});
+
+export const TokenProvider: React.FC = (props) => {
+    const [token, setToken] = useState<Token>(localStorage.getItem(LOCAL_STORAGE_KEY));
+
+    return <TokenContext.Provider value={{
+        token: token,
+        set: (newToken) => {
+            localStorage.setItem(LOCAL_STORAGE_KEY, newToken);
+            setToken(newToken);
+        },
+        reset: () => {
+            localStorage.removeItem(LOCAL_STORAGE_KEY);
+            setToken(null);
+        }
+    }}>
+        {
+            token
+            ? props.children
+            : <Login />
+        }
+    </TokenContext.Provider>
+}