recoil#RecoilState TypeScript Examples

export function memoSelector<T>(theAtom: RecoilState<T>) {
  return selector<T>({
    key: 'memo' + theAtom.key,
    get: ({ get }) => get(theAtom),
    set: ({ set, get }, newValue) => {
      const old = get(theAtom)
      if (old !== newValue) {
        set(theAtom, newValue)
      }
    }
  })
}

/** Adapts Recoil state  `enum` to `string` */
export function useEnumRecoilState<T>(
  state: RecoilState<T>,
  serialize: (x: T) => string,
  deserialize: (k: string) => T,
): [string, (k: string) => void] {
  const [enumValue, setEnumValue] = useRecoilState(state)

  const stringValue = useMemo(() => {
    return serialize(enumValue)
  }, [enumValue, serialize])

  const setStringValue = useCallback(
    (key: string) => {
      const e = deserialize(key)
      setEnumValue(e)
    },
    [deserialize, setEnumValue],
  )

  return [stringValue, setStringValue]
}

export function useRecoilStateDeferred<T>(recoilState: RecoilState<T>): [T, SetterOrUpdater<T>] {
  const [initialValue, setRecoilValue] = useRecoilState_TRANSITION_SUPPORT_UNSTABLE(recoilState)
  const [value, setValue] = useState(initialValue)
  const [, startTransition] = useTransition()
  const setValueDeferred = useCallback(
    (valOrUpdater: ValOrUpdater<T>) => {
      setValue(valOrUpdater)
      startTransition(() => {
        setRecoilValue(valOrUpdater)
      })
    },
    [setRecoilValue],
  )
  return [value, setValueDeferred]
}

/* ----- ATOM ----- */
export function atom<T>(config: AtomOptions<T>): RecoilState<T> {
  const { transactions, atoms } = ledger;
  const newAtom = recoilAtom(config);

  // Can't use key-only b/c atoms must be passed to getLoadable during transaction iteration
  if (transactions.length === 0) atoms.push(newAtom);

  return newAtom;
}

/* ----- ATOM FAMILY ----- */
export function atomFamily<T, P extends SerializableParam>(
  config: AtomFamilyOptions<T, P>,
): (params: P) => RecoilState<T> {
  const { atomFamilies } = ledger;
  const { key } = config;

  // Initialize new family in atomFamilies tracker
  atomFamilies[key] = {};

  return (params: P): RecoilState<T> => {
    const strParams = JSON.stringify(params);
    // If the atom has already been created, return from cache, otherwise we'll be creating a new
    // instance of an atom every time we invoke this func (which can lead to infinite re-render loop)
    const cachedAtom = atomFamilies[key][strParams];
    if (cachedAtom !== undefined) return cachedAtom;

    const newAtomFamilyMember = recoilAtomFamily(config)(params);
    // Storing every atom created except for dummy atom created by ChromogenObserver's onload useEffect hook
    if (strParams !== dummyParam) atomFamilies[key][strParams] = newAtomFamilyMember;
    return newAtomFamilyMember;
  };
}

ledger: Ledger<RecoilState<any>, any, SerializableParam> = {
  atoms: [],
  selectors: [], //get
  atomFamilies: {},
  selectorFamilies: {},
  setters: [], //set
  initialRender: [],
  initialRenderFamilies: [],
  transactions: [],//get
  setTransactions: [],//set
}

export function useYoutubePLayer(image: React.RefObject<HTMLImageElement>, backdrop: React.RefObject<HTMLDivElement>, trailerId: string, playerState: RecoilState<boolean>) {
    const player = useRef<YTPlayer | null>(null);
    const [done, setDone] = useState(true);
    const [start, setStart] = useState(false);
    const [trailer, setTrailer] = useRecoilState(playerState);

    function loadTrailer() {
        if (!done)
            destroyTrailer();

        else {
            setTrailer(true);
            setStart(true);
            setDone(false);
            const string = `<div id="playerTwo" style="opacity: 0; width: 100%"></div>`;
            image.current?.insertAdjacentHTML('afterend', string);
            if (player.current === null)
                // @ts-ignore
                player.current = new YT.Player('playerTwo', {
                    height: '390',
                    width: '640',
                    videoId: trailerId,
                    playerVars: {
                        controls: 0,
                        enablejsapi: 1,
                        modestbranding: 1
                    },
                    events: {
                        onReady: playYoutubeVideo,
                        onStateChange: endVideo
                    }
                });
        }
    }

    function endVideo(event: { data: number; }) {
        if (event.data === 0 && player.current) {
            document.getElementById('playerTwo')?.setAttribute('class', 'fade_input');
            setStart(false);
            setDone(true);
            setTrailer && setTrailer(false)

            player.current.destroy();
            setTimeout(() => {
                player.current = null;
                document.getElementById('playerTwo')?.remove();
            }, 400)
        }
    }

    function playYoutubeVideo() {
        if (player.current) {
            player.current.setVolume(50);
            player.current.playVideo();
            document.getElementById('playerTwo')?.setAttribute('class', 'glow_input');
        }
    }

    function destroyTrailer() {
        if (!done && player.current) {
            player.current.stopVideo();
            endVideo({data: 0});
        }
    }

    useEffect(() => {
        if (!trailer)
            destroyTrailer();
    }, [trailer])

    return {done, start, loadTrailer};
}

export function setRecoil<T>(atom: RecoilState<T>, valOrUpdater: T | ((currVal: T) => T)) {
    nexus.set!(atom, valOrUpdater)
}

export function resetRecoil(atom: RecoilState<any>) {
    nexus.reset!(atom)
}

export function useSeqMarkerState(state: RecoilState<SeqMarkerHeightState>) {
  return useEnumRecoilState(state, seqMarkerHeightStateToString, seqMarkerHeightStateFromString)
}

recordingState: RecoilState<boolean> = atom<boolean>({
  key: 'recordingState',
  default: true,
})