Fix test failure from depdency loop of store>dataProvider>api>store

Author: exrhizo

src/ProvisionedApp.js

@@ -4,7 +4,7 @@ import { Provider } from 'react-redux';
 import { MuiThemeProvider } from '@material-ui/core/styles';
 
 import App from './App';
-import store from './storeContainer';
+import { store } from './reduxGlobals';
 import ErrorBoundary from './components/ErrorBoundary';
 import { UserActions } from './modules/user';
 import humanTheme from './themes/humanTheme';

src/components/HumanAdmin/HumanAdmin.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Admin, Resource } from 'react-admin';
 import { useTheme } from '@material-ui/core/styles';
 
-import { history } from 'storeContainer';
+import { history } from 'reduxGlobals';
 import AdminLayout from './AdminLayout';
 import dataProvider from './dataProvider';
 import { ChallengesList, ChallengesEdit } from './challenges';

src/createStore.js

@@ -6,6 +6,7 @@ import createSagaMiddleware from 'redux-saga';
 import { all, fork } from 'redux-saga/effects';
 import { adminReducer, adminSaga } from 'react-admin';
 
+import dataProvider from 'components/HumanAdmin/dataProvider';
 import { reducer as challenges } from 'modules/challenges/slice';
 import { reducer as responses } from 'modules/responses/slice';
 import { reducer as user } from 'modules/user/slice';
@@ -14,7 +15,7 @@ import { reducer as user } from 'modules/user/slice';
 // routerMiddleware for the react-router, but the main app uses reach router.
 // TODO: Decide how to integrate the app with react-admin better.
 
