DEV Community: Ahmed Yagoub

Reshaping the request and response body when dealing with APIs

Ahmed Yagoub — Mon, 23 Aug 2021 15:20:17 +0000

As frontend developers, we interact with APIs that helps communicate with the backend. Those APIs could be external, where we need a service from a third party provider. They could also be internal, built by the backend team in the same company you are working at.

We send information to those APIs from the frontend in the body of the request and receive information in the body of the response.

Often, the request body needs to be in a certain format that the API expects. As in the frontend, we need the response from the API to be in a format that works well in the frontend.

We are not constraint by the format of the data we receive. And so we need to reshape that format.

Array.map()

The array method .map() helps us accomplish that. It basically takes an array and produces a different array as a result. So, we can produce an array of different shape.

Here, is an example of how the .map() works

const array = [1, 2, 3];

const newArray = array.map((x) => x + 3);

I could take an array of objects, and it would produce an array of strings. Or it takes an array of objects, and it produces an array of objects with different properties.

All depending on the callback function that you provide.

When receiving data, we want to know the format of it, and when sending data, we need to know how the request body should be formatted. Then use .map() to do the magic.

Loop a minimum number of times

Ahmed Yagoub — Mon, 09 Aug 2021 23:46:44 +0000

Background

In vue, we use the v-for directive to loop through an array and display the items in the browser.

Here is an example. We loop through the items array and display the item name in a list.

<ul>
  <li v-for="item in items" :key="item.name">
    {{ item.name }}
  </li>
</ul>

In Practice

In practice, the items array could come from the api (our backend). It could contain any number of items that we eventually display in the browser. It could contain 10, 5 or zero items in which case we display nothing.

However, what if we want to display a minimum number of items regardless of how many items are in the array.

In our UI, we want to avoid situations when nothing is rendered or too few items are rendered.

Placeholders

In these situations, we can use placeholders. They could be dummy items or empty divs. They might be used to fill the empty space or if the design requires there to be a minimum number of items displayed. They could also indicate to users that there could be more items or they (users) can add more.

If the items array is empty, then we display five placeholders, and if it contains three items, we display two placeholders and so on.

How the code looks like

Now, let's see how we can go about implementing it in the frontend.

First, I will have the same loop in the top to loop through the items. Then I will have a separate loop to display placeholders if needed.

As for the placeholders, I will use empty lis with some styling.

<ul>
  <li v-for="item in items" :key="item.name">
    {{ item.name }}
  </li>
</ul>
<ul v-if="placeholder">
  <li v-for="(n, i) in placeholder" :key="i" class="block">
  </li>
</ul>

Here are the styles for block

.block {
  background: grey;
  height: 15px;
  width: 50px;
}

placeholder would be a computed property. Whereas, items could either be a local data or coming form store if using a global state like Vuex.

 placeholder() {
   // a max of 5 slots when no items at all!
   if (this.items && this.items.length < 5) {
     return 5 - this.items.length;
   } else {
    return 0;
   }
 },

this.items refers to the items array.

Now, placeholders will show if we have five items or less.

Thanks for reading

Replace routes if you don't want to add them to history

Ahmed Yagoub — Mon, 02 Aug 2021 00:23:33 +0000

Background

When building applications, we often have multiple pages like the home page /home, profile /profile and others. We navigate between those pages using client side routes like vue-router. Each page is given a route when requested, it displays that particular page. We, hence, can navigate between the different pages by requesting their routes. when clicking the browser back button, it takes us to the previously requested route.

Issue

In the profile page, I might have nested pages with nested routes and a sidebar on the left side to navigate between the profile routes which could be info (/profile/info)to display the information about the user, payment (/profile/payment) to display their payment history, and message (/profile/message) page.

If I navigate to the info route, then to payment, the back button takes to the info. However, I want to technically disable the back button in the profile page so that it never takes back to another nested route within the profile.

Regardless of how many times, I navigate between the profile routes. When I hit the back button, I want to go back to the home page.

Solution

We need to replace the routes so it is not pushed into the history stack.

There are a few ways of doing that in vue-router whether you are using programatic navigation or router-link

 // Programmatic navigation
router.push({ path: '/profile/info', replace: true })
or
router.replace({ path: '/profile/info' })
// router-link
 <router-link to="/profile/info" replace>Info</router-link>

