Task: upgrade redux

package.json

@@ -48,7 +48,7 @@
                 "react-app-polyfill": "3.0.0",
                 "react-dom": "16.14.0",
                 "react-intl": "2.8.0",
-                "react-redux": "7.2.8",
+                "react-redux": "8.0.4",
                 "redux": "4.2.0",
                 "redux-thunk": "2.4.1",
                 "resolve": "1.22.1",
@@ -132,4 +132,4 @@
         "resolutions": {
                 "@types/react": "17.0.30"
         }
-}
+}

src/app/middleware/localStorageMiddleware.ts

@@ -1,8 +1,10 @@
-import { IAction } from '../../types/action';
+import { saveTheme } from '../../themes/theme-utils';
+import { AppAction } from '../../types/action';
+import { CHANGE_THEME_SUCCESS } from '../services/redux-constants';
 
-const localStorageMiddleware = (_store: any) => (next: any) => (action: IAction) => {
-  if (action.type === 'AUTHENTICATE_USER') {
-    localStorage.setItem('authenticatedUser', JSON.stringify(action.response));
+const localStorageMiddleware = () => (next: any) => (action: AppAction) => {
+  if (action.type === CHANGE_THEME_SUCCESS) {
+    saveTheme(action.response);
   }
   return next(action);
 };

src/app/middleware/telemetryMiddleware.ts

@@ -5,9 +5,9 @@ import {
   eventTypes,
   telemetry
 } from '../../telemetry';
-import { IAction } from '../../types/action';
+import { AppAction } from '../../types/action';
 import { IQuery } from '../../types/query-runner';
-import { IRootState } from '../../types/root';
+import { ApplicationState } from '../../types/root';
 import {
   FETCH_ADAPTIVE_CARD_ERROR,
   FETCH_SCOPES_ERROR,
@@ -19,8 +19,8 @@ import {
 import { sanitizeQueryUrl } from '../utils/query-url-sanitization';
 
 const telemetryMiddleware =
-  (store: any) => (next: any) => async (action: IAction) => {
-    const state: IRootState = store.getState();
+  (store: any) => (next: any) => async (action: AppAction) => {
+    const state: ApplicationState = store.getState();
     switch (action.type) {
       case GET_SNIPPET_ERROR: {
         trackException(

src/app/services/actions/adaptive-cards-action-creator.spec.ts

@@ -12,6 +12,7 @@ import {
 import { IQuery } from '../../../types/query-runner';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
+import { AppAction } from '../../../types/action';
 const middleware = [thunk];
 const mockStore = configureMockStore(middleware);
 
@@ -24,7 +25,7 @@ describe('Graph Explorer Adaptive Cards Action Creators\'', () => {
   it('should dispatch ADAPTIVE_FETCH_SUCCESS when getAdaptiveCardSuccess is called', () => {
 
     const result = { sample: 'response' };
-    const expectedAction = {
+    const expectedAction: AppAction = {
       type: FETCH_ADAPTIVE_CARD_SUCCESS,
       response: result
     };
@@ -36,7 +37,7 @@ describe('Graph Explorer Adaptive Cards Action Creators\'', () => {
 
   it('should dispatch ADAPTIVE_FETCH_PENDING when getAdaptiveCardPending is called', () => {
 
-    const expectedAction = {
+    const expectedAction: AppAction = {
       type: FETCH_ADAPTIVE_CARD_PENDING,
       response: ''
     };
@@ -49,7 +50,7 @@ describe('Graph Explorer Adaptive Cards Action Creators\'', () => {
   it('should dispatch ADAPTIVE_FETCH_ERROR when getAdaptiveCardError is called', () => {
 
     const error = 'sample error';
-    const expectedAction = {
+    const expectedAction: AppAction = {
       type: FETCH_ADAPTIVE_CARD_ERROR,
       response: error
     };
@@ -61,7 +62,7 @@ describe('Graph Explorer Adaptive Cards Action Creators\'', () => {
 
   it('should dispatch FETCH_ADAPTIVE_CARD_SUCCESS when no payload is supplied to getAdaptiveCard()', () => {
     const result = { sample: 'response' };
-    const expectedAction = {
+    const expectedAction: AppAction = {
       type: FETCH_ADAPTIVE_CARD_SUCCESS,
       response: {}
     };
@@ -88,7 +89,7 @@ describe('Graph Explorer Adaptive Cards Action Creators\'', () => {
 
   it('should dispatch FETCH_ADAPTIVE_CARD_SUCCESS when getAdaptiveCards() is called with payload', () => {
     const result = { sample: 'response' };
-    const expectedAction = [
+    const expectedAction: AppAction[] = [
       {
         type: FETCH_ADAPTIVE_CARD_SUCCESS,
         response: {
@@ -143,7 +144,7 @@ describe('Graph Explorer Adaptive Cards Action Creators\'', () => {
 
   it('should return no template available if a sample query has no adaptive card', () => {
     const result = { sample: 'response' };
-    const expectedAction = {
+    const expectedAction: AppAction = {
       type: FETCH_ADAPTIVE_CARD_ERROR,
       response: 'No template available'
     };
@@ -184,7 +185,7 @@ describe('Graph Explorer Adaptive Cards Action Creators\'', () => {
 
   it('should return invalid payload for card if the payload received is an empty object', () => {
     const result = { sample: 'response' };
-    const expectedAction = {
+    const expectedAction: AppAction = {
       type: FETCH_ADAPTIVE_CARD_ERROR,
       response: 'Invalid payload for card'
     };

src/app/services/actions/adaptive-cards-action-creator.ts

@@ -1,5 +1,6 @@
 import * as AdaptiveCardsTemplateAPI from 'adaptivecards-templating';
-import { IAction } from '../../../types/action';
+import { AppDispatch } from '../../../store';
+import { AppAction } from '../../../types/action';
 import { IAdaptiveCardContent } from '../../../types/adaptivecard';
 import { IQuery } from '../../../types/query-runner';
 import { lookupTemplate } from '../../utils/adaptive-cards-lookup';
@@ -10,32 +11,29 @@ import {
   FETCH_ADAPTIVE_CARD_SUCCESS
 } from '../redux-constants';
 
-export function getAdaptiveCardSuccess(result: object): IAction {
+export function getAdaptiveCardSuccess(result: object): AppAction {
   return {
     type: FETCH_ADAPTIVE_CARD_SUCCESS,
     response: result
   };
 }
 
-export function getAdaptiveCardError(error: string): IAction {
+export function getAdaptiveCardError(error: string): AppAction {
   return {
     type: FETCH_ADAPTIVE_CARD_ERROR,
     response: error
   };
 }
 
-export function getAdaptiveCardPending(): IAction {
+export function getAdaptiveCardPending(): AppAction {
   return {
     type: FETCH_ADAPTIVE_CARD_PENDING,
     response: ''
   };
 }
 
-export function getAdaptiveCard(
-  payload: string,
-  sampleQuery: IQuery
-): Function {
-  return async (dispatch: Function) => {
+export function getAdaptiveCard(payload: string, sampleQuery: IQuery) {
+  return async (dispatch: AppDispatch): Promise<AppAction> => {
     if (!payload) {
       // no payload so return empty result
       return dispatch(getAdaptiveCardSuccess({}));

src/app/services/actions/auth-action-creators.spec.ts

@@ -8,6 +8,7 @@ import {
   setAuthenticationPending,
   storeScopes, signIn, signOut
 } from '../../../app/services/actions/auth-action-creators';
+import { AppAction } from '../../../types/action';
 
 import configureMockStore from 'redux-mock-store';
 
@@ -28,7 +29,7 @@ describe('Auth Action Creators', () => {
   it('should dispatch AUTHENTICATION_PENDING when setAuthenticationPending() is called', () => {
     // Arrange
     const response: boolean = true;
-    const expectedAction = {
+    const expectedAction: AppAction = {
       type: AUTHENTICATION_PENDING,
       response
     }
@@ -43,7 +44,7 @@ describe('Auth Action Creators', () => {
   it('should dispatch GET_AUTH_TOKEN_SUCCESS when getAuthTokenSuccess() is called', () => {
     // Arrange
     const response: boolean = true;
-    const expectedAction = {
+    const expectedAction: AppAction = {
       type: GET_AUTH_TOKEN_SUCCESS,
       response
     }
@@ -58,7 +59,7 @@ describe('Auth Action Creators', () => {
   it('should dispatch GET_CONSENTED_SCOPES_SUCCESS when getConsentedScopesSuccess() is called', () => {
     // Arrange
     const response: string[] = ['mail.read', 'profile.read'];
-    const expectedAction = {
+    const expectedAction: AppAction = {
       type: GET_CONSENTED_SCOPES_SUCCESS,
       response
     }
@@ -73,7 +74,7 @@ describe('Auth Action Creators', () => {
   it('should dispatch LOGOUT_SUCCESS when signOutSuccess() is called', () => {
     // Arrange
     const response: boolean = true;
-    const expectedAction = {
+    const expectedAction: AppAction = {
       type: LOGOUT_SUCCESS,
       response
     }
@@ -87,7 +88,7 @@ describe('Auth Action Creators', () => {
   it('should dispatch GET_CONSENTED_SCOPES_SUCCESS when storeScopes() is called', () => {
     // Arrange
     const response: string[] = ['mail.read', 'profile.read'];
-    const expectedAction = {
+    const expectedAction: AppAction = {
       type: GET_CONSENTED_SCOPES_SUCCESS,
       response
     }
@@ -106,7 +107,7 @@ describe('Auth Action Creators', () => {
   it('should dispatch GET_AUTH_TOKEN_SUCCESS when signIn() is called', () => {
     // Arrange
     const response: boolean = true;
-    const expectedAction = {
+    const expectedAction: AppAction = {
       type: GET_AUTH_TOKEN_SUCCESS,
       response
     }
@@ -124,7 +125,7 @@ describe('Auth Action Creators', () => {
   it('should dispatch LOGOUT_SUCCESS when signOutSuccess() is called', () => {
     // Arrange
     const response: boolean = true;
-    const expectedAction = {
+    const expectedAction: AppAction = {
       type: LOGOUT_SUCCESS,
       response
     }

src/app/services/actions/auth-action-creators.ts

@@ -1,41 +1,42 @@
 import { authenticationWrapper } from '../../../modules/authentication';
-import { IAction } from '../../../types/action';
+import { AppDispatch } from '../../../store';
+import { AppAction } from '../../../types/action';
 import { Mode } from '../../../types/enums';
 import {
   AUTHENTICATION_PENDING, GET_AUTH_TOKEN_SUCCESS, GET_CONSENTED_SCOPES_SUCCESS,
   LOGOUT_SUCCESS
 } from '../redux-constants';
 
-export function getAuthTokenSuccess(response: boolean): any {
+export function getAuthTokenSuccess(response: boolean): AppAction {
   return {
     type: GET_AUTH_TOKEN_SUCCESS,
     response
   };
 }
 
-export function getConsentedScopesSuccess(response: string[]): IAction {
+export function getConsentedScopesSuccess(response: string[]): AppAction {
   return {
     type: GET_CONSENTED_SCOPES_SUCCESS,
     response
   };
 }
 
-export function signOutSuccess(response: boolean): any {
+export function signOutSuccess(response: boolean): AppAction {
   return {
     type: LOGOUT_SUCCESS,
     response
   };
 }
 
-export function setAuthenticationPending(response: boolean): any {
+export function setAuthenticationPending(response: boolean): AppAction {
   return {
     type: AUTHENTICATION_PENDING,
     response
   };
 }
 
 export function signOut() {
-  return (dispatch: Function, getState: Function) => {
+  return (dispatch: AppDispatch, getState: Function) => {
     const { graphExplorerMode } = getState();
     dispatch(setAuthenticationPending(true));
     if (graphExplorerMode === Mode.Complete) {
@@ -48,9 +49,9 @@ export function signOut() {
 }
 
 export function signIn() {
-  return (dispatch: Function) => dispatch(getAuthTokenSuccess(true));
+  return (dispatch: AppDispatch) => dispatch(getAuthTokenSuccess(true));
 }
 
 export function storeScopes(consentedScopes: string[]) {
-  return (dispatch: Function) => dispatch(getConsentedScopesSuccess(consentedScopes));
+  return (dispatch: AppDispatch) => dispatch(getConsentedScopesSuccess(consentedScopes));
 }

src/app/services/actions/autocomplete-action-creators.spec.ts

@@ -7,20 +7,21 @@ import thunk from 'redux-thunk';
 import configureMockStore from 'redux-mock-store';
 import fetch from 'jest-fetch-mock';
 import { store } from '../../../../src/store/index';
-import { IRootState } from '../../../types/root';
+import { ApplicationState } from '../../../types/root';
 import { Mode } from '../../../types/enums';
 import {
   fetchAutocompleteSuccess, fetchAutocompleteError,
   fetchAutocompletePending, fetchAutoCompleteOptions
 } from '../../../app/services/actions/autocomplete-action-creators';
+import { AppAction } from '../../../types/action';
 
 const middleware = [thunk];
 const mockStore = configureMockStore(middleware);
 
 jest.mock('../../../../src/store/index');
 window.fetch = jest.fn();
 
-const mockState: IRootState = {
+const mockState: ApplicationState = {
   devxApi: {
     baseUrl: 'https://graph.microsoft.com/v1.0/me',
     parameters: '$count=true'
@@ -130,7 +131,7 @@ describe('Autocomplete action creators', () => {
   it('should dispatch AUTOCOMPLETE_FETCH_ERROR with error payload when fetchAutocompleteError() is called', () => {
     // Arrange
     const errorObject = {};
-    const expectedAction = {
+    const expectedAction: AppAction = {
       type: AUTOCOMPLETE_FETCH_ERROR,
       response: errorObject
     }
@@ -154,7 +155,7 @@ describe('Autocomplete action creators', () => {
       },
       createdAt: ''
     }
-    const expectedAction = {
+    const expectedAction: AppAction = {
       type: AUTOCOMPLETE_FETCH_SUCCESS,
       response
     }
@@ -168,8 +169,9 @@ describe('Autocomplete action creators', () => {
 
   it('should dispatch AUTOCOMPLETE_FETCH_PENDING when fetchAutocompletePending() is called', () => {
     // Arrange
-    const expectedAction = {
-      type: AUTOCOMPLETE_FETCH_PENDING
+    const expectedAction: AppAction = {
+      type: AUTOCOMPLETE_FETCH_PENDING,
+      response: null
     }
 
     // Act
@@ -222,7 +224,7 @@ describe('Autocomplete action creators', () => {
 
     it('should dispatch AUTOCOMPLETE_FETCH_ERROR when fetch does not return autoOptions', () => {
       // Arrange
-      const expectedAction = {
+      const expectedAction: AppAction = {
         type: AUTOCOMPLETE_FETCH_ERROR,
         response: {}
       };