feat: make maquerade stateful

feat: implement loading screen

chore: update selector test

chore: fiter/sort padding

chore: update fail masquerade state

chore: update unit test

chore: Update src/containers/MasqueradeBar/index.jsx

Co-authored-by: Ben Warzeski <bwarzeski@edx.org>

chore: update test

Co-authored-by: Ben Warzeski <bwarzeski@edx.org>

chore: update snapshot

src/data/redux/hooks.js

@@ -40,3 +40,5 @@ export const useUpdateSelectSessionModalCallback = (dispatch, cardId) => () => d
 );
 
 export const useMasqueradeData = () => useSelector(requestSelectors.masquerade);
+
+export const useIsPendingRequest = (requestName) => useSelector(requestSelectors.isPending(requestName));

src/data/redux/requests/selectors.js

@@ -4,7 +4,7 @@ import { RequestStates, RequestKeys } from 'data/constants/requests';
 
 export const requestStatus = (state, { requestKey }) => state.requests[requestKey];
 
-const statusSelector = (fn) => (state, { requestKey }) => fn(state.requests[requestKey]);
+const statusSelector = (fn) => (requestKey) => (state) => fn(state.requests[requestKey]);
 
 export const isInactive = ({ status }) => status === RequestStates.inactive;
 export const isPending = ({ status }) => status === RequestStates.pending;
@@ -21,6 +21,7 @@ export const masquerade = (state) => {
   return {
     isMasquerading: isCompleted(request),
     isMasqueradingFailed: isFailed(request),
+    isMasqueradingPending: isPending(request),
     masqueradeError: error(request),
   };
 };

src/data/redux/requests/selectors.test.js

@@ -20,22 +20,23 @@ const testState = {
     [requestKey]: requestData,
   },
 };
+const mockUseSelector = (selector, state) => selector(state);
 const genRequests = (request) => ({
   requests: { [requestKey]: request },
 });
 const select = (selector, request) => (
-  selector(genRequests(request), { requestKey })
+  mockUseSelector(
+    selector(requestKey), genRequests(request),
+  )
 );
 describe('requests selectors unit tests', () => {
   test('requestStatus returns data associated with given key', () => {
     expect(selectors.requestStatus(testState, { requestKey })).toEqual(requestData);
   });
   const testStatusSelector = (selector, matchingRequest) => {
-    expect(selector(testState, { requestKey })).toEqual(false);
-    expect(selector(
-      { requests: { [requestKey]: matchingRequest } },
-      { requestKey },
-    )).toEqual(true);
+    expect(mockUseSelector(selector(requestKey), testState)).toEqual(false);
+    expect(mockUseSelector(selector(requestKey),
+      { requests: { [requestKey]: matchingRequest } })).toEqual(true);
   };
   test('isInactive returns true iff the given request is inactive', () => {
     testStatusSelector(selectors.isInactive, inactiveRequest);
@@ -78,6 +79,13 @@ describe('requests selectors unit tests', () => {
     expect(selectors.masquerade(mockResponse(completedRequest))).toEqual({
       isMasquerading: true,
       isMasqueradingFailed: false,
+      isMasqueradingPending: false,
+      masqueradeError: undefined,
+    });
+    expect(selectors.masquerade(mockResponse(pendingRequest))).toEqual({
+      isMasquerading: false,
+      isMasqueradingFailed: false,
+      isMasqueradingPending: true,
       masqueradeError: undefined,
     });
     expect(selectors.masquerade(mockResponse({
@@ -86,6 +94,7 @@ describe('requests selectors unit tests', () => {
     }))).toEqual({
       isMasquerading: false,
       isMasqueradingFailed: true,
+      isMasqueradingPending: false,
       masqueradeError: testValue,
     });
   });