List of primitive Atoms && find || filter

[bwoutersvaa]

We got an application with a list of invoices. We already make an atom<PrimitiveAtom[]>();
So in the application we want to filter the list of primtive atoms. But it's a hard job, because the value of useAtom isn't an invoice, but a PrimitiveAtom.

To explain the flow:

1. User visits overview
2. Get's list of invoices
3. Sets the primitiveInvoicesAtom
4. Clicks on one atom
5. Set the active atom

Now comes the ceveat.
The user can also visit a detail page directly. In that case the list isn't filled in with data.

export const primitiveInvoicesAtom = atom<PrimitiveAtom<Invoice>[]>([]);
export const activeInvoiceIdAtom = atom<string | undefined>(undefined);

// This gives a warning because we cannot read invoiceid from a primitiveatom
export const activeInvoice = atom(
  (get) =>
    get(primitiveInvoicesAtom).find(
      (invoice) => invoice.invoiceId.toString() === get(activeInvoiceIdAtom),
    )
);

So in short i want the following:

1. A List of invoice atoms (Pure for update reasons)
2. Get the active invoice atom from the list based on the id via props or url. (derived)
3. At best return a writable atom because we need to update the invoice based on actions.

I think array mutation based on primitive atoms is still a bit unclear when reading the docs if the atom is not passed in by props.

[dai-shi]

Hi, thanks for opening a discussion.

In short:

export const activeInvoice = atom(
  (get) =>
    get(primitiveInvoicesAtom).find(
      (invoice) => get(invoice).invoiceId.toString() === get(activeInvoiceIdAtom),
    )
);

I know it's a little bit hard to reach this mental model. It's probably a doc issue. Suggestions are welcome.

2. Get the active invoice atom from the list based on the id via props or url. (derived)

If the id is coming from props, you want to create a derived atom (non-global) in component.

const Component = ({ id }) => {
  const activeInvoice = useMemo(() => atom(
  (get) =>
    get(primitiveInvoicesAtom).find(
      (invoice) => get(invoice).invoiceId.toString() === id,
    )
  ), [id])
  // continued

3. At best return a writable atom because we need to update the invoice based on actions.

You can then use the atom in the same component.

  const [invoice, setInvoice] = useAtom(activeInvoice)

[dai-shi]

setInvoice cannot be used because it is of type never.

That's strange. Can you create a tiny codesandbox to play with?

[bwoutersvaa]

Thanks for your help so far!

https://codesandbox.io/s/intelligent-franklin-1qf1r

[dai-shi]

sorry, there was a bug in my original comment.
here's the fix.
https://codesandbox.io/s/exciting-shadow-51n45

---

#662 (comment)
The correct snippet is:

const Component = ({ id }) => {
  const activeInvoice = useAtom(useMemo(() => atom(
  (get) =>
    get(primitiveInvoicesAtom).find(
      (invoice) => get(invoice).invoiceId.toString() === id,
    )
  ), [id]))
  // continued

[bwoutersvaa]

Thanks man! Really appreciate the help! Problem with my code was the return get().

IT's not possible to use the Getter outside an atom function? Like some sort of utility method?

[dai-shi]

No, as you guessed. Getter must be inside, so that we can track the dependency.