Alternative to mapArray that waits on a promise when removing an item

Question

I don't want to use transition-group or any superfluous code. I just want the below API style to work.

The output after 1 second is a a 3 4 5 6 The output after 2 second becomes 3 4 5 6

import { render } from "solid-js/web";
import { For, createSignal, createMemo, mapArray } from "solid-js";


function make_position(_: number) {

  let [removing, setRemoving] = createSignal()

  return {
     get value() {
        return removing() ? 'a': _
     },
     async on_remove() {
        // I want `mapArray` to call this function when an item is removed, and wait on the returned promise to actually remove the item.
        setRemoving(true)
        return new Promise(resolve => {
           setTimeout(resolve, 1000);
        })
     }
  }
}

function Counter() {
  const [list1, setList1] = createSignal([1, 2, 3, 4, 5]);

  const ls = createMemo(mapArray(list1, _ => make_position(_)))

  setTimeout(() => {
    setList1([3,4,5,6])
  }, 1000)
  
  return (<>
    <For each={ls()}>{ item => 
       <span>{item.value}</span>
    }</For>
    </>)
}

render(() => <Counter />, document.getElementById("app"));

I think onCleanup would be used to achieve this effect without writing a new special function for this. — eguneys, May 30 '22 at 00:17

snnsnn · Answer 1 · 2022-05-30T02:47:50.613

-1

Tracking the signal's value is enough to achieve what you want. For already uses both mapArray and createMemo internally, so const ls = createMemo(mapArray(list1, _ => make_position(_))) is unnecessary.

function Counter() {
  const [list1, setList1] = createSignal([1, 2, 3, 4, 5]);

  setTimeout(() => {
    setList1([3, 4, 5, 6])
  }, 1000)

  return (<>
    <For each={list1()}>
      {item =>
        <span>{item}</span>
      }</For>
  </>)
}

render(() => <Counter />, document.getElementById("app"));

You can use a promise to set the new value. If you are going to receive the new value through network request, use a resource.


type QueryParams = number;

const fetchData = (params: QueryParams) => new Promise<Array<number>>((resolve, reject) => {
  if (params === 0) {
    resolve([1, 2, 3, 4, 5]);
  }

  if (params === 1) {
    resolve([3, 4, 5]);
  }
});

function Counter() {
  const [params, setParams] = createSignal(0);
  const [data, { mutate, refetch }] = createResource(params, fetchData);

  setTimeout(() => {
    setParams(p => p + 1);
  }, 1000)

  return (
    <Show when={!data.loading} fallback={<div>Loading</div>}>
      <For each={data()}>
        {item =>
          <span>{item}</span>
        }
      </For>
    </Show>)
}

render(() => <Counter />, document.getElementById("app"));

edited May 30 '22 at 02:47

answered May 30 '22 at 02:31

snnsnn

10,486
4
39
44

Did you read my question, where is the wait for async remove function. – eguneys May 30 '22 at 02:38
Having clear questions really helps. Your questions usually long and complicated and without any context. Are you asking alternative to map array or are you asking for a way to set a signal value via a promise. – snnsnn May 30 '22 at 03:11
Extra `[1, 2]`, that is removed at second fetch, When removed, I want to keep them until I return from a promise, so I can remove as usual. I want to give you a second downvote for caring to edit your answer. – eguneys May 30 '22 at 03:11
I've partly achieved what I want with `onCleanup` callback, I might post as an answer. – eguneys May 30 '22 at 03:14
I appreciate your time spending, but you don't use it good enough to understand my question, but to give generic advice. – eguneys May 30 '22 at 03:32

Alternative to mapArray that waits on a promise when removing an item

1 Answers1