zepio/app/router/router.js

98 lines
2.5 KiB
JavaScript

// @flow
import React from 'react';
import {
Route, Switch, type Location, type RouterHistory,
} from 'react-router-dom';
import styled from 'styled-components';
import { ScrollTopComponent } from './scroll-top';
import { SidebarContainer } from '../containers/sidebar';
import { DashboardContainer } from '../containers/dashboard';
import { TransactionsContainer } from '../containers/transactions';
import { SendContainer } from '../containers/send';
import { ReceiveContainer } from '../containers/receive';
import { SettingsContainer } from '../containers/settings';
import { NotFoundView } from '../views/not-found';
import { ConsoleView } from '../views/console';
import { AppContainer as LayoutComponent } from '../containers/app';
import { HeaderComponent } from '../components/header';
import {
DASHBOARD_ROUTE,
SEND_ROUTE,
RECEIVE_ROUTE,
SETTINGS_ROUTE,
CONSOLE_ROUTE,
TRANSACTIONS_ROUTE,
} from '../constants/routes';
const FullWrapper = styled.div`
display: flex;
flex-direction: column;
width: 100%;
`;
const ContentWrapper = styled.div`
display: flex;
flex-direction: row;
width: 100vw;
`;
const getTitle = (path: string) => {
if (path === '/') return 'Dashboard';
return path.replace('/', '');
};
export const RouterComponent = ({
location,
history,
}: {
location: Location,
history: RouterHistory,
}) => (
<FullWrapper>
<HeaderComponent title={getTitle(location.pathname)} />
<ContentWrapper>
<SidebarContainer
location={location}
history={history}
/>
{/* $FlowFixMe */}
<LayoutComponent>
<ScrollTopComponent>
<Switch>
<Route
exact
path={DASHBOARD_ROUTE}
component={DashboardContainer}
/>
<Route
path={SEND_ROUTE}
component={SendContainer}
/>
<Route
path={RECEIVE_ROUTE}
component={ReceiveContainer}
/>
<Route
path={SETTINGS_ROUTE}
component={SettingsContainer}
/>
<Route
path={CONSOLE_ROUTE}
component={ConsoleView}
/>
<Route
path={TRANSACTIONS_ROUTE}
component={TransactionsContainer}
/>
<Route component={NotFoundView} />
</Switch>
</ScrollTopComponent>
</LayoutComponent>
</ContentWrapper>
</FullWrapper>
);