diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index a709bbc8c..384259e03 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/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 ( 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} /> 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} /> ) @@ -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(