packages/drive-store/components/FileBrowser/ListView/Cells/LocationCell.tsx

   1 import { useEffect, useRef, useState } from 'react';
   2
   3 import { Icon } from '@proton/components';
   4
   5 import { useLinkPath } from '../../../../store';
   6
   7 interface Props {
   8     shareId: string;
   9     parentLinkId: string;
  10     isTrashed?: boolean;
  11 }
  12
  13 export const LocationCell = ({ shareId, parentLinkId, isTrashed }: Props) => {
  14     const [location, setLocation] = useState<string>();
  15     const { getPath } = useLinkPath();
  16
  17     const abortController = useRef(new AbortController());
  18     const previousParentLinkId = useRef(parentLinkId);
  19
  20     useEffect(() => {
  21         void getPath(abortController.current.signal, shareId, parentLinkId).then(setLocation);
  22
  23         return () => {
  24             // Abort only when parent ID changes which means the whole location
  25             // changed and is not needed anymore. All other cases we just want
  26             // to update location based on the latest cache state.
  27             if (previousParentLinkId.current !== parentLinkId) {
  28                 abortController.current.abort();
  29                 abortController.current = new AbortController();
  30                 previousParentLinkId.current = parentLinkId;
  31             }
  32         };
  33     }, [getPath, shareId, parentLinkId]);
  34
  35     return (
  36         <div key="location" title={location} className="text-ellipsis">
  37             <span className="text-pre">
  38                 {isTrashed && <Icon name="trash" className="mr-1" />}
  39                 {location}
  40             </span>
  41         </div>
  42     );
  43 };