[Steem Gigs] Minor API restructure, Duplicate Permlink Check, Certified Ulog Indicator & Minor UI Adjustments

Repositories

https://github.com/steemgigs/steemgigs
https://github.com/steemgigs/steemgigsServer

This post is partially related to the following task request, however, I conducted some further work that I believe would benefit both the completion of the tasks as well as provide the site an easier to use experience.

https://steemit.com/steemgigs/@surpassinggoogle/task-request-kindly-help-us-tend-to-14-micro-programming-tasks-to-enhance-the-overall-steemgigs-org-ux

Introduction

Although I haven't had as much time recently to work on Steem Gigs, the brief time I have had has been used to work through some of the tasks that @surpassinggoogle requested, the following post provides an overview of some of the changes I recently made.

Pull Request

The work that I carried out on SteemGigs can be found in the following pull requests:

https://github.com/steemgigs/steemgigs/pull/57

and

https://github.com/steemgigs/steemgigsServer/pull/2

The site is live at the following URL:

https://steemgigs.org/

New Features/Improvements

The items I completed from the task request were as follows:

1. Duplicate Permlink Check
2. Certified Ulogger Indicator
3. Added tooltips next to editors within editor selection dropdown

In addition to the above I completed the following:

1. Consistent UI for user profile edit
2. Restructure API into controllers, routes & middleware

Duplicate Permlink Check

Previously the check as to whether or not a permlink was previously used was not working as expected and overall not allowing users to use a post title that was previously used by a user. In order to resolve this, I created a middleware that would check Steem to see if the permlink was already used by a particular user. In the event that particular permlink had already been used, a random set of characters would be appended to the post.

The middleware that I used to check the permlink that be seen here:

Indicator is a user is a certified ulogger

Alongside SteemGig's @surpassinggoogle runs another site called Ulogs, within Ulogs there is a concept called Certified Uloggers, Certified Uloggers have the privilege of special features across @surpassinggoogle's platforms. Currently certified Uloggers are followed by the @uloggers account, this is the source of truth as to who is certified and who is not. In order to check if a user is certified I created the following middleware:

Note: Within the above middleware, I end up adding duplicates to the followingList array and then I use Array.from to create a new array without the duplicates, I'm 100% sure I could have done this more efficiently, however my overall breath of JS knowledge is limited (Self-taught and always learning), so if anybody can point out the mistake I made it would be much appreciated, I'm sure it's simple :)

In the event that a user a if Ulog certified they will have access to both a delegate button and icon shown against their profile on Steem Gigs. The following image helps to show the overall addition in the UI, within here we can see that @surpassinggoogle has a certified Ulogger badge as well as the delegate dropdown button shown against his profile.

Added tooltips next to editors within editor selection dropdown

Within the task request, @surpassinggoogle stated that he would like each of the editors to have a tooltip that would provide an indication as to what each editor was, although this was a small piece of work, I thought I would mention it as another completed task from the task request :)

Consistent UI for user profile edit

In my previous posts, you will have seen that I have made numerous adjustments to the editors and overall the forms throughout the site, within that work it's seems that I introduced a number of UI issues in the edit profile form, within this release I made the profile edit form consistent within the other forms on the site. This can be seen here:

Restructure API into controllers, routes & middleware

Within this pull request, I also did a restructure surrounding the API, I moved all of the calls into their own controllers and implemented routes. Overall my reasoning for this was that it provides a solid foundation for creating new features and provides the ability for developers to easily create middleware for any of the routes without needing to make adjustments to the existing code.

An example of the post route can be seen here:

Within this I didn't make adjustments to the code behind each of the items within the controllers, I simply resorted them into a clearer structure, it's because of this I believe improvements could be made to the code within however everything is working as expected in the new structure and thus providing a solid foundation to improve and iterate in the future.

What's next?

Unfortunately, as mentioned, my time has been limited over the past week so I haven't been able to get as much done as I would have hoped, I hope to continue ticking off tasks from @surpassinggoogle's task requests in the coming days. I also plan to start learning React as there are quite a few projects that I'd like to help with, but at the moment cannot, so hopefully we'll see my first React contribution coming soon...

GitHub Account

A link to my GitHub account can be found here:

https://github.com/tobias-g1