From 24af374750ac5a0027d8cbe3e211a120af5c95d1 Mon Sep 17 00:00:00 2001
From: Ezerous <ezerous@gmail.com>
Date: Thu, 4 Mar 2021 15:04:41 +0200
Subject: [PATCH 1/4] feat: add post editing

---
 .../components/PostList/PostListRow/index.jsx | 112 +++++++++++++++---
 .../PostList/PostListRow/styles.css           |   7 ++
 2 files changed, 104 insertions(+), 15 deletions(-)

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 (
+            <>
+                <Icon
+                  className="post-list-edit-button"
+                  name="check"
+                  color="green"
+                  fitted
+                  onClick={saveChanges}
+                />
+                <Icon
+                  className="post-list-edit-button"
+                  name="x"
+                  color="red"
+                  fitted
+                  onClick={discardChanges}
+                />
+            </>
+        );
+      }
+      return (
+          <Icon
+            className="post-list-edit-button"
+            name="pencil"
+            fitted
+            onClick={editPost}
+          />
+      );
+    }
+    return null;
+  }, [discardChanges, editPost, editing, postAuthorAddress, postContent, saveChanges, userAddress]);
+
+  const postContentArea = useMemo(() => {
+    const handleInputChange = (event, { value }) => {
+      setEditedPostContent(value);
+    };
+
+    if (postContent !== null) {
+      if (!editing) {
+        return (
+            <ReactMarkdown
+              source={postContent}
+              renderers={{
+                link: targetBlank(),
+                linkReference: targetBlank(),
+              }}
+            />
+        );
+      }
+      return (
+          <TextArea
+            value={editedPostContent}
+            onChange={handleInputChange}
+          />
+      );
+    }
+    return (<Placeholder><Placeholder.Line length="long" /></Placeholder>);
+  }, [editedPostContent, editing, postContent]);
+
   useEffect(() => () => clearGetPostChainData(postId), [postId]);
 
   return useMemo(() => (
@@ -136,29 +228,19 @@ const PostListRow = (props) => {
                             <Feed.Date>
                                 <TimeAgo date={timeAgo} />
                             </Feed.Date>
+                            {editPostButtons}
                         </>
                     )
                     : <Placeholder><Placeholder.Line length="medium" /></Placeholder>}
               </Feed.Summary>
               <Feed.Extra>
-                  {postContent !== null
-                    ? (
-                        <ReactMarkdown
-                          source={postContent}
-                          renderers={{
-                            link: targetBlank(),
-                            linkReference: targetBlank(),
-                          }}
-                        />
-                    )
-                    : <Placeholder><Placeholder.Line length="long" /></Placeholder>}
+                  {postContentArea}
               </Feed.Extra>
               <PostVoting postId={postId} postAuthorAddress={postAuthorAddress} />
           </Feed.Content>
       </Dimmer.Dimmable>
-  ), [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;
+}

From 24001b9f2d3143d66d292d6ed3e7a88fc2bf6b4e Mon Sep 17 00:00:00 2001
From: Ezerous <ezerous@gmail.com>
Date: Thu, 4 Mar 2021 15:32:54 +0200
Subject: [PATCH 2/4] fix: corrected text area's style

---
 .../src/components/PostList/PostListRow/index.jsx    | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx b/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
index e53f0ef..c06d258 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, Icon, Placeholder, Ref, TextArea,
+  Dimmer, Feed, Form, Icon, Placeholder, Ref, TextArea,
 } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -184,10 +184,12 @@ const PostListRow = (props) => {
         );
       }
       return (
-          <TextArea
-            value={editedPostContent}
-            onChange={handleInputChange}
-          />
+          <Form>
+              <TextArea
+                value={editedPostContent}
+                onChange={handleInputChange}
+              />
+          </Form>
       );
     }
     return (<Placeholder><Placeholder.Line length="long" /></Placeholder>);

From 00e5c3cbc1f937c9faa894a925c3567fb67458e8 Mon Sep 17 00:00:00 2001
From: Ezerous <ezerous@gmail.com>
Date: Fri, 5 Mar 2021 15:32:41 +0200
Subject: [PATCH 3/4] fix: toString()

---
 .../concordia-app/src/components/PostList/PostListRow/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx b/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
index c06d258..d634456 100644
--- a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
+++ b/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
@@ -120,7 +120,7 @@ const PostListRow = (props) => {
       const { stores } = orbit;
       const postsDb = Object.values(stores).find((store) => store.dbname === POSTS_DATABASE);
       postsDb
-        .put(postId, {
+        .put(postId.toString(), {
           [POST_CONTENT]: editedPostContent,
         })
         .then(() => {

From 87e0fa4362c09002a5fc9b719baef020187a1324 Mon Sep 17 00:00:00 2001
From: Ezerous <ezerous@gmail.com>
Date: Fri, 5 Mar 2021 15:34:40 +0200
Subject: [PATCH 4/4] fix: remove useless set

---
 .../src/components/PostList/PostListRow/index.jsx              | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx b/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
index d634456..2c1e9c1 100644
--- a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
+++ b/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
@@ -123,9 +123,6 @@ const PostListRow = (props) => {
         .put(postId.toString(), {
           [POST_CONTENT]: editedPostContent,
         })
-        .then(() => {
-          setPostContent(editedPostContent);
-        })
         .catch((reason) => {
           console.error(reason);
         });