start moving ui to redux tlk

frontend/app/components/Session/MobilePlayer.tsx

@@ -147,7 +147,7 @@ export default connect(
     session: state.getIn(['sessions', 'current']),
     visitedEvents: state.getIn(['sessions', 'visitedEvents']),
     jwt: state.getIn(['user', 'jwt']),
-    fullscreen: state.getIn(['components', 'player', 'fullscreen']),
+    fullscreen: state.getIn(['player']).fullcreen,
     showEvents: state.get('showEvents'),
     members: state.getIn(['members', 'list']),
   }),

frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx

@@ -97,7 +97,7 @@ export default connect((state: any) => {
   const isAssist = window.location.pathname.includes('/assist/');
   return {
     sessionId: state.getIn(['sessions', 'current']).sessionId,
-    bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
+    bottomBlock: state.getIn(['player', 'bottomBlock']),
     closedLive:
       !!state.getIn(['sessions', 'errors']) ||
       (isAssist && !state.getIn(['sessions', 'current']).live),

frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx

@@ -287,23 +287,21 @@ export default connect(
     const isEnterprise = state.getIn(['user', 'account', 'edition']) === 'ee';
     return {
       disableDevtools: isEnterprise && !(permissions.includes('DEV_TOOLS') || permissions.includes('SERVICE_DEV_TOOLS')),
-      fullscreen: state.getIn(['components', 'player', 'fullscreen']),
-      bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
+      fullscreen: state.getIn(['player', 'fullscreen']),
+      bottomBlock: state.getIn(['player', 'bottomBlock']),
       showStorageRedux: !state.getIn([
-        'components',
         'player',
         'hiddenHints',
         'storage',
       ]),
       showStackRedux: !state.getIn([
-        'components',
         'player',
         'hiddenHints',
         'stack',
       ]),
       session: state.getIn(['sessions', 'current']),
       totalAssistSessions: state.getIn(['liveSearch', 'total']),
-      skipInterval: state.getIn(['components', 'player', 'skipInterval']),
+      skipInterval: state.getIn(['player', 'skipInterval']),
       previousSessionId: state.getIn(['sessions', 'previousId']),
       nextSessionId: state.getIn(['sessions', 'nextId']),
       siteId: state.getIn(['site', 'siteId']),

frontend/app/components/Session/Player/MobilePlayer/PerfWarnings.tsx

@@ -106,5 +106,5 @@ function PerfWarnings({ userDevice, bottomBlock }: { userDevice: string; bottomB
 }
 
 export default connect((state: any) => ({
-  bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
+  bottomBlock: state.getIn(['player', 'bottomBlock']),
 }))(observer(PerfWarnings));

frontend/app/components/Session/Player/MobilePlayer/PlayerBlock.tsx

@@ -9,7 +9,6 @@ import styles from 'Components/Session_/playerBlock.module.css';
 interface IProps {
   fullscreen: boolean;
   sessionId: string;
-  disabled: boolean;
   activeTab: string;
   jiraConfig: Record<string, any>
   fullView?: boolean
@@ -20,7 +19,6 @@ function PlayerBlock(props: IProps) {
   const {
     fullscreen,
     sessionId,
-    disabled,
     activeTab,
     jiraConfig,
     fullView = false,
@@ -33,7 +31,7 @@ function PlayerBlock(props: IProps) {
       className={cn(styles.playerBlock, 'flex flex-col', 'overflow-x-hidden')}
     >
       {shouldShowSubHeader ? (
-        <MobilePlayerSubheader sessionId={sessionId} disabled={disabled} jiraConfig={jiraConfig} />
+        <MobilePlayerSubheader sessionId={sessionId} jiraConfig={jiraConfig} />
       ) : null}
       <Player
         setActiveTab={setActiveTab}
@@ -45,8 +43,7 @@ function PlayerBlock(props: IProps) {
 }
 
 export default connect((state: any) => ({
-  fullscreen: state.getIn(['components', 'player', 'fullscreen']),
+  fullscreen: state.getIn(['player', 'fullscreen']),
   sessionId: state.getIn(['sessions', 'current']).sessionId,
-  disabled: state.getIn(['components', 'targetDefiner', 'inspectorMode']),
   jiraConfig: state.getIn(['issues', 'list'])[0],
 }))(PlayerBlock)

frontend/app/components/Session/Player/MobilePlayer/PlayerInst.tsx

@@ -169,12 +169,12 @@ function Player(props: IProps) {
 
 export default connect(
   (state: any) => ({
-    fullscreen: state.getIn(['components', 'player', 'fullscreen']),
+    fullscreen: state.getIn(['player', 'fullscreen']),
     nextId: state.getIn(['sessions', 'nextId']),
     sessionId: state.getIn(['sessions', 'current']).sessionId,
     userDevice: state.getIn(['sessions', 'current']).userDevice,
     videoURL: state.getIn(['sessions', 'current']).videoURL,
-    bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
+    bottomBlock: state.getIn(['player', 'bottomBlock']),
     platform: state.getIn(['sessions', 'current']).platform,
     screenWidth: state.getIn(['sessions', 'current']).screenWidth,
     screenHeight: state.getIn(['sessions', 'current']).screenHeight,

frontend/app/components/Session/Player/ReplayPlayer/PlayerBlock.tsx

@@ -8,7 +8,6 @@ import styles from 'Components/Session_/playerBlock.module.css';
 interface IProps {
   fullscreen: boolean;
   sessionId: string;
-  disabled: boolean;
   activeTab: string;
   jiraConfig: Record<string, any>;
   fullView?: boolean;
@@ -16,13 +15,13 @@ interface IProps {
 }
 
 function PlayerBlock(props: IProps) {
-  const { fullscreen, sessionId, disabled, activeTab, jiraConfig, fullView = false, setActiveTab } = props;
+  const { fullscreen, sessionId, activeTab, jiraConfig, fullView = false, setActiveTab } = props;
 
   const shouldShowSubHeader = !fullscreen && !fullView;
   return (
     <div className={cn(styles.playerBlock, 'flex flex-col', 'overflow-x-hidden')}>
       {shouldShowSubHeader
-       ? <SubHeader sessionId={sessionId} disabled={disabled} jiraConfig={jiraConfig} />
+       ? <SubHeader sessionId={sessionId} jiraConfig={jiraConfig} />
        : null}
       <Player setActiveTab={setActiveTab} activeTab={activeTab} fullView={fullView} />
     </div>
@@ -30,8 +29,7 @@ function PlayerBlock(props: IProps) {
 }
 
 export default connect((state: Record<string, any>) => ({
-  fullscreen: state.getIn(['components', 'player', 'fullscreen']),
+  fullscreen: state.getIn(['player', 'fullscreen']),
   sessionId: state.getIn(['sessions', 'current']).sessionId,
-  disabled: state.getIn(['components', 'targetDefiner', 'inspectorMode']),
   jiraConfig: state.getIn(['issues', 'list'])[0],
 }))(PlayerBlock);

frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx

@@ -163,10 +163,10 @@ function Player(props: IProps) {
 
 export default connect(
   (state: any) => ({
-    fullscreen: state.getIn(['components', 'player', 'fullscreen']),
+    fullscreen: state.getIn(['player', 'fullscreen']),
     nextId: state.getIn(['sessions', 'nextId']),
     sessionId: state.getIn(['sessions', 'current']).sessionId,
-    bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
+    bottomBlock: state.getIn(['player', 'bottomBlock']),
   }),
   {
     fullscreenOff,

frontend/app/components/Session/Player/ReplayPlayer/SummaryBlock/index.tsx

@@ -155,9 +155,9 @@ const summaryBlockStyle: React.CSSProperties = {
 };
 
 export default connect((state: Record<string, any>) => ({
-  zoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-  zoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-  zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
-  zoomTab: state.getIn(['components', 'player']).zoomTab,
+  zoomEnabled: state.getIn(['player']).timelineZoom.enabled,
+  zoomStartTs: state.getIn(['player']).timelineZoom.startTs,
+  zoomEndTs: state.getIn(['player']).timelineZoom.endTs,
+  zoomTab: state.getIn(['player']).zoomTab,
   duration: state.getIn(['sessions', 'current']).durationSeconds,
 }))(observer(SummaryBlock));

frontend/app/components/Session/WebPlayer.tsx

@@ -255,7 +255,7 @@ export default connect(
     prefetched: state.getIn(['sessions', 'prefetched']),
     visitedEvents: state.getIn(['sessions', 'visitedEvents']),
     jwt: state.getIn(['user', 'jwt']),
-    fullscreen: state.getIn(['components', 'player', 'fullscreen']),
+    fullscreen: state.getIn(['player', 'fullscreen']),
     showEvents: state.get('showEvents'),
     members: state.getIn(['members', 'list']),
     startedAt: state.getIn(['sessions', 'current']).startedAt || 0,

frontend/app/components/Session_/EventsBlock/EventsBlock.tsx

@@ -275,9 +275,9 @@ export default connect(
     filteredEvents: state.getIn(['sessions', 'filteredEvents']),
     query: state.getIn(['sessions', 'eventsQuery']),
     eventsIndex: state.getIn(['sessions', 'eventsIndex']),
-    zoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-    zoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-    zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
+    zoomEnabled: state.getIn(['player']).timelineZoom.enabled,
+    zoomStartTs: state.getIn(['player']).timelineZoom.startTs,
+    zoomEndTs: state.getIn(['player']).timelineZoom.endTs,
   }),
   {
     setEventFilter,

frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx

@@ -386,9 +386,9 @@ export const OverviewPanel = connect(
   (state: Record<string, any>) => ({
     issuesList: state.getIn(['sessions', 'current']).issues,
     sessionId: state.getIn(['sessions', 'current']).sessionId,
-    zoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-    zoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-    zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
+    zoomEnabled: state.getIn(['player']).timelineZoom.enabled,
+    zoomStartTs: state.getIn(['player']).timelineZoom.startTs,
+    zoomEndTs: state.getIn(['player']).timelineZoom.endTs,
   }),
   {
     toggleBottomBlock,
@@ -400,10 +400,10 @@ export const MobileOverviewPanel = connect(
   (state: Record<string, any>) => ({
     issuesList: state.getIn(['sessions', 'current']).issues,
     sessionId: state.getIn(['sessions', 'current']).sessionId,
-    zoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-    zoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-    zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
-    zoomTab: state.getIn(['components', 'player']).zoomTab,
+    zoomEnabled: state.getIn(['player']).timelineZoom.enabled,
+    zoomStartTs: state.getIn(['player']).timelineZoom.startTs,
+    zoomEndTs: state.getIn(['player']).timelineZoom.endTs,
+    zoomTab: state.getIn(['player']).zoomTab,
   }),
   {
     toggleBottomBlock,

frontend/app/components/Session_/Player/Controls/Controls.tsx

@@ -438,23 +438,21 @@ export default connect(
           permissions.includes('DEV_TOOLS') ||
           permissions.includes('SERVICE_DEV_TOOLS')
         ),
-      fullscreen: state.getIn(['components', 'player', 'fullscreen']),
-      bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
+      fullscreen: state.getIn(['player', 'fullscreen']),
+      bottomBlock: state.getIn(['player', 'bottomBlock']),
       showStorageRedux: !state.getIn([
-        'components',
         'player',
         'hiddenHints',
         'storage',
       ]),
       showStackRedux: !state.getIn([
-        'components',
         'player',
         'hiddenHints',
         'stack',
       ]),
       session: state.getIn(['sessions', 'current']),
       totalAssistSessions: state.getIn(['liveSearch', 'total']),
-      skipInterval: state.getIn(['components', 'player', 'skipInterval']),
+      skipInterval: state.getIn(['player', 'skipInterval']),
       previousSessionId: state.getIn(['sessions', 'previousId']),
       nextSessionId: state.getIn(['sessions', 'nextId']),
       siteId: state.getIn(['site', 'siteId']),

frontend/app/components/Session_/Player/Controls/Timeline.tsx

@@ -185,9 +185,9 @@ export default connect(
     startedAt: state.getIn(['sessions', 'current']).startedAt || 0,
     timezone: state.getIn(['sessions', 'current']).timezone,
     tooltipVisible: state.getIn(['sessions', 'timeLineTooltip', 'isVisible']),
-    timelineZoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-    timelineZoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-    timelineZoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
+    timelineZoomEnabled: state.getIn(['player']).timelineZoom.enabled,
+    timelineZoomStartTs: state.getIn(['player']).timelineZoom.startTs,
+    timelineZoomEndTs: state.getIn(['player']).timelineZoom.endTs,
   }),
   { setTimelinePointer, setTimelineHoverTime }
 )(observer(Timeline));

frontend/app/components/Session_/Player/Controls/components/TimelineZoomButton.tsx

@@ -43,9 +43,9 @@ function TimelineZoomButton({ enabled, toggleZoom }: Props) {
 
 export default connect(
   (state: Record<string, any>) => ({
-    enabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-    startTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-    endTs: state.getIn(['components', 'player']).timelineZoom.endTs,
+    enabled: state.getIn(['player']).timelineZoom.enabled,
+    startTs: state.getIn(['player']).timelineZoom.startTs,
+    endTs: state.getIn(['player']).timelineZoom.endTs,
   }),
   { toggleZoom }
 )(observer(TimelineZoomButton));

frontend/app/components/Session_/Player/Controls/components/ZoomDragLayer.tsx

@@ -197,9 +197,9 @@ const DraggableMarkers = ({
 
 export default connect(
   (state: Record<string, any>) => ({
-    timelineZoomStartTs: state.getIn(['components', 'player']).timelineZoom
+    timelineZoomStartTs: state.getIn(['player']).timelineZoom
       .startTs,
-    timelineZoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
+    timelineZoomEndTs: state.getIn(['player']).timelineZoom.endTs,
   }),
   { toggleZoom }
 )(DraggableMarkers);

frontend/app/components/Session_/Storage/Storage.tsx

@@ -346,7 +346,7 @@ function Storage(props: Props) {
 
 export default connect(
   (state: any) => ({
-    hintIsHidden: state.getIn(['components', 'player', 'hiddenHints', 'storage']),
+    hintIsHidden: state.getIn(['player', 'hiddenHints', 'storage']),
   }),
   {
     hideHint,

frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx

@@ -225,7 +225,7 @@ function ConsolePanel({
 }
 
 export default connect((state: Record<string, any>) => ({
-  zoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-  zoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-  zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
+  zoomEnabled: state.getIn(['player']).timelineZoom.enabled,
+  zoomStartTs: state.getIn(['player']).timelineZoom.startTs,
+  zoomEndTs: state.getIn(['player']).timelineZoom.endTs,
 }))(observer(ConsolePanel));

frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx

@@ -680,16 +680,16 @@ export const NetworkPanelComp = observer(
 
 const WebNetworkPanel = connect((state: any) => ({
   startedAt: state.getIn(['sessions', 'current']).startedAt,
-  zoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-  zoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-  zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
+  zoomEnabled: state.getIn(['player']).timelineZoom.enabled,
+  zoomStartTs: state.getIn(['player']).timelineZoom.startTs,
+  zoomEndTs: state.getIn(['player']).timelineZoom.endTs,
 }))(observer(NetworkPanelCont));
 
 const MobileNetworkPanel = connect((state: any) => ({
   startedAt: state.getIn(['sessions', 'current']).startedAt,
-  zoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-  zoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-  zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
+  zoomEnabled: state.getIn(['player']).timelineZoom.enabled,
+  zoomStartTs: state.getIn(['player']).timelineZoom.startTs,
+  zoomEndTs: state.getIn(['player']).timelineZoom.endTs,
 }))(observer(MobileNetworkPanelCont));
 
 export { WebNetworkPanel, MobileNetworkPanel };

frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx

@@ -57,9 +57,9 @@ const WebStackEventPanelComp = observer(
 );
 
 export const WebStackEventPanel = connect((state: Record<string, any>) => ({
-  zoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-  zoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-  zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
+  zoomEnabled: state.getIn(['player']).timelineZoom.enabled,
+  zoomStartTs: state.getIn(['player']).timelineZoom.startTs,
+  zoomEndTs: state.getIn(['player']).timelineZoom.endTs,
 }))(WebStackEventPanelComp);
 
 const MobileStackEventPanelComp = observer(
@@ -90,9 +90,9 @@ const MobileStackEventPanelComp = observer(
 );
 
 export const MobileStackEventPanel = connect((state: Record<string, any>) => ({
-  zoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-  zoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-  zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
+  zoomEnabled: state.getIn(['player']).timelineZoom.enabled,
+  zoomStartTs: state.getIn(['player']).timelineZoom.startTs,
+  zoomEndTs: state.getIn(['player']).timelineZoom.endTs,
 }))(MobileStackEventPanelComp);
 
 function EventsPanel({

frontend/app/duck/components/index.js

@@ -1,9 +0,0 @@
-import { combineReducers } from 'redux-immutable';
-
-import targetDefiner from './targetDefiner';
-import player from './player';
-
-export default combineReducers({
-  targetDefiner,
-  player,
-});

frontend/app/duck/components/targetDefiner.js

@@ -1,72 +0,0 @@
-import { Map } from 'immutable';
-import Target from 'Types/target';
-import TargetCustom from 'Types/targetCustom';
-
-const EDIT = 'targetDefiner/EDIT';
-const SHOW = 'targetDefiner/SHOW';
-const HIDE = 'targetDefiner/HIDE';
-const TOGGLE_INSPECTOR_MODE = 'targetDefiner/TOGGLE_INSPECTOR_MODE';
-
-const initialState = Map({
-  isDisplayed: false,
-  target: Target(),
-  inspectorMode: false,
-});
-
-const reducer = (state = initialState, action = {}) => {
-  switch (action.type) {
-    case EDIT:
-      return state.setIn([ 'target', 'label' ], action.label);
-    case SHOW:
-      const target = action.target && !action.target.isCustom 
-        ? Target(action.target)
-        : TargetCustom(action.target);
-      return state
-        .set('isDisplayed', true)
-        .set('target', target)
-        .set('inspectorMode', false);
-    case HIDE:
-      return state
-        .set('isDisplayed', false)
-        .set('target', Target())
-    case TOGGLE_INSPECTOR_MODE:
-      const inspectorMode = action.flag !== undefined
-        ? action.flag
-        : !state.get('inspectorMode');
-      let returnState = state.set('inspectorMode', inspectorMode);
-      if (inspectorMode) {
-        returnState = returnState.set('isDisplayed', false).set('target', Target());
-      }
-      return returnState;
-  }
-  return state;
-};
-
-export default reducer;
-
-export function show(target) {
-  return {
-    type: SHOW,
-    target,
-  };
-}
-
-export function hide() {
-  return {
-    type: HIDE,
-  };
-}
-
-export function edit(label) {
-  return {
-    type: EDIT,
-    label,
-  };
-}
-
-export function toggleInspectorMode(flag) {
-  return {
-    type: TOGGLE_INSPECTOR_MODE,
-    flag,
-  };
-}

frontend/app/duck/index.ts

@@ -6,15 +6,13 @@ import sessions from './sessions';
 import assignments from './assignments';
 import filters from './filters';
 import funnelFilters from './funnelFilters';
-import templates from './templates';
 import dashboard from './dashboard';
-import components from './components';
+import player from './components/player'
 import sources from './sources';
 import members from './member';
 import site from './site';
 import customFields from './customField';
 import integrations from './integrations';
-import rehydrate from './rehydrate';
 import errors from './errors';
 import funnels from './funnels';
 import roles from './roles';
@@ -29,13 +27,11 @@ const rootReducer = combineReducers({
   filters,
   funnelFilters,
 
-  templates,
   dashboard,
-  components,
+  player,
   members,  
   site,
   customFields,
-  rehydrate,
   errors,
   funnels,
   roles,

frontend/app/duck/rehydrate.js

@@ -1,54 +0,0 @@
-import { List, Map } from 'immutable';
-import RehydrateJob from 'Types/rehydrateJob';
-
-import { mergeReducers } from './funcTools/tools';
-import { createRequestReducer } from './funcTools/request';
-import { 
-	createCRUDReducer, 
-	getCRUDRequestTypes,
-	createFetchList,
-	createInit,
-	createEdit,
-	createRemove,
-	createSave,
-} from './funcTools/crud';
-
-const name = 'rehydration';
-const idKey = 'rehydrationId';
-
-
-const SET_ACTIVE_TAB = 'steps/SET_ACTIVE_TAB';
-
-const initialState = Map({
-  activeJob: Map(),
-  list: List()
-});
-
-const reducer = (state = initialState, action = {}) => {
-  switch (action.type) {
-    case SET_ACTIVE_TAB:
-      return state.set('activeJob', RehydrateJob(action.instance));
-  }
-  return state;
-};
-
-export function setActiveTab(instance) {
-  return {
-    type: SET_ACTIVE_TAB,
-    instance,
-  };
-}
-
-export const fetchList = createFetchList(name);
-export const init = createInit(name);
-export const edit = createEdit(name);
-export const save = createSave(name);
-export const remove = createRemove(name);
-
-export default mergeReducers(
-	reducer,
-	createCRUDReducer(name, RehydrateJob, idKey),
-	createRequestReducer({
-		...getCRUDRequestTypes(name),
-	}),
-);

frontend/app/duck/templates.js

@@ -1,13 +0,0 @@
-import Template from 'Types/template';
-import crudDuckGenerator from './tools/crudDuck';
-
-const crudDuck = crudDuckGenerator(
-  'template', Template,
-  { endpoints: { fetchList: '/templates' } },
-);
-
-export const {
-  fetchList, fetch, init, edit, save, remove,
-} = crudDuck.actions;
-
-export default crudDuck.reducer;

frontend/app/store.js

@@ -1,42 +1,44 @@
-import { createStore, applyMiddleware, compose } from 'redux';
-import { thunk } from 'redux-thunk';
+import { configureStore } from '@reduxjs/toolkit';
 import { Map } from 'immutable';
-import indexReducer from './duck';
+
 import apiMiddleware from './api_middleware';
+import indexReducer from './duck';
+import { UPDATE_JWT, initialState as initUserState } from './duck/user';
 import LocalStorage from './local_storage';
-import { initialState as initUserState, UPDATE_JWT } from './duck/user'
 
 const storage = new LocalStorage({
   user: Object,
 });
 
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.env.NODE_ENV === "development" 
-  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
-
 const storageState = storage.state();
-const initialState = Map({ user:
-    initUserState
-      .update('jwt', () => storageState.user?.jwt || null)
-      .update('spotJwt', () => storageState.user?.spotJwt || null)
+const initialState = Map({
+  user: initUserState
+    .update('jwt', () => storageState.user?.jwt || null)
+    .update('spotJwt', () => storageState.user?.spotJwt || null),
+});
+
+const store = configureStore({
+  reducer: indexReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({ serializableCheck: false, immutableCheck: false }).concat(apiMiddleware),
+  preloadedState: initialState,
+  devTools: window.env.NODE_ENV === 'development',
 });
 
-const store = createStore(indexReducer, initialState, composeEnhancers(applyMiddleware(thunk, apiMiddleware)));
 store.subscribe(() => {
   const state = store.getState();
-
   storage.sync({
-    user: state.get('user')
+    user: state.get('user'),
   });
 });
 
 function copyToClipboard(text) {
-  const textArea = document.createElement("textarea");
+  const textArea = document.createElement('textarea');
   textArea.value = text;
 
-  // Avoid scrolling to bottom
-  textArea.style.top = "0";
-  textArea.style.left = "0";
-  textArea.style.position = "fixed";
+  textArea.style.top = '0';
+  textArea.style.left = '0';
+  textArea.style.position = 'fixed';
 
   document.body.appendChild(textArea);
   textArea.focus();
@@ -53,18 +55,20 @@ function copyToClipboard(text) {
   document.body.removeChild(textArea);
 }
 
-
 window.getJWT = () => {
-  const jwtToken = storage.state().user?.jwt ? JSON.stringify(storage.state().user?.jwt) : null
+  const jwtToken = storage.state().user?.jwt
+    ? JSON.stringify(storage.state().user?.jwt)
+    : null;
   if (jwtToken) {
     console.log(jwtToken);
-    copyToClipboard(jwtToken)
+    copyToClipboard(jwtToken);
   } else {
-    console.log('not logged in')
+    console.log('not logged in');
   }
-}
+};
+
 window.setJWT = (jwt) => {
-  store.dispatch({ type: UPDATE_JWT, data: { jwt } })
-}
+  store.dispatch({ type: UPDATE_JWT, data: { jwt } });
+};
 
 export default store;