Faterek Comments - Answer Overflow

Faterek

•Created by Faterek on 7/9/2024 in #support

How can I make sure that data from createAsync is loaded, before passing it to another function

That still didn't work, with code like this:

export default function Protected() {
  const session = createSession();

  const params = useParams()["directory"].split("/");
  const ancestors = params.slice(0, -1);
  const name = params[params.length - 1];

  const dirID = createAsync(async () => {
    return JSON.parse(await getDirID(ancestors, name));
  });

  const subDirs = createAsync(async () => {
    const dir = dirID();
    console.log("subDirs dir is:", dir);
    if (!dir) return;
    return JSON.parse(await getSubDirectories(dir));
  });

  const files = createAsync(async () => {
    const dir = dirID();
    console.log("files dir is:", dir);
    if (!dir) return;
    return JSON.parse(await getFiles(dir));
  });

  return (
    <Show
      when={session()}
      fallback={<p>Only shown for logged in users</p>}
      keyed
    >
      <main class="main-content">
        <div class="filemanager-table">
          <Show when={dirID()}>
            <Show when={subDirs()}>
              <For each={subDirs()}>
                {(subDir) => <FileRecord {...subDir} />}
              </For>
            </Show>
            <Show when={files()}>
              <For each={files()}>{(file) => <FileRecord {...file} />}</For>
            </Show>
          </Show>
        </div>
      </main>
    </Show>
  );
}

export default function Protected() {
  const session = createSession();

  const params = useParams()["directory"].split("/");
  const ancestors = params.slice(0, -1);
  const name = params[params.length - 1];

  const dirID = createAsync(async () => {
    return JSON.parse(await getDirID(ancestors, name));
  });

  const subDirs = createAsync(async () => {
    const dir = dirID();
    console.log("subDirs dir is:", dir);
    if (!dir) return;
    return JSON.parse(await getSubDirectories(dir));
  });

  const files = createAsync(async () => {
    const dir = dirID();
    console.log("files dir is:", dir);
    if (!dir) return;
    return JSON.parse(await getFiles(dir));
  });

  return (
    <Show
      when={session()}
      fallback={<p>Only shown for logged in users</p>}
      keyed
    >
      <main class="main-content">
        <div class="filemanager-table">
          <Show when={dirID()}>
            <Show when={subDirs()}>
              <For each={subDirs()}>
                {(subDir) => <FileRecord {...subDir} />}
              </For>
            </Show>
            <Show when={files()}>
              <For each={files()}>{(file) => <FileRecord {...file} />}</For>
            </Show>
          </Show>
        </div>
      </main>
    </Show>
  );
}

output of console logs is

subDirs dir is: undefined
files dir is: undefined

subDirs dir is: undefined
files dir is: undefined

10 replies

Gaming

Programming