add

- implementation of the post editing
- 2 new redux actions
one for post permlink and one to indicate post editing,
- new component to show edit icon on post
and handle data & opening editor
- loading post data to redux for and then to editor
- for easier post handling links to video/audio, quotes
gonna be saved separate instead of saving them to json_metadata

src/Blog/Post.js

@@ -19,6 +19,7 @@ import store from "../store";
 import { injectIntl } from "react-intl";
 import { FormattedRelative } from "react-intl";
 import ShareMenu from "../Components/Post/ShareMenu";
+import EditPost from "../Components/Post/EditPost";
 class Post extends Component {
   constructor(props) {
     super(props);
@@ -32,7 +33,8 @@ class Post extends Component {
         this.props.post.total_payout_value.replace("SBD", ""),
         this.props.post.pending_payout_value.replace("SBD", ""),
         this.props.post.total_pending_payout_value.replace("STEEM", "")
-      ])
+      ]),
+      allowEdit: this.props.post.author === this.props.username
     };
 
     this.setState({
@@ -109,6 +111,7 @@ class Post extends Component {
           <FooterActions>
             <span>${Number(this.state.value).toFixed(2)}</span>
             <span>
+              {this.state.allowEdit && <EditPost post={this.props.post} />}
               <ShareMenu
                 postAuthor={this.props.post.author}
                 postPermlink={this.props.post.permlink}

src/Components/Post/EditPost.js

@@ -0,0 +1,97 @@
+import React, { Component } from "react";
+import styled from "styled-components";
+
+import PostCreator from "../../NewPost/";
+
+import store from "../../store";
+import newPostType from "../../actions/newPostType";
+import newPostBody from "../../actions/newPostBody";
+import newPostTitle from "../../actions/newPostTitle";
+import newPostTags from "../../actions/newPostTags";
+import { existingPostPermlink } from "../../actions/newPostPermlink";
+import { newPostPhoto } from "../../actions/newPostPhoto";
+import { newPostVideo } from "../../actions/newPostVideo";
+import { newPostAudio } from "../../actions/newPostAudio";
+import { newPostQuote, newPostQuoteSource } from "../../actions/newPostQuote";
+import {
+  newPostModal,
+  newPostForm,
+  newPostIsError,
+  editingExistingPost
+} from "../../actions/newPostInterface";
+import Icon from "react-icons-kit";
+
+import { ic_edit } from "react-icons-kit/md/ic_edit";
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: white;
+  cursor: pointer;
+`;
+
+export default class AddNew extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      open: false,
+      postCreator: false
+    };
+    this.handleNewModal = this.handleNewModal.bind(this);
+    this.unMountChildren = this.unMountChildren.bind(this);
+  }
+  handleNewModal(name) {
+    store.dispatch(newPostBody(this.props.post.body));
+    store.dispatch(newPostTitle(this.props.post.title));
+    store.dispatch(newPostTags(this.props.post.tags));
+    if (
+      this.props.post.post_type === "photos" ||
+      this.props.post.post_type === "gifs"
+    ) {
+      const photo = JSON.parse(this.props.post.json_metadata).image;
+      store.dispatch(newPostPhoto(photo));
+    } else if (this.props.post.post_type === "video") {
+      store.dispatch(newPostVideo(this.props.post.video));
+    } else if (this.props.post.post_type === "audio") {
+      store.dispatch(newPostAudio(this.props.post.audio));
+    } else if (this.props.post.post_type === "quote") {
+      store.dispatch(newPostQuote(this.props.post.quote));
+      store.dispatch(newPostQuoteSource(this.props.post.quoteSource));
+    }
+    store.dispatch(newPostForm(true));
+    store.dispatch(newPostIsError(false));
+    store.dispatch(editingExistingPost(true));
+    store.dispatch(existingPostPermlink(this.props.post.root_permlink));
+    this.setState({
+      open: false,
+      [name]: true,
+      postCreator: true
+    });
+    if (name === "text") {
+      store.dispatch(newPostForm(true));
+    }
+    store.dispatch(newPostType(name));
+    store.dispatch(newPostModal(true));
+  }
+  unMountChildren(name) {
+    this.setState({
+      [name]: false
+    });
+  }
+  render() {
+    return (
+      <Container>
+        {this.state.postCreator === true && (
+          <PostCreator unMountChildren={this.unMountChildren} />
+        )}
+
+        <Icon
+          icon={ic_edit}
+          size={20}
+          onClick={() => this.handleNewModal(this.props.post.post_type)}
+        />
+      </Container>
+    );
+  }
+}

src/Components/Post/index.js

@@ -17,6 +17,7 @@ import Comments from "./Comments";
 import CardContent from "./CardContent";
 import ProfileHover from "./ProfileHover";
 import ShareMenu from "./ShareMenu";
+import EditPost from "./EditPost";
 import delay from "../../Functions/delay";
 import checkValueState from "../../Functions/checkValueState";
 import getVoteWorth from "../../Functions/getVoteWorth";
@@ -52,7 +53,8 @@ class Post extends Component {
         this.props.post.total_payout_value.replace("SBD", ""),
         this.props.post.pending_payout_value.replace("SBD", ""),
         this.props.post.total_pending_payout_value.replace("STEEM", "")
-      ])
+      ]),
+      allowEdit: this.props.post.author === this.props.username
     };
 
     this.setState({
@@ -248,6 +250,7 @@ class Post extends Component {
             <FooterActions>
               <span>${Number(this.state.value).toFixed(2)}</span>
               <span>
+                {this.state.allowEdit && <EditPost post={this.props.post} />}
                 <ShareMenu
                   postAuthor={this.props.post.author}
                   postPermlink={this.props.post.permlink}

src/Functions/newPost.js

@@ -8,60 +8,99 @@ import { newPostIsError, newPostErrorMsg } from "../actions/newPostInterface";
 const newPost = async () => {
   const post = makePost();
   const storeState = store.getState();
+  const isEditing = storeState.newPostInterface.editingExistingPost;
   const uniqueTags = [...new Set(storeState.newPost.tags)];
-  const uuid = uuidv4() + "u02x93";
+  const uuid = isEditing ? storeState.newPost.permlink : uuidv4() + "u02x93";
   store.dispatch(newPostIsError(false));
-  await api
-    .broadcast([
-      [
-        "comment",
-        {
-          parent_author: "", //MUST BE EMPTY WHEN CREATING NEW POST
-          parent_permlink:
-            uniqueTags[0] === undefined ? "steemblr" : uniqueTags[0], // MAIN TAG
-          author: store.getState().steemProfile.profile.user, //AUTHOR
-          permlink: uuid, //permlink of the post
-          title: post.title, //Title of the post
-          body: post.body,
-          json_metadata: JSON.stringify({
-            tags: uniqueTags,
-            app: `steemblr/0.1`,
-            format: "markdown+html",
-            community: "steemblr",
-            post_type: post.type,
-            image:
-              post.type === "photos" || "gifs" ? [storeState.newPost.photo] : ""
-          })
-        }
-      ],
-      [
-        "comment_options",
-        {
-          author: store.getState().steemProfile.profile.user,
-          permlink: uuid,
-          allow_votes: true,
-          allow_curation_rewards: true,
-          max_accepted_payout: "1000000.000 SBD",
-          percent_steem_dollars: 10000,
+  if (isEditing) {
+    await api
+      .broadcast([
+        [
+          "comment",
+          {
+            parent_author: "", //MUST BE EMPTY WHEN CREATING NEW POST
+            parent_permlink:
+              uniqueTags[0] === undefined ? "steemblr" : uniqueTags[0], // MAIN TAG
+            author: store.getState().steemProfile.profile.user, //AUTHOR
+            permlink: uuid, //permlink of the post
+            title: post.title, //Title of the post
+            body: post.body,
+            json_metadata: JSON.stringify({
+              tags: uniqueTags,
+              app: `steemblr/0.1`,
+              format: "markdown+html",
+              community: "steemblr",
+              post_type: post.type,
+              image:
+                post.type === "photos" || "gifs"
+                  ? [storeState.newPost.photo]
+                  : ""
+            })
+          }
+        ]
+      ])
+      .then(res => {
+        console.log(res);
+      })
+      .catch(err => {
+        store.dispatch(newPostIsError(true));
+        store.dispatch(newPostErrorMsg(err.error_description));
+      });
+  } else {
+    await api
+      .broadcast([
+        [
+          "comment",
+          {
+            parent_author: "", //MUST BE EMPTY WHEN CREATING NEW POST
+            parent_permlink:
+              uniqueTags[0] === undefined ? "steemblr" : uniqueTags[0], // MAIN TAG
+            author: store.getState().steemProfile.profile.user, //AUTHOR
+            permlink: uuid, //permlink of the post
+            title: post.title, //Title of the post
+            body: post.body,
+            json_metadata: JSON.stringify({
+              tags: uniqueTags,
+              app: `steemblr/0.1`,
+              format: "markdown+html",
+              community: "steemblr",
+              post_type: post.type,
+              image:
+                post.type === "photos" || "gifs"
+                  ? [storeState.newPost.photo]
+                  : ""
+            })
+          }
+        ],
+        [
+          "comment_options",
+          {
+            author: store.getState().steemProfile.profile.user,
+            permlink: uuid,
+            allow_votes: true,
+            allow_curation_rewards: true,
+            max_accepted_payout: "1000000.000 SBD",
+            percent_steem_dollars: 10000,
 
-          extensions: [
-            [
-              0,
-              {
-                beneficiaries: [{ account: "steemblr", weight: 1500 }]
-              }
+            extensions: [
+              [
+                0,
+                {
+                  beneficiaries: [{ account: "steemblr", weight: 1500 }]
+                }
+              ]
             ]
-          ]
-        }
-      ]
-    ])
-    .then(res => {
-      console.log(res);
-    })
-    .catch(err => {
-      store.dispatch(newPostIsError(true));
-      store.dispatch(newPostErrorMsg(err.error_description));
-    });
+          }
+        ]
+      ])
+      .then(res => {
+        console.log(res);
+      })
+      .catch(err => {
+        store.dispatch(newPostIsError(true));
+        store.dispatch(newPostErrorMsg(err.error_description));
+      });
+  }
 
   postToDb(
     storeState.steemProfile.profile.user,

src/Functions/postToDb.js

@@ -2,7 +2,7 @@ import steem from "steem";
 import defaultApp from "../environment";
 import { firestore } from "firebase/app";
 import delay from "./delay";
-
+import store from "../store";
 const postToDb = async (author, permlink, isNSFW, postType, tags) => {
   const dbRef = defaultApp
     .firestore()
@@ -40,7 +40,11 @@ const postToDb = async (author, permlink, isNSFW, postType, tags) => {
       isNSFW: isNSFW,
       post_type: postType,
       timestamp: firestore.FieldValue.serverTimestamp(),
-      tags: tags
+      tags: tags,
+      video: store.getState().newPost.video,
+      audio: store.getState().newPost.audio,
+      quote: store.getState().newPost.quote,
+      quoteSource: store.getState().newPost.quoteSource
     });
     batch
       .commit()

src/Header/AddNew.js

@@ -21,7 +21,8 @@ import newPostType from "../actions/newPostType";
 import {
   newPostModal,
   newPostForm,
-  newPostIsError
+  newPostIsError,
+  editingExistingPost
 } from "../actions/newPostInterface";
 const modalStyle = {
   postion: "fixed",
@@ -123,6 +124,7 @@ export default class AddNew extends Component {
     });
   }
   handleNewModal(name) {
+    store.dispatch(editingExistingPost(false));
     store.dispatch(newPostForm(false));
     this.setState({
       open: false,

src/Home/AddNew.js

@@ -8,7 +8,8 @@ import newPostType from "../actions/newPostType";
 import {
   newPostModal,
   newPostForm,
-  newPostIsError
+  newPostIsError,
+  editingExistingPost
 } from "../actions/newPostInterface";
 import Icon from "react-icons-kit";
 import { ic_camera_alt } from "react-icons-kit/md/ic_camera_alt";
@@ -67,6 +68,7 @@ export default class AddNew extends Component {
     this.unMountChildren = this.unMountChildren.bind(this);
   }
   handleNewModal(name) {
+    store.dispatch(editingExistingPost(false));
     store.dispatch(newPostForm(false));
     store.dispatch(newPostIsError(false));
     this.setState({

src/NewPost/Audio/index.js

@@ -60,7 +60,14 @@ export default class Video extends Component {
       await this.setAudio();
     }, 1000);
   }
-
+  componentDidMount() {
+    if (store.getState().newPostInterface.editingExistingPost === true) {
+      this.setState({
+        textarea: store.getState().newPost.audio,
+        isAudioSet: true
+      });
+    }
+  }
   async handleTextArea(e) {
     await this.setState({
       textarea: e.target.value

src/NewPost/Form/Tags.js

@@ -17,6 +17,13 @@ export default class Tags extends Component {
       tags: []
     };
   }
+  componentDidMount() {
+    if (store.getState().newPostInterface.editingExistingPost === true) {
+      this.setState({
+        tags: store.getState().newPost.tags
+      });
+    }
+  }
   handleTagsChange = async props => {
     await this.setState({ tags: props });
     store.dispatch(newPostTags(this.state.tags));