"use client"; import { useEffect, useState } from "react"; import ChevronIcon from "./icons/chevron-icon"; import ClosedFolderIcon from "./icons/closed-folder-icon"; import OpenFolderIcon from "./icons/open-folder-icon"; import FileIcon from "./icons/file-icon"; import NewFolderInput from "./new-folder-input"; import NewFileInput from "./new-file-input"; import type { ItemToAdd } from "./client-container"; import type { ItemAction } from "./side-bar"; import EllipsisHandler from "./ellipsis-handler"; interface FolderGroupProps { id: number; name: string; findChildren: (id: number) => { childFolders: { id: number; name: string; user_id: number | null; folder_id: number | null; }[]; childFiles: { id: number; name: string; user_id: number | null; folder_id: number | null; content: string | null; }[]; }; selectedFile: number; setFile: (id: number, name: string) => void; count?: number; setFolder: (id: number) => void; selectedFolder: number; formActions: { create: ItemAction; edit: ItemAction; delete: ItemAction; }; rootUserId: number | null; cancelInput: (inputType: ItemToAdd) => void; renameFile: (name: string) => void; deleteFile: (id: number) => void; isPopupOpen: boolean; setIsPopupOpen: React.Dispatch>; handleEdit: (itemType: ItemToAdd) => void; handleToggle: (type: ItemToAdd, id: number) => void; toggleState: { popupType: ItemToAdd; itemId: number; }; isAddingItem: ItemToAdd; // To know if the input UI is visible } // This is the nested folder group structure that returns itself inside it (tree structure) export default function FolderGroup({ id, name, findChildren, selectedFile, setFile, count = 1, setFolder, selectedFolder, formActions, cancelInput, rootUserId, renameFile, deleteFile, isPopupOpen, setIsPopupOpen, handleEdit, handleToggle, toggleState, isAddingItem, }: FolderGroupProps) { const [direction, setDirection] = useState("right"); const toggleDirection = (id: number) => { setDirection((prevDirection) => prevDirection === "right" ? "bottom" : "right", ); setFolder(id); }; // This useEffect is just for force openning the folder if add file/folder button is clicked, and a folder is selected and not opened useEffect(() => { if ( isAddingItem !== "none" && id === selectedFolder && direction === "right" ) { setDirection("bottom"); } }, [isAddingItem]); const renderChildren = (id: number) => { const { childFolders, childFiles } = findChildren(id); // count is just for calculating the incremented margin for each nested folder (better Ui) count++; return (

{childFolders.map((folder) => { // this mock folder input only appears as child folder when adding new folder if (folder.user_id === -1) { return ( ); } else if (folder.user_id === -2) { return ( // Mock rename file input (reused new file input with optional props for renaming file in side bar and editor) ); } return (

); })} {childFiles.map((file) => { // this mock file input only appears as child file when adding new file if (file.user_id === -1) { return ( ); } else if (file.user_id === -2) { return ( // Mock rename file input (reused new file input with optional props for renaming file in side bar and editor)

); } return (

{ setFile(file.id, file.name); if (file.folder_id) { setFolder(file.folder_id); } else { setFolder(0); } }} key={file.id} >

{file.name} {file.id === selectedFile && ( )}

); })}

); }; return (

toggleDirection(id)} style={{ color: id === selectedFolder ? "#00bcd4" : "", }} > {direction === "bottom" ? : } {name} {id === selectedFolder && ( )}

{direction === "bottom" && renderChildren(id)}

); }