![image.png](https://ipfs.busy.org/ipfs/QmbwrFgKgFrJustQZxLQjPLkT2gDYusnLHvMB8Brdr9EFE)

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

![work-experience-demo.gif](https://ipfs.busy.org/ipfs/QmX7tiVHaq2C4RM5Lr9ApcWKcaiJHd7TQjHd9GdZogCm3t)

There are two parts to this post. First is a run-through of my [commits history](https://github.com/utopian-io/v2.utopian.io/pull/218/commits) 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](https://github.com/utopian-io/v2.utopian.io/pull/218/commits) were:

* [1794f2f](https://github.com/utopian-io/v2.utopian.io/pull/218/commits/1794f2fcd2b34f3603c83e59e44c758d59ebcdda) - provided the skeleton - the layout - where I did my changes.
* [101a243](https://github.com/utopian-io/v2.utopian.io/pull/218/commits/101a243ea110c2accd75717c7ad68224ad50038f) - added the work experience fields to the user model (to persist the user information).
* [e3e52e7](https://github.com/utopian-io/v2.utopian.io/pull/218/commits/e3e52e770c342d7baefebc7f82ad96ff6dcebf29) - updated the work experience layout
* [e97b2d5](https://github.com/utopian-io/v2.utopian.io/pull/218/commits/e97b2d573d6bf0fa8387e182d485b8264fdfdd58) - added the work experience API end points
* [db1fb3c](https://github.com/utopian-io/v2.utopian.io/pull/218/commits/db1fb3c20a768885a00a24c8d441276479cd4122) - code refactor
* [8cb2742](https://github.com/utopian-io/v2.utopian.io/pull/218/commits/8cb27427f698ef9435500e4142514fb31598dbc7) - added delete experience function
* [f98fcb3](https://github.com/utopian-io/v2.utopian.io/pull/218/commits/f98fcb3a773a6904ada61cd2c510a30b97d20220) - exported strings to i18n
* [4362837](https://github.com/utopian-io/v2.utopian.io/pull/218/commits/4362837044778bb0254d50f922636177346c1a88) - added validations
* [f811680](https://github.com/utopian-io/v2.utopian.io/pull/218/commits/f81168081c642c25fd8b95131e708a8531b08249) - added unit tests
* [8df58af](https://github.com/utopian-io/v2.utopian.io/pull/218/commits/8df58af2e33ad81fede2107ad50105a1fec56bbd) - 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`](https://github.com/utopian-io/v2.utopian.io/pull/218/files#diff-d6583c66110f65c2d8b692c224edbd6f) - these were the API endpoints - the methods that directly interacted with the database
* [`/packages/api/modules/users/routes.js`](https://github.com/utopian-io/v2.utopian.io/pull/218/files#diff-296ff5718c5428b25ef5fbf77616dacc) - the routes that maps the above functions to URLs
* [`/packages/api/modules/users/user.model.js`](https://github.com/utopian-io/v2.utopian.io/pull/218/files#diff-8cfc9557e458a102c58649686a2b0021) - the user model; change in the user model class to include work experiences information (called subdocument in mongo)
* [`/packages/api/modules/users/validate.js`](https://github.com/utopian-io/v2.utopian.io/pull/218/files#diff-cc394e8abc54ccb6d71e7173d3a122ad) - as what can be inferred from the name, model validation

###### 1b. Unit Tests

* [`/packages/api/test/fixtures/users.js`](https://github.com/utopian-io/v2.utopian.io/pull/218/files#diff-78a082d9fdb3e66d3acd3adf318b0789) - test data
* [`/packages/api/test/modules/users/users.handlers.spec.js`](https://github.com/utopian-io/v2.utopian.io/pull/218/files#diff-ee6149cc2f02eb780239edf3de3b3a56) - the specs that test the newly added API end points

##### 2. Client

* [`/packages/client/src/pages/users/profile/profile.vue`](https://github.com/utopian-io/v2.utopian.io/pull/218/files#diff-ce5c3585f3376714a1812bc0c8ff7a7c) - the main profile page; the major component where the important codes were included
* [`/packages/client/src/store/users/actions.js`](https://github.com/utopian-io/v2.utopian.io/pull/218/files#diff-77c4b16544cd36d583b4d2a2b5088517) - the user actions that dispatches or calls the necessary API end points to process user information

##### 3. Internationalization

* [`/packages/i18n/locales_master/en.json`](https://github.com/utopian-io/v2.utopian.io/pull/218/files#diff-0d6c63c97dfee46e060dd990ad73488f) - 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](https://github.com/utopian-io/v2.utopian.io/pull/218/commits/a9c1067c72b5a87fb17f5c994e251bc5e63c39af)

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](https://monterail.github.io/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.<br/><div class="pull-right promo"><sub><p>This post was made from https://ulogs.org</p></sub></div>