ULOG #15: Utopian V2 Contribution - Adding Work Experience to User Profile

This is my second contribution to Utopian V2. Although it took more time than I expected, my PR was finally merged and closed.

Repository

https://github.com/utopian-io/v2.utopian.io

Task Request

https://steemit.com/utopian-io/@gregory.latinier/utopian-v2-task-profile-module-work-experiences

Pull Request

https://github.com/utopian-io/v2.utopian.io/pull/218

Feature

There are two parts to this post. First is a run-through of my commits history and the second is some technical explanation of the codes.

Commits History

There's a story behind every code.

The major parts in my commits history were:

• 1794f2f - provided the skeleton - the layout - where I did my changes.
• 101a243 - added the work experience fields to the user model (to persist the user information).
• e3e52e7 - updated the work experience layout
• e97b2d5 - added the work experience API end points
• db1fb3c - code refactor
• 8cb2742 - added delete experience function
• f98fcb3 - exported strings to i18n
• 4362837 - added validations
• f811680 - added unit tests
• 8df58af - sort experiences from most recent to oldest

Code Changes

https://github.com/utopian-io/v2.utopian.io/pull/218/files

1. API

1a. Main Codes

• packages/api/modules/users/handlers.js - these were the API endpoints - the methods that directly interacted with the database
• /packages/api/modules/users/routes.js - the routes that maps the above functions to URLs
• /packages/api/modules/users/user.model.js - the user model; change in the user model class to include work experiences information (called subdocument in mongo)
• /packages/api/modules/users/validate.js - as what can be inferred from the name, model validation

1b. Unit Tests

• /packages/api/test/fixtures/users.js - test data
• /packages/api/test/modules/users/users.handlers.spec.js - the specs that test the newly added API end points

2. Client

• /packages/client/src/pages/users/profile/profile.vue - the main profile page; the major component where the important codes were included
• /packages/client/src/store/users/actions.js - the user actions that dispatches or calls the necessary API end points to process user information

3. Internationalization

• /packages/i18n/locales_master/en.json - exported strings for internationalization

Lessons Learned

I encountered a lot of challenges in completing this task. First, was my unfamiliarity with mongo API. Although I had an idea in mind of what I wanted to happen, my unfamiliarity with mongoose resulted in code smell. Gregory cleaned that up for me by what he did in his last commit:

• a9c1067

He removed the getWorkExperience API end point and just returned the whole work experiences document to updateWorkExperience's response. The key mongoose method here was findOneAndUpdate.

The second challenge was my unfamiliarity with flex-box. Gregory just pointed me to use that to adjust the location of the plus icon.

And lastly was my unfamiliarity with vuelidate, this resulted again in code smell and I learned again from the codes committed by Gregory.

There were other changes made by Gregory in that commit. All of them were learnings for me.