From 029eae0ab6219e0c3bec0141955d9db7eadb25b1 Mon Sep 17 00:00:00 2001 From: Apostolof Date: Fri, 6 Nov 2020 00:15:12 +0200 Subject: [PATCH] Init topic creation and view --- .../public/locales/en/translation.json | 7 +- packages/concordia-app/src/Routes.jsx | 12 +- .../src/views/Topic/TopicCreate/index.jsx | 166 ++++++++++++++++++ .../src/views/Topic/TopicCreate/styles.css | 6 + .../src/views/Topic/TopicView/index.jsx | 18 ++ .../concordia-app/src/views/Topic/index.jsx | 19 ++ 6 files changed, 226 insertions(+), 2 deletions(-) create mode 100644 packages/concordia-app/src/views/Topic/TopicCreate/index.jsx create mode 100644 packages/concordia-app/src/views/Topic/TopicCreate/styles.css create mode 100644 packages/concordia-app/src/views/Topic/TopicView/index.jsx create mode 100644 packages/concordia-app/src/views/Topic/index.jsx diff --git a/packages/concordia-app/public/locales/en/translation.json b/packages/concordia-app/public/locales/en/translation.json index 29db84c..c55754f 100644 --- a/packages/concordia-app/public/locales/en/translation.json +++ b/packages/concordia-app/public/locales/en/translation.json @@ -14,5 +14,10 @@ "register.p.account.address": "Account address:", "topbar.button.create.topic": "Create topic", "topbar.button.profile": "Profile", - "topbar.button.register": "Sign Up" + "topbar.button.register": "Sign Up", + "topic.create.form.subject.field.label": "Topic subject", + "topic.create.form.subject.field.placeholder": "Subject", + "topic.create.form.message.field.label": "First post message", + "topic.create.form.message.field.placeholder": "Message", + "topic.create.form.post.button": "Post" } \ No newline at end of file diff --git a/packages/concordia-app/src/Routes.jsx b/packages/concordia-app/src/Routes.jsx index 3363d93..9931cfa 100644 --- a/packages/concordia-app/src/Routes.jsx +++ b/packages/concordia-app/src/Routes.jsx @@ -5,6 +5,11 @@ import LoadingScreen from './components/LoadingScreen'; import RegisterLayout from './layouts/RegisterLayout'; const routesConfig = [ + { + exact: true, + path: '/', + component: () => , + }, { exact: true, path: '/404', @@ -31,9 +36,14 @@ const routesConfig = [ routes: [ { exact: true, - path: '/', + path: '/home', component: lazy(() => import('./views/Home')), }, + { + exact: true, + path: '/topics/:id(\\bnew\\b|\\d+)', + component: lazy(() => import('./views/Topic')), + }, { component: () => , }, diff --git a/packages/concordia-app/src/views/Topic/TopicCreate/index.jsx b/packages/concordia-app/src/views/Topic/TopicCreate/index.jsx new file mode 100644 index 0000000..70e2c9a --- /dev/null +++ b/packages/concordia-app/src/views/Topic/TopicCreate/index.jsx @@ -0,0 +1,166 @@ +import React, { + useCallback, useContext, useEffect, useState, +} from 'react'; +import { + Button, Container, Form, Icon, Input, TextArea, +} from 'semantic-ui-react'; +import { useTranslation } from 'react-i18next'; +import { useHistory } from 'react-router'; +import { useSelector } from 'react-redux'; +import AppContext from '../../../components/AppContext'; +import './styles.css'; + +const TopicCreate = (props) => { + const { account } = props; + + const { + drizzle: { + contracts: { + Forum: { + methods: { createTopic }, + }, + }, + }, + } = useContext(AppContext.Context); + + const orbit = useSelector((state) => state.orbit); + const transactionStack = useSelector((state) => state.transactionStack); + const transactions = useSelector((state) => state.transactions); + + const [subjectInput, setSubjectInput] = useState(''); + const [messageInput, setMessageInput] = useState(''); + const [topicSubjectInputEmptySubmit, setTopicSubjectInputEmptySubmit] = useState(false); + const [topicMessageInputEmptySubmit, setTopicMessageInputEmptySubmit] = useState(false); + const [createTopicCacheSendStackId, setCreateTopicCacheSendStackId] = useState(''); + const [posting, setPosting] = useState(false); + + const history = useHistory(); + const { t } = useTranslation(); + + const handleSubjectInputChange = useCallback((event) => { + if (posting) { + return; + } + + switch (event.target.name) { + case 'subjectInput': + setSubjectInput(event.target.value); + break; + case 'messageInput': + setMessageInput(event.target.value); + break; + default: + break; + } + }, [posting]); + + useEffect(() => { + if (posting && transactionStack && transactionStack[createTopicCacheSendStackId] + && transactions[transactionStack[createTopicCacheSendStackId]]) { + if (transactions[transactionStack[createTopicCacheSendStackId]].status === 'error') { + setPosting(false); + } else if (transactions[transactionStack[createTopicCacheSendStackId]].status === 'success') { + const { + receipt: { + events: { + TopicCreated: { + returnValues: { + topicID: topicId, + postID: postId, + }, + }, + }, + }, + } = transactions[transactionStack[createTopicCacheSendStackId]]; + + // Promise.all( + // orbit.topicsDB + // .put(topicId, { subject: subjectInput }), + // orbit.postsDB + // .put(postId, { + // subject: subjectInput, + // content: messageInput, + // }), + // ).then((value) => { + // console.log(value); + // history.push('/'); + // }) + // .catch((reason) => console.log(reason)); + } + } + }, [ + transactions, transactionStack, history, posting, createTopicCacheSendStackId, orbit, subjectInput, messageInput, + ]); + + const validateAndPost = useCallback(() => { + if (subjectInput === '') { + setTopicSubjectInputEmptySubmit(true); + return; + } + + if (messageInput === '') { + setTopicMessageInputEmptySubmit(true); + return; + } + + setPosting(true); + setCreateTopicCacheSendStackId(createTopic.cacheSend(...[], { from: account })); + }, [account, createTopic, messageInput, subjectInput]); + + return ( + +
+ + + + + + +