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

eastmael(68)

Published in

#ulog

Words

423

Reading

2 min

Listen to this post

~3 min

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

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.