WIP Frontend development.

client/src/components/App.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {IntlProvider} from 'react-intl';
-// import {Switch} from 'react-router-dom';
+import {connect} from 'react-redux';
 import PrivateRoute from 'components/PrivateRoute';
 import Authentication from 'components/Authentication';
 import Dashboard from 'components/Dashboard/Dashboard';
+// import {isAuthenticated} from 'reducers/authentication'
 import messages from 'lang/en';
 import 'style/App.scss';
 
@@ -12,8 +13,8 @@ function App(props) {
   return (
     <IntlProvider locale={props.locale} messages={messages}>
       <div className="App">
-        <Authentication isAuthenticated={true} />
-        <PrivateRoute isAuthenticated={true} component={Dashboard} />
+        <Authentication isAuthenticated={props.isAuthorized} />
+        <PrivateRoute isAuthenticated={props.isAuthorized} component={Dashboard} />
       </div>
     </IntlProvider>
   );
@@ -23,6 +24,10 @@ App.defaultProps = {
 };
 App.propTypes = {
   locale: PropTypes.string,
+  isAuthorized: PropTypes.bool,
 };
 
-export default App;
+const mapStateToProps = (state) => ({
+  isAuthorized: true,
+});
+export default connect(mapStateToProps)(App);

client/src/components/Authentication.js

@@ -5,23 +5,25 @@ import authenticationRoutes from 'routes/authentication';
 export default function({ isAuthenticated =false, ...rest }) {
   const to = {pathname: '/dashboard/homepage'};
 
-  return isAuthenticated ?
-    (
-      <Redirect to={to} />
-    ) : (
-    <Switch>
-      <div class="authentication-page">
-        <div class="authentication-page__form-wrapper">
-          { authenticationRoutes.map((route, index) => (
-            <Route
-              key={index}
-              path={route.path}
-              exact={route.exact}
-              component={route.component}
-            />
-          ))}
-        </div>
-      </div>
-    </Switch>
+  return (
+    <Route path="/auth">
+      { isAuthenticated ?
+        (<Redirect to={to} />) : (
+        <Switch>
+          <div class="authentication-page">
+            <div class="authentication-page__form-wrapper">
+              { authenticationRoutes.map((route, index) => (
+                <Route
+                  key={index}
+                  path={route.path}
+                  exact={route.exact}
+                  component={route.component}
+                />
+              ))}
+            </div>
+          </div>
+        </Switch>)
+      }
+    </Route>
   );
 }

client/src/components/Dashboard/Dashboard.js

@@ -1,15 +1,12 @@
 import React from 'react';
-import {Route} from 'react-router-dom';
 import Sidebar from 'components/Sidebar/Sidebar';
 import DashboardContent from 'components/Dashboard/DashboardContent';
 
 export default function() {
   return ( 
     <div className="dashboard" id="dashboard">
-      <Route pathname="/dashboard/">
-        <Sidebar />
-        <DashboardContent />
-      </Route>
+      <Sidebar />
+      <DashboardContent />
     </div>
   )
 }

client/src/components/Dashboard/DashboardActionsBar.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+
+export default function DashboardActionsBar() {
+  return (
+    <div class="dashboard__actions-bar">
+      
+    </div>
+  )
+}

client/src/components/Dashboard/DashboardContent.js

@@ -1,11 +1,25 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import dashboardRoutes from 'routes/dashboard'
+import DashboardTopbar from 'components/Dashboard/DashboardTopbar';
 
 export default function() {
   return (
     <div className="dashboard-content" id="dashboard">
-      <h2>dashboard</h2>
+      <DashboardTopbar pageTitle={"asdad"}/>
+      
+      <Route pathname="/dashboard/">
+        <Switch>
+          { dashboardRoutes.map((route, index) => (
+            <Route
+              key={index}
+              path={route.path}
+              exact={route.exact}
+              component={route.component}
+            />          
+          ))}
+        </Switch>
+      </Route>
     </div>
   )
 }

client/src/components/Dashboard/DashboardPageContent.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function DashboardPageContent({ children }) {
+  return (
+    <div class="dashboard__page-content">
+      { children }
+    </div>
+  )
+}

client/src/components/Dashboard/DashboardTopbar.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  Navbar,
+  NavbarGroup,
+  Button,
+  Classes,
+  MenuDivider,
+  MenuItem,
+  Menu,
+  Popover,
+} from '@blueprintjs/core';
+
+export default function DashboardTopbar({ pageTitle }) {
+  const userAvatarDropMenu = (
+    <Menu>
+      <MenuItem icon="graph" text="Graph" />
+      <MenuItem icon="map" text="Map" />
+      <MenuItem icon="th" text="Table" shouldDismissPopover={false} />
+      <MenuItem icon="zoom-to-fit" text="Nucleus" disabled={true} />
+      <MenuDivider />
+      <MenuItem icon="cog" text="Logout" />
+    </Menu>
+  );
+  return (
+    <div class="dashboard__topbar">
+      <h1 class="dashboard__title">{ pageTitle }</h1>
+      
+      <div class="dashboard__topbar-actions">
+        <Navbar class="dashboard__topbar-navbar">
+          <NavbarGroup>
+            <Button className={Classes.MINIMAL} icon="home" text="Home" />
+            <Button className={Classes.MINIMAL} icon="document" text="Files" />
+          </NavbarGroup>
+        </Navbar>
+
+        <div class="dashboard__user">
+          <Popover content={userAvatarDropMenu}>
+            <Button>
+              <div className="user-avatar"></div>
+            </Button>
+          </Popover>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/Sidebar/SidebarHead.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import appMeta from 'config/app';
 
 export default function() {
   return (
@@ -8,11 +9,15 @@ export default function() {
       </div>
 
       <div className="sidebar__head-company-meta">
-        <span className="comapny-name">
+        <div className="comapny-name">
+          { appMeta.app_name } 
+        </div>
 
-        </span>
-
-        <span className="company-meta"></span>
+        <div className="company-meta">
+          <span class="version">
+          { appMeta.app_version }
+          </span>
+        </div>
       </div>
     </div>
   );

client/src/components/Sidebar/SidebarMenu.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import {Menu, MenuItem, MenuDivider} from "@blueprintjs/core";
+import {useHistory} from 'react-router-dom';
 import sidebarMenuList from 'config/sidebarMenu';
 
 export default function SidebarMenu() {
+  let history = useHistory();
+
   const items = sidebarMenuList.map((item) => 
     (item.divider) ? 
       <MenuDivider
@@ -11,7 +14,8 @@ export default function SidebarMenu() {
         icon={item.icon}
         text={item.text}
         label={item.label}
-        disabled={item.disabled} />
+        disabled={item.disabled}
+        onClick={() => { history.push(item.href); }} />
   );
   return (
     <Menu className="sidebar-menu">