From aecf3ecd967fae5d8bfc4a995be7070f8044af49 Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Thu, 5 Sep 2024 17:19:19 +0200 Subject: [PATCH] start moving ui to redux tlk --- .../app/{duck/alerts.js => api_middleware.js} | 0 .../app/components/Session/MobilePlayer.tsx | 2 +- .../Player/LivePlayer/LivePlayerInst.tsx | 2 +- .../Player/MobilePlayer/MobileControls.tsx | 8 +-- .../Player/MobilePlayer/PerfWarnings.tsx | 2 +- .../Player/MobilePlayer/PlayerBlock.tsx | 7 +- .../Player/MobilePlayer/PlayerInst.tsx | 4 +- .../Player/ReplayPlayer/PlayerBlock.tsx | 8 +-- .../Player/ReplayPlayer/PlayerInst.tsx | 4 +- .../ReplayPlayer/SummaryBlock/index.tsx | 8 +-- frontend/app/components/Session/WebPlayer.tsx | 2 +- .../Session_/EventsBlock/EventsBlock.tsx | 6 +- .../Session_/OverviewPanel/OverviewPanel.tsx | 14 ++-- .../Session_/Player/Controls/Controls.tsx | 8 +-- .../Session_/Player/Controls/Timeline.tsx | 6 +- .../components/TimelineZoomButton.tsx | 6 +- .../Controls/components/ZoomDragLayer.tsx | 4 +- .../components/Session_/Storage/Storage.tsx | 2 +- .../DevTools/ConsolePanel/ConsolePanel.tsx | 6 +- .../DevTools/NetworkPanel/NetworkPanel.tsx | 12 ++-- .../StackEventPanel/StackEventPanel.tsx | 12 ++-- frontend/app/duck/components/index.js | 9 --- frontend/app/duck/components/targetDefiner.js | 72 ------------------- frontend/app/duck/funcTools/index.js | 0 frontend/app/duck/index.ts | 8 +-- frontend/app/duck/rehydrate.js | 54 -------------- frontend/app/duck/templates.js | 13 ---- frontend/app/store.js | 56 ++++++++------- 28 files changed, 89 insertions(+), 246 deletions(-) rename frontend/app/{duck/alerts.js => api_middleware.js} (100%) delete mode 100644 frontend/app/duck/components/index.js delete mode 100644 frontend/app/duck/components/targetDefiner.js delete mode 100644 frontend/app/duck/funcTools/index.js delete mode 100644 frontend/app/duck/rehydrate.js delete mode 100644 frontend/app/duck/templates.js diff --git a/frontend/app/duck/alerts.js b/frontend/app/api_middleware.js similarity index 100% rename from frontend/app/duck/alerts.js rename to frontend/app/api_middleware.js diff --git a/frontend/app/components/Session/MobilePlayer.tsx b/frontend/app/components/Session/MobilePlayer.tsx index 6915af74e..3c7605208 100644 --- a/frontend/app/components/Session/MobilePlayer.tsx +++ b/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']), }), diff --git a/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx b/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx index d9b23242a..49e9599f7 100644 --- a/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx +++ b/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), diff --git a/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx b/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx index 31de09d1c..75d67b53e 100644 --- a/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx +++ b/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']), diff --git a/frontend/app/components/Session/Player/MobilePlayer/PerfWarnings.tsx b/frontend/app/components/Session/Player/MobilePlayer/PerfWarnings.tsx index 0fe38f492..235fffa6b 100644 --- a/frontend/app/components/Session/Player/MobilePlayer/PerfWarnings.tsx +++ b/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)); diff --git a/frontend/app/components/Session/Player/MobilePlayer/PlayerBlock.tsx b/frontend/app/components/Session/Player/MobilePlayer/PlayerBlock.tsx index 59a31de3c..fe3bf6f8d 100644 --- a/frontend/app/components/Session/Player/MobilePlayer/PlayerBlock.tsx +++ b/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 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 ? ( - + ) : null} ({ - 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) \ No newline at end of file diff --git a/frontend/app/components/Session/Player/MobilePlayer/PlayerInst.tsx b/frontend/app/components/Session/Player/MobilePlayer/PlayerInst.tsx index 188f286ef..19080b4e8 100644 --- a/frontend/app/components/Session/Player/MobilePlayer/PlayerInst.tsx +++ b/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, diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlock.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlock.tsx index aa30ae5a1..176ba549a 100644 --- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlock.tsx +++ b/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; 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 (
{shouldShowSubHeader - ? + ? : null}
@@ -30,8 +29,7 @@ function PlayerBlock(props: IProps) { } export default connect((state: Record) => ({ - 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); diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx index 9433b75cc..3a26b37b0 100644 --- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx +++ b/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, diff --git a/frontend/app/components/Session/Player/ReplayPlayer/SummaryBlock/index.tsx b/frontend/app/components/Session/Player/ReplayPlayer/SummaryBlock/index.tsx index 5d528fada..ee8c49476 100644 --- a/frontend/app/components/Session/Player/ReplayPlayer/SummaryBlock/index.tsx +++ b/frontend/app/components/Session/Player/ReplayPlayer/SummaryBlock/index.tsx @@ -155,9 +155,9 @@ const summaryBlockStyle: React.CSSProperties = { }; export default connect((state: Record) => ({ - 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)); diff --git a/frontend/app/components/Session/WebPlayer.tsx b/frontend/app/components/Session/WebPlayer.tsx index b7e052140..fdf45d68f 100644 --- a/frontend/app/components/Session/WebPlayer.tsx +++ b/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, diff --git a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx b/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx index 79045ebde..16d269588 100644 --- a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx +++ b/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, diff --git a/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx b/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx index d3fade552..dd4a04113 100644 --- a/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx +++ b/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx @@ -386,9 +386,9 @@ export const OverviewPanel = connect( (state: Record) => ({ 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) => ({ 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, diff --git a/frontend/app/components/Session_/Player/Controls/Controls.tsx b/frontend/app/components/Session_/Player/Controls/Controls.tsx index 76a111f82..c4577a230 100644 --- a/frontend/app/components/Session_/Player/Controls/Controls.tsx +++ b/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']), diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.tsx b/frontend/app/components/Session_/Player/Controls/Timeline.tsx index 040480cc7..5c7ab60c7 100644 --- a/frontend/app/components/Session_/Player/Controls/Timeline.tsx +++ b/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)); diff --git a/frontend/app/components/Session_/Player/Controls/components/TimelineZoomButton.tsx b/frontend/app/components/Session_/Player/Controls/components/TimelineZoomButton.tsx index e7d5bf9e3..c2fbd5fe9 100644 --- a/frontend/app/components/Session_/Player/Controls/components/TimelineZoomButton.tsx +++ b/frontend/app/components/Session_/Player/Controls/components/TimelineZoomButton.tsx @@ -43,9 +43,9 @@ function TimelineZoomButton({ enabled, toggleZoom }: Props) { export default connect( (state: Record) => ({ - 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)); diff --git a/frontend/app/components/Session_/Player/Controls/components/ZoomDragLayer.tsx b/frontend/app/components/Session_/Player/Controls/components/ZoomDragLayer.tsx index 67e5e6e5f..b531d93b6 100644 --- a/frontend/app/components/Session_/Player/Controls/components/ZoomDragLayer.tsx +++ b/frontend/app/components/Session_/Player/Controls/components/ZoomDragLayer.tsx @@ -197,9 +197,9 @@ const DraggableMarkers = ({ export default connect( (state: Record) => ({ - 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); diff --git a/frontend/app/components/Session_/Storage/Storage.tsx b/frontend/app/components/Session_/Storage/Storage.tsx index c959d6348..ec87e436d 100644 --- a/frontend/app/components/Session_/Storage/Storage.tsx +++ b/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, diff --git a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx index da43101a0..2329b0138 100644 --- a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx +++ b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx @@ -225,7 +225,7 @@ function ConsolePanel({ } export default connect((state: Record) => ({ - 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)); diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx index 28a638f6f..3001d3449 100644 --- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx +++ b/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 }; diff --git a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx index 068a1498f..b2f36f04c 100644 --- a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx +++ b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx @@ -57,9 +57,9 @@ const WebStackEventPanelComp = observer( ); export const WebStackEventPanel = connect((state: Record) => ({ - 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) => ({ - 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({ diff --git a/frontend/app/duck/components/index.js b/frontend/app/duck/components/index.js deleted file mode 100644 index faef82566..000000000 --- a/frontend/app/duck/components/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import { combineReducers } from 'redux-immutable'; - -import targetDefiner from './targetDefiner'; -import player from './player'; - -export default combineReducers({ - targetDefiner, - player, -}); diff --git a/frontend/app/duck/components/targetDefiner.js b/frontend/app/duck/components/targetDefiner.js deleted file mode 100644 index c58726aa9..000000000 --- a/frontend/app/duck/components/targetDefiner.js +++ /dev/null @@ -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, - }; -} diff --git a/frontend/app/duck/funcTools/index.js b/frontend/app/duck/funcTools/index.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/frontend/app/duck/index.ts b/frontend/app/duck/index.ts index d9412eedc..3911c452a 100644 --- a/frontend/app/duck/index.ts +++ b/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, diff --git a/frontend/app/duck/rehydrate.js b/frontend/app/duck/rehydrate.js deleted file mode 100644 index df0b4ff50..000000000 --- a/frontend/app/duck/rehydrate.js +++ /dev/null @@ -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), - }), -); \ No newline at end of file diff --git a/frontend/app/duck/templates.js b/frontend/app/duck/templates.js deleted file mode 100644 index b4ad9c9cc..000000000 --- a/frontend/app/duck/templates.js +++ /dev/null @@ -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; diff --git a/frontend/app/store.js b/frontend/app/store.js index 371c82a1f..e7e41e9cb 100644 --- a/frontend/app/store.js +++ b/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;