Add Home view

packages/concordia-app/public/locales/en/translation.json

@@ -1,4 +1,7 @@
 {
+  "board.header.no.topics.message": "There are no topics yet!",
+  "board.sub.header.no.topics.guest": "Sign up and be the first to post.",
+  "board.sub.header.no.topics.user": "Be the first to post.",
   "register.card.header": "Sign Up",
   "register.form.button.back": "Back",
   "register.form.button.guest": "Continue as guest",
@@ -9,6 +12,7 @@
   "register.form.username.field.label": "Username",
   "register.form.username.field.placeholder": "Username",
   "register.p.account.address": "Account address:",
+  "topbar.button.create.topic": "Create topic",
   "topbar.button.profile": "Profile",
   "topbar.button.register": "Sign Up"
 }

packages/concordia-app/src/Routes.jsx

@@ -32,7 +32,7 @@ const routesConfig = [
       {
         exact: true,
         path: '/',
-        component: lazy(() => import('./components/HomeContainer')),
+        component: lazy(() => import('./views/Home')),
       },
       {
         component: () => <Redirect to="/404" />,

packages/concordia-app/src/components/HomeContainer.jsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-const HomeContainer = () => (<p>TODO: Home Container</p>);
-
-export default HomeContainer;

packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx

@@ -14,7 +14,6 @@ const MainLayoutMenu = (props) => {
   return (
       <AppContext.Consumer>
           {() => (
-              <div>
               <Menu color="black" inverted>
                   <Menu.Item
                     link
@@ -24,6 +23,18 @@ const MainLayoutMenu = (props) => {
                   >
                       <img src={appLogo} alt="app_logo" />
                   </Menu.Item>
+                  <Menu.Menu position="right">
+                      {hasSignedUp && history.location.pathname === '/' && (
+                          <Menu.Item
+                            link
+                            name="create-topic"
+                            key="create-topic"
+                            onClick={() => { history.push('/topics/new'); }}
+                            position="right"
+                          >
+                              {t('topbar.button.create.topic')}
+                          </Menu.Item>
+                      )}
                       {hasSignedUp
                         ? (
                             <Menu.Item
@@ -31,7 +42,6 @@ const MainLayoutMenu = (props) => {
                               name="profile"
                               key="profile"
                               onClick={() => { history.push('/profile'); }}
-                              position="right"
                             >
                                 {t('topbar.button.profile')}
                             </Menu.Item>
@@ -42,13 +52,12 @@ const MainLayoutMenu = (props) => {
                               name="register"
                               key="register"
                               onClick={() => { history.push('/auth/register'); }}
-                              position="right"
                             >
                                 {t('topbar.button.register')}
                             </Menu.Item>
                         )}
+                  </Menu.Menu>
               </Menu>
-              </div>
           )}
       </AppContext.Consumer>
   );

packages/concordia-app/src/views/Home/Board/index.jsx

@@ -0,0 +1,53 @@
+import React, { useMemo, useState } from 'react';
+import { Header } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import _ from 'lodash';
+import { useTranslation } from 'react-i18next';
+
+const Board = (props) => {
+  const { numberOfTopics, userHasSignedUp } = props;
+  const [topicIds, setTopicIds] = useState([]);
+  const { t } = useTranslation();
+
+  const boardContents = useMemo(() => {
+    if (numberOfTopics > 0) {
+      setTopicIds(_.range(0, numberOfTopics));
+
+      return (<div>TODO</div>);
+    } if (!userHasSignedUp) {
+      return (
+          <div className="vertical-center-in-parent">
+              <Header textAlign="center" as="h2">
+                  {t('board.header.no.topics.message')}
+              </Header>
+              <Header textAlign="center" as="h3">
+                  {t('board.sub.header.no.topics.guest')}
+              </Header>
+          </div>
+      );
+    }
+
+    return (
+        <div className="vertical-center-in-parent">
+            <Header textAlign="center" as="h2">
+                {t('board.header.no.topics.message')}
+            </Header>
+            <Header textAlign="center" as="h3">
+                {t('board.sub.header.no.topics.user')}
+            </Header>
+        </div>
+    );
+  }, [numberOfTopics, userHasSignedUp, t]);
+
+  return (
+      <div>
+          {boardContents}
+      </div>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  userHasSignedUp: state.user.hasSignedUp,
+});
+
+export default connect(mapStateToProps)(Board);

packages/concordia-app/src/views/Home/index.jsx

@@ -0,0 +1,34 @@
+import React, {
+  useContext, useEffect, useMemo, useState,
+} from 'react';
+import { Container } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import AppContext from '../../components/AppContext';
+import Board from './Board';
+
+const Home = (props) => {
+  const { getNumberOfTopicsResults } = props;
+  const { drizzle: { contracts: { Forum: { methods: { getNumberOfTopics } } } } } = useContext(AppContext.Context);
+  const [numberOfTopicsCallHash, setNumberOfTopicsCallHash] = useState('');
+
+  useEffect(() => {
+    setNumberOfTopicsCallHash(getNumberOfTopics.cacheCall());
+  }, [getNumberOfTopics]);
+
+  const numberOfTopics = useMemo(() => (getNumberOfTopicsResults[numberOfTopicsCallHash] !== undefined
+    ? parseInt(getNumberOfTopicsResults[numberOfTopicsCallHash].value, 10)
+    : null),
+  [getNumberOfTopicsResults, numberOfTopicsCallHash]);
+
+  return (
+      <Container textAlign="center">
+          {numberOfTopics !== null && <Board numberOfTopics={numberOfTopics} />}
+      </Container>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  getNumberOfTopicsResults: state.contracts.Forum.getNumberOfTopics,
+});
+
+export default connect(mapStateToProps)(Home);