UI/UX Candy, Mobile Menu, Infinite Scroll and Lots of Fixes

[KrNel]

What's new?

---

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:

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:

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>

---

Personalized account menu with avatar

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.

---

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.

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.

---

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:

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.

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.

---

Bug and Other Fixes

---

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.

---

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.

---

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

---

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.

---

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.

---

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.

---

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:

---

Join request showing blank Members role on Communities page

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.