KURE Community Curation App Update - Resteeming Posts and UI/UX Upgrade with Steem Content Grid Layout View

in #utopian-io5 years ago (edited)

With a busy week at a new job and doing interviews after work, I was still busy coding and getting things done!

Resteeming of posts has been added, which is very important to have when you want to share content from Steem for others to see. After all, this is supposed to be a social media type of a site. Once upon a time, this feature didn't exist on Steem. The early days had no way for sharing a post from someone else. The only other way to share a post was to link to it in a post you made, or link to it in comments.

Having this feature on Steem amplified the social media aspect of the site. Now that KURE has this functionality, it adds greater value to the Steem part of the site, bringing more interactivity and value for and between content creators.

The browsing of Steem content has also seen a valuable face lift to provide a better interface and user experience for anyone who uses KURE. Previously, Steem content could be viewed in a nicely compact list format (my preference). But, I recognize others want to see the posts in a different way, with larger images. This is why I added the grid layout which can be toggled with the View icon.

I opted to use the same layout as the KURE portion of the site which already had been modified to include the grid layout in addition to the list layout. This shows the large image format, with the title, author, category and time posted within an overlay area on the image itself. It makes it more compact. But, maybe people like the regular text around the image type of layout. If that's the case, let me know please. I may be changing it to be more like th standard view with full image views.

Additionally, the grid layout has a toggle option to Show descriptions. By default, no descriptions are shown. There isn't much text there anyways. But, if you want to see descriptions, then just toggle them on.

All in all,these changes to further amplify the value and significance of KURE on the Steem stage of apps.

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 resteemed users view to post summaries
    2.2 Added resteeming of posts
    2.3 Added grid layout UI/UX enhancements to Steem content
    2.4 Added interval updates to 'time ago' date formats
  3. Bugs, Tweaks and Other Fixes
    3.1 Fixed calls for Steem data using steem-js
    3.2 Fixed spinner loading when less than 20 results on summary pages
    3.3 Fixed Steem content fetching 19 posts, instead of 20
  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

Resteeming Posts

UI/UX Steem Content Change with Large Image Grid Layout


2.1 Added resteemed users view to post summaries

When browsing content on the Blog, Feed or any other Steem content like New, Trending, Promoted or Hot posts, you can see who resteemed the post now.

To show the resteemers, as I call them, the reblogged_by field is sent to component Resteemers. This component takes the array of resteemers, and maps the users to create user links to their Steem blog page.

Afterwards, it adds those links through another map to the page, with a comma separating each and the resteem icon shown before any name.

That was the easy part. The hard part was getting different pages to show the resteemed status. The blockchain data from steem-js doesn't give any data about you having resteemed a post for your blog page, only for your feed page. I had to check for when a blog page is yours, not yours, and if you are the author or not.

The logic works like this. If your on a blog page, but the post author isn't the page owner's, then it has to be a resteemed post, and not a page owner's authored post.


2.2 Added resteeming of posts

On any post, you will see a Reesteem icon. Hovering over it will tell you it's the resteem action if you are not sure what the icon does.

When you click to resteem the post, you will get a popup asking you to confirm the resteem, as the action can't be undone. The post will forever be a part of your blog page.

After the action completes, you will no longer see the resteem icon for the post in question.

If you want to make sure the resteem did indeed go through, you can check out your blog page and see that the post is indeed there.

The post id, author and permlink are sent to Redux and then to the Steem blockchain.

When you're the one who just resteemed a post, the isResteemedByUser is set based on the returned resteemedPayload from Redux. If the current post being rendered in the list of posts has the post ID that was resteemed, then we know that it should show having been resteemed in the posts list.

Also, if you are already on your own blog page, and the post author isn't you, then you have previously resteemed the post in question.


2.3 Added grid layout UI/UX enhancements to Steem content

When you view the Steem, Blog or Feed pages, you will now see the larger image grid layout by default (for now). I plan on adding settings for each user to choose what default view they want. That will come later.

For now, if you want to view the company list layout, like I prefer, you just click on the View link for the list layout.

And then you will see the list layout for the rest of your page views. It will stay that way unless you switch back to grid view, change page, or fefresh the page.

Back in the new grid large image view, there are no description on posts by default. I find them pretty short and therefore not too useful anyways. But if you want to see them, toggle them on by click on the Show descriptions toggle icon.

