From 69d426a657d392ff6fcaf3385d7e767fbdd3043b Mon Sep 17 00:00:00 2001
From: Apostolof <apotwohd@gmail.com>
Date: Wed, 4 Nov 2020 00:25:25 +0200
Subject: [PATCH] Add register layout

---
 packages/concordia-app/src/App.jsx            |  2 -
 packages/concordia-app/src/Routes.jsx         |  5 ++-
 .../concordia-app/src/assets/css/index.css    |  4 --
 .../src/components/MenuComponent.jsx          | 35 ----------------
 packages/concordia-app/src/index.jsx          |  1 -
 .../MainLayout/MainLayoutMenu/index.jsx       | 41 +++++++++++++++++++
 .../src/layouts/MainLayout/index.jsx          | 21 ++++++++++
 .../RegisterLayout/index.jsx}                 | 11 ++---
 .../src/views/Register/index.jsx              |  0
 9 files changed, 69 insertions(+), 51 deletions(-)
 delete mode 100644 packages/concordia-app/src/assets/css/index.css
 delete mode 100644 packages/concordia-app/src/components/MenuComponent.jsx
 create mode 100644 packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx
 create mode 100644 packages/concordia-app/src/layouts/MainLayout/index.jsx
 rename packages/concordia-app/src/{layout/CoreLayoutContainer.jsx => layouts/RegisterLayout/index.jsx} (51%)
 create mode 100644 packages/concordia-app/src/views/Register/index.jsx

diff --git a/packages/concordia-app/src/App.jsx b/packages/concordia-app/src/App.jsx
index 32dbbfb..7ed70c0 100644
--- a/packages/concordia-app/src/App.jsx
+++ b/packages/concordia-app/src/App.jsx
@@ -6,8 +6,6 @@ import LoadingContainer from './components/LoadingContainer';
 import Routes from './Routes';
 import './intl/index';
 import 'semantic-ui-css/semantic.min.css';
