Update labels to use react-query

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

@@ -8,13 +8,15 @@ import {
   ModalTitleBar,
 } from '../../elements/ModalPrimitives'
 import { SetLabelsControl } from './SetLabelsControl'
-import { createLabelMutation } from '../../../lib/networking/mutations/createLabelMutation'
 import { showSuccessToast } from '../../../lib/toastHelpers'
-import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
 import { v4 as uuidv4 } from 'uuid'
 import { randomLabelColorHex } from '../../../utils/settings-page/labels/labelColorObjects'
 import { LabelAction } from '../../../lib/hooks/useSetPageLabels'
 import { Button } from '../../elements/Button'
+import {
+  useCreateLabel,
+  useGetLabels,
+} from '../../../lib/networking/labels/useLabels'
 
 type AddBulkLabelsModalProps = {
   onOpenChange: (open: boolean) => void
@@ -24,12 +26,14 @@ type AddBulkLabelsModalProps = {
 export function AddBulkLabelsModal(
   props: AddBulkLabelsModalProps
 ): JSX.Element {
-  const availableLabels = useGetLabelsQuery()
+  const { data: availableLabels } = useGetLabels()
+  const createLabel = useCreateLabel()
   const [tabCount, setTabCount] = useState(-1)
   const [inputValue, setInputValue] = useState('')
   const [tabStartValue, setTabStartValue] = useState('')
-  const [errorMessage, setErrorMessage] =
-    useState<string | undefined>(undefined)
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(
+    undefined
+  )
   const errorTimeoutRef = useRef<NodeJS.Timeout | undefined>()
   const [highlightLastLabel, setHighlightLastLabel] = useState(false)
   const [isSaving, setIsSaving] = useState(false)
@@ -97,10 +101,11 @@ export function AddBulkLabelsModal(
     (newLabels: Label[], tempLabel: Label) => {
       ;(async () => {
         const currentLabels = newLabels
-        const newLabel = await createLabelMutation(
-          tempLabel.name,
-          tempLabel.color
-        )
+        const newLabel = await createLabel.mutateAsync({
+          name: tempLabel.name,
+          color: tempLabel.color,
+          description: undefined,
+        })
         const idx = currentLabels.findIndex((l) => l.id === tempLabel.id)
         if (newLabel) {
           showSuccessToast(`Created label ${newLabel.name}`, {
@@ -132,7 +137,7 @@ export function AddBulkLabelsModal(
       const trimmedValue = value.trim()
       const current = selectedLabels.labels ?? []
       const lowerCasedValue = trimmedValue.toLowerCase()
-      const existing = availableLabels.labels.find(
+      const existing = availableLabels?.find(
         (l) => l.name.toLowerCase() == lowerCasedValue
       )
 

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

@@ -4,14 +4,16 @@ import { Button } from '../../elements/Button'
 import { StyledText } from '../../elements/StyledText'
 import { styled, theme } from '../../tokens/stitches.config'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
-import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
 import { Check, Circle, Plus, WarningCircle } from '@phosphor-icons/react'
-import { createLabelMutation } from '../../../lib/networking/mutations/createLabelMutation'
 import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 import { randomLabelColorHex } from '../../../utils/settings-page/labels/labelColorObjects'
 import { useRouter } from 'next/router'
 import { LabelsPicker } from '../../elements/LabelsPicker'
 import { LabelsDispatcher } from '../../../lib/hooks/useSetPageLabels'
+import {
+  useCreateLabel,
+  useGetLabels,
+} from '../../../lib/networking/labels/useLabels'
 
 export interface LabelsProvider {
   labels?: Label[]
@@ -282,10 +284,10 @@ function Footer(props: FooterProps): JSX.Element {
 }
 
 export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
-  const router = useRouter()
   const { inputValue, setInputValue, selectedLabels, setHighlightLastLabel } =
     props
-  const { labels, revalidate } = useGetLabelsQuery()
+  const { data: labels } = useGetLabels()
+  const createLabel = useCreateLabel()
   // Move focus through the labels list on tab or arrow up/down keys
   const [focusedIndex, setFocusedIndex] = useState<number | undefined>(0)
 
@@ -321,9 +323,8 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
       props.dispatchLabels({ type: 'SAVE', labels: newSelectedLabels })
 
       props.clearInputState()
-      revalidate()
     },
-    [isSelected, props, revalidate]
+    [isSelected, props]
   )
 
   const filteredLabels = useMemo(() => {
@@ -342,11 +343,11 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
   const createLabelFromFilterText = useCallback(
     async (text: string) => {
       const trimmedLabelName = text.trim()
-      const label = await createLabelMutation(
-        trimmedLabelName,
-        randomLabelColorHex(),
-        ''
-      )
+      const label = await createLabel.mutateAsync({
+        name: trimmedLabelName,
+        color: randomLabelColorHex(),
+        description: undefined,
+      })
       if (label) {
         showSuccessToast(`Created label ${label.name}`, {
           position: 'bottom-right',
@@ -425,7 +426,7 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
   }, [inputValue, setInputValue, createLabelFromFilterText])
 
   const selectEnteredLabel = useCallback(() => {
-    const label = labels.find(
+    const label = labels?.find(
       (l: Label) => l.name.toLowerCase() == inputValue.toLowerCase()
     )
     if (!label) {
@@ -509,7 +510,7 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
         <Footer
           filterText={inputValue}
           selectedLabels={props.selectedLabels}
-          availableLabels={labels}
+          availableLabels={labels ?? []}
           focused={focusedIndex === filteredLabels.length + 1}
           createEnteredLabel={createEnteredLabel}
           selectEnteredLabel={selectEnteredLabel}

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

@@ -8,13 +8,15 @@ import {
   ModalTitleBar,
 } from '../../elements/ModalPrimitives'
 import { LabelsProvider, SetLabelsControl } from './SetLabelsControl'
-import { createLabelMutation } from '../../../lib/networking/mutations/createLabelMutation'
 import { showSuccessToast } from '../../../lib/toastHelpers'
-import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
 import { v4 as uuidv4 } from 'uuid'
 import { randomLabelColorHex } from '../../../utils/settings-page/labels/labelColorObjects'
 import { LabelsDispatcher } from '../../../lib/hooks/useSetPageLabels'
 import * as Dialog from '@radix-ui/react-dialog'
+import {
+  useCreateLabel,
+  useGetLabels,
+} from '../../../lib/networking/labels/useLabels'
 
 type SetLabelsModalProps = {
   provider: LabelsProvider
@@ -28,7 +30,7 @@ type SetLabelsModalProps = {
 export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
   const [inputValue, setInputValue] = useState('')
   const { selectedLabels, dispatchLabels } = props
-  const availableLabels = useGetLabelsQuery()
+  const { data: availableLabels } = useGetLabels()
   const [tabCount, setTabCount] = useState(-1)
   const [tabStartValue, setTabStartValue] = useState('')
   const [errorMessage, setErrorMessage] = useState<string | undefined>(
@@ -37,6 +39,8 @@ export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
   const errorTimeoutRef = useRef<NodeJS.Timeout | undefined>()
   const [highlightLastLabel, setHighlightLastLabel] = useState(false)
 
+  const createLabel = useCreateLabel()
+
   const showMessage = useCallback(
     (msg: string, timeout?: number) => {
       if (errorTimeoutRef.current) {
@@ -82,10 +86,11 @@ export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
     (newLabels: Label[], tempLabel: Label) => {
       ;(async () => {
         const currentLabels = newLabels
-        const newLabel = await createLabelMutation(
-          tempLabel.name,
-          tempLabel.color
-        )
+        const newLabel = await createLabel.mutateAsync({
+          name: tempLabel.name,
+          color: tempLabel.color,
+          description: undefined,
+        })
         const idx = currentLabels.findIndex((l) => l.id === tempLabel.id)
         if (newLabel) {
           showSuccessToast(`Created label ${newLabel.name}`, {
@@ -116,7 +121,7 @@ export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
     (value: string) => {
       const current = selectedLabels ?? []
       const lowerCasedValue = value.toLowerCase()
-      const existing = availableLabels.labels.find(
+      const existing = availableLabels?.find(
         (l) => l.name.toLowerCase() == lowerCasedValue
       )