78 lines
2.0 KiB
TypeScript
78 lines
2.0 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'
|
|
import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
|
|
|
|
type SetPageLabelsModalPresenterProps = {
|
|
articleId: string
|
|
article: LabelsProvider
|
|
onOpenChange: (open: boolean) => void
|
|
}
|
|
|
|
export function SetPageLabelsModalPresenter(
|
|
props: SetPageLabelsModalPresenterProps
|
|
): JSX.Element {
|
|
const [labels, dispatchLabels] = useSetPageLabels(props.articleId)
|
|
|
|
const onOpenChange = useCallback(() => {
|
|
if (props.article) {
|
|
props.article.labels = labels.labels
|
|
}
|
|
props.onOpenChange(true)
|
|
}, [props, labels])
|
|
|
|
useEffect(() => {
|
|
dispatchLabels({
|
|
type: 'RESET',
|
|
labels: props.article.labels ?? [],
|
|
})
|
|
}, [props.article, dispatchLabels])
|
|
|
|
return (
|
|
<SetLabelsModal
|
|
provider={props.article}
|
|
selectedLabels={labels.labels}
|
|
dispatchLabels={dispatchLabels}
|
|
onOpenChange={onOpenChange}
|
|
/>
|
|
)
|
|
}
|
|
|
|
type SetHighlightLabelsModalPresenterProps = {
|
|
highlightId: string
|
|
highlight: Highlight
|
|
|
|
onUpdate: (updatedHighlight: Highlight) => void
|
|
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])
|
|
|
|
const onOpenChange = useCallback(() => {
|
|
props.highlight.labels = labels.labels
|
|
props.onUpdate(props.highlight)
|
|
props.onOpenChange(true)
|
|
}, [props])
|
|
|
|
return (
|
|
<SetLabelsModal
|
|
provider={props.highlight}
|
|
selectedLabels={labels.labels}
|
|
dispatchLabels={dispatchLabels}
|
|
onOpenChange={onOpenChange}
|
|
/>
|
|
)
|
|
}
|