Edit Posts, Comments and Infinitely Scroll Posts in a Community

[KrNel]

What's new

---

• Added Editing of Steem posts

To Edit a post, you just need to click on the pencil/compose icon at the bottom of a page. After clicking the Edit icon, you will be redirected to the Write component for the post in question. Underneath you will see the preview, just like you would be reading the post already posted. As you make changes, you will see them appear.

It all starts with showing the Edit button, but only if the user logged is the author of the post.

Once the Edit icon is clicked, the Redux store received the call and parses the existing json_metadata into an array, and sets up the draft copy of the post for display. The flag isUpdating is set to true, which lets the other components know an edit is in process.

Back in the post page you're looking at, the isUpdating flag lets the page know an update/edit is requested, and then redirects the user to the Write component via the write route.

Once in the Write page, the post data is populated into the form fields and text area, and the Submit button is changed to Update. Once Update is clicked, Redux comes back into play by processing the form data, just as is done for a regular first-time post, except it posts after the commentOp is set the post is sent to Steem right away, without commentOptions being set.

---

• Added Editing of Steem comments

Editing a post is a crucial feature to have when submitting writing or any content to a site. Mistakes happen, and we don't want to see them there forever. Or maybe you just want to add more to the content. Regardless, KURE now offers the editing of posts and comments.

As you can see here, before, the end of the paragraph has a - from a previous test. You just need to click on Edit to get started.

The EditForm will open up with your comment, and then you can edit it.

Hit Update and your edits will be updated on the post. While the edit is being processed and sent to Steem, you have a loading spinner to indicate something is going on.

When the spinner goes away, your comment shows up with the new edits made.

The main action happens in the Redux action creator editComment. The newly edited body of the comment, as well as the original comment, are received for the comment updating process.

From the previous comment data, the category, permlink, author, parent_permlink, parent_author are extracted and used for the SteemConnect.comment function. Since there may be new images and whatnot added to the body of the comment, a new json_metadata is created.

Sending all of that to the Steem blockchain, if successfully added, will return some data which include the block number. Once successful, the new comment data is obtained with getComment and then dispatched to the Redux store for use in the app once more.

---

• Added infinite scroll to individual community pages

I also added the infinite scroll feature to the individual community pages, just like the Home and Kurated page. Now when you scroll down to view posts in a community, you will keep getting posts loaded for your viewing pleasure.

The fetch for data was moved to Redux, where the hasMore determines if new posts are to be fetched again when the user scrolls to the bottom of the current page of data.

These individual community pages have the Join Community functionality, which requires being logged in. As such, the user name of the person is required in order to make a request. If the Redux authentication has not completed when the community page is the first page landed on for the app, then the username is obtained form the cookie. If there is no user, then a default of 'x' is used to mean not logged in.

Data is fetched, and added to the Redux store for use in the app. If the length of the resulting data fetched is less than the limit of posts to grab, this means there is no more data to fetch, and hasMore is set to false in order to stop the infinite scroll from even trying to get more data.

---

Bug Fixes

---

• Fix for infinite scroll on Steem content

There was a slight bug on the newly added infinite scroll functionality. Prior to moving the functionality to Redux, there was an action variable used to determine if the Steem page was initially getting data, or getting more data. When I moved more to Redux, I had forgotten to add that part of the code.

The result was fetches for new page data, such as moving from Steem to Blog or Feed, would have the old page/route data on the page, with the new page data appended to it. Now when scrolling for posts

Now when fetching data, the more action is sent and actually used. Redux will only set the query author and permlink as the last ones in the page if more data is required. Otherwise, all fetches for data that don't have more requested will be treated as initial data requests and replace the older data.

---

• Fixed useless loading symbol when no more data to fetch

When there was no more data to get on the KURE fetching for infinite scroll, the fetch was still trying one last time, needlessly, and requesting data which return no results. Then it would stop even trying. This was an extra step that wasn't needed and would show a loading symbol for nothing.

Correcting the conditions under which data is fetched to look if the limit was larger than the data retrieve and setting the hasMore to false corrected the issue.

---

• Fixed long post text overflowing beyond the container

When writing a new post and looking at the preview, or looking at the post afterwards, if you had a string of characters that was larger than the container to display it, it would run off the container over flowing it. I only noticed this after I made a post with github commit links. Adding some CSS to wrap the overflow solved the issue.

---

• Fixed edited comment losing child comments

When the editing comments functionality was done, I noticed an issue when looking at comments that had comments of their own.

When I was adding the new comment, I was simply replacing the data in the old comment, thereby erasing all the child replies added by the recursive fetch for comments. Instead, I added the old comment, and only added three new fields that were required:

active_votes: updatedComment.active_votes,
body: updatedComment.body,
json_metadata: updatedComment.json_metadata,

---

• Fixed previous community page data displaying on the next

When moving between community pages, the previous community data was being shown on the other with no new data being fetched. To fix that, I added a reducer to clear the community data on component unmount.

---

• Fixed no auth user before data fetch

On some pages that used the user name in order to get user related data, the returning user verification in Redux was being returned only after the data fetch was already sent. This made some data return as a not logged in user, when the user was. This was due to the asynchronous redux-thunk in the app.

This has been corrected by checking if the redux store has the authenticated user, and if not, go get the username from the cookie instead of waiting for the asynchronous authentication. Now the Home, Steem and Community pages all work as designed with no issues of the redux authentication asynchronously finishing after the data fetching starts.

---

• Fixed bug of route change from editing post to new post

When editing a post and then going to write a new one, the post that was edited was staying in view, and the form was not appearing. Clicking on the Write a second time had the form appear and route change. I had to add a check for the reset flag in the Write component to make sure the edit form displayed, rather than the redirect for the edited post.