Unverified Commit 6737eb00 authored by Manoj Pandian Sakthivel's avatar Manoj Pandian Sakthivel Committed by GitHub

Restore track states on browser refresh (#325)

This commit fixes the issues with restoring the track states in the following scenarios:
- Restoring after browser refresh
- Switching between species
- Switching between apps
parent c9df9169
Pipeline #88609 passed with stages
in 8 minutes and 6 seconds
......@@ -64,7 +64,6 @@ describe('<Browser />', () => {
isDrawerOpened: false,
isTrackPanelOpened: false,
exampleEnsObjects: [],
restoreBrowserTrackStates: jest.fn(),
fetchGenomeData: jest.fn(),
toggleTrackPanel: jest.fn(),
toggleDrawer: jest.fn(),
......
......@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { useEffect, useState } from 'react';
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import upperFirst from 'lodash/upperFirst';
......@@ -22,9 +22,7 @@ import upperFirst from 'lodash/upperFirst';
import useBrowserRouting from './hooks/useBrowserRouting';
import analyticsTracking from 'src/services/analytics-service';
import browserStorageService from './browser-storage-service';
import * as urlFor from 'src/shared/helpers/urlHelper';
import { BrowserTrackStates } from './track-panel/trackPanelConfig';
import { BreakpointWidth } from 'src/global/globalConfig';
import {
......@@ -32,7 +30,6 @@ import {
buildFocusIdForUrl
} from 'src/shared/state/ens-object/ensObjectHelpers';
import { restoreBrowserTrackStates } from './browserActions';
import { fetchGenomeData } from 'src/shared/state/genome/genomeActions';
import { toggleTrackPanel } from 'src/content/app/browser/track-panel/trackPanelActions';
import { toggleDrawer } from './drawer/drawerActions';
......@@ -46,6 +43,7 @@ import {
getBrowserActiveEnsObjectId,
getBrowserActiveEnsObjectIds
} from './browserSelectors';
import { getIsTrackPanelOpened } from './track-panel/trackPanelSelectors';
import { getIsDrawerOpened } from './drawer/drawerSelectors';
import { getExampleEnsObjects } from 'src/shared/state/ens-object/ensObjectSelectors';
......@@ -80,14 +78,12 @@ export type BrowserProps = {
isTrackPanelOpened: boolean;
exampleEnsObjects: EnsObject[];
viewportWidth: BreakpointWidth;
restoreBrowserTrackStates: () => void;
fetchGenomeData: (genomeId: string) => void;
toggleTrackPanel: (isOpen: boolean) => void;
toggleDrawer: (isDrawerOpened: boolean) => void;
};
export const Browser = (props: BrowserProps) => {
const [, setTrackStatesFromStorage] = useState<BrowserTrackStates>({});
const { changeGenomeId } = useBrowserRouting();
const { isDrawerOpened } = props;
......@@ -101,11 +97,6 @@ export const Browser = (props: BrowserProps) => {
analyticsTracking.setSpeciesDimension(activeGenomeId);
}, [props.activeGenomeId]);
useEffect(() => {
setTrackStatesFromStorage(browserStorageService.getTrackStates());
props.restoreBrowserTrackStates();
}, [props.activeGenomeId, props.activeEnsObjectId]);
const onSidebarToggle = () => {
props.toggleTrackPanel(!props.isTrackPanelOpened); // FIXME
};
......@@ -207,7 +198,6 @@ const mapStateToProps = (state: RootState) => {
const mapDispatchToProps = {
fetchGenomeData,
toggleDrawer,
restoreBrowserTrackStates,
toggleTrackPanel
};
......
......@@ -44,7 +44,8 @@ describe('<TrackPanel />', () => {
activeGenomeId: null,
browserActivated: false,
activeEnsObject: null,
isTrackPanelModalOpened: false
isTrackPanelModalOpened: false,
restoreBrowserTrackStates: jest.fn()
};
const mountTrackPanel = (props?: Partial<TrackPanelProps>) =>
......
......@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { memo } from 'react';
import React, { memo, useEffect } from 'react';
import { connect } from 'react-redux';
import isEqual from 'lodash/isEqual';
......@@ -29,6 +29,8 @@ import {
getBrowserActiveEnsObject
} from '../browserSelectors';
import { restoreBrowserTrackStates } from '../browserActions';
import { EnsObject } from 'src/shared/state/ens-object/ensObjectTypes';
export type TrackPanelProps = {
......@@ -36,12 +38,17 @@ export type TrackPanelProps = {
browserActivated: boolean;
activeEnsObject: EnsObject | null;
isTrackPanelModalOpened: boolean;
restoreBrowserTrackStates: () => void;
};
export const TrackPanel = (props: TrackPanelProps) => {
const shouldRenderContent =
props.activeGenomeId && props.browserActivated && props.activeEnsObject;
useEffect(() => {
props.restoreBrowserTrackStates();
}, [props.activeEnsObject]);
return shouldRenderContent ? (
props.isTrackPanelModalOpened ? (
<TrackPanelModal />
......@@ -62,4 +69,11 @@ const mapStateToProps = (state: RootState) => {
};
};
export default connect(mapStateToProps)(memo(TrackPanel, isEqual));
const mapDispatchToProps = {
restoreBrowserTrackStates
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(memo(TrackPanel, isEqual));
......@@ -24,7 +24,6 @@ import {
} from './TrackPanelListItem';
import ImageButton from 'src/shared/components/image-button/ImageButton';
import browserMessagingService from '../../browser-messaging-service';
import { createMainTrackInfo } from 'tests/fixtures/track-panel';
import { Status } from 'src/shared/types/status';
......@@ -59,17 +58,6 @@ describe('<TrackPanelListItem />', () => {
});
describe('behaviour', () => {
test('updates genome browser on mount if track status and default track status do not match', () => {
jest.spyOn(browserMessagingService, 'send');
mount(
<TrackPanelListItem {...defaultProps} trackStatus={Status.UNSELECTED} />
);
expect(browserMessagingService.send).toHaveBeenCalledTimes(1);
(browserMessagingService.send as any).mockRestore();
});
describe('on track list item click', () => {
test('updates drawer view if drawer already opened', () => {
const wrapper = mount(
......
......@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { MouseEvent, ReactNode, useEffect, useCallback } from 'react';
import React, { MouseEvent, ReactNode, useCallback } from 'react';
import { connect } from 'react-redux';
import classNames from 'classnames';
......@@ -94,13 +94,6 @@ export const TrackPanelListItem = (props: TrackPanelListItemProps) => {
trackStatus
} = props;
useEffect(() => {
const { defaultTrackStatus } = props;
if (trackStatus !== defaultTrackStatus) {
updateGenomeBrowser(trackStatus);
}
}, []);
const updateDrawerView = (currentTrack: string) => {
const { isDrawerOpened, toggleDrawer, changeDrawerView } = props;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment