Ulogs.org Update: What's Ongoing?Click here.

Update: For "Certified Uloggers"Click here.

alpha

UlogsV2: Adding Basic Pages & User-Profile Cards for the segments of Ulogs.org/grow

10 comments

snackaholic
57
3 months agoSteemit3 min read

This is a contribution to this task request by @surpassinggoogle. This adds the Basic Pages & User-Profile Cards for the segments of Ulogs.org/grow. Also it added the notification element which is necessary if the user clicks on 'buy now'.

1. Repository

https://github.com/surpassinggoogle/UlogsV2

2. Task Request/Issue

https://steemit.com/utopian-io/@surpassinggoogle/task-request-via-utopian-io-kindly-help-us-create-basic-pages-the-display-user-profile-cards-for-segments-of-ulogs-org-grow
https://github.com/surpassinggoogle/UlogsV2/issues/240

3. Pull Requests

https://github.com/surpassinggoogle/UlogsV2/pull/248
https://github.com/surpassinggoogle/UlogsV2/pull/252
https://github.com/surpassinggoogle/UlogsV2/pull/254
https://github.com/surpassinggoogle/UlogsV2/pull/255

4. Testing

Navigate to /grow and click the links from the following sections:

  • 15 Mins Session With Your Favorite Mentor
  • Apply To Give A 30 Mins Symposium About Your Project On A Popular Steem Community
  • How About Extra Clout On Steem Or Outside Steem
  • Send Us A Letter, Gift Or Mail

All four should direct you to the respective requested page.
Within those pages, (except for /send-us-a-gift) there should be cards, where you can click the buy now button. This will open a notification, where the user can navigate to the market by clicking on 'to the market' or close the notification by clicking on 'cancel'.

5. Implementation

First I replicated the bropro-page from https://steemgigs.org/bropro.
bropropage.png

Therefore I created the bropro folder within client. Than i added theese 3 files.
src/client/bropro/Brocard.js
brocard.png
Brocard.js is basically a component which will render the card element for the site.

src/client/bropro/Bropro.js
bropro.png
The brocard component is used three times within Bropro.js to display the wanted information. Bropro.js also containing the wanted header and including the necessary CSS.

src/client/bropro/bropro.css
broprocss.png
The CSS is declared within bropro.css and got included in Bropro.js only.

Then I added the notification component to bring live to the page.
notificationcode.png

I needed to store the state of the notification component beeing visible or not within Bropro.js.
adjustments.png

Also I had to add the eventhandlers for the buttons of the brocard, so a click event will open up the notification.
adjustments2.png
The necessary css for the notification got added to bropro.css.

notificationcss.png


Then I basically copied the Bropro.js file 4 times to create all the wanted pages.
/extra-clout
/favorite-mentor
/popular-community
/send-us-a-gift
I filled them with the content from the respective section of the /grow page.

After that I added all the necessary routes to the router.js.
adding-routes.png

Also adjusting the links from the components within the /grow page to link to the specific page was necessary.
add-links-to-grow-page.png

6. Feature in Action

popular-community page
popular-community.png


extra-clout page
extra-clout.png


favorite-mentor page
favorite-mentor.png


send-us-a-gift page
send-us-a-gift.png


notificationbox
notificationbox.gif

7. Lessons learned

Seeing this error message trying to do a commit should be respected:

Authentication failed. You may not have permission to access the repository or the repository may have been archived. Open options and verify that you're signed in with an account that has permission to access this repository.'

I didnt realise that I had not forked the project, instead I tryed to commit directly to the dev branch. With permission granted afterwards, I than did the commit instead of a PR, however somehow the bropro.css file was missing, which led to errors on deployed environments.
Luckily @eastmael catched the error immediatelly and did a commit that fixed the problem.

8. GitHub Account

https://github.com/snackaholic/

Comments

Sort byReputation