jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): extract url from tab state (preventing subheader rerenders)

Browse source
This commit is contained in:
nick-delirium 2023-06-12 16:08:30 +02:00
parent e8b4cf257d
commit 9aaa6a29fc
2 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
frontend/app/components/Session_/Subheader.js
View file

@ -21,14 +21,7 @@ function SubHeader(props) {
const defaultLocalhostWarn = localStorage.getItem(localhostWarnKey) !== '1'; const defaultLocalhostWarn = localStorage.getItem(localhostWarnKey) !== '1';
const [showWarningModal, setWarning] = React.useState(defaultLocalhostWarn); const [showWarningModal, setWarning] = React.useState(defaultLocalhostWarn);
const { player, store } = React.useContext(PlayerContext); const { player, store } = React.useContext(PlayerContext);
const { width, height, endTime, tabStates, currentTab, tabs } = store.get(); const { width, height, endTime, location: currentLocation = '', tabs, currentTab } = store.get();
const currentLocation = tabStates[currentTab]?.location || '';
const resourceList = tabStates[currentTab]?.resourceList || [];
const exceptionsList = tabStates[currentTab]?.exceptionsList || [];
const eventsList = tabStates[currentTab]?.eventList || [];
const graphqlList = tabStates[currentTab]?.graphqlList || [];
const fetchList = tabStates[currentTab]?.fetchList || [];
const enabledIntegration = useMemo(() => { const enabledIntegration = useMemo(() => {
const { integrations } = props; const { integrations } = props;
@ -39,11 +32,6 @@ function SubHeader(props) {
return integrations.some((i) => i.token); return integrations.some((i) => i.token);
}); });
const mappedResourceList = resourceList
.filter((r) => r.isRed || r.isYellow)
.concat(fetchList.filter((i) => parseInt(i.status) >= 400))
.concat(graphqlList.filter((i) => parseInt(i.status) >= 400));
const { showModal, hideModal } = useModal(); const { showModal, hideModal } = useModal();
const location = const location =
@ -52,6 +40,18 @@ function SubHeader(props) {
: currentLocation; : currentLocation;
const showReportModal = () => { const showReportModal = () => {
const { tabStates } = store.get();
const resourceList = tabStates[currentTab]?.resourceList || [];
const exceptionsList = tabStates[currentTab]?.exceptionsList || [];
const eventsList = tabStates[currentTab]?.eventList || [];
const graphqlList = tabStates[currentTab]?.graphqlList || [];
const fetchList = tabStates[currentTab]?.fetchList || [];
const mappedResourceList = resourceList
.filter((r) => r.isRed || r.isYellow)
.concat(fetchList.filter((i) => parseInt(i.status) >= 400))
.concat(graphqlList.filter((i) => parseInt(i.status) >= 400));
player.pause(); player.pause();
const xrayProps = { const xrayProps = {
currentLocation: currentLocation, currentLocation: currentLocation,

2
frontend/app/player/web/TabManager.ts
View file

@ -246,7 +246,7 @@ export default class TabSessionManager {
/* === */ /* === */
const lastLocationMsg = this.locationManager.moveGetLast(t, index); const lastLocationMsg = this.locationManager.moveGetLast(t, index);
if (!!lastLocationMsg) { if (!!lastLocationMsg) {
stateToUpdate.location = lastLocationMsg.url; this.state.update({ location: lastLocationMsg.url })
} }
const lastConnectionInfoMsg = this.connectionInfoManger.moveGetLast(t, index); const lastConnectionInfoMsg = this.connectionInfoManger.moveGetLast(t, index);
if (!!lastConnectionInfoMsg) { if (!!lastConnectionInfoMsg) {