overleaf/services/web/frontend/js/features/ide-react/context/modals-context.tsx
ilkin-overleaf 2bbead57ec Merge pull request #15474 from overleaf/td-ide-page-file-and-multiple-view
React IDE page: implement file views and file delete handling

GitOrigin-RevId: 491cad7b147e55bc4a250da387916c7e2dff14ae
2023-11-03 09:00:08 +00:00

73 lines
1.8 KiB
TypeScript

import {
createContext,
useContext,
FC,
useCallback,
useMemo,
useState,
} from 'react'
import GenericMessageModal, {
GenericMessageModalOwnProps,
} from '@/features/ide-react/components/modals/generic-message-modal'
type ModalsContextValue = {
genericModalVisible: boolean
showGenericMessageModal: (
title: GenericMessageModalOwnProps['title'],
message: GenericMessageModalOwnProps['message']
) => void
}
const ModalsContext = createContext<ModalsContextValue | undefined>(undefined)
export const ModalsContextProvider: FC = ({ children }) => {
const [showGenericModal, setShowGenericModal] = useState(false)
const [genericMessageModalData, setGenericMessageModalData] =
useState<GenericMessageModalOwnProps>({ title: '', message: '' })
const handleHideGenericModal = useCallback(() => {
setShowGenericModal(false)
}, [])
const showGenericMessageModal = useCallback(
(
title: GenericMessageModalOwnProps['title'],
message: GenericMessageModalOwnProps['message']
) => {
setGenericMessageModalData({ title, message })
setShowGenericModal(true)
},
[]
)
const value = useMemo<ModalsContextValue>(
() => ({
showGenericMessageModal,
genericModalVisible: showGenericModal,
}),
[showGenericMessageModal, showGenericModal]
)
return (
<ModalsContext.Provider value={value}>
{children}
<GenericMessageModal
show={showGenericModal}
onHide={handleHideGenericModal}
{...genericMessageModalData}
/>
</ModalsContext.Provider>
)
}
export function useModalsContext(): ModalsContextValue {
const context = useContext(ModalsContext)
if (!context) {
throw new Error(
'useModalsContext is only available inside ModalsContextProvider'
)
}
return context
}