added type definition

Author: AceTheCreator

src/frontend/components/Panel/explorer.tsx

@@ -11,18 +11,19 @@ import TreeItem, { useTreeItem } from "@mui/lab/TreeItem";
 
 interface PanelProps {
   state: any;
-}
+  name: string;
+  items: any,
+};
 
-const RecursiveComponent = ({ name, items }) => {
-  console.log(items);
+const RecursiveComponent: React.FC<PanelProps> = ({ name, items}) => {
   const hasChildren = items && items;
   console.log(hasChildren)
 
   return (
     <>
       <TreeItem nodeId={name} label={name} className="mt-1" key={name}>
         {hasChildren &&
-          items.map((item) => <RecursiveComponent key={item.name} {...item} />)}
+          items.map((item: JSX.IntrinsicAttributes & PanelProps & { children?: React.ReactNode; }) => <RecursiveComponent key={item.name} {...item} />)}
       </TreeItem>
     </>
   );

src/frontend/lib/utils/fileSystem.js

@@ -1,31 +1,34 @@
 export async function openFile() {
   let [fileHandle] = await window.showOpenFilePicker();
-  console.log(fileHandle.kind);
 }
 
-    async function listAllFilesAndDirs(dirHandle) {
-    const files = [];
-    for await (let [name, handle] of dirHandle) {
-        const {kind} = handle;
-        if (handle.kind === 'directory') {
-          files.push({ name, handle, kind, items: await listAllFilesAndDirs(handle) });
-        } else {
-            files.push({name, handle, kind});
-        }
+async function listAllFilesAndDirs(dirHandle) {
+  const files = [];
+  for await (let [name, handle] of dirHandle) {
+    const { kind } = handle;
+    if (handle.kind === "directory") {
+      files.push({
+        name,
+        handle,
+        kind,
+        items: await listAllFilesAndDirs(handle),
+      });
+    } else {
+      files.push({ name, handle, kind });
     }
-    return files;
+  }
+  return files;
 }
 
 export async function openFolder() {
- try {
-   const directoryHandle = await window.showDirectoryPicker();
-   const files = await listAllFilesAndDirs(directoryHandle);
-   return {
-     name: directoryHandle.name,
-     items: files,
-   };
- } catch (e) {
-   console.log(e);
- }
+  try {
+    const directoryHandle = await window.showDirectoryPicker();
+    const files = await listAllFilesAndDirs(directoryHandle);
+    return {
+      name: directoryHandle.name,
+      items: files,
+    };
+  } catch (e) {
+    console.log(e);
+  }
 }
-