Files
omnivore/packages/web/components/templates/article/SetLabelsModalPresenter.tsx
2023-06-21 14:17:26 +08:00

69 lines
1.7 KiB
TypeScript

import { useCallback, useEffect } from 'react'
import { useSetPageLabels } from '../../../lib/hooks/useSetPageLabels'
import { LabelsProvider } from './SetLabelsControl'
import { SetLabelsModal } from './SetLabelsModal'
import { useSetHighlightLabels } from '../../../lib/hooks/useSetHighlightLabels'
type SetPageLabelsModalPresenterProps = {
articleId: string
article: LabelsProvider
onOpenChange: (open: boolean) => void
}
export function SetPageLabelsModalPresenter(
props: SetPageLabelsModalPresenterProps
): JSX.Element {
const [labels, dispatchLabels] = useSetPageLabels(props.articleId)
useEffect(() => {
dispatchLabels({
type: 'RESET',
labels: props.article.labels ?? [],
})
}, [props.article, dispatchLabels])
const onOpenChange = useCallback(() => {
if (props.article) {
props.article.labels = labels.labels
}
props.onOpenChange(true)
}, [props, labels])
return (
<SetLabelsModal
provider={props.article}
selectedLabels={labels.labels}
dispatchLabels={dispatchLabels}
onOpenChange={onOpenChange}
/>
)
}
type SetHighlightLabelsModalPresenterProps = {
highlightId: string
highlight: LabelsProvider
onOpenChange: (open: boolean) => void
}
export function SetHighlightLabelsModalPresenter(
props: SetHighlightLabelsModalPresenterProps
): JSX.Element {
const [labels, dispatchLabels] = useSetHighlightLabels(props.highlightId)
useEffect(() => {
dispatchLabels({
type: 'RESET',
labels: props.highlight.labels ?? [],
})
}, [props.highlight, dispatchLabels])
return (
<SetLabelsModal
provider={props.highlight}
selectedLabels={labels.labels}
dispatchLabels={dispatchLabels}
onOpenChange={props.onOpenChange}
/>
)
}