Now you see the descriptions on posts for you to read, if that's what you prefer. I will also add a setting option int he future to have this as the default if they user would like to see the descriptions each time they view content.

The code saw some changes to the Posts container which now has two components to render based on the choice of list layout known by the state var showGrid.

The toggling is done with function in each page to check the state showGrid and change it when a View change is selected.

In each page the ToggleView component is also imported and then used to display the toggle icons.

When a user clicks on toggle, the icon shown changes from list or grid to the other instead.

An additional state var is also used to determine if the description is to be shown, called showDesc. Depending on what the state is, the toggle is either on or off.

In the new component PostSummaryGrid, the description is shown if the showDesc state is true, and doesn't show it if it's false.


2.4 Added interval updates to 'time ago' date formats

Date-times for posts on Steem and KURE would display the relative time when the page was loaded. I wanted to have updated time when the page was already loaded. The moment js package being used didn't have an interval setting. I switched to use the react-moment package instead, which has an interval settings.

Components were created to return the the long and short date format that is used on Steem content and KURE content, respectively. I had to keep using the regular moment js package, because I couldn't use a react object as a title in the post, it would just show `[object Object].


3. Bug Fixes


3.1 Fixed calls for missing resteem data

A problem exists with the dsteem package/library. It doesn't get all the resteemers. I checked on busy, and they used lightrpc which showed missing resteemers. So I first switched to lightrpc. But after getting it working, I noticed that steemit was showing resteemerst hat busy wasn't. It turns out the both dsteem and lightrpc packages fail to get the full list of resteemers.

So, I switched everything to the package used by steemit, which is the steem-js package that they developed.


3.2 Fixed spinner loading when less than 20 results on summary pages

This was an easy fix to add, as I learned about it when I added infinite scroll to the KURE side of the site. Checking the results of the data fetch and seeing if it contained less data than the limit meant there were no more posts to get afterwards. Setting hasMore to false fixed the useless loading.


3.3 Fixed Steem content fetching 19 posts, instead of 20

I noticed this issue when I implemented the grid layout which displayed even numbers. As 20 is an even number, I should have seen two posts for each row of data. At the end of each 2nd data fetch, there was a missing post box and the loading spinner was there instead of being at the bottom of the page.

The fix was easy here as well, as I just needed to add 1 to the query.limit when there was more data being fetched.


4. Pull Request / Latest Commits

PR 18


5. Roadmap

This past week has been busy with a new job and some interviews. I still managed to get some coding done and tasks accomplished. I'm thinking I need to tackle a wallet sometime soon in order to promote the currency aspect of the site and make that more usable for SMTs/SCOTs and the community token future. But maybe some performance improvements would better to tackle sooner.

Working on:

  • Improved UI/UX, landing page, code splitting, PRPL
  • Liking Kurated post submissions in communities
  • Rating Kurated post submissions in communities
  • 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 Communities 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
  • 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
  • Flag a post
  • Wallet features

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 article with a clear statement for it's importance.
  • Multiple videos, images, code samples and explanations.
  • Commit comments are very comprehensive although comments in the code are few.
  • I'm not a big fan of one letter variable names, and that makes that piece of code hard to tell what its for.

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]

Alright, I thought it was obvious if one knows what map does, the singular of the plural users is user and the i is index. I'll make the variables more verbose. I seem to have forgotten about some of the comments this time around :/ I guess I gotta check harder... Thanks for the review.

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

I am impressed with your dedication to this project.

I'm thinking I need to tackle a wallet sometime soon in order to promote the currency aspect of the site and make that more usable for SMTs/SCOTs and the community token future.

I was going to ask if you had planned on creating a site token that would make the site a little more independent reward wise from the current system here. If I'm reading that correctly, you do plan on having a Kure token?

Yes, at some point ;)

Congratulations! Your post has been selected as a daily Steemit truffle! It is listed on rank 2 of all contributions awarded today. You can find the TOP DAILY TRUFFLE PICKS HERE.

I upvoted your contribution because to my mind your post is at least 19 SBD worth and should receive 354 votes. It's now up to the lovely Steemit community to make this come true.

I am TrufflePig, an Artificial Intelligence Bot that helps minnows and content curators using Machine Learning. If you are curious how I select content, you can find an explanation here!

Have a nice day and sincerely yours,
trufflepig
TrufflePig

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.18
TRX 0.14
JST 0.029
BTC 57956.22
ETH 3126.99
USDT 1.00
SBD 2.45