-export default ({ dataProvider, history, preloadedState = {} }) => {
+export default (history, preloadedState = {}) => {
   const reducer = combineReducers({
     challenges,
     responses,
@@ -23,15 +24,6 @@ export default ({ dataProvider, history, preloadedState = {} }) => {
     router: connectRouter(history),
   });
 
-  const saga = function* rootSaga() {
-    yield all(
-      [
-        adminSaga(dataProvider),
-        // add your own sagas here
-      ].map(fork)
-    );
-  };
-
   const sagaMiddleware = createSagaMiddleware();
 
   const store = configureStore({
@@ -44,6 +36,16 @@ export default ({ dataProvider, history, preloadedState = {} }) => {
     preloadedState,
   });
 
+  const saga = function* rootSaga() {
+    yield all(
+      [
+        adminSaga(dataProvider),
+        // add your own sagas here
+      ].map(fork)
+    );
+  };
+
   sagaMiddleware.run(saga);
+
   return store;
 };

src/index.js

@@ -14,7 +14,7 @@ Sentry.init({
 });
 
 if (process.env.NODE_ENV !== 'production') {
-  window.store = require('storeContainer').default;
+  window.store = require('reduxGlobals').store;
   window.api = require('modules/api');
   window.challenges = require('modules/challenges');
   window.theme = require('./themes/humanTheme');

src/modules/api.js

@@ -1,4 +1,4 @@
-import RequestDispatcher, { AUTH_API } from './requestDispatcher';
+import requestDispatcher, { AUTH_API } from './requestDispatcher';
 
 // TODO: Keep all the api endpoints in the same place
 const CHALLENGE_API = '/challenges';
@@ -7,8 +7,6 @@ const AUTH_PASSWORD_API = `${AUTH_API}/password`;
 
 class HumanApi {
   constructor() {
-    this.dispatcher = new RequestDispatcher();
-
     this.login = this.login.bind(this);
     this.register = this.register.bind(this);
     this.logout = this.logout.bind(this);
@@ -20,7 +18,7 @@ class HumanApi {
   }
 
   login(credentials) {
-    return this.dispatcher
+    return requestDispatcher
       .loginRegister(credentials)
       .then(res => res.data)
       .catch(error => {
@@ -31,7 +29,7 @@ class HumanApi {
   }
 
   register(credentials) {
-    return this.dispatcher
+    return requestDispatcher
       .loginRegister(credentials, { isRegister: true })
       .then(res => res.data)
       .catch(error => {
@@ -42,64 +40,72 @@ class HumanApi {
   }
 
   logout() {
-    return this.dispatcher.logout().then(res => res.data);
+    return requestDispatcher.logout().then(res => res.data);
   }
 
   refresh() {
-    return this.dispatcher.refresh().then(res => res.data);
+    return requestDispatcher.refresh().then(res => res.data);
   }
 
   changePassword(values) {
-    return this.dispatcher.putWithAuth(AUTH_PASSWORD_API, values).then(res => {
-      const { user, access_token, refresh_token } = res.data;
-      this.dispatcher.updateUserAndTokens(user, access_token, refresh_token);
-    });
+    return requestDispatcher
+      .putWithAuth(AUTH_PASSWORD_API, values)
+      .then(res => {
+        const { user, access_token, refresh_token } = res.data;
+        requestDispatcher.updateUserAndTokens(
+          user,
+          access_token,
+          refresh_token
+        );
+      });
   }
 
   createChallenge(challenge) {
     let formData = this.convertToForm(challenge);
-    return this.dispatcher
+    return requestDispatcher
       .postWithAuth(`${CHALLENGE_API}/create`, formData)
       .then(res => res.data);
   }
 
   createResponse(response) {
     let formData = this.convertToForm(response);
-    return this.dispatcher
+    return requestDispatcher
       .postWithAuth(`${RESPONSE_API}/create`, formData)
       .then(res => res.data);
   }
 
   fetchChallenges() {
-    return this.dispatcher
+    return requestDispatcher
       .getWithAuth(`${CHALLENGE_API}`)
       .then(res => res.data);
   }
 
   fetchChallenge(id) {
-    return this.dispatcher
+    return requestDispatcher
       .getWithAuth(`${CHALLENGE_API}/${id}`)
       .then(res => res.data);
   }
 
   updateChallenge(id, patches) {
-    return this.dispatcher
+    return requestDispatcher
       .putWithAuth(`${CHALLENGE_API}/${id}`, patches)
       .then(res => res.data);
   }
 
   deleteChallenge(id) {
-    return this.dispatcher
+    return requestDispatcher
       .deleteWithAuth(`${CHALLENGE_API}/${id}`)
       .then(res => undefined);
   }
 
   fetchResponses() {
-    return this.dispatcher.getWithAuth(`${RESPONSE_API}`).then(res => res.data);
+    return requestDispatcher
+      .getWithAuth(`${RESPONSE_API}`)
+      .then(res => res.data);
   }
 
   fetchResponse(id) {
-    return this.dispatcher
+    return requestDispatcher
       .getWithAuth(`${RESPONSE_API}/${id}`)
       .then(res => res.data);
   }

src/modules/requestDispatcher.js

@@ -2,7 +2,6 @@ import axios from 'axios';
 import config from 'config';
 
 import { actions } from './user/slice';
-import store from 'storeContainer';
 
 const API = config['API'];
 const AUTH_API = '/auth';
@@ -108,6 +107,12 @@ class RequestDispatcher {
     this.pendingRequests = [];
     this.pendingAuthCancel = undefined;
 
+    this.store = {
+      dispatch: () => {
+        throw new Error('redux store not initialized');
+      },
+    };
+
     this.state = DISPATCHER_STATE.UNAUTHENTICATED;
 
     this.tokenStorage = new TokenStorage();
@@ -131,8 +136,12 @@ class RequestDispatcher {
     });
   }
 
+  setStore(reduxStore) {
+    this.store = reduxStore;
+  }
+
   unauthenticated() {
-    store.dispatch(actions.unauthenticated());
+    this.store.dispatch(actions.unauthenticated());
   }
 
   updateUserAndTokens(user, access_token, refresh_token) {
@@ -142,7 +151,7 @@ class RequestDispatcher {
 
   updateUser(user, access_token) {
     const token = this.tokenStorage.readToken(access_token);
-    store.dispatch(actions.authenticated({ user: user, token: token }));
+    this.store.dispatch(actions.authenticated({ user: user, token: token }));
   }
 
   cancelInFlightRequiringAuth() {
@@ -415,5 +424,5 @@ class RequestDispatcher {
   }
 }
 
-export { AUTH_API };
-export default RequestDispatcher;
+export default new RequestDispatcher();
+export { AUTH_API, RequestDispatcher };

src/modules/requestDispatcher.test.js

@@ -1,5 +1,7 @@
-import RequestDispatcher, { AUTH_REFRESH_API } from './requestDispatcher';
+import { AUTH_REFRESH_API, RequestDispatcher } from './requestDispatcher';
 import mockAxios from 'axios';
+import createStore from 'createStore';
+import { createMemoryHistory } from 'history';
 
 const accessTokenA =
   'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZGVudGl0eSI6IjEiLCJ0eXBlIjoiYWNjZXNzIiwibmJmIjoxNTY2NDU4MDAwLCJleHAiOjE1NjY0NTkwMDAsInVzZXJfY2xhaW1zIjp7InJvbGVzIjpbeyJhZG1pbiI6ImFkbWluIn1dfSwiaWF0IjoxNTY2NDU4MDAwLCJqdGkiOiIxMTUxZjBlNi03NDBkLTQ3MmQtOTRmNS02YTI5MGJmNGFiZjAifQ.ZEw2CdhuBJc_QzN0YrOQ63t1JMI3KJfCJpcV-Hz9M5U';
@@ -89,6 +91,7 @@ let rd;
 describe('Testing Unauthenticated requests', () => {
   beforeAll(() => {
     rd = new RequestDispatcher();
+    rd.setStore(createStore(createMemoryHistory()));
     mockAxios.__clearMockResponses();
     mockResponses.forEach(mr => mockAxios.__setMockResponse(mr));
   });
@@ -110,6 +113,7 @@ describe('Testing Unauthenticated requests', () => {
 describe('Testing Authenticated Requests', () => {
   beforeEach(() => {
     rd = new RequestDispatcher();
+    rd.setStore(createStore(createMemoryHistory()));
     mockAxios.__clearMockResponses();
     mockResponses.forEach(mr => mockAxios.__setMockResponse(mr));
   });

src/reduxGlobals.js

@@ -0,0 +1,9 @@
+import createStore from 'createStore';
+import { createBrowserHistory } from 'history';
+import requestDispatcher from 'modules/requestDispatcher';
+
+export const history = createBrowserHistory();
+
+export const store = createStore(history);
+
+requestDispatcher.setStore(store);