From fe677d404bbb78dd9e9a39c189f5d7b883c11a1d Mon Sep 17 00:00:00 2001 From: Kai Vogelgesang Date: Sat, 1 Jan 2022 23:01:01 +0100 Subject: [PATCH] Add react-router, Implement Token context --- frontend/package-lock.json | 107 +++++++++++++++++++++++++++++++++ frontend/package.json | 2 + frontend/src/App.tsx | 8 ++- frontend/src/Login.tsx | 25 ++++++++ frontend/src/MainView.tsx | 14 +++++ frontend/src/pages/Index.tsx | 14 +++++ frontend/src/pages/Page404.tsx | 5 ++ frontend/src/proto.ts | 9 +++ frontend/src/tokenStorage.tsx | 39 ++++++++++++ 9 files changed, 220 insertions(+), 3 deletions(-) create mode 100644 frontend/src/Login.tsx create mode 100644 frontend/src/MainView.tsx create mode 100644 frontend/src/pages/Index.tsx create mode 100644 frontend/src/pages/Page404.tsx create mode 100644 frontend/src/proto.ts create mode 100644 frontend/src/tokenStorage.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index b40c0cb..5952c04 100644 --- a/frontend/package-lock.json +++ b/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", diff --git a/frontend/package.json b/frontend/package.json index 1b6c0f8..8c32a51 100644 --- a/frontend/package.json +++ b/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" diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 9046169..3494cbe 100644 --- a/frontend/src/App.tsx +++ b/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
- Hallo i bims 1 frontend -
+ return + + } export default App; diff --git a/frontend/src/Login.tsx b/frontend/src/Login.tsx new file mode 100644 index 0000000..71d7699 --- /dev/null +++ b/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 <> +

gib token

+
{ + e.preventDefault(); + tokenStorage.set(inputState); + }}> + setInputState(e.target.value)}> + + +
+ +} + +export default Login; \ No newline at end of file diff --git a/frontend/src/MainView.tsx b/frontend/src/MainView.tsx new file mode 100644 index 0000000..67900a0 --- /dev/null +++ b/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 + + } /> + } /> + + +} + +export default MainView; \ No newline at end of file diff --git a/frontend/src/pages/Index.tsx b/frontend/src/pages/Index.tsx new file mode 100644 index 0000000..f0ae1e7 --- /dev/null +++ b/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} + + +} + +export default Index; \ No newline at end of file diff --git a/frontend/src/pages/Page404.tsx b/frontend/src/pages/Page404.tsx new file mode 100644 index 0000000..2b53b6b --- /dev/null +++ b/frontend/src/pages/Page404.tsx @@ -0,0 +1,5 @@ +const Page404: React.FC = () => { + return

404

; +}; + +export default Page404; \ No newline at end of file diff --git a/frontend/src/proto.ts b/frontend/src/proto.ts new file mode 100644 index 0000000..8dd2c7d --- /dev/null +++ b/frontend/src/proto.ts @@ -0,0 +1,9 @@ +export type Computer = { + uuid: string, + label: string, + group: string, +} + +export type State = { + computers: Array +}; \ No newline at end of file diff --git a/frontend/src/tokenStorage.tsx b/frontend/src/tokenStorage.tsx new file mode 100644 index 0000000..3b2fac1 --- /dev/null +++ b/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({ + token: null, + set: () => { }, + reset: () => { }, +}); + +export const TokenProvider: React.FC = (props) => { + const [token, setToken] = useState(localStorage.getItem(LOCAL_STORAGE_KEY)); + + return { + localStorage.setItem(LOCAL_STORAGE_KEY, newToken); + setToken(newToken); + }, + reset: () => { + localStorage.removeItem(LOCAL_STORAGE_KEY); + setToken(null); + } + }}> + { + token + ? props.children + : + } + +} \ No newline at end of file