Reduce waiting in the UI – server provides each page's ID, the editor…

… reuses that ID while it can
WordPress · Jan 1, 2025 · 8594402 · 8594402
1 parent 620755d
commit 8594402
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 14 deletions.
diff --git a/packages/playground/data-liberation-static-files-editor/plugin.php b/packages/playground/data-liberation-static-files-editor/plugin.php
@@ -490,18 +490,33 @@ static private function convert_post_to_string($path, $post) {
         $converter->convert();
         return $converter->get_result();
     }
-
     static public function get_local_files_tree($subdirectory = '') {
         $tree = [];
         $fs = self::get_fs();
 
+        // Get all file paths and post IDs in one query
+        $file_posts = get_posts(array(
+            'post_type' => WP_LOCAL_FILE_POST_TYPE,
+            'meta_key' => 'local_file_path',
+            'posts_per_page' => -1,
+            'fields' => 'id=>meta'
+        ));
+
+        $path_to_post_id = array();
+        foreach($file_posts as $post) {
+            $file_path = get_post_meta($post->ID, 'local_file_path', true);
+            if ($file_path) {
+                $path_to_post_id[$file_path] = $post->ID;
+            }
+        }
+
         $base_dir = $subdirectory ? $subdirectory : '/';
-        self::build_local_file_tree_recursive($fs, $base_dir, $tree);
+        self::build_local_file_tree_recursive($fs, $base_dir, $tree, $path_to_post_id);
 
         return $tree;
     }
 
-    static private function build_local_file_tree_recursive($fs, $dir, &$tree) {
+    static private function build_local_file_tree_recursive($fs, $dir, &$tree, $path_to_post_id) {
         $items = $fs->ls($dir);
         if ($items === false) {
             return;
@@ -525,12 +540,18 @@ static private function build_local_file_tree_recursive($fs, $dir, &$tree) {
 
                 // Recursively build children
                 $last_index = count($tree) - 1;
-                self::build_local_file_tree_recursive($fs, $path, $tree[$last_index]['children']);
+                self::build_local_file_tree_recursive($fs, $path, $tree[$last_index]['children'], $path_to_post_id);
             } else {
-                $tree[] = array(
+                $node = array(
                     'type' => 'file',
                     'name' => $item,
                 );
+
+                if (isset($path_to_post_id[$path])) {
+                    $node['post_id'] = $path_to_post_id[$path];
+                }
+
+                $tree[] = $node;
             }
         }
     }

diff --git a/packages/playground/data-liberation-static-files-editor/ui/src/index.tsx b/packages/playground/data-liberation-static-files-editor/ui/src/index.tsx
@@ -62,6 +62,11 @@ const uiStore = createReduxStore(STORE_NAME, {
 
 register(uiStore);
 
+const isStaticPagePath = (path: string) => {
+	const extension = path.split('.').pop()?.toLowerCase();
+	return ['md', 'html'].includes(extension);
+};
+
 function ConnectedFilePickerTree() {
 	const [fileTree, setFileTree] = useState<any>(null);
 	const [isLoading, setIsLoading] = useState(true);
@@ -74,17 +79,19 @@ function ConnectedFilePickerTree() {
 
 	useEffect(() => {
 		async function refreshPostId() {
-			const extension = selectedPath.split('.').pop()?.toLowerCase();
-			if (extension === 'md' || extension === 'html') {
+			if (isStaticPagePath(selectedPath)) {
 				setPostLoading(true);
-				const { post_id } = (await apiFetch({
-					path: '/static-files-editor/v1/get-or-create-post-for-file',
-					method: 'POST',
-					data: { path: selectedPath },
-				})) as { post_id: string };
-				setSelectedPostId(post_id);
+				if (!selectedPostId) {
+					const { post_id } = (await apiFetch({
+						path: '/static-files-editor/v1/get-or-create-post-for-file',
+						method: 'POST',
+						data: { path: selectedPath },
+					})) as { post_id: string };
+					setSelectedPostId(post_id);
+				}
 				setPreviewPath(null);
 			} else {
+				setPostLoading(false);
 				setSelectedPostId(null);
 				setPreviewPath(selectedPath);
 			}
@@ -100,7 +107,7 @@ function ConnectedFilePickerTree() {
 
 	const { post, hasLoadedPost, onNavigateToEntityRecord } = useSelect(
 		(select) => {
-			const { getEntityRecord, isResolving, hasFinishedResolution } =
+			const { getEntityRecord, hasFinishedResolution } =
 				select(coreStore);
 			return {
 				onNavigateToEntityRecord:
@@ -173,6 +180,11 @@ function ConnectedFilePickerTree() {
 
 	const handleFileClick = async (filePath: string, node: FileNode) => {
 		setSelectedPath(filePath);
+		if (isStaticPagePath(filePath)) {
+			setSelectedPostId(node.post_id);
+		} else {
+			setSelectedPostId(null);
+		}
 	};
 
 	const handleNodesCreated = async (tree: FileTree) => {