Merge pull request #522 from VictoriaShyika/274-default_file

Added default file if folder empty
weareunderdesign · Dec 21, 2023 · f46b3db · f46b3db
2 parents 582f7fa + f024a88
commit f46b3db
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 15 deletions.
diff --git a/src/_node/file/apis.ts b/src/_node/file/apis.ts
@@ -61,28 +61,33 @@ export const initIDBProject = async (projectPath: string): Promise<void> => {
     }
   });
 };
+export const getIndexHtmlContent = () => {
+  const htmlElementsReferenceData: THtmlElementsReferenceData = {};
+  htmlRefElements.map((htmlRefElement: THtmlElementsReference) => {
+    const pureTag =
+      htmlRefElement["Name"] === "Comment"
+        ? "comment"
+        : htmlRefElement["Tag"]?.slice(1, htmlRefElement["Tag"].length - 1);
+    htmlElementsReferenceData[pureTag] = htmlRefElement;
+  });
+
+  const doctype = "<!DOCTYPE html>\n";
+  const html = htmlElementsReferenceData["html"].Content
+    ? `<html>\n` + htmlElementsReferenceData["html"].Content + `\n</html>`
+    : `<html><head><title>Untitled</title></head><body><div><h1>Heading 1</h1></div></body></html>`;
+  const indexHtmlContent = doctype + html;
+  return indexHtmlContent;
+};
+
 export const createIDBProject = async (projectPath: string): Promise<void> => {
   return new Promise<void>(async (resolve, reject) => {
     try {
-      const htmlElementsReferenceData: THtmlElementsReferenceData = {};
-      htmlRefElements.map((htmlRefElement: THtmlElementsReference) => {
-        const pureTag =
-          htmlRefElement["Name"] === "Comment"
-            ? "comment"
-            : htmlRefElement["Tag"]?.slice(1, htmlRefElement["Tag"].length - 1);
-        htmlElementsReferenceData[pureTag] = htmlRefElement;
-      });
-
       // create project directory
       await _createIDBDirectory(projectPath);
 
       // create index.html
       const indexHtmlPath = `${projectPath}/index.html`;
-      const doctype = "<!DOCTYPE html>\n";
-      const html = htmlElementsReferenceData["html"].Content
-        ? `<html>\n` + htmlElementsReferenceData["html"].Content + `\n</html>`
-        : `<html><head><title>Untitled</title></head><body><div><h1>Heading 1</h1></div></body></html>`;
-      const indexHtmlContent = doctype + html;
+      const indexHtmlContent = getIndexHtmlContent();
       await _writeIDBFile(indexHtmlPath, indexHtmlContent);
 
       resolve();

diff --git a/src/components/main/actionsPanel/workspaceTreeView/WorkspaceTreeView.tsx b/src/components/main/actionsPanel/workspaceTreeView/WorkspaceTreeView.tsx
@@ -33,6 +33,7 @@ import {
   useTemporaryNodes,
 } from "./hooks";
 import { Container, ItemArrow } from "./workSpaceTreeComponents";
+import { useDefaultFileCreate } from "./hooks/useDefaultFile";
 
 const AutoExpandDelayOnDnD = 1 * 1000;
 export default function WorkspaceTreeView() {
@@ -113,7 +114,7 @@ export default function WorkspaceTreeView() {
     removeTemporaryNodes,
     openFileUid,
   });
-
+  useDefaultFileCreate();
   useEffect(() => {
     if (!didUndo && !didRedo) return;
 

diff --git a/src/components/main/actionsPanel/workspaceTreeView/helpers/createDefaultFile.ts b/src/components/main/actionsPanel/workspaceTreeView/helpers/createDefaultFile.ts
@@ -0,0 +1,16 @@
+import { RootNodeUid } from "@_constants/index";
+import { TFileHandlerCollection, getIndexHtmlContent } from "@_node/index";
+
+export const createDefaultFile = async (
+  fileHandlers: TFileHandlerCollection,
+) => {
+  const indexHtmlContent = getIndexHtmlContent();
+  const newFile = await (
+    fileHandlers[RootNodeUid] as FileSystemDirectoryHandle
+  ).getFileHandle("index.html", {
+    create: true,
+  });
+  const writableStream = await newFile.createWritable();
+  await writableStream.write(indexHtmlContent);
+  await writableStream.close();
+};
diff --git a/src/components/main/actionsPanel/workspaceTreeView/hooks/useDefaultFile.tsx b/src/components/main/actionsPanel/workspaceTreeView/hooks/useDefaultFile.tsx
@@ -0,0 +1,26 @@
+import { RootNodeUid } from "@_constants/main";
+import { MainContext } from "@_redux/main";
+import { setShowActionsPanel } from "@_redux/main/processor";
+import { useAppState } from "@_redux/useAppState";
+import { useContext, useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { createDefaultFile } from "../helpers/createDefaultFile";
+
+export const useDefaultFileCreate = () => {
+  const { fileTree } = useAppState();
+  const { fileHandlers, reloadCurrentProject, currentProjectFileHandle } =
+    useContext(MainContext);
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (
+      fileTree[RootNodeUid]?.children?.length === 0 &&
+      fileHandlers[RootNodeUid]
+    ) {
+      createDefaultFile(fileHandlers);
+      reloadCurrentProject(fileTree, currentProjectFileHandle);
+      dispatch(setShowActionsPanel(true));
+    }
+  }, [fileTree[RootNodeUid]?.children, fileHandlers[RootNodeUid]]);
+};