Thanks for reading

Destructuring nested object

Ahmed Yagoub — Sun, 01 Aug 2021 23:40:41 +0000

Introduction

Sometimes, we might run into situations where we need to get multiple properties from an object. You might have a function that accepts a nested object as a parameter. For example, the express (backend) functions that accept the request as the first parameter. We need to access multiple properties from the object to use in the function.

Example

Here is an example of a nested object.

const obj = {
  data: {
    day: {
      index: 1
    },
    week: {
      index: 1
    }
  }
}

If we want to get both the index of day and index of week, we could do something like this

    const weekIndex = obj.data.week.weekIndex;
    const dayIndex = obj.data.day.dayIndex;

But with object destructuring, it will be like so

    const {
      data: {
        week: { index: weekIndex },
        day: { index: dayIndex },
      },
    } = obj;

Here, we are destructuring the data from obj, then we are destructuring week and day from data, then destructure each of them to get the index and finally assigning each index to the variable we aim to use in the project.

It might be a few extra lines of code than if we access the object trough dot notation as above. However, it is more visual that we can see the structure of the object which makes it easier to read. As well as we avoid repetition.

Alternative to if/else blocks

Ahmed Yagoub — Sat, 10 Jul 2021 23:45:32 +0000

Introduction

We often overuse if/else blocks. We use them throughout our code base every time we want to run optional block of codes or return different outputs based on an input value or a condition.

Example

Let's say I have a function that takes an input (string) and modifies that string.

To keep things simple, the function receives a week number, week 1 and should return week one

Using an if/else conditionals, we can have code like so

    function CurrentWeekLabel(value) {
     let weekNumber = value[value.length - 1]
     if (weekNumber === '1') {
       weekNumber = 'one'
     }
     if (weekNumber === '2') {
       weekNumber = 'two'
     }
     else if (weekNumber === '3') {
       weekNumber = 'three'
     }
     else if (weekNumber === '4') {
       weekNumber = 'four'
     }
     else if (weekNumber === '5') {
       weekNumber = 'five'
     }
      return value
        .slice(0, -1)
        .concat(weekNumber)
    }

This function serves us well. However, there is an alternative that is less cluttered, less repetitive and more readable.

Alternative

We can use object lookups as an alternative, which is cleaner

   function CurrentWeekLabel(value) {
      let weekNumber = value[value.length - 1]
      let options = {
        '1': 'one',
        '2': 'two',
        '3': 'three',
        '4': 'four',
        '5': 'five',
      };
      return value
        .slice(0, -1)
        .concat(options[weekNumber] || weekNumber)
    }

Async lifeCycle hooks may cause props to be undefined

Ahmed Yagoub — Thu, 01 Jul 2021 19:44:02 +0000

Introduction

Have you ever passed down props from parent to a child component in vue only to realize that the prop isn't yet available but showing undefined instead?

Well, one possibility is the presence of async code in lifecycle hooks

Example

// parent.js
<script>
  import Child from './child'
  export default{
    data() {
      return {
        prop: undefined,
      }
    }
    async created() {
      this.prop = await this.$store.dispatch('getProp')
    }
  }
</script>
<template>
  <Child
    :prop=prop
  />
</template>

// child.js
<script>
  export default{
    props: ['prop'],
    created() {
      console.log(this.prop)
    }
  }
</script>
<template>
   ...
</template>

When we pass props from parent components to children, props are available by the time the created hook runs since the parent created hook runs before the child created hook. (The opposite for mounted hook).

However, in cases like the example above console.log(this.prop) will output undefined and that is because the lifecycle hooks themselves are synchronous even if they include async code inside of them.

In the example above, the created hook in the child component will be called immediately after the created hook in the parent component is called. It will not wait for the code inside of it to finish.

In fact, console.log(this.prop) might still result in undefined even if it is called in mounted hook instead. Although, the hooks run in order, the code inside them could finish at a later time.

Solution

I have no idea of when the prop is available in the child component, so my proposed solution is to watch it, and run that watcher only once

 watch: {
  prop(new, old) {
      if (old === undefined && new !== undefined) {
        console.log(this.prop)
      }
    },
  },

now, the output would give you the prop.

