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.

<p dir="auto"><br /><span>Task: <a href="https://busy.org/@gregory.latinier/utopian-v2-task-profile-module-skills" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://busy.org/@gregory.latinier/utopian-v2-task-profile-module-skills<span> PR: <a href="https://github.com/utopian-io/v2.utopian.io/pull/213" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/utopian-io/v2.utopian.io/pull/213 <p dir="auto">The main component from <a href="https://quasar-framework.org/" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Quasar Framework that is needed for this task is the <a href="https://quasar-framework.org/components/autocomplete.html" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Autocomplete Component. It works together with the <a href="https://quasar-framework.org/components/chips-input.html" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Chips Input Component 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 <code>:min-characters (How many minimum characters can trigger component to suggest something?) and <code>:max-results (How many results can be displayed at a time?), which was very helpful and easy to implement <pre><code>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") <p dir="auto"><img src="https://images.hive.blog/768x0/https://ipfs.busy.org/ipfs/QmUsNjg9uZ7QnSha3x2C7ELjjKw3Qwy88KUDhvjeozyaej" alt="utopian-add skills.gif" srcset="https://images.hive.blog/768x0/https://ipfs.busy.org/ipfs/QmUsNjg9uZ7QnSha3x2C7ELjjKw3Qwy88KUDhvjeozyaej 1x, https://images.hive.blog/1536x0/https://ipfs.busy.org/ipfs/QmUsNjg9uZ7QnSha3x2C7ELjjKw3Qwy88KUDhvjeozyaej 2x" /> <p dir="auto">The <code>@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.<br /> A custom validation was done in the frontend. If the user adds a one character skill, it is removed and a message is displayed.<br /> <img src="https://images.hive.blog/768x0/https://ipfs.busy.org/ipfs/QmRR3EQj5R15t8cu77ReXeBQ3FZ2TTBwbaZfqK3TfD25az" alt="Utopian - one char error.gif" srcset="https://images.hive.blog/768x0/https://ipfs.busy.org/ipfs/QmRR3EQj5R15t8cu77ReXeBQ3FZ2TTBwbaZfqK3TfD25az 1x, https://images.hive.blog/1536x0/https://ipfs.busy.org/ipfs/QmRR3EQj5R15t8cu77ReXeBQ3FZ2TTBwbaZfqK3TfD25az 2x" /><br /> I also used the <code>@duplicate function to warn the user that adding the same skill twice is not permitted.<br /> <img src="https://images.hive.blog/768x0/https://ipfs.busy.org/ipfs/Qmei1Tp5EDQFTEMd8WnzVG5Nw1bgvHPPKLZbQBGfm2swie" alt="Utopian - duplicated skill error.gif" srcset="https://images.hive.blog/768x0/https://ipfs.busy.org/ipfs/Qmei1Tp5EDQFTEMd8WnzVG5Nw1bgvHPPKLZbQBGfm2swie 1x, https://images.hive.blog/1536x0/https://ipfs.busy.org/ipfs/Qmei1Tp5EDQFTEMd8WnzVG5Nw1bgvHPPKLZbQBGfm2swie 2x" /> <p dir="auto">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 <code>user.skills[], so as you can check below I used the <a href="https://docs.mongodb.com/manual/reference/operator/aggregation/unwind/" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">$unwind pipeline in order to get all of the skills of all users as a singular document. <pre><code> 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 } } ]) <p dir="auto"><a href="https://github.com/AdrielGS/v2.utopian.io/blob/c50377829034bc1a1b53e570bc0ea26bc88c66bd/packages/api/test/modules/users/users.handlers.spec.js" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">API TESTS: <ul> <li>Profile update endpoint: It’s checked after a profile was updated if the server returned a 200 as a status code. <li>Search skill endpoint: Before calling the endpoint, 2 skills starting with <code>‘cod’ were <a href="https://github.com/AdrielGS/v2.utopian.io/blob/c50377829034bc1a1b53e570bc0ea26bc88c66bd/packages/api/test/fixtures/users.js#L63" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">added to another user. (The payload is <code>{ partial: ‘cod’, skills: ['Coding', 'Painting]}). So this test checks if just the other 2 skills added to the other user was properly returned. <p dir="auto">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! <p dir="auto"><span>Thanks to <a href="/@icaro">@icaro for introducing me to Utopian! <p dir="auto"><span>My GitHub account: <a href="https://github.com/adrielgs" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/adrielgs