Make sure articleId is updated when setting labels

packages/web/components/templates/article/SetLabelsControl.tsx

@@ -174,6 +174,9 @@ type FooterProps = {
   filterText: string
   selectedLabels: Label[]
   availableLabels: Label[]
+
+  createEnteredLabel: () => Promise<void>
+  selectEnteredLabel: () => Promise<void>
 }
 
 function Footer(props: FooterProps): JSX.Element {
@@ -233,7 +236,17 @@ function Footer(props: FooterProps): JSX.Element {
           <HStack
             alignment="center"
             distribution="start"
-            css={{ gap: '8px', fontSize: '12px' }}
+            css={{ gap: '8px', fontSize: '12px', pointer: 'cursor' }}
+            onClick={async (event) => {
+              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<number | undefined>(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 (
     <VStack
       distribution="start"
@@ -475,6 +503,8 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
           selectedLabels={props.selectedLabels}
           availableLabels={labels}
           focused={focusedIndex === filteredLabels.length + 1}
+          createEnteredLabel={createEnteredLabel}
+          selectEnteredLabel={selectEnteredLabel}
         />
       )}
     </VStack>

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,

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')