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

refactor the code after git repo integration

parent 45cbcdf8
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<HeaderButtons /> renders correctly 1`] = `undefined`;
import headerReducer, { defaultState } from './headerReducer';
import headerReducer from './headerReducer';
import { defaultState } from './headerState';
import {
changeCurrentApp,
toggleAccount,
toggleLaunchbar
} from '../actions/headerActions';
} from './headerActions';
const initialState = {
accountExpanded: false,
......
import { ActionType, getType } from 'typesafe-actions';
import * as header from '../actions/headerActions';
import * as header from './headerActions';
export type HeaderAction = ActionType<typeof header>;
export type HeaderState = Readonly<{
accountExpanded: boolean;
currentApp: string;
launchbarExpanded: boolean;
}>;
export const defaultState: HeaderState = {
accountExpanded: false,
currentApp: '',
launchbarExpanded: true
};
import { HeaderState, defaultState } from './headerState';
export default (
state: HeaderState = defaultState,
action: HeaderAction
action: ActionType<typeof header>
): HeaderState => {
switch (action.type) {
case getType(header.toggleAccount):
......
......@@ -5,7 +5,7 @@ import {
} from './headerSelectors';
import store from '../store';
import { HeaderState } from '../reducers/headerReducer';
import { HeaderState } from './headerState';
const headerState: HeaderState = {
accountExpanded: true,
......
import { RootState } from '../reducers';
import { RootState } from '../rootReducer';
export const getAccountExpanded = (state: RootState): boolean =>
state.header.accountExpanded;
......
export type HeaderState = Readonly<{
accountExpanded: boolean;
currentApp: string;
launchbarExpanded: boolean;
}>;
export const defaultState: HeaderState = {
accountExpanded: false,
currentApp: '',
launchbarExpanded: true
};
@import 'src/styles/common';
.launchbar {
border-bottom: 1px solid $ens-medium-grey;
border-top: 1px solid $ens-medium-grey;
padding: 8px 6px;
@include flex;
dl {
display: inline-block;
padding: 0 15px;
&.border {
border-right: 1px solid $ens-medium-grey;
}
}
dt {
display: inline-block;
padding: 0 12px;
}
}
.categoriesWrapper {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
width: calc(100% - 86px);
&::-webkit-scrollbar {
display: none;
}
dl:first-child {
padding-left: 2px;
}
}
.categories {
flex: 0 0 auto;
}
.about {
@include flex;
@include flex-align(right, top);
margin-left: 20px;
dl:first-child {
padding-right: 2px;
}
}
......@@ -9,7 +9,7 @@ import {
launchbarConfig,
LaunchbarCategory,
LaunchbarApp
} from '../../../../configs/launchbarConfig';
} from './launchbarConfig';
describe('<Launchbar />', () => {
let wrapper: any;
......@@ -32,7 +32,7 @@ describe('<Launchbar />', () => {
describe('icons for', () => {
test('about app', () => {
const appProp: LaunchbarApp = wrapper
.find('.about-app-icon')
.find('.aboutIcon')
.find(LaunchbarIcon)
.prop('app');
......@@ -43,7 +43,7 @@ describe('<Launchbar />', () => {
test(`${category.name} category apps`, () => {
category.apps.forEach((app: LaunchbarApp) => {
const appProp: LaunchbarApp = wrapper
.find(`.${app.name}-app-icon`)
.find(`.${app.name}Icon`)
.find(LaunchbarIcon)
.prop('app');
......@@ -54,7 +54,7 @@ describe('<Launchbar />', () => {
});
test('about icon separate of other categories', () => {
expect(wrapper.find('.launchbar > .categories-wrapper')).toHaveLength(1);
expect(wrapper.find('.launchbar > .categoriesWrapper')).toHaveLength(1);
expect(wrapper.find('.launchbar > .about')).toHaveLength(1);
});
......
......@@ -5,10 +5,12 @@ import {
LaunchbarCategory,
launchbarConfig,
LaunchbarApp
} from '../../../../configs/launchbarConfig';
} from './launchbarConfig';
import LaunchbarIcon from './LaunchbarIcon';
import styles from './Launchbar.scss';
type LaunchbarProps = {
currentApp: string;
launchbarExpanded: boolean;
......@@ -17,16 +19,16 @@ type LaunchbarProps = {
class Launchbar extends Component<LaunchbarProps> {
public render() {
const LaunchbarChildren: ReactNode = (
<div className="launchbar">
<div className="categories-wrapper">
<div className="categories">
<div className={styles.launchbar}>
<div className={styles.categoriesWrapper}>
<div className={styles.categories}>
{launchbarConfig.categories.map((category: LaunchbarCategory) => (
<dl
className={this.getCategoryClass(category.separator)}
className={styles[this.getCategoryClass(category.separator)]}
key={category.name}
>
{category.apps.map((app: LaunchbarApp) => (
<dt className={`${app.name}-app-icon`} key={app.name}>
<dt key={app.name} className={`${app.name}Icon`}>
<LaunchbarIcon
app={app}
currentApp={this.props.currentApp}
......@@ -37,9 +39,9 @@ class Launchbar extends Component<LaunchbarProps> {
))}
</div>
</div>
<div className="about">
<div className={styles.about}>
<dl>
<dt className="about-app-icon">
<dt className="aboutIcon">
<LaunchbarIcon
app={launchbarConfig.about}
currentApp={this.props.currentApp}
......
import React, { PureComponent } from 'react';
import React, { FunctionComponent, memo } from 'react';
import { connect } from 'react-redux';
import { RootState } from '../../../../reducers';
import { changeCurrentApp } from '../../../../actions/headerActions';
import { RootState } from 'src/rootReducer';
import { changeCurrentApp } from '../headerActions';
import Launchbar from './Launchbar';
import {
getCurrentApp,
getLaunchbarExpanded
} from '../../../../selectors/headerSelectors';
import { getCurrentApp, getLaunchbarExpanded } from '../headerSelectors';
type StateProps = {
currentApp: string;
......@@ -22,11 +19,9 @@ type OwnProps = {};
type LaunchbarContainerProps = StateProps & DispatchProps & OwnProps;
export class LaunchbarContainer extends PureComponent<LaunchbarContainerProps> {
public render() {
return <Launchbar {...this.props} />;
}
}
export const LaunchbarContainer: FunctionComponent<
LaunchbarContainerProps
> = memo((props) => <Launchbar {...props} />);
const mapStateToProps = (state: RootState): StateProps => ({
currentApp: getCurrentApp(state),
......
.launchbarIcon {
height: 30px;
width: 30px;
}
import React from 'react';
import { withRouter, RouteComponentProps, MemoryRouter } from 'react-router';
import { render } from 'enzyme';
import toJson from 'enzyme-to-json';
import { LaunchbarContainer } from './LaunchbarContainer';
describe('<LaunchbarContainer />', () => {
let wrapper: any;
let changeCurrentAppFn = jest.fn();
beforeEach(() => {
const WrappedComponent = withRouter((props: RouteComponentProps) => (
<LaunchbarContainer
changeCurrentApp={changeCurrentAppFn}
currentApp={''}
launchbarExpanded={true}
{...props}
/>
));
wrapper = render(
<MemoryRouter>
<WrappedComponent />
</MemoryRouter>
);
});
test('contains <Launchbar />', () => {
expect(wrapper.find('.launchbar')).toHaveLength(1);
});
test('renders correctly', () => {
expect(toJson(wrapper)).toMatchSnapshot();
});
});
import React, { FunctionComponent, memo } from 'react';
import { Link } from 'react-router-dom';
import { LaunchbarApp } from './launchbarConfig';
import styles from './LaunchbarIcon.scss';
type LaunchbarIconProps = {
app: LaunchbarApp;
currentApp: string;
};
function getAppIcon(props: LaunchbarIconProps): string {
const { app, currentApp } = props;
if (app.icon.grey) {
return app.icon.grey;
} else {
return currentApp === app.name ? app.icon.selected : app.icon.default;
}
}
const LaunchbarIcon: FunctionComponent<LaunchbarIconProps> = memo((props) => (
<Link to={`/app/${props.app.name}`}>
<img
className={styles.launchbarIcon}
src={getAppIcon(props)}
alt={props.app.description}
title={props.app.description}
/>
</Link>
));
export default LaunchbarIcon;
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<LaunchbarContainer /> renders correctly 1`] = `
<div
class="react-slidedown"
>
<div
class="launchbar"
>
<div
class="categoriesWrapper"
>
<div
class="categories"
>
<dl
class="border"
>
<dt
class="global-searchIcon"
>
<a
href="/app/global-search"
>
<img
alt="global search"
class="launchbarIcon"
src="[object Object]"
title="global search"
/>
</a>
</dt>
<dt
class="species-selectorIcon"
>
<a
href="/app/species-selector"
>
<img
alt="species selector"
class="launchbarIcon"
src="[object Object]"
title="species selector"
/>
</a>
</dt>
</dl>
<dl
class="border"
>
<dt
class="browserIcon"
>
<a
href="/app/browser"
>
<img
alt="browser"
class="launchbarIcon"
src="[object Object]"
title="browser"
/>
</a>
</dt>
</dl>
<dl
class="border"
>
<dt
class="toolsIcon"
>
<a
href="/app/tools"
>
<img
alt="tools"
class="launchbarIcon"
src="[object Object]"
title="tools"
/>
</a>
</dt>
</dl>
<dl
class="border"
>
<dt
class="downloadIcon"
>
<a
href="/app/download"
>
<img
alt="download"
class="launchbarIcon"
src="[object Object]"
title="download"
/>
</a>
</dt>
</dl>
<dl
class=""
>
<dt
class="help-docsIcon"
>
<a
href="/app/help-docs"
>
<img
alt="help and documentation"
class="launchbarIcon"
src="[object Object]"
title="help and documentation"
/>
</a>
</dt>
</dl>
</div>
</div>
<div
class="about"
>
<dl>
<dt
class="aboutIcon"
>
<a
href="/app/about"
>
<img
alt="about ensembl"
class="launchbarIcon"
src="[object Object]"
title="about ensembl"
/>
</a>
</dt>
</dl>
</div>
</div>
</div>
`;
exports[`<LaunchbarIcon /> renders correctly 1`] = `
<Link
replace={false}
to="/app/about"
>
<img
alt="about ensembl"
src="/assets/img/launchbar/ensembl-selected.svg"
title="about ensembl"
/>
</Link>
`;
import ensemblIcon from 'assets/img/launchbar/ensembl.svg';
import ensemblSelectedIcon from 'assets/img/launchbar/ensembl-selected.svg';
import ensemblIcon from 'static/img/launchbar/ensembl.svg';
import ensemblSelectedIcon from 'static/img/launchbar/ensembl-selected.svg';
import searchIcon from 'assets/img/launchbar/search.svg';
import searchSelectedIcon from 'assets/img/launchbar/search-selected.svg';
import searchIcon from 'static/img/launchbar/search.svg';
import searchSelectedIcon from 'static/img/launchbar/search-selected.svg';
import searchGreyIcon from 'static/img/launchbar/search-grey.svg';
import speciesSelectorIcon from 'assets/img/launchbar/species-selector.svg';
import speciesSelectorSelectedIcon from 'assets/img/launchbar/species-selector-selected.svg';
import speciesSelectorIcon from 'static/img/launchbar/species-selector.svg';
import speciesSelectorSelectedIcon from 'static/img/launchbar/species-selector-selected.svg';
import speciesSelectorGreyIcon from 'static/img/launchbar/species-selector-grey.svg';
import browserIcon from 'assets/img/launchbar/browser.svg';
import browserSelectedIcon from 'assets/img/launchbar/browser-selected.svg';
import browserIcon from 'static/img/launchbar/browser.svg';
import browserSelectedIcon from 'static/img/launchbar/browser-selected.svg';
import blastIcon from 'assets/img/launchbar/blast.svg';
import blastSelectedIcon from 'assets/img/launchbar/blast-selected.svg';
// import blastIcon from 'static/img/launchbar/blast.svg';
// import blastSelectedIcon from 'static/img/launchbar/blast-selected.svg';
import vepIcon from 'assets/img/launchbar/vep.svg';
import vepSelectedIcon from 'assets/img/launchbar/vep-selected.svg';
import vepIcon from 'static/img/launchbar/vep.svg';
import vepSelectedIcon from 'static/img/launchbar/vep-selected.svg';
import conversionsIcon from 'assets/img/launchbar/conversions.svg';
import conversionsSelectedIcon from 'assets/img/launchbar/conversions-selected.svg';
import toolsGreyIcon from 'static/img/launchbar/tools-grey.svg';
import ldIcon from 'assets/img/launchbar/ld.svg';
import ldSelectedIcon from 'assets/img/launchbar/ld-selected.svg';
// import conversionsIcon from 'static/img/launchbar/conversions.svg';
// import conversionsSelectedIcon from 'static/img/launchbar/conversions-selected.svg';
import biomartIcon from 'assets/img/launchbar/biomart.svg';
import biomartSelectedIcon from 'assets/img/launchbar/biomart-selected.svg';
// import ldIcon from 'static/img/launchbar/ld.svg';
// import ldSelectedIcon from 'static/img/launchbar/ld-selected.svg';
import bulkDownloadIcon from 'assets/img/launchbar/bulk-download.svg';
import bulkDownloadSelectedIcon from 'assets/img/launchbar/bulk-download-selected.svg';
// import biomartIcon from 'static/img/launchbar/biomart.svg';
// import biomartSelectedIcon from 'static/img/launchbar/biomart-selected.svg';
import customDownloadIcon from 'assets/img/launchbar/custom-download.svg';
import customDownloadSelectedIcon from 'assets/img/launchbar/custom-download-selected.svg';
// import bulkDownloadIcon from 'static/img/launchbar/bulk-download.svg';
// import bulkDownloadSelectedIcon from 'static/img/launchbar/bulk-download-selected.svg';
import helpIcon from 'assets/img/launchbar/help.svg';
import helpSelectedIcon from 'assets/img/launchbar/help-selected.svg';
import customDownloadIcon from 'static/img/launchbar/custom-download.svg';
import customDownloadSelectedIcon from 'static/img/launchbar/custom-download-selected.svg';
import glossaryIcon from 'assets/img/launchbar/glossary.svg';
import glossarySelectedIcon from 'assets/img/launchbar/glossary-selected.svg';
import downloadGreyIcon from 'static/img/launchbar/download-grey.svg';
import newInfoIcon from 'assets/img/launchbar/new-info.svg';
import newInfoSelectedIcon from 'assets/img/launchbar/new-info-selected.svg';
import helpIcon from 'static/img/launchbar/help.svg';
import helpSelectedIcon from 'static/img/launchbar/help-selected.svg';
import helpGreyIcon from 'static/img/launchbar/help-grey.svg';
// import glossaryIcon from 'static/img/launchbar/glossary.svg';
// import glossarySelectedIcon from 'static/img/launchbar/glossary-selected.svg';
// import newInfoIcon from 'static/img/launchbar/new-info.svg';
// import newInfoSelectedIcon from 'static/img/launchbar/new-info-selected.svg';
export type LaunchbarApp = {
description: string;
icon: {
default: string;
grey?: string;
selected: string;
};
name: string;
......@@ -76,6 +84,7 @@ export const launchbarConfig: LaunchbarDetails = {
description: 'global search',
icon: {
default: searchIcon,
grey: searchGreyIcon,
selected: searchSelectedIcon
},
name: 'global-search'
......@@ -84,6 +93,7 @@ export const launchbarConfig: LaunchbarDetails = {
description: 'species selector',
icon: {