Init topic creation and view

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"
 }

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: () => <Redirect to="/home" />,
+  },
   {
     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: () => <Redirect to="/404" />,
       },

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 (
+      <Container>
+          <Form loading={posting}>
+              <Form.Field required>
+                  <label htmlFor="form-topic-create-field-subject">
+                      {t('topic.create.form.subject.field.label')}
+                  </label>
+                  <Input
+                    id="form-topic-create-field-subject"
+                    placeholder={t('topic.create.form.subject.field.placeholder')}
+                    name="subjectInput"
+                    className="form-input"
+                    error={topicSubjectInputEmptySubmit}
+                    value={subjectInput}
+                    onChange={handleSubjectInputChange}
+                  />
+              </Form.Field>
+              <Form.Field required>
+                  <label htmlFor="form-topic-create-field-message">
+                      {t('topic.create.form.message.field.label')}
+                  </label>
+                  <TextArea
+                    id="form-topic-create-field-message"
+                    name="messageInput"
+                    className={topicMessageInputEmptySubmit
+                      ? 'form-textarea-required'
+                      : ''}
+                    value={messageInput}
+                    placeholder={t('topic.create.form.message.field.placeholder')}
+                    rows={5}
+                    autoheight="true"
+                    onChange={handleSubjectInputChange}
+                  />
+              </Form.Field>
+              <Form.Group>
+                  <Form.Button
+                    animated
+                    key="form-topic-create-button-submit"
+                    type="button"
+                    color="green"
+                    disabled={posting}
+                    onClick={validateAndPost}
+                  >
+                      <Button.Content visible>
+                          {t('topic.create.form.post.button')}
+                      </Button.Content>
+                      <Button.Content hidden>
+                          <Icon name="send" />
+                      </Button.Content>
+                  </Form.Button>
+              </Form.Group>
+          </Form>
+      </Container>
+  );
+};
+
+export default TopicCreate;

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;
+}

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 (
+      <div>
+          TODO
+      </div>
+  );
+};
+
+TopicView.propTypes = {
+  topicId: PropTypes.number,
+};
+
+export default TopicView;

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'
+    ? (
+        <TopicCreate />
+    )
+    : (
+        <TopicView topicId={topicId} />
+    );
+};
+
+export default Topic;