feat: application preferences.

This commit is contained in:
Ahmed Bouhuolia
2020-12-02 17:21:54 +02:00
parent 1da83ccaf3
commit 2feb4c2e88
45 changed files with 1321 additions and 1293 deletions

View File

@@ -1,17 +0,0 @@
import React from 'react';
import PreferencesTopbar from 'components/Preferences/PreferencesTopbar';
import PreferencesContentRoute from 'components/Preferences/PreferencesContentRoute';
export default function PreferencesContent() {
return (
<div className='dashboard-content dashboard-content--preferences'>
<PreferencesTopbar pageTitle={'asdad'} />
<div className='dashboard__preferences-content'>
<PreferencesContentRoute />
</div>
</div>
);
}

View File

@@ -1,11 +1,29 @@
import React from 'react';
import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
import { ErrorBoundary } from 'react-error-boundary';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import PreferencesTopbar from 'components/Preferences/PreferencesTopbar';
import PreferencesContentRoute from 'components/Preferences/PreferencesContentRoute';
import DashboardErrorBoundary from 'components/Dashboard/DashboardErrorBoundary';
import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
export default function PreferencesPage() {
return (
<div class="preferences-page">
<PreferencesSidebar />
</div>
<ErrorBoundary FallbackComponent={DashboardErrorBoundary}>
<div className={classNames(
CLASSES.DASHBOARD_CONTENT,
CLASSES.DASHBOARD_CONTENT_PREFERENCES,
)}>
<div className={classNames(CLASSES.PREFERENCES_PAGE)}>
<PreferencesSidebar />
<div className={CLASSES.PREFERENCES_PAGE_CONTENT}>
<PreferencesTopbar pageTitle={'asdad'} />
<PreferencesContentRoute />
</div>
</div>
</div>
</ErrorBoundary>
);
}
}

View File

@@ -1,35 +1,36 @@
import React from 'react';
import {Menu, MenuItem, MenuDivider} from '@blueprintjs/core';
import { Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
import { useHistory, useLocation } from 'react-router-dom';
import preferencesMenu from 'config/preferencesMenu';
import PreferencesSidebarContainer from './PreferencesSidebarContainer';
export default function PreferencesSidebar() {
const history = useHistory();
const location = useLocation();
const items = preferencesMenu.map((item) => (
(item.divider) ?
<MenuDivider
title={item.title} /> :
const items = preferencesMenu.map((item) =>
item.divider ? (
<MenuDivider title={item.title} />
) : (
<MenuItem
active={(item.href && item.href === location.pathname)}
active={item.href && item.href === location.pathname}
text={item.text}
label={item.label}
disabled={item.disabled}
onClick={() => { history.push(item.href); }} />
));
onClick={() => {
history.push(item.href);
}}
/>
),
);
return (
<div class="preferences__sidebar">
<div class="preferences__sidebar-wrapper">
<div class="preferences__sidebar-head">
<h2>Preferences</h2>
</div>
<Menu className="preferences__sidebar-menu">
{ items }
</Menu>
<PreferencesSidebarContainer>
<div class="preferences-sidebar__head">
<h2>Preferences</h2>
</div>
</div>
<Menu className="preferences-sidebar__menu">{items}</Menu>
</PreferencesSidebarContainer>
);
}
}

View File

@@ -0,0 +1,21 @@
import React from 'react';
import classNames from 'classnames';
import { Scrollbar } from 'react-scrollbars-custom';
import { CLASSES } from 'common/classes';
export default function PreferencesSidebarContainer({ children }) {
return (
<div
className={classNames(
CLASSES.PREFERENCES_PAGE_SIDEBAR,
CLASSES.PREFERENCES_SIDEBAR,
)}
>
<div class="preferences-sidebar__wrapper">
<Scrollbar noDefaultStyles={true}>
<div class="preferences-sidebar__inner">{children}</div>
</Scrollbar>
</div>
</div>
);
}

View File

@@ -1,6 +1,7 @@
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { connect } from 'react-redux';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
import UsersActions from 'containers/Preferences/Users/UsersActions';
@@ -11,15 +12,19 @@ import { compose } from 'utils';
function PreferencesTopbar({ preferencesPageTitle }) {
return (
<div class="dashboard__preferences-topbar">
<div class="dashboard__title">
<div
className={classNames(
CLASSES.PREFERENCES_PAGE_TOPBAR,
CLASSES.PREFERENCES_TOPBAR,
)}
>
<div class="preferences-topbar__title">
<h2>{preferencesPageTitle}</h2>
</div>
<div class="preferences__topbar-actions">
<div class="preferences-topbar__actions">
<Route pathname="/preferences">
<Switch>
<Route exact path={'/preferences/users'} component={UsersActions} />
<Route
exact
path={'/preferences/currencies'}
@@ -29,7 +34,7 @@ function PreferencesTopbar({ preferencesPageTitle }) {
</Route>
</div>
<div class="dashboard__topbar-user">
<div class="preferences-topbar__user">
<DashboardTopbarUser />
</div>
</div>