Merge branch 'review' into feature/addUser

# Conflicts:
#	webapp_frontend/package-lock.json
#	webapp_frontend/package.json
#	webapp_frontend/src/components/App.tsx
#	webapp_frontend/src/components/Constants.tsx

Author: qvalentin

webapp_frontend/package.json

@@ -13,15 +13,18 @@
     "@types/react-bootstrap": "^0.32.24",
     "@types/react-dom": "^16.9.8",
     "@types/react-router-dom": "^5.1.6",
+    "@types/react-redux": "^7.1.11",
     "axios": "^0.20.0",
     "bootstrap": "^4.5.3",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-bootstrap": "^1.4.0",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
+    "react-redux": "^7.2.2",
     "react-scripts": "3.4.3",
     "react-toastify": "^6.1.0",
+    "redux": "^4.0.5",
     "typescript": "^3.8.3"
   },
   "scripts": {

webapp_frontend/src/background/constants.tsx

@@ -1,4 +1,3 @@
-
 interface constants {
     url: { API_URL: string }
 }

webapp_frontend/src/background/redux/actions/sytemState.tsx

@@ -0,0 +1,5 @@
+import {TokensState} from "./tokenTypes";
+
+export interface SystemState {
+    tokens: TokensState
+}

webapp_frontend/src/background/redux/actions/tokenTypes.tsx

@@ -0,0 +1,28 @@
+export const ADD_REFRESH_TOKEN = "ADD_REFRESH_TOKEN";
+export const ADD_ACCESS_TOKEN = "ADD_ACCESS_TOKEN";
+
+
+export interface AccessToken{
+    token: string | null;
+    timestamp: number | null;
+}
+
+
+export interface TokensState {
+    refreshToken: string | null;
+    accessToken: AccessToken | null;
+}
+
+
+interface AddRefreshToken {
+    type: typeof ADD_REFRESH_TOKEN
+    payload: string
+}
+
+interface AddAccessToken {
+    type: typeof ADD_ACCESS_TOKEN
+    payload: AccessToken
+}
+
+export type TokenActionsTypes = AddRefreshToken | AddAccessToken;
+

webapp_frontend/src/background/redux/actions/tokens.tsx

@@ -0,0 +1,12 @@
+import {ADD_REFRESH_TOKEN, ADD_ACCESS_TOKEN, AccessToken} from "./tokenTypes";
+
+
+export const addRefreshToken = (content: string) => ({
+    type: ADD_REFRESH_TOKEN,
+    payload: content
+});
+
+export const addAccessToken = (content: AccessToken) => ({
+    type: ADD_ACCESS_TOKEN,
+    payload: content
+});

webapp_frontend/src/background/redux/reducers/index.tsx

@@ -0,0 +1,5 @@
+import {combineReducers} from "redux";
+import tokens from "./tokens";
+
+// this combines all the stores from the reducers
+export default combineReducers({tokens});

webapp_frontend/src/background/redux/reducers/tokens.tsx

@@ -0,0 +1,27 @@
+import {ADD_REFRESH_TOKEN, ADD_ACCESS_TOKEN, TokenActionsTypes, TokensState, AccessToken} from "../actions/tokenTypes";
+
+const initialState: TokensState = {
+    refreshToken: null,
+    accessToken: null,
+};
+
+export default function (state = initialState, action: TokenActionsTypes) {
+    switch (action.type) {
+        case ADD_REFRESH_TOKEN: {
+            const refreshToken: string = action.payload;
+            return {
+                refreshToken: refreshToken,
+                accessToken: initialState.accessToken
+            };
+        }
+        case ADD_ACCESS_TOKEN: {
+            const accessToken: AccessToken = action.payload;
+            return {
+                refreshToken: initialState.refreshToken,
+                accessToken: accessToken
+            };
+        }
+        default:
+            return state;
+    }
+}

webapp_frontend/src/background/redux/store.tsx

@@ -0,0 +1,4 @@
+import { createStore } from "redux";
+import rootReducer from "./reducers";
+
+export default createStore(rootReducer);

webapp_frontend/src/components/App.tsx

@@ -8,6 +8,35 @@ import Router from "./Router/Router";
 import PermanentAssets from "./basicElements/PermanentAssets";
 
 function App(): ReactElement {
+import React, {ReactElement, useEffect, useState} from 'react';
+import {connect, ConnectedProps} from 'react-redux'
+import {addAccessToken, addRefreshToken} from "../background/redux/actions/tokens";
+import {SystemState} from "../background/redux/actions/sytemState";
+import {Button} from "react-bootstrap";
+
+
+// this takes the redux store and maps everything that is needed to the function props
+const mapState = (state: SystemState) => ({
+    tokens: {refreshToken: state.tokens.refreshToken, accessToken: state.tokens.accessToken}
+})
+
+// this takes the redux actions and maps them to the props
+const mapDispatch = {
+    addRefreshToken, addAccessToken
+}
+
+const connector = connect(mapState, mapDispatch)
+
+type PropsFromRedux = ConnectedProps<typeof connector>
+
+// this defines the component props and also adds the redux imported props
+type Props = PropsFromRedux & {}
+
+function App(props: Props): ReactElement {
+
+
+    console.log(props.tokens.refreshToken)
+    console.log(props.tokens)
 
 
     return (
@@ -24,4 +53,4 @@ function App(): ReactElement {
     );
 }
 
-export default App;
+export default connector(App);

webapp_frontend/src/components/Constants.tsx

@@ -1,14 +1,16 @@
 import React, {ReactElement} from "react";
 import App from "./App";
 
-function Constants():ReactElement{
-    // userinfos
-    // url + host of backend
+import {Provider} from 'react-redux'
+import store from '../background/redux/store'
 
 
+function Constants(): ReactElement {
+    // userinfos
+    // url + host of backend
 
 
-    return(<App/>)
+    return (<Provider store={store}><App/></Provider>);
 
 
 }