Storage-api retrieving data

Forge
3

Hi @Mariem,

It might be unrelated, but you are doing UI kit, its API looks a lot like React, but it isn’t 100% like React. In your case, you need to write:

  useEffect(async () => {
    await getData();
  }, []);

Otherwise, the getData() function won’t be awaited.

Actually, I think it can be simplified into:

  useEffect(getData, []);

Or even better, but not tested. As UI kit useState() can take a Promise as initial value (https://developer.atlassian.com/platform/forge/ui-kit-hooks-reference/#arguments), that allow you to do to something like:

const App = () => {

  const createData = async () => {
    const dat1= await storage.set('level1', {
      id: 1,
      name: "Top Secret",
      color: "#FDFEFE",
      backgroundColor: "#E74C3C",
      description: "The description of the Top Secret Level"
    });
    const dat2= await storage.set('level2', {
      id: 2,
      name: "Secret Level",
      color: "#FDFEFE",
      backgroundColor: "#A93226",
      description: "The description of the Secret Level"
    });
    const dat3=await storage.set('level3', {
      id: 3,
      name: "Confidential",
      color: "#FDFEFE",
      backgroundColor: "#5B2C6F",
      description: "The description of the Confidential Level"
    });
    const list = [dat1, dat2, dat3]
    return list;
  };

  const getData = async()=>{
    await createData();

    return Promise.all([
      storage.get('level1'),
      storage.get('level2'),
      storage.get('level3'),
    ])
  }

  const [levelsData, setLevelsData] = useState(getData);

  // ...
}
2 Likes