index.ts

import Cookies from 'js-cookie';
import {type Dispatch, useCallback, useEffect, useState} from 'react';
import {useFirstMountState} from '../useFirstMountState/index.js';
import {useMountEffect} from '../useMountEffect/index.js';
import {useSyncedRef} from '../useSyncedRef/index.js';
import {isBrowser} from '../util/const.js';

const cookiesSetters = new Map<string, Set<Dispatch<string | null>>>();

const registerSetter = (key: string, setter: Dispatch<string | null>) => {
	let setters = cookiesSetters.get(key);

	if (!setters) {
		setters = new Set();
		cookiesSetters.set(key, setters);
	}

	setters.add(setter);
};

const unregisterSetter = (key: string, setter: Dispatch<string | null>): void => {
	const setters = cookiesSetters.get(key);

	if (!setters) {
		return;
	}

	setters.delete(setter);

	if (setters.size === 0) {
		cookiesSetters.delete(key);
	}
};

const invokeRegisteredSetters = (
	key: string,
	value: string | null,
	skipSetter?: Dispatch<string | null>,
) => {
	const setters = cookiesSetters.get(key);

	if (!setters) {
		return;
	}

	for (const s of setters) {
		if (s !== skipSetter) {
			s(value);
		}
	}
};

export type UseCookieValueOptions<
	InitializeWithValue extends boolean | undefined = boolean | undefined,
> = Cookies.CookieAttributes &
(InitializeWithValue extends undefined
	? {
			/**
			 * Whether to initialize state with the cookie value or `undefined`.
			 *
			 * _We suggest setting this to `false` during SSR._
			 *
			 * @default true
			 */
			initializeWithValue?: InitializeWithValue;
		}
	: {
			initializeWithValue: InitializeWithValue;
		});

export type UseCookieValueReturn<V extends undefined | null | string = undefined | null | string> =
	[value: V, set: (value: string) => void, remove: () => void, fetch: () => void];

export function useCookieValue(
	key: string,
	options: UseCookieValueOptions<false>
): UseCookieValueReturn;
export function useCookieValue(key: string, options?: UseCookieValueOptions): UseCookieValueReturn;
/**
 * Manages a single cookie.
 *
 * @param key Name of the cookie to manage.
 * @param options Cookie options that will be used during setting and deleting the cookie.
 */
export function useCookieValue(
	key: string,
	options: UseCookieValueOptions = {},
): UseCookieValueReturn {
	if (process.env.NODE_ENV === 'development' && Cookies === undefined) {
		throw new ReferenceError(
			'Dependency `js-cookies` is not installed, it is required for `useCookieValue` work.',
		);
	}

	let {initializeWithValue = true, ...cookiesOptions} = options;

	if (!isBrowser) {
		initializeWithValue = false;
	}

	const methods = useSyncedRef({
		set(value: string) {
			setState(value);
			Cookies.set(key, value, cookiesOptions);
			// Update all other hooks with the same key
			invokeRegisteredSetters(key, value, setState);
		},
		remove() {
			setState(null);
			Cookies.remove(key, cookiesOptions);
			invokeRegisteredSetters(key, null, setState);
		},
		fetchVal: () => Cookies.get(key) ?? null,
		fetch() {
			const value = methods.current.fetchVal();
			setState(value);
			invokeRegisteredSetters(key, value, setState);
		},
	});

	const isFirstMount = useFirstMountState();
	const [state, setState] = useState<string | null | undefined>(
		isFirstMount && initializeWithValue ? methods.current.fetchVal() : undefined,
	);

	useMountEffect(() => {
		if (!initializeWithValue) {
			methods.current.fetch();
		}
	});

	useEffect(() => {
		registerSetter(key, setState);

		return () => {
			unregisterSetter(key, setState);
		};
	}, [key]);

	return [
		state,

		useCallback((value: string) => {
			methods.current.set(value);
			// eslint-disable-next-line react-hooks/exhaustive-deps
		}, []),

		useCallback(() => {
			methods.current.remove();
			// eslint-disable-next-line react-hooks/exhaustive-deps
		}, []),

		useCallback(() => {
			methods.current.fetch();
			// eslint-disable-next-line react-hooks/exhaustive-deps
		}, []),
	];
}