Move bulk action to react-query

packages/web/components/templates/homeFeed/HomeFeedContainer.tsx

@@ -1,7 +1,7 @@
 import type { LibraryItem } from '../../../lib/networking/library_items/useLibraryItems'
 import { LinkedItemCardAction } from '../../patterns/LibraryCards/CardTypes'
 import { MultiSelectMode } from './LibraryHeader'
-import { BulkAction } from '../../../lib/networking/mutations/bulkActionMutation'
+import { BulkAction } from '../../../lib/networking/library_items/useLibraryItems'
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
 export type LibraryMode = 'reads' | 'highlights' | 'tldr'

packages/web/components/templates/homeFeed/LibraryHeader.tsx

@@ -10,7 +10,7 @@ import { LayoutType, LibraryMode } from './HomeFeedContainer'
 import { OmnivoreSmallLogo } from '../../elements/images/OmnivoreNameLogo'
 import { DEFAULT_HEADER_HEIGHT, HeaderSpacer } from './HeaderSpacer'
 import { LIBRARY_LEFT_MENU_WIDTH } from '../navMenu/LibraryMenu'
-import { BulkAction } from '../../../lib/networking/mutations/bulkActionMutation'
+import { BulkAction } from '../../../lib/networking/library_items/useLibraryItems'
 import { HeaderToggleGridIcon } from '../../elements/icons/HeaderToggleGridIcon'
 import { HeaderToggleListIcon } from '../../elements/icons/HeaderToggleListIcon'
 import { HeaderToggleTLDRIcon } from '../../elements/icons/HeaderToggleTLDRIcon'

packages/web/components/templates/homeFeed/MultiSelectControls.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { theme } from '../../tokens/stitches.config'
 import { Box, HStack, SpanBox } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
-import { BulkAction } from '../../../lib/networking/mutations/bulkActionMutation'
+import { BulkAction } from '../../../lib/networking/library_items/useLibraryItems'
 import { ArchiveIcon } from '../../elements/icons/ArchiveIcon'
 import { LabelIcon } from '../../elements/icons/LabelIcon'
 import { TrashIcon } from '../../elements/icons/TrashIcon'
