Add in calls to bulk action

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

@@ -42,6 +42,8 @@ import { HighlightItemsLayout } from './HighlightsLayout'
 import { LibraryFilterMenu } from './LibraryFilterMenu'
 import { LibraryHeader, MultiSelectMode } from './LibraryHeader'
 import { UploadModal } from '../UploadModal'
+import { BulkAction } from '../../../lib/networking/mutations/bulkActionMutation'
+import { bulkActionMutation } from '../../../lib/networking/mutations/bulkActionMutation'
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
 export type LibraryMode = 'reads' | 'highlights'
@@ -302,13 +304,21 @@ export function HomeFeedContainer(): JSX.Element {
         }
         break
       case 'archive':
-        performActionOnItem('archive', item)
+        if (multiSelectMode !== 'off') {
+          performMultiSelectAction(BulkAction.ARCHIVE)
+        } else {
+          performActionOnItem('archive', item)
+        }
         break
       case 'unarchive':
         performActionOnItem('unarchive', item)
         break
       case 'delete':
-        performActionOnItem('delete', item)
+        if (multiSelectMode !== 'off') {
+          performMultiSelectAction(BulkAction.DELETE)
+        } else {
+          performActionOnItem('delete', item)
+        }
         break
       case 'mark-read':
         performActionOnItem('mark-read', item)
@@ -466,6 +476,9 @@ export function HomeFeedContainer(): JSX.Element {
             setMultiSelectMode('none')
           }
           break
+        case 'endMultiSelect':
+          setMultiSelectMode('off')
+          break
       }
     })
   )
