@applicaster/zapp-react-native-utils/screenState/index.ts

Applicaster Zapp React Native utilities package

import { create } from "zustand";
import { produce } from "immer";
import { path } from "ramda";

type ScreenState = {
  selectedEntry: {
    id: string;
  };
};

type ScreenId = string;
type GlobalScreenState = Record<ScreenId, ScreenState>;

const screensInitialState: GlobalScreenState = {};

type ScreenStore = {
  screens: GlobalScreenState;
  setSelectedEntry: (screenId: string, entryId: string) => void;
};

const useScreenStore = create<ScreenStore>((set) => ({
  screens: screensInitialState,
  setSelectedEntry: (screenId, entryId) =>
    set(
      produce((draft) => {
        if (!draft.screens[screenId]) {
          draft.screens[screenId] = { selectedEntry: { id: "" } };
        }

        draft.screens[screenId].selectedEntry.id = entryId;
      })
    ),
}));

export function useScreenState(
  screenId: ScreenId
): null | { screen: ScreenState; setSelectedEntry: (entryId: string) => void } {
  // const state = useState(screenState);
  const screenState = useScreenStore(
    path(["screens", screenId])
  ) as ScreenState;

  const setSelectedEntry = useScreenStore((state) => state.setSelectedEntry);

  if (!screenId) return null;

  return {
    screen: screenState,
    setSelectedEntry: (entryId) => setSelectedEntry(screenId, entryId),
  };
}