ULOG #9: Reaping the Benefits of Re-usable Components

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
·@eastmael·
0.000 HBD
ULOG #9: Reaping the Benefits of Re-usable Components
#### Repository
https://github.com/surpassinggoogle/UlogsV2

#### Task Request
https://steemit.com/utopian-io/@surpassinggoogle/task-request-kindly-add-a-rule-to-the-existing-algorithm-for-suggest-interesting-uloggers-on-ulogs-org
https://steemit.com/utopian-io/@surpassinggoogle/task-request-kindly-help-us-create-fresh-hashtag-columns-and-change-some-labels-on-ulogs-org

#### Pull Requests
https://github.com/surpassinggoogle/UlogsV2/pull/113
https://github.com/surpassinggoogle/UlogsV2/pull/115
https://github.com/surpassinggoogle/UlogsV2/pull/117
https://github.com/surpassinggoogle/UlogsV2/pull/119
https://github.com/surpassinggoogle/UlogsV2/pull/120

#### Features
| No. | Description | Image | PR |
| -- | -- | -- | -- |
| 1 | Display Certified Ulogger Icon Even if User's Not Logged in | ![image.png](https://ipfs.busy.org/ipfs/QmZcbr9iGwzr8j3tUrPSewoWkMveaKZdQTm1m8eR7QKPsn) |  [Link](https://github.com/surpassinggoogle/UlogsV2/pull/113) |
| 2 | Display Certified Ulogger Icon not Just in Feed but Also in Post Content | ![image.png](https://ipfs.busy.org/ipfs/QmbpjTQWZVVkViQbdpea6dpRiTUvSvhyGC13X8HX9ahUpb) | [Link]( https://github.com/surpassinggoogle/UlogsV2/pull/115) |
| 3 | Add Certified Ulogger Icon to Comments | ![image.png](https://ipfs.busy.org/ipfs/QmVhM6xTfuptJwxsCfXjKyAezyHQybVgoY4WMi1VJSQYo8) | [Link](https://github.com/surpassinggoogle/UlogsV2/pull/117) |
| 4 | Separate Ulog Hashtags | ![image.png](https://ipfs.busy.org/ipfs/QmZPLLqXe8czCANFeMkzivio4e3xKF6mvqnffvPZVVC6AN) | [Link](https://github.com/surpassinggoogle/UlogsV2/pull/119) |
| 5 | Update App Info When Submitting Comment | ![image.png](https://ipfs.busy.org/ipfs/QmV196d6XTPA47dcjRrWhS1da1GayjZS1bcHZYfxx6R7Zv) | [Link](https://github.com/surpassinggoogle/UlogsV2/pull/120) |

***

For this development contribution, these were a combination of follow-up tasks from Terry based on his testing on the live features deployed to production.

The [first PR](https://github.com/surpassinggoogle/UlogsV2/pull/113) was about displaying the *Certified Ulogger* icon to unauthenticated users. The fix for this was simple - I just removed the condition (checking) if a user is authenticated in the `getUloggersFollowing` action (`src/client/user/userActions.js`).

For the [second PR](https://github.com/surpassinggoogle/UlogsV2/pull/115/files), it was still about the `Certified Ulogger` but this time it was about displaying the icon inside a post. The main components updated here were `src/client/components/Story/StoryFull.js` and `src/client/post/PostContent.js`. The PR also contained an additional change in wording from `Verified Ulogger` to `Certified Ulogger` in the `CertifiedUlogger` component.

Just a segue and for non-developers reading this, I just want to highlight a small win here I got in following React's good design practice of re-usable components. The component I'm talking about is the `CertifiedUlogger`. Here's the difference:

| <center>Without `CertifiedUlogger`</center> | <center>WITH `CertifiedUlogger`</center> |
| -- | -- |
| ![image.png](https://ipfs.busy.org/ipfs/QmTiG4XnkVUXSyxyMnBZoUuGtEGLSQRuEGXUVEpMujwAD7) | ![image.png](https://ipfs.busy.org/ipfs/QmSF4yDBVEpma8maYcspoEtpYY2Js2CquCzo4QNyg6saeU) |

Instead of rewriting the same code, I just needed to import the component in `StoryFull.js` and put it inside a condition for it to be displayed. So I just needed to write 3 lines of code instead of 12. 

And this is where one of the lessons I learned applied as well - **the more concise the codes, the lower the possibility for bugs to creep in** (I like to keep it short with - **the lesser the codes, the better** :) ).

The [third PR](https://github.com/surpassinggoogle/UlogsV2/pull/117) is still about the certified ulogger icon, but this time it's displaying it in the comments section. I just had to double check the location of where to put `uloggersFollowingList` because the `Comment` component uses [recursion](https://en.wikipedia.org/wiki/Recursion_(computer_science)).

The [fourth PR](https://github.com/surpassinggoogle/UlogsV2/pull/119), is now for the [new TR](https://steemit.com/utopian-io/@surpassinggoogle/task-request-kindly-help-us-create-fresh-hashtag-columns-and-change-some-labels-on-ulogs-org) from Terry of separating Ulog hashtags from usual steem hastags and then the bug of **Ulogs** label not displaying for posts created using ulogs.org (which needed a separate [PR](https://github.com/bonuschain/steemscript/pull/21) to a [steemscript repository](https://github.com/bonuschain/steemscript). The latter dependency was already handled by @smitop - thanks dude - who made my work easier and faster. 

And then the last [PR](https://github.com/surpassinggoogle/UlogsV2/pull/120) is a bug fix for comments submitted using ulogs.org. The base codes still used busy's app information instead of it's own unique app info. 

#### GitHub Account
https://github.com/eastmaels<br/><div class="pull-right promo"><sub><p>This post was made from https://ulogs.org</p></sub></div>
👍 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,