packages/pass/components/Bulk/BulkSelectProvider.tsx

   1 import { type FC, type PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
   2 import { useSelector } from 'react-redux';
   3
   4 import { selectBulkSelectionAliasCount } from '@proton/pass/store/selectors';
   5 import type { BulkSelectionDTO, SelectedItem } from '@proton/pass/types';
   6 import { pipe } from '@proton/pass/utils/fp/pipe';
   7 import noop from '@proton/utils/noop';
   8
   9 export type BulkSelection = Map<string, Set<string>>;
  10
  11 type BulkSelectContextType = {
  12     aliasCount: number;
  13     count: number;
  14     enabled: boolean;
  15     selection: BulkSelection;
  16     clear: () => void;
  17     disable: () => void;
  18     enable: () => void;
  19     isSelected: (item: { shareId: string; itemId: string }) => boolean;
  20     select: (item: SelectedItem) => void;
  21     unselect: (item: SelectedItem) => void;
  22 };
  23
  24 const BulkSelectContext = createContext<BulkSelectContextType>({
  25     aliasCount: 0,
  26     count: 0,
  27     enabled: false,
  28     selection: new Map(),
  29     clear: noop,
  30     disable: noop,
  31     enable: noop,
  32     isSelected: () => false,
  33     select: noop,
  34     unselect: noop,
  35 });
  36
  37 export const bulkSelectionDTO = (selection: BulkSelection): BulkSelectionDTO =>
  38     Array.from(selection.keys()).reduce<BulkSelectionDTO>((dto, shareId) => {
  39         dto[shareId] = {};
  40         selection.get(shareId)?.forEach((itemId) => {
  41             dto[shareId][itemId] = true;
  42         });
  43
  44         return dto;
  45     }, {});
  46
  47 export const BulkSelectProvider: FC<PropsWithChildren> = ({ children }) => {
  48     const [selection, setSelection] = useState<BulkSelection>(new Map());
  49     const [enabled, setEnabled] = useState(false);
  50     const aliasCount = useSelector(selectBulkSelectionAliasCount(bulkSelectionDTO(selection)));
  51
  52     const context = useMemo<BulkSelectContextType>(() => {
  53         const clear = () => setSelection(new Map());
  54
  55         return {
  56             aliasCount,
  57             count: Array.from(selection.values()).reduce((count, { size }) => count + size, 0),
  58             enabled,
  59             selection,
  60             clear,
  61
  62             enable: () => setEnabled(true),
  63             disable: pipe(() => setEnabled(false), clear),
  64
  65             isSelected: ({ shareId, itemId }) => selection.get(shareId)?.has(itemId) ?? false,
  66
  67             select: ({ shareId, itemId }) =>
  68                 setSelection((curr) => {
  69                     const shareSet = curr.get(shareId) ?? new Set();
  70                     shareSet.add(itemId);
  71                     return new Map(curr.set(shareId, shareSet));
  72                 }),
  73
  74             unselect: ({ shareId, itemId }) =>
  75                 setSelection((curr) => {
  76                     curr.get(shareId)?.delete(itemId);
  77                     return new Map(curr);
  78                 }),
  79         };
  80     }, [selection, enabled, aliasCount]);
  81
  82     return <BulkSelectContext.Provider value={context}>{children}</BulkSelectContext.Provider>;
  83 };
  84
  85 export const useBulkSelect = (): BulkSelectContextType => useContext(BulkSelectContext);