diff --git a/packages/web/components/templates/article/SetLabelsControl.tsx b/packages/web/components/templates/article/SetLabelsControl.tsx index 75b9507dc..94355c61e 100644 --- a/packages/web/components/templates/article/SetLabelsControl.tsx +++ b/packages/web/components/templates/article/SetLabelsControl.tsx @@ -174,6 +174,9 @@ type FooterProps = { filterText: string selectedLabels: Label[] availableLabels: Label[] + + createEnteredLabel: () => Promise + selectEnteredLabel: () => Promise } function Footer(props: FooterProps): JSX.Element { @@ -233,7 +236,17 @@ function Footer(props: FooterProps): JSX.Element { { + switch (textMatch) { + case 'available': + await props.selectEnteredLabel() + return + case 'none': + await props.createEnteredLabel() + return + } + }} > {textMatch === 'available' && ( <> @@ -273,7 +286,6 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element { const [focusedIndex, setFocusedIndex] = useState(0) useEffect(() => { - console.log('setting focused index: ', inputValue) setFocusedIndex(undefined) }, [inputValue]) @@ -398,6 +410,22 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element { ] ) + const createEnteredLabel = useCallback(() => { + const _filterText = inputValue + setInputValue('') + return createLabelFromFilterText(_filterText) + }, [inputValue]) + + const selectEnteredLabel = useCallback(() => { + const label = labels.find( + (l: Label) => l.name.toLowerCase() == inputValue.toLowerCase() + ) + if (!label) { + return Promise.resolve() + } + return toggleLabel(label) + }, [labels, inputValue]) + return ( )} diff --git a/packages/web/lib/hooks/useSetPageLabels.tsx b/packages/web/lib/hooks/useSetPageLabels.tsx index 41c748720..1205c3e4f 100644 --- a/packages/web/lib/hooks/useSetPageLabels.tsx +++ b/packages/web/lib/hooks/useSetPageLabels.tsx @@ -36,6 +36,7 @@ export const useSetPageLabels = ( action: { type: string labels: Label[] + articleId?: string } ) => { switch (action.type) { @@ -64,6 +65,12 @@ export const useSetPageLabels = ( labels: action.labels, } } + case 'UPDATE_ARTICLE_ID': { + return { + ...state, + articleId: action.articleId, + } + } default: return state } @@ -76,6 +83,15 @@ export const useSetPageLabels = ( ), [] ) + + useEffect(() => { + dispatchLabels({ + type: 'UPDATE_ARTICLE_ID', + labels: [], + articleId: articleId, + }) + }, [articleId]) + const [labels, dispatchLabels] = useReducer(labelsReducer, { labels: [], articleId: articleId, diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx index f544a7e6a..b631f7660 100644 --- a/packages/web/pages/[username]/[slug]/index.tsx +++ b/packages/web/pages/[username]/[slug]/index.tsx @@ -368,7 +368,9 @@ export default function Home(): JSX.Element { [readerSettings, showHighlightsModal] ) - const [labels, dispatchLabels] = useSetPageLabels(article?.id) + const [labels, dispatchLabels] = useSetPageLabels( + articleData?.article.article?.id + ) if (articleFetchError && articleFetchError.indexOf('NOT_FOUND') > -1) { router.push('/404')