Function MultiSelectBar

src/components/MultiSelectBar/MultiSelectBar.tsx:26–205

()

import { useFolders } from "../../hooks/folders";

const MultiSelectBar: React.FC = () => {
  const dispatch = useAppDispatch();
  // const ignoreFirstMount = useRef(true);
  const multiSelectMode = useAppSelector(
    (state) => state.selected.multiSelectMode
  );
  const multiSelectMap = useAppSelector(
    (state) => state.selected.multiSelectMap
  );
  const multiSelectCount = useAppSelector(
    (state) => state.selected.multiSelectCount
  );
  const { refetch: refetchFiles } = useFiles(false);
  const { refetch: refetchFolders } = useFolders(false);
  const { refetch: refetchQuickFiles } = useQuickFiles(false);

  const { isTrash, isMedia } = useUtils();

  const location = useLocation();

  // useEffect(() => {
  //   if (ignoreFirstMount.current) {
  //     ignoreFirstMount.current = false;
  //   } else {
  //     closeMultiSelect();
  //   }
  // }, [isTrash]);

  const closeMultiSelect = useCallback(() => {
    dispatch(resetMultiSelect());
  }, []);

  useEffect(() => {
    closeMultiSelect();
  }, [location.pathname, closeMultiSelect]);

  const handleKeyDown = useCallback(
    (e: KeyboardEvent) => {
      if (e.key === "Escape" || e.key === "Esc") {
        closeMultiSelect();
      }
    },
    [closeMultiSelect]
  );

  useEffect(() => {
    document.addEventListener("keydown", handleKeyDown);

    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

  const trashItems = async () => {
    try {
      const result = await trashItemsPopup();
      if (!result) return;