Call one function after another has set item in local storage

Question

I am currently trying to perform two operations based on my local storage content.

My project uses ReactJS but since I don't know how to set the state globally, or propagate my data back and forward through parent and child component, I decided to do it with local storage.

I am trying to assign roles and permissions to a logged in user. In order to do that, I have two separate fetch functions which I execute whenever my user is authenticated by the identity federation broker.

Here is my first function in a separate UserAuthorization.js file:

function UserAuthorisation() {
  const userid = localStorage.getItem("userid"); //GETS THE TOKEN SET BY IFB.

  if (userid !== null) {
    fetch("https://api.myjsons.com/binz/examplebin")
      .then(response => response.json())
      .then(response => {
        for (let eachUser = 0; eachUser < response.length; eachUser++) {
          if (userid === response[eachUser].id) {
            localStorage.setItem("role", response[eachUser].role);
          }
        }
      });
  } else {
    console.log("We don't have the user ID item");
  }
}

export default UserAuthorisation;

Here is the second function which is supposed to run after UserAuthorization.js:

function FetchUserPermissions() {
  const userRole = localStorage.getItem("role");
  console.log(userRole);
  if (userRole !== null) {
    fetch("https://api.myjsons.com/binz/xxzsz")
      .then(response => response.json())
      .then(response => {
        for (let permission = 0; permission < response.length; permission++) {
          if (permission === response[permission]) {
            console.log(response[permission], "<<<<<<< This is the user Role");
            return response[permission];
          }
        }
      });
  } else {
    console.log("not loggedin === no user permissions.");
  }
}

export default FetchUserPermissions;

The issue that I'm having is that since I just call my functions by their names, the second one FetchUserPermissions prints out a null instead of the userRole.

I thought that it was because I tried to grab the role from local storage before it was set but when I changed to function to async await I got a result cannot read property .length of undefined

How can I call my second function after the first one and grab my role element from the local storage ??

Apologies in advance for the silly question..

Answer 1

You right. It happens 'cause when FetchUserPermissions is calling UserAuthorisation can not get in time to setup role into localStorage. Simple solution is return Promise from UserAuthorisation and call FetchUserPermissions in then().

function UserAuthorisation() {
  const userid = localStorage.getItem("userid"); //GETS THE TOKEN SET BY IFB.

  if (userid !== null) {
    return fetch("https://api.myjsons.com/binz/examplebin")
      .then(response => response.json())
      .then(response => {
        for (let eachUser = 0; eachUser < response.length; eachUser++) {
          if (userid === response[eachUser].id) {
            localStorage.setItem("role", response[eachUser].role);
          }
        }
      });
  } else {
    console.log("We don't have the user ID item");
  }

  return Promise.resolve();
}

export default UserAuthorisation;

Usage.

UserAuthorisation().then(() => {
  FetchUserPermissions();
});

Little example for you.

function first() {  
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('1');
      
      resolve();
    }, 1000);
  });
}

function second() {
  console.log('2');
}

second(); // 2
first().then(second); // 1 -> 2

Read more about Promises here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise or here https://javascript.info/promise-basics.