diff --git a/frontend/app/components/Errors/Error/ErrorInfo.js b/frontend/app/components/Errors/Error/ErrorInfo.js index 91c06b617..abfa4e76b 100644 --- a/frontend/app/components/Errors/Error/ErrorInfo.js +++ b/frontend/app/components/Errors/Error/ErrorInfo.js @@ -35,8 +35,10 @@ export default class ErrorInfo extends React.PureComponent { componentDidMount() { this.ensureInstance(); } - componentDidUpdate() { - this.ensureInstance(); + componentDidUpdate(prevProps) { + if (prevProps.errorId !== this.props.errorId || prevProps.errorIdInStore !== this.props.errorIdInStore) { + this.ensureInstance(); + } } next = () => { const { list, errorId } = this.props; diff --git a/frontend/app/components/Session_/Storage/Storage.js b/frontend/app/components/Session_/Storage/Storage.js index 20fa1c703..e0fbb73f6 100644 --- a/frontend/app/components/Session_/Storage/Storage.js +++ b/frontend/app/components/Session_/Storage/Storage.js @@ -14,13 +14,9 @@ import { diff } from 'deep-diff'; import { jump } from 'Player'; import BottomBlock from '../BottomBlock/index'; import DiffRow from './DiffRow'; -import cn from 'classnames'; import stl from './storage.module.css'; -import { List, CellMeasurer, CellMeasurerCache, AutoSizer } from 'react-virtualized' +import { List, CellMeasurer, CellMeasurerCache, AutoSizer } from 'react-virtualized'; -// const STATE = 'STATE'; -// const DIFF = 'DIFF'; -// const TABS = [ DIFF, STATE ].map(tab => ({ text: tab, key: tab })); const ROW_HEIGHT = 90; function getActionsName(type) { @@ -46,7 +42,6 @@ function getActionsName(type) { hideHint, } ) -//@withEnumToggle('activeTab', 'setActiveTab', DIFF) export default class Storage extends React.PureComponent { constructor(props) { super(props); @@ -55,9 +50,9 @@ export default class Storage extends React.PureComponent { this._list = React.createRef(); this.cache = new CellMeasurerCache({ fixedWidth: true, - keyMapper: index => this.props.listNow[index] + keyMapper: (index) => this.props.listNow[index], }); - this._rowRenderer = this._rowRenderer.bind(this) + this._rowRenderer = this._rowRenderer.bind(this); } focusNextButton() { @@ -102,7 +97,10 @@ export default class Storage extends React.PureComponent { } return ( -
+
{stateDiff.map((d, i) => this.renderDiffs(d, i))}
); @@ -150,7 +148,7 @@ export default class Storage extends React.PureComponent { return ; } - renderItem(item, i, prevItem, style, measure) { + renderItem(item, i, prevItem, style) { const { type } = this.props; let src; let name; @@ -177,9 +175,8 @@ export default class Storage extends React.PureComponent { return (
{measure(); this._list.recomputeRowHeights(i)}} > {src === null ? (
@@ -188,7 +185,10 @@ export default class Storage extends React.PureComponent { ) : ( <> {this.renderDiff(item, prevItem, i)} -
+
)} -
+
{typeof item.duration === 'number' && (
{formatMs(item.duration)}
)} @@ -209,7 +212,7 @@ export default class Storage extends React.PureComponent { {'JUMP'} )} - {i + 1 === this.props.listNow.length && i + 1 < this.props.list.length && ( + {i + 1 === this.props.listNow.length && i + 1 < this.props.list.length && ( @@ -220,29 +223,20 @@ export default class Storage extends React.PureComponent { ); } - _rowRenderer({index, key, parent, style}) { - // listNow.map((item, i) => - // this.renderItem(item, i, i > 0 ? listNow[i - 1] : undefined, listNowLen, listLen) - // ) + _rowRenderer({ index, parent, key, style }) { const { listNow } = this.props; - if (!listNow[index]) return console.warn(index, listNow) + if (!listNow[index]) return console.warn(index, listNow); return ( - - {({ measure }) => this.renderItem(listNow[index], index, index > 0 ? listNow[index - 1] : undefined, style, measure)} + + {this.renderItem(listNow[index], index, index > 0 ? listNow[index - 1] : undefined, style)} - ) + ); } render() { - const { type, listNow, list, hintIsHidden } = this.props; + const { type, list, listNow, hintIsHidden } = this.props; const showStore = type !== STORAGE_TYPES.MOBX; return ( @@ -250,17 +244,21 @@ export default class Storage extends React.PureComponent { {list.length > 0 && (
- {showStore &&

{'STATE'}

} + {showStore && ( +

+ {'STATE'} +

+ )} {type !== STORAGE_TYPES.ZUSTAND ? ( -

+

DIFFS

) : null} -

{getActionsName(type)}

-

- - TTE - +

+ {getActionsName(type)} +

+

+ TTE

)} @@ -345,10 +343,10 @@ export default class Storage extends React.PureComponent {
)}
- - {({ height, width }) => ( + + {({ height, width }) => ( { + ref={(element) => { this._list = element; }} deferredMeasurementCache={this.cache} @@ -359,8 +357,8 @@ export default class Storage extends React.PureComponent { width={width} height={height} /> - )} - + )} +