From 519541d1d17d76fb10286e123473420d66957571 Mon Sep 17 00:00:00 2001 From: Apostolof Date: Thu, 5 Nov 2020 01:28:31 +0200 Subject: [PATCH] Add Home view --- .../public/locales/en/translation.json | 4 ++ packages/concordia-app/src/Routes.jsx | 2 +- .../src/components/HomeContainer.jsx | 5 -- .../MainLayout/MainLayoutMenu/index.jsx | 37 ++++++++----- .../src/views/Home/Board/index.jsx | 53 +++++++++++++++++++ .../concordia-app/src/views/Home/index.jsx | 34 ++++++++++++ 6 files changed, 115 insertions(+), 20 deletions(-) delete mode 100644 packages/concordia-app/src/components/HomeContainer.jsx create mode 100644 packages/concordia-app/src/views/Home/Board/index.jsx create mode 100644 packages/concordia-app/src/views/Home/index.jsx diff --git a/packages/concordia-app/public/locales/en/translation.json b/packages/concordia-app/public/locales/en/translation.json index 78f816d..29db84c 100644 --- a/packages/concordia-app/public/locales/en/translation.json +++ b/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" } \ No newline at end of file diff --git a/packages/concordia-app/src/Routes.jsx b/packages/concordia-app/src/Routes.jsx index cee10ce..3363d93 100644 --- a/packages/concordia-app/src/Routes.jsx +++ b/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: () => , diff --git a/packages/concordia-app/src/components/HomeContainer.jsx b/packages/concordia-app/src/components/HomeContainer.jsx deleted file mode 100644 index d11b3f4..0000000 --- a/packages/concordia-app/src/components/HomeContainer.jsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; - -const HomeContainer = () => (

TODO: Home Container

); - -export default HomeContainer; diff --git a/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx b/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx index 7edbf43..af9d6f4 100644 --- a/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx +++ b/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx @@ -14,16 +14,27 @@ const MainLayoutMenu = (props) => { return ( {() => ( -
- - { history.push('/'); }} - > - app_logo - + + { history.push('/'); }} + > + app_logo + + + {hasSignedUp && history.location.pathname === '/' && ( + { history.push('/topics/new'); }} + position="right" + > + {t('topbar.button.create.topic')} + + )} {hasSignedUp ? ( { name="profile" key="profile" onClick={() => { history.push('/profile'); }} - position="right" > {t('topbar.button.profile')} @@ -42,13 +52,12 @@ const MainLayoutMenu = (props) => { name="register" key="register" onClick={() => { history.push('/auth/register'); }} - position="right" > {t('topbar.button.register')} )} - -
+ + )} ); diff --git a/packages/concordia-app/src/views/Home/Board/index.jsx b/packages/concordia-app/src/views/Home/Board/index.jsx new file mode 100644 index 0000000..58652bf --- /dev/null +++ b/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 (
TODO
); + } if (!userHasSignedUp) { + return ( +
+
+ {t('board.header.no.topics.message')} +
+
+ {t('board.sub.header.no.topics.guest')} +
+
+ ); + } + + return ( +
+
+ {t('board.header.no.topics.message')} +
+
+ {t('board.sub.header.no.topics.user')} +
+
+ ); + }, [numberOfTopics, userHasSignedUp, t]); + + return ( +
+ {boardContents} +
+ ); +}; + +const mapStateToProps = (state) => ({ + userHasSignedUp: state.user.hasSignedUp, +}); + +export default connect(mapStateToProps)(Board); diff --git a/packages/concordia-app/src/views/Home/index.jsx b/packages/concordia-app/src/views/Home/index.jsx new file mode 100644 index 0000000..36f9b71 --- /dev/null +++ b/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 ( + + {numberOfTopics !== null && } + + ); +}; + +const mapStateToProps = (state) => ({ + getNumberOfTopicsResults: state.contracts.Forum.getNumberOfTopics, +}); + +export default connect(mapStateToProps)(Home);