Skip to content
Get help on Slack

Using async/await to make code cleaner and more readable in setting up deskStructure based on user roles.

7 replies
Last updated: Feb 9, 2022
I am setting up the 
deskStructure
 based on user role administrator and editors. But I am wondering is there a cleaner and more readable way to write the function like using 
async
 and 
await
?
This is not so readable, wondering if there is a better way doing this?

return userStore
    .getCurrentUser()
    .then(({ roles, name }) => {
      const roleNames = roles.map((r) => r.name);

      if (roleNames.includes("administrator")) {
        return S.list()
          .title(`${name} — Website Admin Menu`)
          .items([...deskItems, settingsMenu]);
      }

      if (roleNames.includes("editors")) {
        editors.push(...deskItems);
      }

      return S.list().title("Website Menu").items(deskItems);
    })
    .catch((error) => {
      console.error(error);
      return S.list().title("Empty or Faulty structure").items([]);
    });

Feb 9, 2022, 1:03 AM
Hey User. I think you should be able to convert that code to use async/await, and it will continue to work 🙂.
I generally prefer async/await over promise chaining myself, too! I've used it a lot in my Studios and haven't run into any issues.
Feb 9, 2022, 11:51 AM
user E
Is there a example on git? Because this is not readable. Downside of being a perfectionist… always refactoring and trying to keep it clean and split code in parts.
Feb 9, 2022, 11:53 AM
I'm the same, although in my experience it's sometimes good to let go and just ship code that works 😅.
How you structure your Studio code is really up to you. The examples from our docs work for most folks, but you are free to abstract them however makes sense to you. The aim of the docs is to show how our APIs work without misdirecting folks with fancy abstractions.

The block of code you posted can be rewritten using async/await like this:


try {
  const { roles, name } = await userStore.getCurrentUser()
  const roleNames = roles.map(r => r.name)

  if (roleNames.includes('administrator')) {
    return S.list()
      .title(`${name} — Website Admin Menu`)
      .items([...deskItems, settingsMenu])
  }

  if (roleNames.includes('editors')) {
    editors.push(...deskItems)
  }

  return S.list().title('Website Menu').items(deskItems)
} catch {
  console.error(error)
  return S.list().title('Empty or Faulty structure').items([])
}
I haven't tested this code, but it
should work.
Feb 9, 2022, 12:00 PM
user E
Thanks! Yes, it's true have to let it go if it works, it works no need to refactor. But sometimes it's pretty hard👍
Feb 9, 2022, 1:09 PM
user E
I get Unexpected reserved word ‘await’. (47:28)

My DeskStructure.JS:

import S from "@sanity/desk-tool/structure-builder";

import userStore from "part:@sanity/base/user";

import {
  pagesMenu,
  articlesMenu,
  casesMenu,
  friendsMenu,
  vacanciesMenu,
  expertiseMenu,
  themeMenu,
  categoriesMenu,
  commentsMenu,
  downloadsMenu,
} from "./desk/menus";

import { settingsMenu } from "./desk/settings";

const deskStructure = () => {
  const editors = [];

  const deskItems = [
    pagesMenu,
    S.divider(),
    articlesMenu,
    S.divider(),
    casesMenu,
    S.divider(),
    friendsMenu,
    S.divider(),
    vacanciesMenu,
    S.divider(),
    categoriesMenu,
    S.divider(),
    themeMenu,
    S.divider(),
    expertiseMenu,
    S.divider(),
    commentsMenu,
    S.divider(),
    downloadsMenu,
    S.divider(),
  ];

  try {
    const { roles, name } = await userStore.getCurrentUser();
    const roleNames = roles.map((r) => r.name);

    if (roleNames.includes("administrator")) {
      return S.list()
        .title(`${name} — Website Admin Menu`)
        .items([...deskItems, settingsMenu]);
    }

    if (roleNames.includes("editors")) {
      editors.push(...deskItems);
    }

    return S.list().title("Website Menu").items(deskItems);
  } catch {
    console.error(error);
    return S.list().title("Empty or Faulty structure").items([]);
  }

  // return userStore
  //   .getCurrentUser()
  //   .then(({ roles, name }) => {
  //     const roleNames = roles.map((r) => r.name);
  //     const isAdmin = roleNames.includes("administrator");
  //     const isEditor = roleNames.includes("editors");

  //     if (isAdmin) {
  //       return S.list()
  //         .title(`${name} — Website Admin Menu`)
  //         .items([...deskItems, settingsMenu]);
  //     }

  //     if (isEditor) {
  //       editors.push(...deskItems);
  //     }

  //     return S.list().title("Website Menu").items(deskItems);
  //   })

  //   .catch((error) => {
  //     console.error(error);
  //     return S.list().title("Empty or Faulty structure").items([]);
  //   });
};

export default deskStructure;

Feb 9, 2022, 3:57 PM
Ah! You need to make your 
deskStructure
function async. You can do that by adding the 
async
keyword here:

const deskStructure = async () => {
Feb 9, 2022, 4:05 PM
user E
Nice one, only thing noticed the catch (error) js not working anymore:

} catch (error) {
    console.error(error);
    return S.list().title("Empty or Faulty structure").items([]);
  }
ERROR

Error: Pane returned no child

Feb 9, 2022, 4:51 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?