diff --git a/packages/concordia-app/public/locales/en/translation.json b/packages/concordia-app/public/locales/en/translation.json index 341d528..803805b 100644 --- a/packages/concordia-app/public/locales/en/translation.json +++ b/packages/concordia-app/public/locales/en/translation.json @@ -2,6 +2,9 @@ "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.", + "post.create.form.send.button": "Post", + "post.form.content.field.placeholder": "Message", + "post.form.subject.field.placeholder": "Subject", "post.list.row.author.pre": "Post by", "post.list.row.post.id": "#{{id}}", "register.card.header": "Sign Up", diff --git a/packages/concordia-app/src/components/PostCreate/index.jsx b/packages/concordia-app/src/components/PostCreate/index.jsx new file mode 100644 index 0000000..124696c --- /dev/null +++ b/packages/concordia-app/src/components/PostCreate/index.jsx @@ -0,0 +1,159 @@ +import React, { + memo, useCallback, useEffect, useState, +} from 'react'; +import { + Button, Feed, Form, Icon, Image, Input, TextArea, +} from 'semantic-ui-react'; +import PropTypes from 'prop-types'; +import { useTranslation } from 'react-i18next'; +import { useDispatch, useSelector } from 'react-redux'; +import determineKVAddress from '../../utils/orbitUtils'; +import { USER_DATABASE } from '../../constants/OrbitDatabases'; +import { FETCH_USER_DATABASE } from '../../redux/actions/peerDbReplicationActions'; +import { USER_PROFILE_PICTURE } from '../../constants/UserDatabaseKeys'; +import { breeze } from '../../redux/store'; +import './styles.css'; + +const { orbit } = breeze; + +const PostCreate = (props) => { + const { id: postId, initialPostSubject } = props; + const [postSubject, setPostSubject] = useState(initialPostSubject); + const [postContent, setPostContent] = useState(''); + const [userProfilePictureUrl, setUserProfilePictureUrl] = useState(); + const [posting, setPosting] = useState(false); + const userAddress = useSelector((state) => state.user.address); + const users = useSelector((state) => state.orbitData.users); + const dispatch = useDispatch(); + const { t } = useTranslation(); + + useEffect(() => { + if (userAddress) { + determineKVAddress({ orbit, dbName: USER_DATABASE, userAddress }) + .then((userOrbitAddress) => { + const userFound = users + .find((user) => user.id === userOrbitAddress); + + if (userFound) { + setUserProfilePictureUrl(userFound[USER_PROFILE_PICTURE]); + } else { + dispatch({ + type: FETCH_USER_DATABASE, + orbit, + dbName: USER_DATABASE, + userAddress, + }); + } + }) + .catch((error) => { + console.error('Error during determination of key-value DB address:', error); + }); + } + }, [dispatch, userAddress, users]); + + const handleInputChange = useCallback((event) => { + if (posting) { + return; + } + + switch (event.target.name) { + case 'postSubject': + setPostSubject(event.target.value); + break; + case 'postContent': + setPostContent(event.target.value); + break; + default: + break; + } + }, [posting]); + + const savePost = useCallback(() => { + if (postSubject === '' || postContent === '') { + return; + } + + setPosting(true); + }, [postContent, postSubject]); + + return ( + + + + {userProfilePictureUrl + ? ( + + ) + : ( + + )} + + + +
+ + + {t('post.list.row.post.id', { id: postId })} + +
+ + +
+