stream-chat-react
Version:
React components to create chat conversations or livestream style chat
42 lines (41 loc) • 2.05 kB
JavaScript
import { useCallback, useEffect } from 'react';
import { modalDialogManagerId, useDialogManager, useNearestDialogManagerContext, } from '../../../context';
import { useStateStore } from '../../../store';
export const useDialog = ({ dialogManagerId, id }) => {
const { dialogManager } = useDialogManager({ dialogManagerId });
useEffect(() => () => {
// Since this cleanup can run even if the component is still mounted
// and dialog id is unchanged (e.g. in <StrictMode />), it's safer to
// mark state as unused and only remove it after a timeout, rather than
// to remove it immediately.
dialogManager.markForRemoval(id);
}, [dialogManager, id]);
return dialogManager.getOrCreate({ id });
};
export const useDialogOnNearestManager = ({ id }) => {
const { dialogManager } = useNearestDialogManagerContext() ?? {};
const dialog = useDialog({ dialogManagerId: dialogManager?.id, id });
return {
dialog,
dialogManager,
};
};
export const modalDialogId = 'modal-dialog';
export const useModalDialog = () => useDialog({ dialogManagerId: modalDialogManagerId, id: modalDialogId });
export const useDialogIsOpen = (id, dialogManagerId) => {
const { dialogManager } = useDialogManager({ dialogManagerId });
const dialogIsOpenSelector = useCallback(({ dialogsById }) => ({ isOpen: !!dialogsById[id]?.isOpen }), [id]);
return useStateStore(dialogManager.state, dialogIsOpenSelector).isOpen;
};
export const useModalDialogIsOpen = () => useDialogIsOpen(modalDialogId, modalDialogManagerId);
const openedDialogCountSelector = (nextValue) => ({
openedDialogCount: Object.values(nextValue.dialogsById).reduce((count, dialog) => {
if (dialog.isOpen)
return count + 1;
return count;
}, 0),
});
export const useOpenedDialogCount = ({ dialogManagerId, } = {}) => {
const { dialogManager } = useDialogManager({ dialogManagerId });
return useStateStore(dialogManager.state, openedDialogCountSelector).openedDialogCount;
};