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 (
+
+
+
+
+
+
+
+
+
+
+
+
+ {t('topic.create.form.post.button')}
+
+
+
+
+
+
+
+
+ );
+};
+
+export default TopicCreate;
diff --git a/packages/concordia-app/src/views/Topic/TopicCreate/styles.css b/packages/concordia-app/src/views/Topic/TopicCreate/styles.css
new file mode 100644
index 0000000..f418207
--- /dev/null
+++ b/packages/concordia-app/src/views/Topic/TopicCreate/styles.css
@@ -0,0 +1,6 @@
+.form-textarea-required {
+ color: rgb(159, 58, 56) !important;
+ outline-color: rgb(159, 58, 56) !important;
+ border-color: rgb(224, 180, 180) !important;
+ background-color: rgb(255, 246, 246) !important;
+}
diff --git a/packages/concordia-app/src/views/Topic/TopicView/index.jsx b/packages/concordia-app/src/views/Topic/TopicView/index.jsx
new file mode 100644
index 0000000..4e0710a
--- /dev/null
+++ b/packages/concordia-app/src/views/Topic/TopicView/index.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const TopicView = (props) => {
+ const { topicId } = props;
+
+ return (
+
+ TODO
+
+ );
+};
+
+TopicView.propTypes = {
+ topicId: PropTypes.number,
+};
+
+export default TopicView;
diff --git a/packages/concordia-app/src/views/Topic/index.jsx b/packages/concordia-app/src/views/Topic/index.jsx
new file mode 100644
index 0000000..9f5b033
--- /dev/null
+++ b/packages/concordia-app/src/views/Topic/index.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useRouteMatch } from 'react-router';
+import TopicCreate from './TopicCreate';
+import TopicView from './TopicView';
+
+const Topic = () => {
+ const match = useRouteMatch();
+ const { id: topicId } = match.params;
+
+ return topicId === 'new'
+ ? (
+
+ )
+ : (
+
+ );
+};
+
+export default Topic;