[dashboard] redux added for state management

Author: sjillen

dashboard/package-lock.json

@@ -8,10 +8,14 @@
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.19.0",
     "bootstrap": "^4.4.1",
+    "lodash": "^4.17.15",
     "react": "^16.12.0",
     "react-bootstrap": "^1.0.0-beta.16",
     "react-dom": "^16.12.0",
-    "react-scripts": "3.3.0"
+    "react-redux": "^7.1.3",
+    "react-scripts": "3.3.0",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

dashboard/package.json

@@ -0,0 +1,20 @@
+import scanApi from '../apis/scanApi';
+import { FETCH_SCANS, ADD_SCAN } from './types';
+
+export const fetchScans = () => async dispatch => {
+    try {
+        const response = await scanApi.get('/results');
+        dispatch({ type: FETCH_SCANS, payload: response.data });
+    } catch (e) {
+        throw new Error('could not fetch scans');
+    }
+};
+
+export const createScan = repoName => async (dispatch, getState) => {
+    try {
+        const response = await scanApi.post('/results', { repoName });
+        dispatch({ type: ADD_SCAN, payload: response.data });
+    } catch (e) {
+        throw new Error('Could not submit scan');
+    }
+};

dashboard/src/actions/index.js

@@ -0,0 +1,2 @@
+export const FETCH_SCANS = 'FETCH_SCANS';
+export const ADD_SCAN = 'ADD_SCAN';

dashboard/src/actions/types.js

@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+export default axios.create({
+    baseURL: 'http://localhost:3090',
+});

dashboard/src/apis/scanApi.js

@@ -1,31 +1,16 @@
-import { useState, useEffect } from 'react';
-import axios from 'axios';
-
-const url = 'http://localhost:3090/results';
+import { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { createScan, fetchScans } from '../actions';
 
 const useScan = () => {
-    const [scans, setScans] = useState([]);
-
-    const addScan = async repoName => {
-        let response;
-        try {
-            response = await axios.post(url, { repoName });
-            setScans([...scans, response.data]);
-        } catch (e) {
-            throw new Error('The name you entered does not contain authorized characters!');
-        }
-    };
+    const scans = useSelector(state => state.scans.scans);
+    const dispatch = useDispatch();
 
     useEffect(() => {
-        (async () => {
-            try {
-                const response = await axios.get(url);
-                setScans(response.data);
-            } catch (e) {
-                throw new Error('could not fetch scan, there is likely a problem with the server');
-            }
-        })();
-    }, []);
+        dispatch(fetchScans());
+    }, [dispatch]);
+
+    const addScan = repoName => dispatch(createScan(repoName));
 
     return [scans, addScan];
 };

dashboard/src/components/useScan.js

@@ -3,8 +3,20 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { createStore, applyMiddleware, compose } from 'redux';
+import { Provider } from 'react-redux';
+import reduxThunk from 'redux-thunk';
+import reducers from './reducers';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const store = createStore(reducers, composeEnhancers(applyMiddleware(reduxThunk)));
+
+ReactDOM.render(
+    <Provider store={store}>
+        <App />
+    </Provider>,
+    document.getElementById('root')
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

dashboard/src/index.js

@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux';
+import scansReducer from './scansReducer';
+
+export default combineReducers({
+    scans: scansReducer,
+});

dashboard/src/reducers/index.js

@@ -0,0 +1,18 @@
+import { FETCH_SCANS, ADD_SCAN } from '../actions/types';
+
+export default (state = { scans: [] }, action) => {
+    let { scans } = state;
+
+    switch (action.type) {
+        case FETCH_SCANS:
+            scans = action.payload;
+            break;
+        case ADD_SCAN:
+            scans = [...scans, action.payload];
+            break;
+        default:
+            break;
+    }
+
+    return { scans };
+};