KURE Community Curation App Update - Edit Posts, Comments and Infinitely Scroll Posts in a Community

in #utopian-io5 years ago (edited)

Some important functionality was added in the latest round of development, giving users more control over their content on KURE. Needing to edit and update a post or comment is often necessary, since we all make mistakes or forget things. That's why being able to edit and update posts and comments on Steem is a crucially important feature to have which brings high value to the KURE app. This functionality brings KURE towards greater completion as a greatly significant competing front-end for the Steem blockchain.

In addition to working on getting the edit/update functionality working, I fixed some bugs and issues that were brought to my attention. This led me to move the individual community fetching to Redux. As such, I also implemented the infinite scroll functionality on the individual community pages. This brings infinite scroll to all pages except for the general Communities page.

The code is 100% linted, but I pushed some last minute changes into the PR before I removed two unused vars (which are now removed). If you grab the newest commits, everything is fully linted. I also forgot two comments at the time, which have since been added in commits after the PR.

Any feedback or criticism is welcome and appreciated. I am looking to improve the app and your experience using it.

What do you want to see next?


Repository

https://github.com/KrNel/kure

Site

https://thekure.net/


Index

  1. What is KURE?
  2. What's new?
    2.1 Added Editing of Steem posts
    2.2 Added Editing of Steem comments
    2.3 Added infinite scroll to individual Community pages
  3. Bugs, Tweaks and Other Fixes
    3.1 Fix for infinite scroll on Steem content
    3.2 Fixed useless loading symbol when no more data to fetch
    3.3 Fixed long post text overflowing beyond the container
    3.4 Fixed edited comment losing child comments
    3.5 Fixed previous community page data displaying on the next
    3.6 Fixed no auth user before data fetch
    3.7 Fixed bug of route change from editing post to new post
  4. Roadmap
  5. Contact

1. What is KURE?

Kindred United to Reward Everyone.

A Community Platform and Curation Network Remedy for Steem

Do you want to find content that other people really value, based on topics that interest you? How?

Upvotes don't do it, because so many upvotes come from autovoting, autobots, or curation trails. You don't know if a vote for content is done by a real person, or some automation. The content isn't being evaluated when it's automated.

Plus, you can upvote so many things, which can be unrelated.

Imagine a curation network where people are interacting through community groups to share and value content, and you can really see what they value globally through various communities that people organize and collaborate together to build.

KURE provides a network hub for people to create their own community groups for evaluating content to curate. It will also develop into communities to create posts within.

Create your own communities and have others join to contribute. Make up your own criteria. Manage who can add curation links to your community group. Anyone else can follow your community and engage.

My goal is to make content easier for everyone to find by all of us sharing the content we like trough communities. Others can find communities they are interested in and see what is being curated within that community to also support it with upvotes, resteems and comments.

Maybe you want to share what you value, and get others to see it or support it, but don't want to resteem it, or want more people to see it. On KURE, the community you create and those who are involved in it will popularize content you value and allow others to see it. Another way of thinking about it, is it's kind of like having a custom community feed, based on a community that engages in creating it, rather than just one person.

KURE empowers the Steem community to coordinate their curation efforts through building community networks of their own.


2. What's new

Video Demonstration


2.1 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.

For example, I will simply add an exclamation point for purposes of demonstration.

Here there is no exclamation point.

Then I add it and hit Update.

After a few seconds of waiting for the post to be sent to Steem, the page will show with the updates visible.

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.


2.2 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.


2.3 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.


3. Bug Fixes


3.1 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.


3.2 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.


3.3 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.


3.4 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,


3.5 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.


3.6 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.


3.7 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.


4. Pull Request / Latest Commits

PR 16


5. Roadmap

With a lot done, there is still a lot more to do. I need to delete a test post on the kure account, so I think I will add that next, since delete is now missing from Steemit.com. After that, I think I'll improve the UI/UX for Steem content like I did for KURE content.

Working on:

  • Improved UI/UX, landing page, code splitting, PRPL
  • Liking Kurated post submissions in communities
  • Rating Kurated post submissions in communities
  • Delete comments
  • Tweak comments (limit to 20, show more option, max nested depth)
  • Implement PRPL Pattern for better performance
  • Viewing comments in their own page view
  • Adding infinite scroll to the Community page
  • Adding sort functions to the Home, Communities and Kurated pages
  • About page
  • Dark skin for the site
  • Selecting posts to vote at a later time
  • Grid and List layout for Steem, Blog, and Feed pages
  • Improve Blog page, with rep, description and location
  • Add a settings page
  • Add nsfw filtering
  • Add progressive image loading
  • Payouts shown in different ways
  • Unvote a post
  • Show upvote percentage on upvotes made
  • Flag a post

6. Contact

If you want to contact me, you can reach me on Discord at https://discord.gg/ApUp4jJ, or email at [email protected]. I'm not really on steem.chat, but I think I get emails if you send me a message.

Contributions can be submitted as pull requests to https://github.com/KrNel/kure


Thank you for your time, attention and support. I appreciate it. Every vote matters.

Peace.


Posted from KURE

Sort:  
  • Great post with images, code samples, explanation of coding choices and a video!
  • Good job on linting, the commit messages and comments.
  • The structure of the post is strong , with the introduction making it clear what is important.
  • I wish you continuation as we can see a great progression.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Chat with us on Discord.

[utopian-moderator]

Thank you for the review!

Thank you for your review, @helo! Keep up the good work!

Bravo 👏 @krnel, I’ll explore your KURE DApp!

Thanks for being hardworking! And thanks for those updates!

Posted using Partiko iOS

Hi @krnel!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Hey, @krnel!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Coin Marketplace

STEEM 0.30
TRX 0.12
JST 0.034
BTC 64136.70
ETH 3128.20
USDT 1.00
SBD 3.94