Commit defa56c4 authored by Imran Salam's avatar Imran Salam
Browse files

refactor the code after git repo integration

parent 45cbcdf8
......@@ -23,6 +23,9 @@ describe('browserActions', () => {
},
{
type: 'browser/close-drawer'
},
{
type: 'browser/toggle-browser-navigation'
}
];
......@@ -30,6 +33,7 @@ describe('browserActions', () => {
store.dispatch(browser.toggleDrawer());
store.dispatch(browser.openDrawer());
store.dispatch(browser.closeDrawer());
store.dispatch(browser.toggleBrowserNav());
expect(store.getActions()).toEqual(expectedActions);
});
......@@ -63,6 +67,8 @@ describe('browserActions', () => {
store.dispatch(browser.toggleDrawer());
store.dispatch(browser.openDrawer());
store.dispatch(browser.closeDrawer());
store.dispatch(browser.toggleBrowserNav());
store.dispatch(browser.changeCurrentTrack('track-1'));
store.dispatch(browser.changeCurrentDrawerSection('main'));
......
import resetIcon from 'assets/img/browser/reset.svg';
import resetIcon from 'static/img/browser/reset.svg';
import navigatorIcon from 'assets/img/browser/navigator.svg';
import navigatorSelectedIcon from 'assets/img/browser/navigator-selected.svg';
import navigatorIcon from 'static/img/browser/navigator.svg';
import navigatorSelectedIcon from 'static/img/browser/navigator-selected.svg';
import navigateUpIcon from 'assets/img/browser/navigate-up.svg';
import navigateUpOffIcon from 'assets/img/browser/navigate-up-off.svg';
import navigateUpIcon from 'static/img/browser/navigate-up.svg';
import navigateUpOffIcon from 'static/img/browser/navigate-up-off.svg';
import zoomOutIcon from 'assets/img/browser/zoom-out.svg';
import zoomOutOffIcon from 'assets/img/browser/zoom-out-off.svg';
import zoomOutIcon from 'static/img/browser/zoom-out.svg';
import zoomOutOffIcon from 'static/img/browser/zoom-out-off.svg';
import zoomInIcon from 'assets/img/browser/zoom-in.svg';
import zoomInOffIcon from 'assets/img/browser/zoom-in-off.svg';
import zoomInIcon from 'static/img/browser/zoom-in.svg';
import zoomInOffIcon from 'static/img/browser/zoom-in-off.svg';
import navigateDownIcon from 'assets/img/browser/navigate-down.svg';
import navigateDownOffIcon from 'assets/img/browser/navigate-down-off.svg';
import navigateDownIcon from 'static/img/browser/navigate-down.svg';
import navigateDownOffIcon from 'static/img/browser/navigate-down-off.svg';
import navigateLeftIcon from 'assets/img/browser/navigate-left.svg';
import navigateLeftOffIcon from 'assets/img/browser/navigate-left-off.svg';
import navigateLeftIcon from 'static/img/browser/navigate-left.svg';
import navigateLeftOffIcon from 'static/img/browser/navigate-left-off.svg';
import navigateRightIcon from 'assets/img/browser/navigate-right.svg';
import navigateRightOffIcon from 'assets/img/browser/navigate-right-off.svg';
import navigateRightIcon from 'static/img/browser/navigate-right.svg';
import navigateRightOffIcon from 'static/img/browser/navigate-right-off.svg';
export type BrowserInfoItem = {
description: string;
......
import browserReducer, {
defaultState,
BrowserOpenState
} from './browserReducer';
import browserReducer from './browserReducer';
import { defaultState, BrowserOpenState } from './browserState';
import {
toggleTrackPanel,
changeCurrentTrack,
toggleDrawer,
closeDrawer,
openDrawer,
changeCurrentDrawerSection
} from '../actions/browserActions';
import { drawerSectionConfig } from '../configs/drawerSectionConfig';
changeCurrentDrawerSection,
toggleBrowserNav
} from './browserActions';
import { drawerSectionConfig } from './drawer/drawerSectionConfig';
const initialState = {
browserNavOpened: false,
browserOpenState: BrowserOpenState.SEMI_EXPANDED,
currentDrawerSection: '',
currentTrack: '',
......@@ -93,5 +94,16 @@ describe('browserReducer', () => {
browserReducer(initialTrackState, changeCurrentDrawerSection('summary'))
).toEqual(expectedState);
});
test('toggleBrowserNav', () => {
const expectedState = {
...initialState,
browserNavOpened: true
};
expect(browserReducer(undefined, toggleBrowserNav())).toEqual(
expectedState
);
});
});
});
import { ActionType, getType } from 'typesafe-actions';
import * as browser from './browserActions';
import {
BrowserState,
defaultState,
trackPanelState,
drawerState
} from './browserState';
import { drawerSectionConfig } from './drawer/drawerSectionConfig';
export default (
state: BrowserState = defaultState,
action: ActionType<typeof browser>
): BrowserState => {
switch (action.type) {
case getType(browser.toggleTrackPanel):
return trackPanelState(state);
case getType(browser.changeCurrentTrack):
return {
...state,
currentDrawerSection: '',
currentTrack: action.payload,
drawerSections: drawerSectionConfig[action.payload]
};
case getType(browser.toggleDrawer):
return drawerState(state, !state.drawerOpened);
case getType(browser.openDrawer):
return drawerState(state, true);
case getType(browser.closeDrawer):
return drawerState(state, false);
case getType(browser.changeCurrentDrawerSection):
return { ...state, currentDrawerSection: action.payload };
case getType(browser.toggleBrowserNav):
return { ...state, browserNavOpened: !state.browserNavOpened };
default:
return state;
}
};
......@@ -4,13 +4,15 @@ import {
getCurrentTrack,
getDrawerOpened,
getDrawerSections,
getTrackPanelOpened
getTrackPanelOpened,
getBrowserNavOpened
} from './browserSelectors';
import store from '../store';
import { BrowserState, BrowserOpenState } from '../reducers/browserReducer';
import store from '../../../store';
import { BrowserState, BrowserOpenState } from './browserState';
const browserState: BrowserState = {
browserNavOpened: false,
browserOpenState: BrowserOpenState.COLLAPSED,
currentDrawerSection: 'summary',
currentTrack: 'track-1',
......@@ -33,6 +35,10 @@ describe('browserSelectors should select', () => {
expect(getBrowserOpenState(state)).toBe(BrowserOpenState.COLLAPSED);
});
test('browserNavOpened from state', () => {
expect(getBrowserNavOpened(state)).toBe(false);
});
test('currentDrawerSection from state', () => {
expect(getCurrentDrawerSection(state)).toBe('summary');
});
......
import { RootState } from '../reducers';
import { BrowserOpenState } from '../reducers/browserReducer';
import { DrawerSection } from '../configs/drawerSectionConfig';
import { RootState } from 'src/rootReducer';
import { BrowserOpenState } from './browserState';
import { DrawerSection } from './drawer/drawerSectionConfig';
export const getBrowserOpenState = (state: RootState): BrowserOpenState =>
state.browser.browserOpenState;
......
import { ActionType, getType } from 'typesafe-actions';
import * as browser from '../actions/browserActions';
import {
DrawerSection,
drawerSectionConfig
} from '../configs/drawerSectionConfig';
export type BrowserAction = ActionType<typeof browser>;
import { DrawerSection } from './drawer/drawerSectionConfig';
export enum BrowserOpenState {
EXPANDED = 'expanded',
SEMI_EXPANDED = 'semi-expanded',
SEMI_EXPANDED = 'semiExpanded',
COLLAPSED = 'collapsed'
}
......@@ -35,7 +26,7 @@ export const defaultState: BrowserState = {
trackPanelOpened: true
};
const trackPanelState = (state: BrowserState) => {
export const trackPanelState = (state: BrowserState) => {
const trackPanelOpened: boolean = !state.trackPanelOpened;
const browserOpenState: BrowserOpenState = trackPanelOpened
? BrowserOpenState.SEMI_EXPANDED
......@@ -48,7 +39,7 @@ const trackPanelState = (state: BrowserState) => {
};
};
const drawerState = (state: BrowserState, drawerOpened: boolean) => {
export const drawerState = (state: BrowserState, drawerOpened: boolean) => {
if (drawerOpened === true) {
return {
...state,
......@@ -61,32 +52,3 @@ const drawerState = (state: BrowserState, drawerOpened: boolean) => {
};
}
};
export default (
state: BrowserState = defaultState,
action: BrowserAction
): BrowserState => {
switch (action.type) {
case getType(browser.toggleTrackPanel):
return trackPanelState(state);
case getType(browser.changeCurrentTrack):
return {
...state,
currentDrawerSection: '',
currentTrack: action.payload,
drawerSections: drawerSectionConfig[action.payload]
};
case getType(browser.toggleDrawer):
return drawerState(state, !state.drawerOpened);
case getType(browser.openDrawer):
return drawerState(state, true);
case getType(browser.closeDrawer):
return drawerState(state, false);
case getType(browser.changeCurrentDrawerSection):
return { ...state, currentDrawerSection: action.payload };
case getType(browser.toggleBrowserNav):
return { ...state, browserNavOpened: !state.browserNavOpened };
default:
return state;
}
};
@import 'src/styles/common';
.drawer {
border-left: 1px solid $ens-black;
width: calc(75% - 41px);
.drawer-bar {
@include flex;
border-bottom: 1px dashed $ens-black;
padding: 10px 15px;
.page-list {
margin: 0;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
width: 100%;
dt {
display: inline-block;
margin-right: 15px;
white-space: nowrap;
}
}
.close {
img {
height: 24px;
width: 24px;
}
}
}
.track-canvas {
.trackCanvas {
height: calc(100vh - 181px);
overflow: scroll;
......
import React, { Component, ReactNode } from 'react';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { RootState } from '../../reducers';
import {
changeCurrentDrawerSection,
closeDrawer
} from '../../actions/browserActions';
import { RootState } from 'src/rootReducer';
import { changeCurrentDrawerSection, closeDrawer } from '../browserActions';
import {
getCurrentDrawerSection,
getCurrentTrack,
getDrawerSections
} from '../../selectors/browserSelectors';
} from '../browserSelectors';
import { DrawerSection } from '../../configs/drawerSectionConfig';
import { DrawerSection } from './drawerSectionConfig';
import {
trackPanelConfig,
TrackPanelConfig
} from '../../configs/trackPanelConfig';
// import {
// trackPanelConfig,
// TrackPanelItem
// } from '../track-panel/trackPanelConfig';
import DrawerBar from './DrawerBar';
import TrackOne from './track-one/TrackOne';
import TrackTwo from './track-two/TrackTwo';
// import TrackOne from './tracks/TrackOne';
// import TrackTwo from './tracks/TrackTwo';
import styles from './Drawer.scss';
type StateProps = {
currentDrawerSection: string;
......@@ -36,56 +35,56 @@ type DispatchProps = {
type OwnProps = {};
type TrackProps = StateProps & DispatchProps & OwnProps;
type DrawerProps = StateProps & DispatchProps & OwnProps;
class Track extends Component<TrackProps> {
class Drawer extends Component<DrawerProps> {
public render() {
const TrackComponent = this.getCurrentTrackComponent();
// const TrackComponent = this.getCurrentTrackComponent();
return (
<section className="drawer">
<section className={styles.drawer}>
<DrawerBar
changeCurrentDrawerSection={this.props.changeCurrentDrawerSection}
closeDrawer={this.props.closeDrawer}
currentTrack={this.props.currentTrack}
drawerSections={this.props.drawerSections}
/>
<div className="track-canvas">{TrackComponent}</div>
{/* <div className="track-canvas">{TrackComponent}</div> */}
</section>
);
}
private getCurrentTrackComponent(): ReactNode {
const { currentDrawerSection, currentTrack, drawerSections } = this.props;
const currentTrackConfig: TrackPanelConfig = trackPanelConfig.filter(
(track: TrackPanelConfig) => currentTrack === track.name
)[0];
switch (currentTrackConfig.name) {
case 'track-one':
return (
<TrackOne
currentDrawerSection={currentDrawerSection}
drawerSections={drawerSections}
/>
);
case 'track-two':
return (
<TrackTwo
currentDrawerSection={currentDrawerSection}
drawerSections={drawerSections}
/>
);
default:
return (
<TrackOne
currentDrawerSection={currentDrawerSection}
drawerSections={drawerSections}
/>
);
}
}
// private getCurrentTrackComponent(): ReactNode {
// const { currentDrawerSection, currentTrack, drawerSections } = this.props;
// const currentTrackConfig: TrackPanelItem = trackPanelConfig.filter(
// (track: TrackPanelItem) => currentTrack === track.name
// )[0];
// switch (currentTrackConfig.name) {
// case 'track-one':
// return (
// <TrackOne
// currentDrawerSection={currentDrawerSection}
// drawerSections={drawerSections}
// />
// );
// case 'track-two':
// return (
// <TrackTwo
// currentDrawerSection={currentDrawerSection}
// drawerSections={drawerSections}
// />
// );
// default:
// return (
// <TrackOne
// currentDrawerSection={currentDrawerSection}
// drawerSections={drawerSections}
// />
// );
// }
// }
}
const mapStateToProps = (state: RootState): StateProps => ({
......@@ -102,4 +101,4 @@ const mapDispatchToProps: DispatchProps = {
export default connect(
mapStateToProps,
mapDispatchToProps
)(Track);
)(Drawer);
@import 'src/styles/common';
.drawerBar {
@include flex;
border-bottom: 1px dashed $ens-black;
padding: 10px 15px;
.pageList {
margin: 0;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
width: 100%;
dt {
display: inline-block;
margin-right: 15px;
white-space: nowrap;
}
}
.closeButton {
img {
height: 24px;
width: 24px;
}
}
}
import React, { Component, ReactEventHandler } from 'react';
import { DrawerSection } from '../../configs/drawerSectionConfig';
import { EventHandlers } from '../../types/objects';
import { DrawerSection } from './drawerSectionConfig';
import { EventHandlers } from 'src/objects';
import closeIcon from 'assets/img/track-panel/close.svg';
import closeIcon from 'static/img/track-panel/close.svg';
import styles from './DrawerBar.scss';
type DrawerBarProps = {
changeCurrentDrawerSection: (currentDrawerSection: string) => void;
......@@ -18,8 +20,8 @@ class DrawerBar extends Component<DrawerBarProps> {
public render() {
return (
<div className="drawer-bar">
<dl className="page-list">
<div className={styles.drawerBar}>
<dl className={styles.pageList}>
<dt>
<button onClick={this.getClickHandler('main')}>{'Main'}</button>
</dt>
......@@ -32,7 +34,7 @@ class DrawerBar extends Component<DrawerBarProps> {
</dt>
))}
</dl>
<button className="close" onClick={this.props.closeDrawer}>
<button className={styles.closeButton} onClick={this.props.closeDrawer}>
<img src={closeIcon} alt="close drawer" />
</button>
</div>
......
@import 'src/styles/common';
.trackPanel {
@include flex;
border-left: 1px solid $ens-medium-grey;
}
import React, { Component } from 'react';
import { connect } from 'react-redux';
import TrackPanelBar from './TrackPanelBar';
import TrackPanelList from './TrackPanelList';
import TrackPanelBar from './track-panel-bar/TrackPanelBar';
import TrackPanelList from './track-panel-list/TrackPanelList';
import { RootState } from 'src/rootReducer';
import { RootState } from '../../../reducers';
import {
toggleTrackPanel,
changeCurrentTrack,
openDrawer,
closeDrawer
} from '../../../actions/browserActions';
} from '../browserActions';
import {
getCurrentTrack,
getDrawerOpened,
getTrackPanelOpened
} from '../../../selectors/browserSelectors';
} from '../browserSelectors';
import { getLaunchbarExpanded } from 'src/header/headerSelectors';
import styles from './TrackPanel.scss';
type TrackPanelProps = {
changeCurrentTrack: (currentTrack: string) => void;
closeDrawer: () => void;
currentTrack: string;
drawerOpened: boolean;
launchbarExpanded: boolean;
openDrawer: () => void;
toggleTrackPanel: () => void;
trackPanelOpened: boolean;
......@@ -30,12 +36,11 @@ type TrackPanelProps = {
class TrackPanel extends Component<TrackPanelProps> {
public render() {
return (
<section
className={`track-panel react-slide-drawer ${this.getToggleClass()}`}
>
<section className={`${styles.trackPanel} reactSlideDrawer`}>
<TrackPanelBar
closeDrawer={this.props.closeDrawer}
drawerOpened={this.props.drawerOpened}
launchbarExpanded={this.props.launchbarExpanded}
trackPanelOpened={this.props.trackPanelOpened}
toggleTrackPanel={this.props.toggleTrackPanel}
/>
......@@ -49,19 +54,12 @@ class TrackPanel extends Component<TrackPanelProps> {
</section>
);
}
private getToggleClass(): string {
if (this.props.trackPanelOpened === true) {
return 'expanded';
} else {
return 'collapsed';
}
}
}