From 25c2b42fc9652f2cbd705c4bd4ea3d3fc6a42d6c Mon Sep 17 00:00:00 2001
From: Xu Quan <xuquan1225@hotmail.com>
Date: Fri, 28 Feb 2025 21:58:27 +0800
Subject: [PATCH] refactor: optimize code for better understanding

---
 src/components/File.tsx   | 52 ++++++++++++++--------------
 src/components/Folder.tsx | 72 +++++++++++++++++++++------------------
 2 files changed, 65 insertions(+), 59 deletions(-)

diff --git a/src/components/File.tsx b/src/components/File.tsx
index 2e69eb7..4551a50 100644
--- a/src/components/File.tsx
+++ b/src/components/File.tsx
@@ -48,13 +48,11 @@ const File = ({ file, useFileTreeStore, plugin, deleteFile }: Props) => {
 		return "ffs-file-name" + (isEditing ? " ffs-file-name-edit-mode" : "");
 	};
 
-	const {
-		renderEditableName,
-		selectFileNameText,
-		onBeginEdit,
-	} = useRenderEditableName(file.basename, onSaveName, getClassNames);
+	const { renderEditableName, selectFileNameText, onBeginEdit } =
+		useRenderEditableName(file.basename, onSaveName, getClassNames);
 
-	const loadContent = async () => {
+	const maybeLoadContent = async () => {
+		if (file.extension !== "md") return;
 		const content = await readFile(file);
 		const cleanContent = content
 			.replace(/^---\n[\s\S]*?\n---\n/, "")
@@ -63,8 +61,7 @@ const File = ({ file, useFileTreeStore, plugin, deleteFile }: Props) => {
 	};
 
 	useEffect(() => {
-		if (file.extension !== "md") return;
-		loadContent();
+		maybeLoadContent();
 	}, []);
 
 	const onShowContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -121,31 +118,36 @@ const File = ({ file, useFileTreeStore, plugin, deleteFile }: Props) => {
 		menu.showAtPosition({ x: e.clientX, y: e.clientY });
 	};
 
-	const isFocused = focusedFile?.path === file.path;
-	const className = "ffs-file" + (isFocused ? " ffs-focused-file" : "");
+	const maybeRenderFileDetail = () => {
+		if (!showFileDetail) return null;
+
+		const fileCreatedDate = new Date(file.stat.ctime)
+			.toLocaleString()
+			.split(" ")[0];
+		return (
+			<div className="ffs-file-details">
+				<span className="ffs-file-created-time">{fileCreatedDate}</span>
+				<span className="ffs-file-content-preview">
+					{contentPreview}
+				</span>
+			</div>
+		);
+	};
+
+	const getFileClassName = () => {
+		const isFocused = focusedFile?.path === file.path;
+		return "ffs-file" + (isFocused ? " ffs-focused-file" : "");
+	};
 
 	return (
 		<div
-			className={className}
+			className={getFileClassName()}
 			onClick={() => selectFile(file)}
 			onContextMenu={onShowContextMenu}
 		>
 			<div className="ffs-file-content">
 				{renderEditableName()}
-				{showFileDetail && (
-					<div className="ffs-file-details">
-						<span className="ffs-file-created-time">
-							{
-								new Date(file.stat.ctime)
-									.toLocaleString()
-									.split(" ")[0]
-							}
-						</span>
-						<span className="ffs-file-content-preview">
-							{contentPreview}
-						</span>
-					</div>
-				)}
+				{maybeRenderFileDetail()}
 			</div>
 		</div>
 	);
diff --git a/src/components/Folder.tsx b/src/components/Folder.tsx
index 1875f91..5bc7e48 100644
--- a/src/components/Folder.tsx
+++ b/src/components/Folder.tsx
@@ -135,6 +135,23 @@ const Folder = ({
 		menu.showAtPosition({ x: e.clientX, y: e.clientY });
 	};
 
+	const onClickFolder = (e: React.MouseEvent<HTMLDivElement>): void => {
+		if (expandFolderByClickingOn !== "folder") return;
+
+		e.stopPropagation();
+		if (focusedFolder?.path !== folder.path) {
+			setFocusedFolder(folder);
+		} else {
+			onToggleExpandState();
+		}
+	};
+
+	const onClickExpandIcon = (e: React.MouseEvent<HTMLDivElement>): void => {
+		if (expandFolderByClickingOn !== "icon") return;
+		e.stopPropagation();
+		onToggleExpandState();
+	};
+
 	const renderFilesCount = () => {
 		const filesCount = getFilesCountInFolder(
 			folder,
@@ -143,53 +160,40 @@ const Folder = ({
 		return <span className="ffs-files-count">{filesCount}</span>;
 	};
 
-	const isFocused = folder.path == focusedFolder?.path;
-	const isExpanded = isRoot || expandedFolderPaths.includes(folder.path);
+	const getFolderClassName = (): string => {
+		const isFocused = folder.path == focusedFolder?.path;
 
-	const folderClassNames = ["ffs-folder"];
-	if (
-		isFocused &&
-		(!focusedFile || focusedFile.parent?.path !== folder.path)
-	) {
-		folderClassNames.push("ffs-focused-folder");
-	} else if (isFocused) {
-		folderClassNames.push("ffs-focused-folder-with-focused-file");
-	}
-	if (isRoot) {
-		folderClassNames.push("ffs-root-folder");
-	}
+		const isFocusedFileInFolder = focusedFile?.parent?.path === folder.path;
+		const folderClassNames = ["ffs-folder", isRoot && "ffs-root-folder"];
+		if (isFocused && (!focusedFile || !isFocusedFileInFolder)) {
+			folderClassNames.push("ffs-focused-folder");
+		} else if (isFocused) {
+			folderClassNames.push("ffs-focused-folder-with-focused-file");
+		}
+		return folderClassNames.filter(Boolean).join(" ");
+	};
+
+	const maybeRenderExpandIcon = () => {
+		const isExpanded = isRoot || expandedFolderPaths.includes(folder.path);
+		if (!hasFolderChildren(folder) || isRoot) return null;
+		return isExpanded ? <ArrowDownIcon /> : <ArrowRightIcon />;
+	};
 
 	return (
 		<div
-			className={folderClassNames.join(" ")}
+			className={getFolderClassName()}
 			onClick={() => setFocusedFolder(folder)}
 			onContextMenu={onShowContextMenu}
 		>
 			<div
 				className="ffs-folder-pane-left-sectionn"
-				onClick={(e) => {
-					if (expandFolderByClickingOn == "folder") {
-						e.stopPropagation();
-						if (focusedFolder?.path !== folder.path) {
-							setFocusedFolder(folder);
-						} else {
-							onToggleExpandState();
-						}
-					}
-				}}
+				onClick={onClickFolder}
 			>
 				<span
 					className="ffs-folder-arrow-icon-wrapper"
-					onClick={(e) => {
-						if (expandFolderByClickingOn == "icon") {
-							e.stopPropagation();
-							onToggleExpandState();
-						}
-					}}
+					onClick={onClickExpandIcon}
 				>
-					{hasFolderChildren(folder) &&
-						!isRoot &&
-						(isExpanded ? <ArrowDownIcon /> : <ArrowRightIcon />)}
+					{maybeRenderExpandIcon()}
 				</span>
 				{showFolderIcon && <FolderIcon />}
 				{renderEditableName()}