create account

First contribution to Utopian: “Profile module: skills” by adrielgs

View this thread on: hive.blogpeakd.comecency.com
· @adrielgs ·
$38.65
First contribution to Utopian: “Profile module: skills”
I got assigned this task as my first task for Utopian. It was a fairly simple contribution, but because it was my first time looking and coding into the project, it took a little while for me to get used to it and finally finishing it.

Task: https://busy.org/@gregory.latinier/utopian-v2-task-profile-module-skills 
PR: https://github.com/utopian-io/v2.utopian.io/pull/213

The main component from [Quasar Framework](https://quasar-framework.org/) that is needed for this task is the [Autocomplete Component](https://quasar-framework.org/components/autocomplete.html). It works together with the [Chips Input Component](https://quasar-framework.org/components/chips-input.html)  which was necessary in order to add multiple values (as an array) to the field. With this setup, the user can choose an existing skill or add a new one. The Quasar framework has very important properties such as `:min-characters` (How many minimum characters can trigger component to suggest something?) and `:max-results` (How many results can be displayed at a time?), which was very helpful and easy to implement

 ```
q-field(:count="30")
  q-chips-input(
    v-model="skills"
    @duplicate="duplicatedSkills"
    @input="chipsInputChange"
    :placeholder="skills.length === 0 ? $t('users.profile.skills.placeholder') : ''"
  )
    q-autocomplete(@search="skillsAutocomplete", :min-characters="2", :max-results="10")
```
![utopian-add skills.gif](https://ipfs.busy.org/ipfs/QmUsNjg9uZ7QnSha3x2C7ELjjKw3Qwy88KUDhvjeozyaej)

The `@search` event calls a desired function when, in this case, 2 characters are typed in. This function must return the values for the autocomplete field. The endpoint created returns all the suggested skills from all of the others Utopian users and how many users has added the skill into their profiles.
A custom validation was done in the frontend. If the user adds a one character skill, it is removed and a message is displayed.
![Utopian - one char error.gif](https://ipfs.busy.org/ipfs/QmRR3EQj5R15t8cu77ReXeBQ3FZ2TTBwbaZfqK3TfD25az)
I also used the `@duplicate` function to warn the user that adding the same skill twice is not permitted.
![Utopian - duplicated skill error.gif](https://ipfs.busy.org/ipfs/Qmei1Tp5EDQFTEMd8WnzVG5Nw1bgvHPPKLZbQBGfm2swie)


Two endpoints were created. One for updating the skills, and the other one to get the suggestions for the autocomplete. The one for updating the skills used an existing function to update the profile. But a new function was necessary for the autocomplete suggestion. It’s passed via a POST request the string to be searched and the already typed skills from the frontend (so the query won’t return an already typed skill as a suggestion). The UML for the task is `user.skills[]`, so as you can check below I used the [$unwind](https://docs.mongodb.com/manual/reference/operator/aggregation/unwind/) pipeline in order to get all of the skills of all users as a singular document.

```
  const skills = await User.aggregate([
    { '$unwind': '$skills' },
    { '$match': { skills: { '$regex': req.payload.partial, '$options': 'i', '$nin': req.payload.skills } } },
    { '$group': { _id: '$skills', occurrences: { '$sum': 1 } } },
    { '$limit': 10 },
    { '$addFields': { name: '$_id' } },
    { '$sort': { 'occurrences': -1, 'skill': 1 } }
  ])
```

[API TESTS](https://github.com/AdrielGS/v2.utopian.io/blob/c50377829034bc1a1b53e570bc0ea26bc88c66bd/packages/api/test/modules/users/users.handlers.spec.js):
* Profile update endpoint: It’s checked after a profile was updated if the server returned a 200 as a status code.
* Search skill endpoint: Before calling the endpoint, 2 skills starting with `‘cod’` were [added](https://github.com/AdrielGS/v2.utopian.io/blob/c50377829034bc1a1b53e570bc0ea26bc88c66bd/packages/api/test/fixtures/users.js#L63) to another user. (The payload is `{ partial: ‘cod’, skills: ['Coding', 'Painting]}`). So this test checks if just the other 2 skills added to the other user was properly returned. 

Having this task as my first contribution to Utopian was really great to understand the Utopian project and all the code behind it. I got to know the Quasar Framework that I didn't know before and implemented the task's features easily with it. I would recommend it to everyone. It was a pleasure working it the Utopian dev team as well, I'll be glad to develop more features to the project. I'm sure that Utopian v2 will be a huge success!

Thanks to @icaro for introducing me to Utopian!

My GitHub account: https://github.com/adrielgs


👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
properties (23)
authoradrielgs
permlinkfirst-contribution-to-utopian-profile-module-skills
categoryutopian-io
json_metadata{"community":"busy","app":"busy/2.5.6","format":"markdown","tags":["utopian-io","development"],"users":["gregory.latinier","duplicate","input","search","icaro"],"links":["https://busy.org/@gregory.latinier/utopian-v2-task-profile-module-skills","https://github.com/utopian-io/v2.utopian.io/pull/213","https://quasar-framework.org/","https://quasar-framework.org/components/autocomplete.html","https://quasar-framework.org/components/chips-input.html","https://docs.mongodb.com/manual/reference/operator/aggregation/unwind/","https://github.com/AdrielGS/v2.utopian.io/blob/c50377829034bc1a1b53e570bc0ea26bc88c66bd/packages/api/test/modules/users/users.handlers.spec.js","https://github.com/AdrielGS/v2.utopian.io/blob/c50377829034bc1a1b53e570bc0ea26bc88c66bd/packages/api/test/fixtures/users.js#L63","/@icaro","https://github.com/adrielgs"],"image":["https://ipfs.busy.org/ipfs/QmUsNjg9uZ7QnSha3x2C7ELjjKw3Qwy88KUDhvjeozyaej","https://ipfs.busy.org/ipfs/QmRR3EQj5R15t8cu77ReXeBQ3FZ2TTBwbaZfqK3TfD25az","https://ipfs.busy.org/ipfs/Qmei1Tp5EDQFTEMd8WnzVG5Nw1bgvHPPKLZbQBGfm2swie"]}
created2018-12-11 16:29:06
last_update2018-12-11 16:29:06
depth0
children8
last_payout2018-12-18 16:29:06
cashout_time1969-12-31 23:59:59
total_payout_value29.072 HBD
curator_payout_value9.580 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length4,549
author_reputation2,556,630,111,204
root_title"First contribution to Utopian: “Profile module: skills”"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id76,694,562
net_rshares64,103,266,432,271
author_curate_reward""
vote details (43)
@gregory.latinier ·
$9.77
This was a great contribution.
The code was clean right from the start. 
Good job on the mongodb query it required some knowledge on the subject.

Your next task is ready :D


Your contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/guidelines), as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, [click here](https://review.utopian.io/result/3/1-2-2-1-2-1-1-).

---- 
Need help? Write a ticket on https://support.utopian.io/. 
Chat with us on [Discord](https://discord.gg/uTyJkNm). 
[[utopian-moderator]](https://join.utopian.io/)
👍  , , , , , , , , , , , ,
properties (23)
authorgregory.latinier
permlinkre-adrielgs-first-contribution-to-utopian-profile-module-skills-20181212t020044213z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"links":["https://join.utopian.io/guidelines","https://review.utopian.io/result/3/1-2-2-1-2-1-1-","https://support.utopian.io/","https://discord.gg/uTyJkNm","https://join.utopian.io/"],"app":"steemit/0.1"}
created2018-12-12 02:00:45
last_update2018-12-12 02:00:45
depth1
children1
last_payout2018-12-19 02:00:45
cashout_time1969-12-31 23:59:59
total_payout_value7.389 HBD
curator_payout_value2.381 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length672
author_reputation34,278,323,818,021
root_title"First contribution to Utopian: “Profile module: skills”"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id76,714,063
net_rshares16,400,753,177,525
author_curate_reward""
vote details (13)
@utopian-io ·
Thank you for your review, @gregory.latinier! Keep up the good work!
properties (22)
authorutopian-io
permlinkre-re-adrielgs-first-contribution-to-utopian-profile-module-skills-20181212t020044213z-20181214t035050z
categoryutopian-io
json_metadata"{"app": "beem/0.20.9"}"
created2018-12-14 03:50:51
last_update2018-12-14 03:50:51
depth2
children0
last_payout2018-12-21 03:50:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length68
author_reputation152,955,367,999,756
root_title"First contribution to Utopian: “Profile module: skills”"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id76,813,376
net_rshares0
@knowledges ·
Nice work!
👍  
properties (23)
authorknowledges
permlinkre-adrielgs-first-contribution-to-utopian-profile-module-skills-20181211t163524143z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-12-11 16:36:27
last_update2018-12-11 16:36:27
depth1
children0
last_payout2018-12-18 16:36:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length10
author_reputation98,021,227,622,369
root_title"First contribution to Utopian: “Profile module: skills”"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id76,694,899
net_rshares547,683,420
author_curate_reward""
vote details (1)
@steem-ua ·
#### Hi @adrielgs!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
**Feel free to join our [@steem-ua Discord server](https://discord.gg/KpBNYGz)**
properties (22)
authorsteem-ua
permlinkre-first-contribution-to-utopian-profile-module-skills-20181212t021016z
categoryutopian-io
json_metadata"{"app": "beem/0.20.14"}"
created2018-12-12 02:10:18
last_update2018-12-12 02:10:18
depth1
children0
last_payout2018-12-19 02:10:18
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length287
author_reputation23,214,230,978,060
root_title"First contribution to Utopian: “Profile module: skills”"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id76,714,298
net_rshares0
@steemitboard ·
Congratulations @adrielgs! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

<table><tr><td>https://steemitimages.com/60x60/http://steemitboard.com/notifications/firstpost.png</td><td>You published your First Post</td></tr>
<tr><td>https://steemitimages.com/60x70/http://steemitboard.com/@adrielgs/voted.png?201812111844</td><td>You received more than 10 upvotes. Your next target is to reach 50 upvotes.</td></tr>
</table>

<sub>_[Click here to view your Board of Honor](https://steemitboard.com/@adrielgs)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-adrielgs-20181211t191646000z
categoryutopian-io
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-12-11 19:16:45
last_update2018-12-11 19:16:45
depth1
children0
last_payout2018-12-18 19:16:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length896
author_reputation38,975,615,169,260
root_title"First contribution to Utopian: “Profile module: skills”"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id76,700,555
net_rshares0
@steemitboard ·
Congratulations @adrielgs! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

<table><tr><td>https://steemitimages.com/60x70/http://steemitboard.com/@adrielgs/votes.png?201812121814</td><td>You made more than 10 upvotes. Your next target is to reach 50 upvotes.</td></tr>
</table>

<sub>_[Click here to view your Board of Honor](https://steemitboard.com/@adrielgs)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-adrielgs-20181212t184405000z
categoryutopian-io
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-12-12 18:44:03
last_update2018-12-12 18:44:03
depth1
children0
last_payout2018-12-19 18:44:03
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length752
author_reputation38,975,615,169,260
root_title"First contribution to Utopian: “Profile module: skills”"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id76,749,376
net_rshares0
@steemitboard ·
Congratulations @adrielgs! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

<table><tr><td>https://steemitimages.com/60x60/http://steemitboard.com/notifications/firstpayout.png</td><td>You got your First payout</td></tr>
<tr><td>https://steemitimages.com/60x70/http://steemitboard.com/@adrielgs/payout.png?201812190026</td><td>You received more than 50 as payout for your posts. Your next target is to reach a total payout of 100</td></tr>
</table>

<sub>_[Click here to view your Board of Honor](https://steemitboard.com/@adrielgs)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-adrielgs-20181219t011131000z
categoryutopian-io
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-12-19 01:11:30
last_update2018-12-19 01:11:30
depth1
children0
last_payout2018-12-26 01:11:30
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length922
author_reputation38,975,615,169,260
root_title"First contribution to Utopian: “Profile module: skills”"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id77,042,297
net_rshares0
@utopian-io ·
Hey, @adrielgs!

**Thanks for contributing on Utopian**.
We’re already looking forward to your next contribution!

**Get higher incentives and support Utopian.io!**
 Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via [SteemPlus](https://chrome.google.com/webstore/detail/steemplus/mjbkjgcplmaneajhcbegoffkedeankaj?hl=en) or [Steeditor](https://steeditor.app)).

**Want to chat? Join us on Discord https://discord.gg/h52nFrV.**

<a href='https://steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1'>Vote for Utopian Witness!</a>
properties (22)
authorutopian-io
permlinkre-first-contribution-to-utopian-profile-module-skills-20181212t041549z
categoryutopian-io
json_metadata"{"app": "beem/0.20.9"}"
created2018-12-12 04:15:51
last_update2018-12-12 04:15:51
depth1
children0
last_payout2018-12-19 04:15:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length590
author_reputation152,955,367,999,756
root_title"First contribution to Utopian: “Profile module: skills”"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id76,718,248
net_rshares0