useFileList.jsx

import { BiRename, BiSelectMultiple, BiQuestionMark } from "react-icons/bi";
import { BsCopy, BsFolderPlus, BsGrid, BsScissors } from "react-icons/bs";
import { FaListUl, FaRegFile, FaRegPaste } from "react-icons/fa6";
import { FiRefreshCw } from "react-icons/fi";
import { MdOutlineDelete, MdOutlineFileDownload, MdOutlineFileUpload } from "react-icons/md";
import { PiFolderOpen } from "react-icons/pi";
import { useClipBoard } from "../../contexts/ClipboardContext";
import { useEffect, useState } from "react";
import { useSelection } from "../../contexts/SelectionContext";
import { useLayout } from "../../contexts/LayoutContext";
import { useFileNavigation } from "../../contexts/FileNavigationContext";
import { duplicateNameHandler } from "../../utils/duplicateNameHandler";
import { validateApiCallback } from "../../utils/validateApiCallback";
import { useTranslation } from "../../contexts/TranslationProvider";

const useFileList = (onRefresh, enableFilePreview, triggerAction, permissions, onFileOpen) => {
  const [selectedFileIndexes, setSelectedFileIndexes] = useState([]);
  const [visible, setVisible] = useState(false);
  const [isSelectionCtx, setIsSelectionCtx] = useState(false);
  const [clickPosition, setClickPosition] = useState({ clickX: 0, clickY: 0 });
  const [lastSelectedFile, setLastSelectedFile] = useState(null);

  const { clipBoard, setClipBoard, handleCutCopy, handlePasting } = useClipBoard();
  const { selectedFiles, setSelectedFiles, handleDownload } = useSelection();
  const { currentPath, setCurrentPath, currentPathFiles, setCurrentPathFiles, onFolderChange } =
    useFileNavigation();
  const { activeLayout, setActiveLayout } = useLayout();
  const t = useTranslation();

  // Context Menu
  const handleFileOpen = () => {
    onFileOpen(lastSelectedFile);
    if (lastSelectedFile.isDirectory) {
      setCurrentPath(lastSelectedFile.path);
      onFolderChange?.(lastSelectedFile.path);
      setSelectedFileIndexes([]);
      setSelectedFiles([]);
    } else {
      enableFilePreview && triggerAction.show("previewFile");
    }
    setVisible(false);
  };

  const handleMoveOrCopyItems = (isMoving) => {
    handleCutCopy(isMoving);
    setVisible(false);
  };

  const handleFilePasting = () => {
    handlePasting(lastSelectedFile);
    setVisible(false);
  };

  const handleRenaming = () => {
    setVisible(false);
    triggerAction.show("rename");
  };

  const handleDownloadItems = () => {
    handleDownload();
    setVisible(false);
  };

  const handleDelete = () => {
    setVisible(false);
    triggerAction.show("delete");
  };

  const handleRefresh = () => {
    setVisible(false);
    validateApiCallback(onRefresh, "onRefresh");
    setClipBoard(null);
  };

  const handleCreateNewFolder = () => {
    triggerAction.show("createFolder");
    setVisible(false);
  };

  const handleUpload = () => {
    setVisible(false);
    triggerAction.show("uploadFile");
  };

  const handleselectAllFiles = () => {
    setSelectedFiles(currentPathFiles);
    setVisible(false);
  };

  const emptySelecCtxItems = [
    {
      title: t("view"),
      icon: activeLayout === "grid" ? <BsGrid size={18} /> : <FaListUl size={18} />,
      onClick: () => {},
      children: [
        {
          title: t("grid"),
          icon: <BsGrid size={18} />,
          selected: activeLayout === "grid",
          onClick: () => {
            setActiveLayout("grid");
            setVisible(false);
          },
        },
        {
          title: t("list"),
          icon: <FaListUl size={18} />,
          selected: activeLayout === "list",
          onClick: () => {
            setActiveLayout("list");
            setVisible(false);
          },
        },
      ],
    },
    {
      title: t("refresh"),
      icon: <FiRefreshCw size={18} />,
      onClick: handleRefresh,
      divider: true,
    },
    {
      title: t("newFolder"),
      icon: <BsFolderPlus size={18} />,
      onClick: handleCreateNewFolder,
      hidden: !permissions.create,
      divider: !permissions.upload,
    },
    {
      title: t("upload"),
      icon: <MdOutlineFileUpload size={18} />,
      onClick: handleUpload,
      divider: true,
      hidden: !permissions.upload,
    },
    {
      title: t("selectAll"),
      icon: <BiSelectMultiple size={18} />,
      onClick: handleselectAllFiles,
    },
  ];

  let customButtons = [];

  if(lastSelectedFile?.customActions) {
    // Handle custom actions, that are tagged 'inContextMenu'
    customButtons = lastSelectedFile.customActions.filter(x => x.inContextMenu).map(customButton => {
      let hidden = (selectedFiles.length == 1) ? false : true;
      if(selectedFiles.length > 1 && customButton.enableMultiItems) {
        // Display button only if all the selected items have the same button
        hidden = !selectedFiles.every(x=>x.customActions && x.customActions.includes(customButton))
      }
      return {
        title: customButton.title ?? "??",
        icon: customButton.icon ? customButton.icon : <BiQuestionMark />,
        hidden,
        onClick: () => {
          if(customButton.onClick) {
            // Send selected files as argument, to make it work the same for multi and single selection 
            customButton.onClick(selectedFiles); 
          } else {
            console.warn("no onClick specified for this custom button");
          }
          setVisible(customButton.hideContextMenuOnClick === undefined ? false : !customButton.hideContextMenuOnClick);
        },
        divider: customButton.divider ? customButton.divider : false,
      };
    })
  }

  const selecCtxItems = customButtons.concat([
      {
        title: t("open"),
        icon: lastSelectedFile?.isDirectory ? <PiFolderOpen size={20} /> : <FaRegFile size={16} />,
        onClick: handleFileOpen,
        divider: true,
      },
      {
        title: t("cut"),
        icon: <BsScissors size={19} />,
        onClick: () => handleMoveOrCopyItems(true),
        divider: !lastSelectedFile?.isDirectory && !permissions.copy,
        hidden: !permissions.move,
      },
      {
        title: t("copy"),
        icon: <BsCopy strokeWidth={0.1} size={17} />,
        onClick: () => handleMoveOrCopyItems(false),
        divider: !lastSelectedFile?.isDirectory,
        hidden: !permissions.copy,
      },
      {
        title: t("paste"),
        icon: <FaRegPaste size={18} />,
        onClick: handleFilePasting,
        className: `${clipBoard ? "" : "disable-paste"}`,
        hidden: !lastSelectedFile?.isDirectory || (!permissions.move && !permissions.copy),
        divider: true,
      },
      {
        title: t("rename"),
        icon: <BiRename size={19} />,
        onClick: handleRenaming,
        hidden: selectedFiles.length > 1 || !permissions.rename,
      },
      {
        title: t("download"),
        icon: <MdOutlineFileDownload size={18} />,
        onClick: handleDownloadItems,
        hidden: !permissions.download,
      },
      {
        title: t("delete"),
        icon: <MdOutlineDelete size={19} />,
        onClick: handleDelete,
        hidden: !permissions.delete,
      },
    ]);
  //

  const handleFolderCreating = () => {
    setCurrentPathFiles((prev) => {
      return [
        ...prev,
        {
          name: duplicateNameHandler("New Folder", true, prev),
          isDirectory: true,
          path: currentPath,
          isEditing: true,
          key: new Date().valueOf(),
        },
      ];
    });
  };

  const handleItemRenaming = () => {
    setCurrentPathFiles((prev) => {
      const lastFileIndex = selectedFileIndexes.at(-1);

      if (!prev[lastFileIndex]) {
        triggerAction.close();
        return prev;
      }

      return prev.map((file, index) => {
        if (index === lastFileIndex) {
          return {
            ...file,
            isEditing: true,
          };
        }

        return file;
      });
    });

    setSelectedFileIndexes([]);
    setSelectedFiles([]);
  };

  const unselectFiles = () => {
    setSelectedFileIndexes([]);
    setSelectedFiles((prev) => (prev.length > 0 ? [] : prev));
  };

  const handleContextMenu = (e, isSelection = false) => {
    e.preventDefault();
    setClickPosition({ clickX: e.clientX, clickY: e.clientY });
    setIsSelectionCtx(isSelection);
    !isSelection && unselectFiles();
    setVisible(true);
  };

  useEffect(() => {
    if (triggerAction.isActive) {
      switch (triggerAction.actionType) {
        case "createFolder":
          handleFolderCreating();
          break;
        case "rename":
          handleItemRenaming();
          break;
      }
    }
  }, [triggerAction.isActive]);

  useEffect(() => {
    setSelectedFileIndexes([]);
    setSelectedFiles([]);
  }, [currentPath]);

  useEffect(() => {
    if (selectedFiles.length > 0) {
      setSelectedFileIndexes(() => {
        return selectedFiles.map((selectedFile) => {
          return currentPathFiles.findIndex((f) => f.path === selectedFile.path);
        });
      });
    } else {
      setSelectedFileIndexes([]);
    }
  }, [selectedFiles, currentPathFiles]);

  return {
    emptySelecCtxItems,
    selecCtxItems,
    handleContextMenu,
    unselectFiles,
    visible,
    setVisible,
    setLastSelectedFile,
    selectedFileIndexes,
    clickPosition,
    isSelectionCtx,
  };
};

export default useFileList;