-
-// CSS
 import './assets/css/app.css';
 
 const App = ({ store }) => (
diff --git a/packages/concordia-app/src/Routes.jsx b/packages/concordia-app/src/Routes.jsx
index cc8f38c..abd8d60 100644
--- a/packages/concordia-app/src/Routes.jsx
+++ b/packages/concordia-app/src/Routes.jsx
@@ -1,17 +1,18 @@
 import React, { Fragment, lazy, Suspense } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
-import CoreLayoutContainer from './layout/CoreLayoutContainer';
+import MainLayout from './layouts/MainLayout';
 import LoadingScreen from './components/LoadingScreen';
 
 const routesConfig = [
   {
     exact: true,
     path: '/404',
+    layout: MainLayout,
     component: lazy(() => import('./components/NotFound')),
   },
   {
     path: '*',
-    layout: CoreLayoutContainer,
+    layout: MainLayout,
     routes: [
       {
         exact: true,
diff --git a/packages/concordia-app/src/assets/css/index.css b/packages/concordia-app/src/assets/css/index.css
deleted file mode 100644
index 76a3f26..0000000
--- a/packages/concordia-app/src/assets/css/index.css
+++ /dev/null
@@ -1,4 +0,0 @@
-body {
-    margin: 10em;
-    padding: 0;
-}
diff --git a/packages/concordia-app/src/components/MenuComponent.jsx b/packages/concordia-app/src/components/MenuComponent.jsx
deleted file mode 100644
index e0c2421..0000000
--- a/packages/concordia-app/src/components/MenuComponent.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import { withRouter } from 'react-router';
-import { Menu } from 'semantic-ui-react';
-
-import AppContext from './AppContext';
-
-import appLogo from '../assets/images/app_logo.png';
-import SignUpForm from './SignUpForm';
-
-const MenuComponent = (props) => {
-  const { history: { push } } = props;
-
-  return (
-      <AppContext.Consumer>
-          {() => (
-              <div>
-                  <Menu color="black" inverted>
-                      <Menu.Item
-                        link
-                        name="home"
-                        onClick={() => { push('/'); }}
-                      >
-                          <img src={appLogo} alt="app_logo" />
-                      </Menu.Item>
-
-                      <SignUpForm />
-
-                  </Menu>
-              </div>
-          )}
-      </AppContext.Consumer>
-  );
-};
-
-export default withRouter(MenuComponent);
diff --git a/packages/concordia-app/src/index.jsx b/packages/concordia-app/src/index.jsx
index 862c238..6974fbf 100644
--- a/packages/concordia-app/src/index.jsx
+++ b/packages/concordia-app/src/index.jsx
@@ -8,7 +8,6 @@ import AppContext from './components/AppContext';
 import drizzleOptions from './options/drizzleOptions';
 import breezeOptions from './options/breezeOptions';
 import * as serviceWorker from './utils/serviceWorker';
-import './assets/css/index.css';
 import LoadingScreen from './components/LoadingScreen';
 
 const drizzle = new Drizzle(drizzleOptions, store);
diff --git a/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx b/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx
new file mode 100644
index 0000000..235bd03
--- /dev/null
+++ b/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { withRouter } from 'react-router';
+import { Menu } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
+import AppContext from '../../../components/AppContext';
+import appLogo from '../../../assets/images/app_logo.png';
+
+const MainLayoutMenu = (props) => {
+  const { history: { push } } = props;
+  const { t } = useTranslation();
+
+  return (
+      <AppContext.Consumer>
+          {() => (
+              <div>
+                  <Menu color="black" inverted>
+                      <Menu.Item
+                        link
+                        name="home"
+                        key="home"
+                        onClick={() => { push('/'); }}
+                      >
+                          <img src={appLogo} alt="app_logo" />
+                      </Menu.Item>
+                      <Menu.Item
+                        link
+                        name="register"
+                        key="register"
+                        onClick={() => { push('/register'); }}
+                        position="right"
+                      >
+                          {t('topbar.button.signup')}
+                      </Menu.Item>
+                  </Menu>
+              </div>
+          )}
+      </AppContext.Consumer>
+  );
+};
+
+export default withRouter(MainLayoutMenu);
diff --git a/packages/concordia-app/src/layouts/MainLayout/index.jsx b/packages/concordia-app/src/layouts/MainLayout/index.jsx
new file mode 100644
index 0000000..0864457
--- /dev/null
+++ b/packages/concordia-app/src/layouts/MainLayout/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import MainLayoutMenu from './MainLayoutMenu';
+
+const MainLayout = (props) => {
+  const { children } = props;
+
+  return (
+      <div id="main-layout">
+          <MainLayoutMenu />
+          {children}
+      </div>
+  );
+};
+
+MainLayout.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
+export default MainLayout;
diff --git a/packages/concordia-app/src/layout/CoreLayoutContainer.jsx b/packages/concordia-app/src/layouts/RegisterLayout/index.jsx
similarity index 51%
rename from packages/concordia-app/src/layout/CoreLayoutContainer.jsx
rename to packages/concordia-app/src/layouts/RegisterLayout/index.jsx
index a248dc0..3b4632c 100644
--- a/packages/concordia-app/src/layout/CoreLayoutContainer.jsx
+++ b/packages/concordia-app/src/layouts/RegisterLayout/index.jsx
@@ -1,21 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import MenuComponent from '../components/MenuComponent';
-
-const CoreLayout = (props) => {
+const RegisterLayout = (props) => {
   const { children } = props;
 
   return (
-      <div>
-          <MenuComponent />
+      <div id="register-layout">
           {children}
       </div>
   );
 };
 
-CoreLayout.propTypes = {
+RegisterLayout.propTypes = {
   children: PropTypes.element.isRequired,
 };
 
-export default CoreLayout;
+export default RegisterLayout;
diff --git a/packages/concordia-app/src/views/Register/index.jsx b/packages/concordia-app/src/views/Register/index.jsx
new file mode 100644
index 0000000..e69de29