diff --git a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx b/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
index 3655066..e53f0ef 100644
--- a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
+++ b/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
@@ -2,7 +2,7 @@ import React, {
memo, useEffect, useMemo, useState, useCallback,
} from 'react';
import {
- Dimmer, Feed, Placeholder, Ref,
+ Dimmer, Feed, Icon, Placeholder, Ref, TextArea,
} from 'semantic-ui-react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
@@ -36,6 +36,8 @@ const PostListRow = (props) => {
const [topicId, setTopicId] = useState(null);
const [postContent, setPostContent] = useState(null);
const [postAuthorMeta, setPostAuthorMeta] = useState(null);
+ const [editing, setEditing] = useState(false);
+ const [editedPostContent, setEditedPostContent] = useState(null);
const userAddress = useSelector((state) => state.user.address);
const posts = useSelector((state) => state.orbitData.posts);
const users = useSelector((state) => state.orbitData.users);
@@ -101,6 +103,96 @@ const PostListRow = (props) => {
}
}, [focus]);
+ // ---------- Post Editing -----------------
+
+ const editPost = useCallback(() => {
+ setEditedPostContent(postContent);
+ setEditing(true);
+ }, [postContent]);
+
+ const discardChanges = useCallback(() => {
+ setEditing(false);
+ }, []);
+
+ const saveChanges = useCallback(() => {
+ setEditing(false);
+ if (editedPostContent !== postContent) {
+ const { stores } = orbit;
+ const postsDb = Object.values(stores).find((store) => store.dbname === POSTS_DATABASE);
+ postsDb
+ .put(postId, {
+ [POST_CONTENT]: editedPostContent,
+ })
+ .then(() => {
+ setPostContent(editedPostContent);
+ })
+ .catch((reason) => {
+ console.error(reason);
+ });
+ }
+ }, [editedPostContent, postContent, postId]);
+
+ const editPostButtons = useMemo(() => {
+ if (postContent !== null && userAddress === postAuthorAddress) {
+ if (editing) {
+ return (
+ <>
+
+
+ >
+ );
+ }
+ return (
+
+ );
+ }
+ return null;
+ }, [discardChanges, editPost, editing, postAuthorAddress, postContent, saveChanges, userAddress]);
+
+ const postContentArea = useMemo(() => {
+ const handleInputChange = (event, { value }) => {
+ setEditedPostContent(value);
+ };
+
+ if (postContent !== null) {
+ if (!editing) {
+ return (
+
+ );
+ }
+ return (
+
+ );
+ }
+ return ();
+ }, [editedPostContent, editing, postContent]);
+
useEffect(() => () => clearGetPostChainData(postId), [postId]);
return useMemo(() => (
@@ -136,29 +228,19 @@ const PostListRow = (props) => {
+ {editPostButtons}
>
)
: }
- {postContent !== null
- ? (
-
- )
- : }
+ {postContentArea}
- ), [focusRef, loading, postAuthor, postAuthorAddress, postAuthorMeta, postContent, postId, postIndex, t, timeAgo,
- topicId,
- ]);
+ ), [editPostButtons, focusRef, loading, postAuthor, postAuthorAddress, postAuthorMeta,
+ postContentArea, postId, postIndex, t, timeAgo, topicId]);
};
PostListRow.defaultProps = {
diff --git a/packages/concordia-app/src/components/PostList/PostListRow/styles.css b/packages/concordia-app/src/components/PostList/PostListRow/styles.css
index d360343..9d12ac2 100644
--- a/packages/concordia-app/src/components/PostList/PostListRow/styles.css
+++ b/packages/concordia-app/src/components/PostList/PostListRow/styles.css
@@ -34,3 +34,10 @@
font-size: 0.75rem !important;
opacity: 0.4;
}
+
+.post-list-edit-button {
+ padding-left: 0.4rem;
+ font-size: 0.8rem !important;
+ color: rgba(0,0,0,.6);
+ cursor: pointer;
+}