[//]: # (https://github.com/KrNel/kure)

Another week gone by and another (late) development update to do, letting you know what's happening with KURE. This week was troublesome as I kept encountering issues with things already done. I was trying to move forward in some areas, like upvoting posts, but kept finding other things that needed to be dealt with.

In preparation for the upvoting, I decided I needed to move the Steem functionality to the Redux store. This includes the getting of post details on the Kurate page, as well as the display of individual posts that had some bugs and I had disabled last week. The adding of posts to communities was also moved to Redux.

I added a collapsible menu for mobiles, and the infinite scroll to the browsing of post summaries on the Kurate page as well, making the site more mobile friendly.

Having sprained my thumb put a damper on the speed of getting some coding done too :/

What feature would you most like to see done to use the site? Standard front-end features, like upvoting, posting, commenting? Or community features for liking curated posts and rating them and the communities?

I was going to try to get the front-end for Steem done, as I think that is an impediment to people using the site at all... but maybe developing more of the community curation of KURE should be first. What do you think?

**What do you want to see next?**

<center><img src="https://i.imgur.com/ltGSQBe.png" /></center>

---
# Repository
https://github.com/KrNel/kure

# Site
https://thekure.net/

---
# Index

1. What is KURE?
2. What's new?
	2.1 Collapsible menu for mobiles and tablets
	2.2 Personalized account menu with avatar
	2.3 Infinite scroll to Kurate posts
	2.4 UI and UX candy
3. Bug and Other Fixes
	3.1 Authentication fetch was being done on each route load
	3.2 Error boundary error prevented routes from loading
	3.3 Bug with helmet header in wrong place
	3.4 Adding post to group error: 'Warning: React does not recognize the prop on a DOM element.'
	3.5 Each Kurate summary post load calls API to get the user's communities
	3.6 After login, logout menu not displayed
	3.7 Redux authentication not done before component trying to use auth data
	3.8 Join request showing blank Members role on Communities page
4. Pull Request / Latest Commits
5. Roadmap
6. Contact

---
# 1. What is [KURE](https://thekure.net/)?

### 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 interacted 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 involve din 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.

---
# 2. What's new

## Video Demonstration

https://vimeo.com/322673686

---
## 2.1 Collapsible menu for mobiles and tablets

While at work and trying to get more complicated things worked on between calls, I decided to instead go for simpler tasks that weren't such an issue if I was being interrupted all the time. I decided to get around to the mobile menu and at least make things a little bit more mobile friendly, despite more work being required on the site in other places to make it more mobile friendly.

Now mobile and tablet users, or anyone who shrinks their browser view on desktop, will see a sidebar menu when they click on the bars icon:

#### *Visualized*

<center><img src="https://i.imgur.com/XQ2Mb5X.png" /></center>

The code for the menu had to changed to render two menus onto the page. What determined which one was to be displayed as the view width of the browser:

#### *Code Snippet*

<center><img src="https://i.imgur.com/Wpm9VAw.png" /></center>

I also had to change how the pages were being displayed. After wasting some time trying to get the  components for pages to display under the navigation like I had before, I realized I was wasting my time indeed.

The content was being pushed down a full view height if I had it underneath the nev menu. With semantic-ui and sidebars, the only way to get the content to show up where it's supposed to be, while having the sidebar mobile menu take up the full view height, was to put the page components within the nav component, as children: `<NavBarChildren>{children}</NavBarChildren>`

---
## 2.2 Personalized account menu with avatar

<div class='pull-right'>
<h4>Visualized</h4>
<center><img src="https://i.imgur.com/6lbaLzt.png" /></center>
</div>

Another thing I worked on to try to improve the UX was to add the user's Avatar. I also included a link to the `Feed` and `Blog` pages, but to steemit.com.

I have not yet done the pages for the Feed or Blog, but I will now that I finished moving the code to Redux.

The `Logout` option is done as a `Dropdown.Item` from react-semantic-ui, but the Feed and Blog are just hyperlinks since I can only make a route to internal pages.

When I get the Feed and Blog pages done, then they will be turned into local routes.

#### *Code Snippet*

<center><img src="https://i.imgur.com/RieaGzx.png" /></center>

---
## 2.3 Infinite scroll to Kurate posts

The infinite scrolls was finally done as well. I had put this on the `roadmap` for several weeks, but was always doing more complex development instead. With my frequent interruptions this week, this is another feature I got done which was less demanding and didn't require much logical thought to keep in my head at once and following through the app from component to component.

#### *Code Snippet*

<center><img src="https://i.imgur.com/uqV9DaW.png" /></center>

The last list item is pulled as an element, and it's position calculated. When the scrollbar reaches that list item, it triggers the call to `getPosts()`, along with an indicator for getting 'more', as opposed to getting the initial 20 posts.

If there are currently posts being fetched, or there are no more to fetch, then the infinite scroll doesn't call the fetching function.

---
## 2.4 UI and UX candy

Following the previous review from @amosbastian, they suggested I spruce up the look of some data design:

> A tip for the design: "don't be afraid to 'think outside the database' — your UI doesn't need to map one-to-one with your data's fields and values."

Some of the data is better shown as a table, at least for now. But I did take their suggestions and implemented a design improvement for the `Manage` page with Community boxes:

#### *Visualized*

<center><img src="https://i.imgur.com/R822Ct4.png" /></center>

Now there are icons before the data to visualize it better, and also instead of the table-like format of `Label: Data`, the data comes first with a descriptive label afterwards.

#### *Code Snippet*

<center><img src="https://i.imgur.com/FlLtzUg.png" /></center>

As you may notice, there was also some changes to the boxes themselves, in that they now have shadows to make them pop out more. I hope these are welcome UI/UX changes from the simpler flat design I had opted for originally.
	
---
# 3. Bug Fixes

A lot of time was spent fixes issues that I didn't initially notice earlier. I would try to move ahead with something, and then I'd notice an issue that needed to be investigated and corrected. That takes time to find and correct, which slows me down in other development.

I won't provide much detail for these issues.

---
## 3.1 Authentication fetch was being done on each route load

One thing I noticed when looking at the access logs were the calls to `api/returning`. When I would go to a new page, the app was calling the API and validating the user again and again. It should only do it on the first page load, not on each subsequent page visited in the session.

To fix that, all I needed to do was check if the user was already authenticated with `!isAuth`. Problem solved.

#### *Code Snippet*

<center><img src="https://i.imgur.com/2HlcgsL.png" /></center>

---
## 3.2 Error boundary error prevented routes from loading

Someone who tried the site gave me some helpful feedback, letting me know that an error was happening on individual posts details, for which I changed the links to sen people to steemit.com until I figured out and fixed the content viewing issue (which I did).

When any page would error out, React's `Error Boundary` would load, and not show a crappy stacktrace for the user. But, they couldn't navigate away. Only a refresh of the page would work.

I had to move the `Error Boundary` component wrapper down to individual pages, not have it higher up in the app parent. Problem solved.

---
## 3.3 Bug with helmet header in wrong place

I was also adding `<head>` info higher up in the app, and not per view. When I tried to add another `Helmet` HTML header down the component hierarchy, it gave errors. I removed the header at the higher position, and now there is no more error for inserting HTMl `<head>`.

---
## 3.4 Adding post to group error: 'Warning: React does not recognize the prop on a DOM element.'

I made the mistake of adding all the data from an API call to a component via a deconstructing spread operator `...prop`. This gave the element many attributes which weren't valid. After only putting the needed data into the element, the problem was resolved. But it took me a while to figure out where this was happening.

---
## 3.5 Each Kurate summary post load calls API to get the user's communities

The ability to add posts to a community needs to know what groups a logged in user has. Fetching the data for the groups was being done multiplet times, once for each post loaded, and there were 20 posts loaded per batch.

I had to move the request for data to a better place up in the parent component, and it was only being called once per page visit.

---
## 3.6 After login, logout menu not displayed

There was an issue where after a login, the menu would still show `Login`. It turned out the login authentication data was not being passed along to the component after I had made some changes to the NavMenu.

---
## 3.7 Redux authentication not done before components trying to use authenticated data

In Redux, I though the parent component dispatches would get called first before the child, but it's actually the opposite that happens! Go figure!

You can put your fetch in the `constructor` to have it execute first, but that can create other problems, like the data not being fetched again and breaking your app. Even that doesn't solve it if it's not a problem for you, which it was for me.

Since I'm using `redux-thunk`, my dispatches are asynchronous. The child dispatch is a called first, but soon after the parent does, before the child dispatch is completed. I resolved the issue by putting an async/await on the dispath called from the parent:

#### *Code Snippet*

<center><img src="https://i.imgur.com/2HlcgsL.png" /></center>

---
## 3.8 Join request showing blank Members role on Communities page

<div class='pull-right>
<center><img src="https://i.imgur.com/CakXcPV.png" /></center>
</div>

The last I will mention (although not the last to have occurred), was that users who requested to join a group, where being shown as Members with no role/rank. This is publicly, in the Communities page. In the Manage page it was fine, because they weren't members yet.

I think publicly, it's nice to know who has requested to join a community, so they should be there, as the rank `Requested`, which they now are when I added the rank to the settings file.

---
# 4. Pull Request / Latest Commits

# [PR #6](https://github.com/KrNel/kure/pull/6)

---
# 5. Roadmap

The site is up, but there isn't much activity. There are features lacking that may make people not want to use the site. I think if the interaction with the Steem blockchain was there, then it would create a more welcoming environment for people to want to use the site. I'll be working on trying to make that happen ;)

Working on:
- Upvoting
- Liking and rating submissions
- Posting content to Steem (not just curation post submissions)
- Posting comments
- Posts submitted page
- About page

---
# 6. Contact

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

- [Discord](https://discord.gg/ApUp4jJ)
- Email: `krnel@protonmail.com`
- Site: [thekure.net](https://thekure.net/)

---
Thank you for your time, attention and support! I appreciate it!

Peace.