Feaure/redux (#8)

* added redux FF-164

* working redux exaple

* remove one bug

* refactor splitting of actions

* changed requested by @open-schnick FF-164

Author: qvalentin

webapp_frontend/package-lock.json

@@ -12,13 +12,16 @@
     "@types/react": "^16.9.51",
     "@types/react-bootstrap": "^0.32.24",
     "@types/react-dom": "^16.9.8",
+    "@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-redux": "^7.2.2",
     "react-scripts": "3.4.3",
+    "redux": "^4.0.5",
     "typescript": "^3.8.3"
   },
   "scripts": {

webapp_frontend/package.json

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

webapp_frontend/src/background/constants.tsx

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

webapp_frontend/src/background/redux/actions/sytemState.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/tokenTypes.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/actions/tokens.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/index.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/reducers/tokens.tsx

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

webapp_frontend/src/background/redux/store.tsx

@@ -1,77 +1,40 @@
 import React, {ReactElement, useEffect, useState} from 'react';
-import logo from '../assets/images/logos/logo.png';
-import './App.css';
-import {callBackendHealth} from "../background/api/api";
+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";
 
 
-import {Button, Table, Container} from 'react-bootstrap';
-import Header from "./basicElements/Header";
+// 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}
+})
 
-function App():ReactElement {
-
-
-
-    const [backendLiveTime, setBackendLiveTime] = useState<number | string>("not reachable");
-    const [backendUserCount, setBackendUserCount] = useState<number | string>("not reachable");
+// 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 {
 
-    useEffect(() => {
-        callInitialBackendRequests()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    },[]);
 
-    function callInitialBackendRequests():void {
-        updateVariables()
-    }
+    console.log(props.tokens.refreshToken)
+    console.log(props.tokens)
 
-    function updateVariables(): void {
-        Promise.all([callBackendHealth()])
-            .then(([backendHealthData]) => {
-                setBackendLiveTime(backendHealthData.uptimeInSeconds);
-                setBackendUserCount(backendHealthData.userCount)
-            })
-    }
 
     return (
         <div className="App">
-            <Header></Header>
-                <Container>
-                <h1>
-                    FileFighter
-                </h1>
-
-
-                <img src={logo}  alt="logo"/>
-
-
-
-                <div>
-                    <Button  className={"mt-3 mb-2 float-right"} onClick={() => updateVariables()}>Refresh</Button>
-                    <Table striped bordered hover variant="dark" >
-                        <thead>
-                        <tr>
-                            <th>Backend information</th>
-
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>Uptime</td>
-                            <td>{backendLiveTime}</td>
-                        </tr>
-                        <tr>
-                            <td>Usercount</td>
-                            <td>{backendUserCount}</td>
-                        </tr>
-                        </tbody>
-                    </Table>
-                </div>
-                </Container>
+            <Button onClick={() => props.addAccessToken({token:"bva",timestamp:1243})}>test (look in the console)</Button>
+            <Button onClick={() => props.addRefreshToken("bgsgfhz")}>Refreshtoken (look in the console)</Button>
         </div>
     );
 }
 
-export default App;
+export default connector(App);