Add a unique id and use it as a key

Ahmed Yagoub — Mon, 17 May 2021 14:23:08 +0000

Introduction

If you use Vue or React, you must know about keys. They are mostly used with lists such as

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

and in Vue:

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

Avoid using index as key

Both React and Vue advice against using the index as a key especially if the order of items may change. As if you want to allow users to reorder items.

// not recommended to use index as key
<ul>
  <li v-for="(todo, index) in todos" :key="index">
    {{ todo.text }}
  </li>
</ul>

Sometimes we are lucky enough that our data comes with a unique id that identifies each of the items.

Other times, we are not so lucky. The items don't have unique ids. Or they do, but we want to render the item more than once. In that case, if we use the id as a key, we will run into duplicate keys issue.

We will have to create unique ids for the items and use them as keys.

Generate keys

There are many ways to do that. I will choose Lodash's uniqueId method since Lodash is used in the project I am working on and there is no need to load another library

import uniqueId from 'lodash/uniqueId';

Before rendering todos, loop through it and add a uniquekey

todos.forEach((todo) => {
  todo.uniqueKey = uniqueId();
});

Then, you can use todo.uniqueKey as a key. uniqueId() will generate a unique id for each todo. However, sometimes those ids might clash with other ids for a different list in the page. We can take it further and add an argument to uniqueId('todo_') to avoid duplicate keys.

Final thoughts

This uniqueKey was only added to do a particular job in the frontend. We probably wouldn't need to send it to the backend. So, before sending todos to the backend, make sure to delete the uniqueKey

todos.forEach((todo) => {
  todo.uniqueKey && delete todo.uniqueKey;
});

Thanks for reading

Import contacts from Google

Ahmed Yagoub — Mon, 10 May 2021 14:25:43 +0000

Introduction

in this article, you will see how to add a feature to your app (I built mine in Vue) which allows users to import their contacts from their google account.

Google supports this functionality through their People's Api.

Prerequisites

The first step is to create a project in google cloud platform and get the key and client id to be used in the code. You might want to save them in .env file.

the second step is to load the script file for google api (gapi) to your entry html file.

<script src="https://apis.google.com/js/api.js"></script>

after which gapi will be available in window

The code

I have dedicated a specific file for implementing the people api in my project that includes all the code below.

After following the steps in the prerequisite section, we can destructure gapi from window as well as the key and client id from process.env since they are saved in .env file.

const { gapi } = window;
const {
  PEOPLE_KEY: peopleApiKey,
  PEOPLE_CLIENT_ID: peopleClientId,
} = process.env;

Now, we load the API client and auth2 library

export default function getGoogleContacts() {
  // Load the API client and auth2 library
  gapi.load('client:auth2', initClient);
}

getGoogleContacts is exported as it will be called and used somewhere else in the project.

initClient is the function that is used to initialize the JS client library as shown:

function initClient() {
  // initialize the JS client library
  gapi.client
    .init({
      apiKey: peopleApiKey,
      clientId: peopleClientId,
      // scope is a space delimited string
      scope: 'https://www.googleapis.com/auth/contacts.readonly',
    })
    .then(() => {
// will show this code down 👇
    })
    .catch((error) => console.error(error));
}

the init function takes the apikey, clientId from the project you created in google cloud platform. As well as scope, and you can pass more than one, however, we are only interested in the contacts scope.
You can see the list of scopes 👉 People Api scopes

the .then block that I skipped above includes this code

      var GoogleAuth = gapi.auth2.getAuthInstance();
      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);
      // Handle the initial sign-in state.
      updateSigninStatus(GoogleAuth.isSignedIn.get());

It uses auth2 for authentication and to allow the user to sign in and agree to import their contacts

it first checks if the user is already signed in, otherwise it brings the sign in page.

function updateSigninStatus(isSignedIn) {
  if (isSignedIn) {
    makeApiCall();
  } else {
    GoogleAuth.signIn();
  }
}

if the user is signed in, we make the api call

function makeApiCall() {
  // https://developers.google.com/people/api/rest/v1/people.connections/list
  gapi.client.people.people.connections
    .list({
      resourceName: 'people/me', // deprecated (required for now)
      personFields: 'emailAddresses,names,phoneNumbers',
    })
    .then((response) => {
      formatResults(response.result.connections);
    })
    .catch((error) => {
      return error.result.error.message;
    });
}

