diff --git a/frontend/app/components/Session_/Storage/Storage.tsx b/frontend/app/components/Session_/Storage/Storage.tsx index 3c010e4d1..e186f6de5 100644 --- a/frontend/app/components/Session_/Storage/Storage.tsx +++ b/frontend/app/components/Session_/Storage/Storage.tsx @@ -5,6 +5,7 @@ import { PlayerContext } from 'App/components/Session/playerContext'; import { observer } from 'mobx-react-lite'; import { JSONTree, NoContent, Tooltip } from 'UI'; import { formatMs } from 'App/date'; +// @ts-ignore import { diff } from 'deep-diff'; import { STORAGE_TYPES, selectStorageList, selectStorageListNow, selectStorageType } from 'Player'; import Autoscroll from '../Autoscroll'; @@ -40,13 +41,28 @@ interface Props { function Storage(props: Props) { const lastBtnRef = React.useRef(); const [showDiffs, setShowDiffs] = React.useState(false); + const [stateObject, setState] = React.useState({}); + const { player, store } = React.useContext(PlayerContext); const { tabStates, currentTab } = store.get() - const state = tabStates[currentTab] + const state = tabStates[currentTab] || {} - const listNow = selectStorageListNow(state); - const list = selectStorageList(state); - const type = selectStorageType(state); + const listNow = selectStorageListNow(state) || []; + const list = selectStorageList(state) || []; + const type = selectStorageType(state) || STORAGE_TYPES.NONE + + React.useEffect(() => { + let currentState; + if (listNow.length === 0) { + currentState = decodeMessage(list[0]) + } else { + currentState = decodeMessage(listNow[listNow.length - 1]) + } + const stateObj = currentState.state || currentState.payload.state + const newState = Object.assign(stateObject, stateObj); + setState(newState); + + }, [listNow.length]); const decodeMessage = (msg: any) => { const decoded = {}; @@ -85,7 +101,11 @@ function Storage(props: Props) { focusNextButton(); }, [listNow]); - const renderDiff = (item: Record, prevItem: Record) => { + const renderDiff = (item: Record, prevItem?: Record) => { + if (!showDiffs) { + return; + } + if (!prevItem) { // we don't have state before first action return
; @@ -167,7 +187,7 @@ function Storage(props: Props) { name = itemD.mutation.join(''); } - if (src !== null && !showDiffs) { + if (src !== null && !showDiffs && itemD.state) { setShowDiffs(true); } @@ -183,7 +203,7 @@ function Storage(props: Props) { ) : ( <> {renderDiff(itemD, prevItemD)} -
+
{list.length > 0 && (
- {showStore && ( -

- {'STATE'} -

- )} +

+ {'STATE'} +

{showDiffs ? (

DIFFS @@ -312,22 +329,17 @@ function Storage(props: Props) { size="small" show={list.length === 0} > - {showStore && ( -
- {list.length === 0 ? ( -
- {'Empty state.'} -
- ) : ( - - )} -
- )} -
+
+ {list.length === 0 ? ( +
+ {'Empty state.'} +
+ ) : ( + + )} +
+
{decodedList.map((item: Record, i: number) => renderItem(item, i, i > 0 ? decodedList[i - 1] : undefined) diff --git a/frontend/app/player/web/messages/MFileReader.ts b/frontend/app/player/web/messages/MFileReader.ts index 5d806135b..e1ce5969b 100644 --- a/frontend/app/player/web/messages/MFileReader.ts +++ b/frontend/app/player/web/messages/MFileReader.ts @@ -23,7 +23,6 @@ export default class MFileReader extends RawMessageReader { const skipIndexes = this.readCustomIndex(this.buf.slice(0, 8)) === 72057594037927940 || this.readCustomIndex(this.buf.slice(0, 9)) === 72057594037927940 - console.log(this.readCustomIndex(this.buf.slice(0, 8)), this.readCustomIndex(this.buf.slice(0, 9))) if (skipIndexes) { this.noIndexes = true this.skip(8) diff --git a/frontend/app/player/web/storageSelectors.ts b/frontend/app/player/web/storageSelectors.ts index 1fa1ea32b..0ceac8637 100644 --- a/frontend/app/player/web/storageSelectors.ts +++ b/frontend/app/player/web/storageSelectors.ts @@ -12,16 +12,15 @@ export enum StorageType { export const STORAGE_TYPES = StorageType // TODO: update name everywhere export function selectStorageType(state: State): StorageType { - if (!state.reduxList) return StorageType.NONE - if (state.reduxList.length > 0) { + if (state.reduxList?.length > 0) { return StorageType.REDUX - } else if (state.vuexList.length > 0) { + } else if (state.vuexList?.length > 0) { return StorageType.VUEX - } else if (state.mobxList.length > 0) { + } else if (state.mobxList?.length > 0) { return StorageType.MOBX - } else if (state.ngrxList.length > 0) { + } else if (state.ngrxList?.length > 0) { return StorageType.NGRX - } else if (state.zustandList.length > 0) { + } else if (state.zustandList?.length > 0) { return StorageType.ZUSTAND } return StorageType.NONE