RocketChat/Rocket.Chat

import type { ISettingBase, SectionName, SettingId, GroupId, TabId, ISettingColor } from '@rocket.chat/core-typings';
import type { SettingsContextQuery } from '@rocket.chat/ui-contexts';
import { createContext, useContext, useMemo } from 'react';
import { useSyncExternalStore } from 'use-sync-external-store/shim';

export type EditableSetting = (ISettingBase | ISettingColor) & {
    disabled: boolean;
    changed: boolean;
    invisible: boolean;
};

type EditableSettingsContextQuery = SettingsContextQuery & {
    changed?: boolean;
};

export type EditableSettingsContextValue = {
    readonly queryEditableSetting: (
        _id: SettingId,
    ) => [subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => EditableSetting | undefined];
    readonly queryEditableSettings: (
        query: EditableSettingsContextQuery,
    ) => [subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => EditableSetting[]];
    readonly queryGroupSections: (
        _id: GroupId,
        tab?: TabId,
    ) => [subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => SectionName[]];
    readonly queryGroupTabs: (_id: GroupId) => [subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => TabId[]];
    readonly dispatch: (changes: Partial<EditableSetting>[]) => void;
    readonly isEnterprise: boolean;
};

export const EditableSettingsContext = createContext<EditableSettingsContextValue>({
    queryEditableSetting: () => [(): (() => void) => (): void => undefined, (): undefined => undefined],
    queryEditableSettings: () => [(): (() => void) => (): void => undefined, (): EditableSetting[] => []],
    queryGroupSections: () => [(): (() => void) => (): void => undefined, (): SectionName[] => []],
    queryGroupTabs: () => [(): (() => void) => (): void => undefined, (): TabId[] => []],
    dispatch: () => undefined,
    isEnterprise: false,
});

export const useIsEnterprise = (): boolean => useContext(EditableSettingsContext).isEnterprise;

export const useEditableSetting = (_id: SettingId): EditableSetting | undefined => {
    const { queryEditableSetting } = useContext(EditableSettingsContext);

    const [subscribe, getSnapshot] = useMemo(() => queryEditableSetting(_id), [queryEditableSetting, _id]);
    return useSyncExternalStore(subscribe, getSnapshot);
};

export const useEditableSettings = (query?: EditableSettingsContextQuery): EditableSetting[] => {
    const { queryEditableSettings } = useContext(EditableSettingsContext);
    const [subscribe, getSnapshot] = useMemo(() => queryEditableSettings(query ?? {}), [queryEditableSettings, query]);
    return useSyncExternalStore(subscribe, getSnapshot);
};

export const useEditableSettingsGroupSections = (_id: SettingId, tab?: TabId): SectionName[] => {
    const { queryGroupSections } = useContext(EditableSettingsContext);

    const [subscribe, getSnapshot] = useMemo(() => queryGroupSections(_id, tab), [queryGroupSections, _id, tab]);
    return useSyncExternalStore(subscribe, getSnapshot);
};

export const useEditableSettingsGroupTabs = (_id: SettingId): TabId[] => {
    const { queryGroupTabs } = useContext(EditableSettingsContext);

    const [subscribe, getSnapshot] = useMemo(() => queryGroupTabs(_id), [queryGroupTabs, _id]);
    return useSyncExternalStore(subscribe, getSnapshot);
};

export const useEditableSettingsDispatch = (): ((changes: Partial<EditableSetting>[]) => void) =>
    useContext(EditableSettingsContext).dispatch;