applications/drive/src/app/components/sections/Search/SearchView.tsx

   1 import { useEffect } from 'react';
   2 import { useLocation } from 'react-router';
   3
   4 import { c, msgid } from 'ttag';
   5
   6 import { SHARE_MEMBER_PERMISSIONS } from '@proton/shared/lib/drive/permissions';
   7
   8 // TODO: handle with container
   9 import { useActiveShare } from '../../../hooks/drive/useActiveShare';
  10 import { useSearchView } from '../../../store';
  11 import { extractSearchParameters } from '../../../store/_search/utils';
  12 import { FileBrowserStateProvider } from '../../FileBrowser';
  13 import DriveToolbar from '../Drive/DriveToolbar';
  14 import ToolbarRow from '../ToolbarRow/ToolbarRow';
  15 import { Search } from './Search';
  16
  17 export function SearchView() {
  18     const { activeFolder, setDefaultRoot } = useActiveShare();
  19     useEffect(setDefaultRoot, []);
  20
  21     const location = useLocation();
  22     const query = extractSearchParameters(location);
  23
  24     const searchView = useSearchView(activeFolder.shareId, query);
  25
  26     return (
  27         <FileBrowserStateProvider itemIds={searchView.items.map(({ linkId }) => linkId)}>
  28             <ToolbarRow
  29                 titleArea={
  30                     <span className="text-strong pl-1">
  31                         {searchView.isLoading
  32                             ? c('Title').t`Searching…`
  33                             : c('Title').ngettext(
  34                                   msgid`Found ${searchView.numberOfResults} result`,
  35                                   `Found ${searchView.numberOfResults} results`,
  36                                   searchView.numberOfResults
  37                               )}
  38                     </span>
  39                 }
  40                 toolbar={
  41                     <DriveToolbar
  42                         //TODO: We don't support search view and direct sharing so we assume that user is owner.
  43                         permissions={SHARE_MEMBER_PERMISSIONS.OWNER}
  44                         shareId={activeFolder.shareId}
  45                         linkId={activeFolder.linkId}
  46                         items={searchView.items}
  47                         showOptionsForNoSelection={false}
  48                     />
  49                 }
  50             />
  51             <Search shareId={activeFolder.shareId} searchView={searchView} />
  52         </FileBrowserStateProvider>
  53     );
  54 }