@@ -116,7 +116,7 @@ export const MultiSelectControls = (props: MultiSelectProps): JSX.Element => {
           <SpanBox
             css={{
               display: 'none',
-              fontSize: '14px',
+              fontSize: '11px',
               fontFamily: '$display',
               marginRight: 'auto',
               '@mdDown': {

packages/web/components/templates/library/LibraryContainer.tsx

@@ -19,6 +19,7 @@ import {
   LibraryItems,
   LibraryItemsQueryInput,
   useArchiveItem,
+  useBulkActions,
   useDeleteItem,
   useGetLibraryItems,
   useMoveItemToFolder,
@@ -39,8 +40,7 @@ import { EditLibraryItemModal } from '../homeFeed/EditItemModals'
 import { EmptyLibrary } from '../homeFeed/EmptyLibrary'
 import { MultiSelectMode } from '../homeFeed/LibraryHeader'
 import { UploadModal } from '../UploadModal'
-import { BulkAction } from '../../../lib/networking/mutations/bulkActionMutation'
-import { bulkActionMutation } from '../../../lib/networking/mutations/bulkActionMutation'
+import { BulkAction } from '../../../lib/networking/library_items/useLibraryItems'
 import {
   showErrorToast,
   showSuccessToast,
@@ -117,6 +117,7 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
   const archiveItem = useArchiveItem()
   const deleteItem = useDeleteItem()
   const moveToFolder = useMoveItemToFolder()
+  const bulkAction = useBulkActions()
   const updateItemReadStatus = useUpdateItemReadStatus()
 
   const [queryInputs, setQueryInputs] =
@@ -801,12 +802,12 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
         const expectedCount = checkedItems.length
 
         try {
-          const res = await bulkActionMutation(
+          const res = await bulkAction.mutateAsync({
             action,
             query,
             expectedCount,
-            labelIds
-          )
+            labelIds,
+          })
           if (res) {
             let successMessage: string | undefined = undefined
             switch (action) {

packages/web/components/templates/library/LibraryHeader.tsx

@@ -9,7 +9,7 @@ import { FunnelSimple, X } from '@phosphor-icons/react'
 import { LayoutType } from '../homeFeed/HomeFeedContainer'
 import { OmnivoreSmallLogo } from '../../elements/images/OmnivoreNameLogo'
 import { LIBRARY_LEFT_MENU_WIDTH } from '../navMenu/LibraryMenu'
-import { BulkAction } from '../../../lib/networking/mutations/bulkActionMutation'
+import { BulkAction } from '../../../lib/networking/library_items/useLibraryItems'
 import { HeaderToggleGridIcon } from '../../elements/icons/HeaderToggleGridIcon'
 import { HeaderToggleListIcon } from '../../elements/icons/HeaderToggleListIcon'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'

packages/web/components/templates/library/LibrarySideBar.tsx

@@ -1,56 +1,4 @@
-import { Action, createAction, useKBar, useRegisterActions } from 'kbar'
-import debounce from 'lodash/debounce'
-import { useRouter } from 'next/router'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Toaster } from 'react-hot-toast'
-import TopBarProgress from 'react-topbar-progress-indicator'
-import { useFetchMore } from '../../../lib/hooks/useFetchMoreScroll'
-import { usePersistedState } from '../../../lib/hooks/usePersistedState'
-import { libraryListCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
-import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
-import {
-  PageType,
-  State,
-} from '../../../lib/networking/fragments/articleFragment'
-import {
-  SearchItem,
-  TypeaheadSearchItemsData,
-  typeaheadSearchQuery,
-} from '../../../lib/networking/queries/typeaheadSearch'
-import type {
-  LibraryItem,
-  LibraryItemsQueryInput,
-} from '../../../lib/networking/library_items/useLibraryItems'
-import {
-  useGetViewerQuery,
-  UserBasicData,
-} from '../../../lib/networking/queries/useGetViewerQuery'
-import { Button } from '../../elements/Button'
-import { StyledText } from '../../elements/StyledText'
-import { ConfirmationModal } from '../../patterns/ConfirmationModal'
-import { LinkedItemCardAction } from '../../patterns/LibraryCards/CardTypes'
-import { LinkedItemCard } from '../../patterns/LibraryCards/LinkedItemCard'
-import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
-import { AddLinkModal } from '../AddLinkModal'
-import { EditLibraryItemModal } from '../homeFeed/EditItemModals'
-import { EmptyLibrary } from '../homeFeed/EmptyLibrary'
-import { LegacyLibraryHeader, MultiSelectMode } from '../homeFeed/LibraryHeader'
-import { UploadModal } from '../UploadModal'
-import { BulkAction } from '../../../lib/networking/mutations/bulkActionMutation'
-import { bulkActionMutation } from '../../../lib/networking/mutations/bulkActionMutation'
-import {
-  showErrorToast,
-  showSuccessToast,
-  showSuccessToastWithAction,
-} from '../../../lib/toastHelpers'
-import { SetPageLabelsModalPresenter } from '../article/SetLabelsModalPresenter'
-import { NotebookPresenter } from '../article/NotebookPresenter'
-import { saveUrlMutation } from '../../../lib/networking/mutations/saveUrlMutation'
-import { articleQuery } from '../../../lib/networking/queries/useGetArticleQuery'
-import { PinnedButtons } from '../homeFeed/PinnedButtons'
-import { PinnedSearch } from '../../../pages/settings/pinned-searches'
-import { FetchItemsError } from '../homeFeed/FetchItemsError'
-import { LibraryHeader } from './LibraryHeader'
+import { VStack } from '../../elements/LayoutPrimitives'
 
 type LibrarySideBarProps = {
   text: string