contactlist

Motivation

A project to improve my skills in React

What is Contact List

A single page React app with contacts that are fetched by an API call and sorted according to favorite status. Clicking on a contact brings up an info page on the person. Contacts can be added and removed from the list by clicking on the star.

Technologies

contacts list: ReactJS
testing: Jest, Enzyme

Implementation

A user can select an person on the contact list and view their personal info:

By clicking on the star in the right hand corner of personal info a user can change the favorite status of the contact. The star will go from unfilled to filled or vice-versa:

The personal info component can be closed by clicking on the contacts link in the left hand conder of the personal info page:

The API had no ‘CORS allowed’ header and had to be called with a proxy that added the property

static fetchContacts() {
    const proxyUrl = <my proxy>,
      targetUrl = <target api>

    return fetch(proxyUrl + targetUrl)
      .then(response => {return response.json();})
      .catch((err) => {
          console.log(err)
        })
  }

I mocked the API call to reduce calls to the server while developing:

fetchMock
    .get(
      proxyUrl + targetUrl,
      data.contactsData
    )

One component class had some methods that required testing. I utilized Enzyme shallow rendering to test them:

describe('changeStatus', () => {
    it('changes status from favorite to unfavorite', () => {

      domElement.instance().changeStatus();
      const currentPerson = domElement.state().contacts.find((person)=>{
        return person.id == 1;
      })

    expect(currentPerson.isFavorite).toEqual(true)
    })
  })