@@ -555,12 +568,11 @@ export function HomeFeedContainer(): JSX.Element {
 
   const setIsChecked = useCallback(
     (itemId: string, set: boolean) => {
-      console.log('setting is checked with list: ', checkedItems)
       if (set && checkedItems.indexOf(itemId) === -1) {
         checkedItems.push(itemId)
         setCheckedItems([...checkedItems])
       } else if (!set && checkedItems.indexOf(itemId) !== -1) {
-        checkedItems.splice(checkedItems.indexOf(itemId))
+        checkedItems.splice(checkedItems.indexOf(itemId), 1)
         setCheckedItems([...checkedItems])
       }
     },
@@ -568,7 +580,6 @@ export function HomeFeedContainer(): JSX.Element {
   )
 
   useEffect(() => {
-    console.log(' -- multiselect mode: ', multiSelectMode)
     switch (multiSelectMode) {
       case 'off':
       case 'none':
@@ -595,6 +606,23 @@ export function HomeFeedContainer(): JSX.Element {
     [checkedItems]
   )
 
+  const performMultiSelectAction = useCallback(
+    (action: BulkAction) => {
+      console.log(
+        'performing bulk action: ',
+        action,
+        'mode',
+        mode,
+        checkedItems
+      )
+      try {
+        // const query = multiSelectMode === 'some' ?
+        // const res = await bulkActionMutation(action, query)
+      } catch (err) {}
+    },
+    [checkedItems]
+  )
+
   return (
     <HomeFeedGrid
       items={libraryItems}
@@ -604,6 +632,7 @@ export function HomeFeedContainer(): JSX.Element {
       itemIsChecked={itemIsChecked}
       multiSelectMode={multiSelectMode}
       setMultiSelectMode={setMultiSelectMode}
+      performMultiSelectAction={performMultiSelectAction}
       searchTerm={queryInputs.searchQuery}
       gridContainerRef={gridContainerRef}
       mode={mode}
@@ -698,6 +727,8 @@ type HomeFeedContentProps = {
   itemIsChecked: (itemId: string) => boolean
   setMultiSelectMode: (mode: MultiSelectMode) => void
   numItemsSelected: number
+
+  performMultiSelectAction: (action: BulkAction) => void
 }
 
 function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
@@ -737,6 +768,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
         setMultiSelectMode={props.setMultiSelectMode}
         numItemsSelected={props.numItemsSelected}
         showAddLinkModal={() => props.setShowAddLinkModal(true)}
+        performMultiSelectAction={props.performMultiSelectAction}
       />
       <HStack css={{ width: '100%', height: '100%' }}>
         <LibraryFilterMenu

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

@@ -28,6 +28,7 @@ import {
 } from '../../../lib/hooks/useScrollWatcher'
 import { CardCheckbox } from '../../patterns/LibraryCards/LibraryCardStyles'
 import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
+import { BulkAction } from '../../../lib/networking/mutations/bulkActionMutation'
 
 export type MultiSelectMode = 'off' | 'none' | 'some' | 'visible' | 'search'
 
@@ -46,6 +47,8 @@ type LibraryHeaderProps = {
   numItemsSelected: number
   multiSelectMode: MultiSelectMode
   setMultiSelectMode: (mode: MultiSelectMode) => void
+
+  performMultiSelectAction: (action: BulkAction) => void
 }
 
 export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
@@ -110,6 +113,7 @@ function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
         multiSelectMode={props.multiSelectMode}
         setMultiSelectMode={props.setMultiSelectMode}
         showAddLinkModal={props.showAddLinkModal}
+        performMultiSelectAction={props.performMultiSelectAction}
       />
     </HStack>
   )
@@ -155,6 +159,7 @@ function SmallHeaderLayout(props: LibraryHeaderProps): JSX.Element {
             multiSelectMode={props.multiSelectMode}
             setMultiSelectMode={props.setMultiSelectMode}
             showAddLinkModal={props.showAddLinkModal}
+            performMultiSelectAction={props.performMultiSelectAction}
           />
         </>
       )}
@@ -364,6 +369,8 @@ type ControlButtonBoxProps = {
   numItemsSelected: number
   multiSelectMode: MultiSelectMode
   setMultiSelectMode: (mode: MultiSelectMode) => void
+
+  performMultiSelectAction: (action: BulkAction) => void
 }
 
 function MultiSelectControlButtonBox(
@@ -379,12 +386,10 @@ function MultiSelectControlButtonBox(
     <HStack alignment="center" distribution="center" css={{ gap: '20px' }}>
       <Button
         style="outline"
-        // onClick={(e) => {
-        //   props.updateLayout(
-        //     props.layout == 'GRID_LAYOUT' ? 'LIST_LAYOUT' : 'GRID_LAYOUT'
-        //   )
-        //   e.preventDefault()
-        // }}
+        onClick={(e) => {
+          props.performMultiSelectAction(BulkAction.ARCHIVE)
+          e.preventDefault()
+        }}
       >
         <ArchiveBox
           width={20}
@@ -411,12 +416,10 @@ function MultiSelectControlButtonBox(
       </Button>
       <Button
         style="outline"
-        // onClick={(e) => {
-        //   props.updateLayout(
-        //     props.layout == 'GRID_LAYOUT' ? 'LIST_LAYOUT' : 'GRID_LAYOUT'
-        //   )
-        //   e.preventDefault()
-        // }}
+        onClick={(e) => {
+          props.performMultiSelectAction(BulkAction.DELETE)
+          e.preventDefault()
+        }}
       >
         <TrashSimple
           width={20}

packages/web/lib/keyboardShortcuts/navigationShortcuts.ts

@@ -90,6 +90,7 @@ type LibraryListKeyboardAction =
   | 'showAddLinkModal'
   | 'showEditLabelsModal'
   | 'beginMultiSelect'
+  | 'endMultiSelect'
 
 export function libraryListCommands(
   actionHandler: (action: LibraryListKeyboardAction) => void
@@ -139,6 +140,12 @@ export function libraryListCommands(
       shortcutKeyDescription: 'm then s',
       callback: () => actionHandler('beginMultiSelect'),
     },
+    {
+      shortcutKeys: ['escape'],
+      actionDescription: 'End multi select',
+      shortcutKeyDescription: 'Escape',
+      callback: () => actionHandler('endMultiSelect'),
+    },
     // {
     //   shortcutKeys: ['e'],
     //   actionDescription: 'Archive item',