Is there any way to get the contents of another atom with jotai optics in a focus atom?

[Aubrey-Russell]

My current approach is to have a derived atom which gets the selected index I want, then grabs the correct atom from my split atom array. Then I have a focus atom that uses that derived atom.

However, I was wondering if there was any way to get the contents of another atom as a step in a focus atom? For example this fake pseudo code:

export const focusedState = focusAtom(someStateState, (optic) =>
    optic.prop('multipleStates').elems().jotaiFilter((item, get) => item.id === get(currentSelectedId)).props('item')
);

The fake element is this part:

.jotaiFilter((item, get) => item.id === get(currentSelectedId))

where there is a step to filter the elements based on the contents of another atom. is such a thing possible?

[dai-shi]

You can't, but you can create an atom in atom.

const atomInAtom = atom((get) => focusAtom(...))

However, it's tricky to use.

I wonder if you have a solution with focusAtom with combined atom.

const combinedAtom = atom(
  (get) => ({ someState: get(someStateAtom), currentSelectedId: get(currentSelectedIdAtom) }),
  // we need `write` too
)
const focusedState = focusAtom(combinedAtom, (optic) => ...)

Otherwise, I'd give up using focusAtom.

[Aubrey-Russell]

This fake code is what I use that seems to be work pretty well overall:

export const allStateName = `${projectGuid}.allState`;

export const allState = atomWithStorage<State[]>(
    allStateName,
    [cloneDeep(defaultState)],
    undefined,
    {
        getOnInit: true,
    },
);
export const allStateSplit = splitAtom(allState);

export const selectedState = atom(
    (get) => {
        const selectedIndex = get(stateCurrentSolutionIndex);
        const selectedAtom = get(allStateSplit)[selectedIndex];
        return get(selectedAtom);
    },
    (get, set, newVal: State) => {
        const selectedIndex = get(stateCurrentSolutionIndex);
        const allStates = get(allStateSplit);
        set(allStates[selectedIndex], newVal);
    },
);

export const focusedRequest = focusAtom(selectedState, (optic) => optic.prop('request'));

However, Its not as clean as being able to use an index atom as part of an optic, although your suggestion of using the focus atom inside an atom is quite clever and I will explore using that

[Aubrey-Russell]

@dai-shi This is what I came up with based on your suggestion but I had to create a new atom utility called derived atom to get this to work cleanly in the component itself:

export const testFocusAtomWrap = atom((get) => {
    const selectedIndex = get(stateCurrentSolutionIndex);
    const selectedRequest = focusAtom(allState, (optic) =>
        optic
            .index(selectedIndex)
            .prop('request')
    );

    return atom(
        (get) => {
            return get(selectedRequest);
        },
        (get, set, newVal: RequestState) => {
            set(selectedRequest, newVal);
        },
    );
});

and my useDerivedAtom utility:

import {
    useAtomValue,
    WritableAtom,
    PrimitiveAtom,
    Atom,
    ExtractAtomValue,
    ExtractAtomArgs,
    ExtractAtomResult,
    useSetAtom,
} from 'jotai';
import { SetStateAction } from 'react';

type SetAtom<Args extends unknown[], Result> = (...args: Args) => Result;

type Options = Parameters<typeof useAtomValue>[1];

export function useDerivedAtom<Value, Args extends unknown[], Result>(
    atom: Atom<WritableAtom<Value, Args, Result>>,
    options?: Options,
): [Awaited<Value>, SetAtom<Args, Result>];

export function useDerivedAtom<Value>(
    atom: Atom<PrimitiveAtom<Value>>,
    options?: Options,
): [Awaited<Value>, SetAtom<[SetStateAction<Value>], void>];

export function useDerivedAtom<Value>(atom: Atom<Atom<Value>>, options?: Options): [Awaited<Value>, never];

export function useDerivedAtom<AtomType extends WritableAtom<unknown, never[], unknown>>(
    atom: AtomType,
    options?: Options,
): [Awaited<ExtractAtomValue<AtomType>>, SetAtom<ExtractAtomArgs<AtomType>, ExtractAtomResult<AtomType>>];

export function useDerivedAtom<AtomType extends Atom<unknown>>(
    atom: AtomType,
    options?: Options,
): [Awaited<ExtractAtomValue<AtomType>>, never];

export function useDerivedAtom<Value, Args extends unknown[], Result>(
    atom: Atom<Atom<Value> | WritableAtom<Value, Args, Result>>,
    options?: Options,
) {
    const derivedAtom = useAtomValue(atom);
    return [
        useAtomValue(derivedAtom, options),
        // We do wrong type assertion here, which results in throwing an error.
        useSetAtom(derivedAtom as WritableAtom<Value, Args, Result>, options),
    ];
}

and then I can use the atom like any other:

const [test, setTest] = useDerivedAtom(testFocusAtomWrap);

[dai-shi]

Looks good. Is it possible to create an unwrapping atom, instead of the hook?

const atomInAtom = ...;
const unwrappedAtom = atom(
  (get) => {
    const derivedAtom = get(atomInAtom);
    return get(derivedAtom);
  },
  (get, set, ...args) => {
    const derivedAtom = get(atomInAtom);
    return set(derivedAtom, ...args);
  }
);

[Aubrey-Russell]

@dai-shi Thanks for your help! I could certainly use an unwrapped atom like you suggested which would be readable, clean, and effective. As an academic exercise, I was trying to find the densest and cleanest solution I could. Removing the new hook, what do you think about an atom utility that abstracts your solution like the following?

export function derivedAtom<Value> (focusAtomGenerator: (get: Getter) => WritableAtom<Value | undefined, [SetStateAction<Value>], void>) {

    const derivedFocusAtom = atom((get) => {
        const focusAtom  = focusAtomGenerator(get);
    
        return atom(
            (get) => {
                return get(focusAtom);
            },
            (get, set, newVal: Value) => {
                set(focusAtom, newVal);
            },
        );
    });

    return atom((get) => {
        return get(get(derivedFocusAtom));
    },
    (get, set, newVal: Value) => {
        set(get(derivedFocusAtom), newVal);
    });
}

const request = derivedAtom((get) => {
    const selectedIndex = get(stateCurrentSolutionIndex);
    const selectedRequest = focusAtom(allState, (optic) =>
        optic
            .index(selectedIndex)
            .prop('request')
    );
    return selectedRequest;
});

[dai-shi]

Yeah, looks good.

[dai-shi]

@PhilipGrefe followed the idea: #1547 (reply in thread)

Maybe we should create a recipe in docs.
Can anyone open a PR to add ./docs/recipes/derive-atom.mdx or something? The most difficult thing is to name it.