chrone: sperate client and server to different repos.

src/components/Preferences/PreferencesContentRoute.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import preferencesRoutes from 'routes/preferences';
+
+export default function DashboardContentRoute() {
+  return (
+    <Route pathname="/preferences">
+      <Switch>
+        {preferencesRoutes.map((route, index) => (
+          <Route
+            key={index}
+            path={`${route.path}`}
+            exact={route.exact}
+            component={route.component}
+          />
+        ))}
+      </Switch>
+    </Route>
+  );
+}

src/components/Preferences/PreferencesPage.js

@@ -0,0 +1,34 @@
+import React from 'react';
+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';
+
+import 'style/pages/Preferences/Page.scss';
+
+/**
+ * Preferences page.
+ */
+export default function PreferencesPage() {
+  return (
+    <ErrorBoundary FallbackComponent={DashboardErrorBoundary}>
+      <div id={'dashboard'} 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>
+  );
+}

src/components/Preferences/PreferencesSidebar.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+import { useHistory, useLocation } from 'react-router-dom';
+import { FormattedMessage as T } from 'components';
+import preferencesMenu from 'config/preferencesMenu';
+import PreferencesSidebarContainer from './PreferencesSidebarContainer';
+
+import 'style/pages/Preferences/Sidebar.scss';
+
+/**
+ * Preferences sidebar.
+ */
+export default function PreferencesSidebar() {
+  const history = useHistory();
+  const location = useLocation();
+
+  const items = preferencesMenu.map((item) =>
+    item.divider ? (
+      <MenuDivider title={item.title} />
+    ) : (
+      <MenuItem
+        active={item.href && item.href === location.pathname}
+        text={item.text}
+        label={item.label}
+        disabled={item.disabled}
+        onClick={() => {
+          history.push(item.href);
+        }}
+      />
+    ),
+  );
+
+  return (
+    <PreferencesSidebarContainer>
+      <div class="preferences-sidebar__head">
+        <h2>{<T id={'preferences'} />}</h2>
+      </div>
+
+      <Menu className="preferences-sidebar__menu">{items}</Menu>
+    </PreferencesSidebarContainer>
+  );
+}

src/components/Preferences/PreferencesSidebarContainer.js

@@ -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>
+  );
+}

src/components/Preferences/PreferencesSubContent.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import preferencesTabs from 'routes/preferencesTabs';
+import {Switch, Route, useRouteMatch} from 'react-router-dom';
+
+export default function PreferencesSubContent({ preferenceTab }) {
+  const routes = preferencesTabs[preferenceTab];
+  const { path } = useRouteMatch();
+
+  if (routes.length <= 0) { return null; }
+
+  return (
+    <Switch>
+      { routes.map((route, index) => (
+        <Route
+          key={index}
+          path={`${path}/${route.path}`}
+          exact={route.exact}
+          component={route.component}
+        />          
+      ))}
+    </Switch>);
+}

src/components/Preferences/PreferencesTopbar.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
+import UsersActions from 'containers/Preferences/Users/UsersActions';
+import CurrenciesActions from 'containers/Preferences/Currencies/CurrenciesActions';
+import withDashboard from 'containers/Dashboard/withDashboard';
+
+import { compose } from 'utils';
+
+import 'style/pages/Preferences/Topbar.scss';
+
+/**
+ * Preferences topbar.
+ */
+function PreferencesTopbar({ preferencesPageTitle }) {
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_TOPBAR,
+        CLASSES.PREFERENCES_TOPBAR,
+      )}
+    >
+      <div class="preferences-topbar__title">
+        <h2>{preferencesPageTitle}</h2>
+      </div>
+      <div class="preferences-topbar__actions">
+        <Route pathname="/preferences">
+          <Switch>
+            <Route exact path={'/preferences/users'} component={UsersActions} />
+            <Route
+              exact
+              path={'/preferences/currencies'}
+              component={CurrenciesActions}
+            />
+          </Switch>
+        </Route>
+      </div>
+
+      <div class="preferences-topbar__user">
+        <DashboardTopbarUser />
+      </div>
+    </div>
+  );
+}
+
+export default compose(
+  withDashboard(({ preferencesPageTitle }) => ({ preferencesPageTitle })),
+)(PreferencesTopbar);