diff --git a/packages/web/components/templates/article/EditLabelsControl.tsx b/packages/web/components/templates/article/EditLabelsControl.tsx index edb5ea129..f0b403c7e 100644 --- a/packages/web/components/templates/article/EditLabelsControl.tsx +++ b/packages/web/components/templates/article/EditLabelsControl.tsx @@ -183,9 +183,13 @@ function EditLabelsButtonFooter(props: EditLabelsButtonFooterProps): JSX.Element export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element { const router = useRouter() const [filterText, setFilterText] = useState('') - const { labels } = useGetLabelsQuery() + const { labels, revalidate } = useGetLabelsQuery() const [selectedLabels, setSelectedLabels] = useState(props.article.labels || []) + useEffect(() => { + setFocusedIndex(undefined) + }, [filterText]) + const isSelected = useCallback((label: Label): boolean => { return selectedLabels.some((other) => { return other.id === label.id @@ -207,8 +211,11 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element { props.article.linkId, newSelectedLabels.map((label) => label.id) ) + props.article.labels = result props.articleActionHandler('refreshLabels', result) + + revalidate() }, [isSelected, selectedLabels, setSelectedLabels]) const filteredLabels = useMemo(() => { @@ -220,13 +227,9 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element { }) }, [labels, filterText]) - useEffect(() => { - setFocusedIndex(undefined) - }, [filterText]) - // Move focus through the labels list on tab or arrow up/down keys const [focusedIndex, setFocusedIndex] = useState(undefined) - const handleKeyDown = useCallback((event: React.KeyboardEvent) => { + const handleKeyDown = useCallback(async (event: React.KeyboardEvent) => { const maxIndex = filteredLabels.length + 1 if (event.key === 'ArrowUp') { event.preventDefault() @@ -264,6 +267,10 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element { router.push('/settings/labels') return } + if (focusedIndex === maxIndex - 1) { + await createLabelFromFilterText() + return + } if (focusedIndex !== undefined) { const label = filteredLabels[focusedIndex] if (label) { @@ -271,7 +278,17 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element { } } } - }, [filteredLabels, focusedIndex, isSelected, selectedLabels, setSelectedLabels]) + }, [filterText, filteredLabels, focusedIndex, isSelected, selectedLabels, setSelectedLabels]) + + const createLabelFromFilterText = useCallback(async () => { + const label = await createLabelMutation(filterText, randomLabelColorHex(), '') + if (label) { + showSuccessToast(`Created label ${label.name}`, { position: 'bottom-right' }) + toggleLabel(label) + } else { + showErrorToast('Failed to create label', { position: 'bottom-right' }) + } + }, [filterText, selectedLabels, setSelectedLabels, toggleLabel]) return ( { - const label = await createLabelMutation(filterText, randomLabelColorHex(), '') - if (label) { - showSuccessToast(`Created label ${label.name}`, { position: 'bottom-right' }) - toggleLabel(label) - } else { - showErrorToast('Failed to create label', { position: 'bottom-right' }) - } - }} + onClick={createLabelFromFilterText} >