we specify the resourceName which can only be people/me, but I realize it is deprecated (not sure of the alternative).
we also specify the fields we want back.

Bonus step

I have also chosen to format the response once I get it and before I commit it to the store and use it in the app.

You could potentially console.log the response to see how it looks like and format it however you want, but here is an example.

// [{first: '', last: '', email: [], phone: []}] that is the format I want!
function formatResults(arrayComingFromPeopleApi) {
  const resources = arrayComingFromPeopleApi.map((resource) => {
    // get multiple email addresses and phone numbers if applicable
    const { emailAddresses = [], names = [], phoneNumbers = [] } = resource;
    const email = emailAddresses.map((email = {}) => email.value || '');
    const phone = phoneNumbers.map((phone = {}) => phone.value || '');
    const lastName = names.map((name = {}) => name.familyName || '');
    const firstName = names.map((name = {}) => name.givenName || '');

    return {
      first: firstName[0],
      last: lastName[0],
      email,
      phone,
    };
  });
  // commit the resources to the store
}

References

https://github.com/google/google-api-javascript-client

Unit test downloading a file

Ahmed Yagoub — Mon, 03 May 2021 16:45:51 +0000

Overview

In this article, I am going to show you how to add the functionality of downloading a pdf to an application using Javascript. As well, I am going to show you how to test it in Jest and vue-test-utils.

The function

We can use this Javascript function to download the pdf file.
pdfUrl and label are the url of the file you need to download and the label you want the downloaded file to have.

The pdfUrl and label are being passed in as props to the component.

downloadFile() {
        axios
          .get(this.pdfUrl, { responseType: 'blob' })
          .then((response) => {
            const blob = new Blob([response.data], { type: 'application/pdf' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = this.label;
            link.click();
            URL.revokeObjectURL(link.href);
          })
          .catch((error) => console.error(error));
    },

After I wrote this function (which is a Vue component method) on my project , I realized that downloading a file can easily be done with HTML via adding a download attribute.

<a :href="pdfUrl" :download="label">download</a>

The gotcha with this technique is that it only works for same-origin-urls. i.e the website is https://mywebsite.com and the pdfUrl is https://mywebsite.com/mypdf.pdf

However, in my case, the pdfUrl is of a different origin as the pdf is stored in Amazon S3.

Testing

Let's now write a unit test for the function, to have confidence that it works correctly.

  it('should download a file', (done) => {
    const wrapper = mount(component, {    propsData: {
        label: 'label',
        pdfUrl: 'https://pdf.com',
      },});
    const link = {
      click: jest.fn(),
    };

    global.URL.createObjectURL = jest.fn(() => 'https://pdf.com');
    global.URL.revokeObjectURL = jest.fn();
    global.Blob = function(content, options) {
      return { content, options };
    };

    jest.spyOn(document, 'createElement').mockImplementation(() => link);
    wrapper.find(*class-selector*).trigger('click');

    wrapper.vm.$nextTick(() => {
      expect(link.download).toBe('label');
      expect(link.href).toBe('https://pdf.com');
      expect(link.click).toHaveBeenCalledTimes(1);
      done();
    });
  });

The first line in the test is for mounting the component in Vue. We pass mount the component name and an option object.

Then, declare a link variable (object) and add a click method to it.

The test also involves a lot of mocking as we don't need to test Blob and URL which are available on the window (global) object.

We spy on the document.createElement function and mock its implementation

Now, we just need to find the element and click it to invoke the function.

As the function is Async, I used the $nextTick with the done() function as we need to wait for vue to update. Otherwise, we are making the assertions before the function completes and the test would fail.

Finally, we assert that the link we created has the correct download and href attributes as well as asserting it is clicked.

side Note

I should also point out that we need to mock axios at the top of the test file

// needs to be outside of describe block!
jest.mock('axios', () => ({
  get: jest.fn(() => Promise.resolve({ data: 'content' })),
}));

Conclusion

We have seen how to download a file in Javascript as well as unit testing it in Jest and Vue-test-utils.

I hope it is helpful, If you have questions or feedback, drop a comment or reach out to me on Twitter