Dev

electron-react/src/App.tsx

@@ -1,22 +1,22 @@
 // import Update from '@/components/update'
-import React, { useContext, useEffect } from 'react';
-import Workshop from './pages/Workshop';
-import UIPage from './pages/UIPage';
-import { useUserComp } from './hooks/useContextHooks';
-import './App.scss';
-import FileExplorer from './components/FileExplorer/FileExplorer';
-import { ShowUIContext } from './components/context/ShowUIContext';
-import { motion } from 'framer-motion';
-import path from 'path';
-import fs from 'fs';
-import { PayloadType, UserActionType } from './components/context/ContextTypes';
-const os = require('os');
+import React, { useContext, useEffect } from "react";
+import Workshop from "./pages/Workshop";
+import UIPage from "./pages/UIPage";
+import { useUserComp } from "./hooks/useContextHooks";
+import "./App.scss";
+import FileExplorer from "./components/FileExplorer/FileExplorer";
+import { ShowUIContext } from "./components/context/ShowUIContext";
+import { motion } from "framer-motion";
+import path from "path";
+import fs from "fs";
+import { PayloadType, UserActionType } from "./components/context/ContextTypes";
+const os = require("os");
 
 const pageVariants = {
   initial: {
     opacity: 0,
     y: 5,
-    scale: 0.9
+    scale: 0.9,
   },
   animate: {
     opacity: 1,
@@ -26,39 +26,37 @@ const pageVariants = {
       type: "spring",
       stiffness: 800,
       damping: 100,
-      duration: 1
-    }
+      duration: 1,
+    },
   },
   exit: {
     opacity: 0,
     y: -100,
     scale: 1.2,
     transition: {
-      duration: 1
-    }
-  }
+      duration: 1,
+    },
+  },
 };
 
 function App() {
   //  for more info on useContext with typescript: https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context
-  const contextVal = useContext(ShowUIContext) ?? { showUI: [null, null] } 
-  const [showUIVal, setShowUIVal] = contextVal.showUI
+  const contextVal = useContext(ShowUIContext) ?? { showUI: [null, null] };
+  const [showUIVal, setShowUIVal] = contextVal.showUI;
   const { components, dispatch } = useUserComp();
 
-
   useEffect(() => {
-    const filePath = path.join(os.homedir(), 'AthenaData123.json');
+    const filePath = path.join(os.homedir(), "AthenaData123.json");
 
     // Read the file's contents
-    fs.readFile(filePath, 'utf8', (err, data) => {
+    fs.readFile(filePath, "utf8", (err, data) => {
       if (err) {
         console.error(`Error reading file: ${err.message}`);
       } else {
         // Parse the JSON data
         const jsonData = JSON.parse(data);
-        console.log(jsonData);
         // Set user components
-        dispatch({ type: 'SET_COMPS', payload: jsonData });
+        dispatch({ type: "SET_COMPS", payload: jsonData });
       }
     });
   }, []);
@@ -71,28 +69,26 @@ function App() {
         initial="initial"
         animate="animate"
         exit="exit"
-        className='App'
+        className="App"
       >
         <UIPage />
       </motion.div>
-    )
-  }
-
-  else {
+    );
+  } else {
     return (
       <motion.div
         key={2}
         variants={pageVariants}
         initial="initial"
         animate="animate"
         exit="exit"
-        className='App'
+        className="App"
       >
         <FileExplorer />
         <Workshop />
       </motion.div>
-    )
+    );
   }
 }
 
-export default App
+export default App;

electron-react/src/components/FileExplorer/DirectoryComponent.tsx

@@ -1,15 +1,19 @@
 import React, { useState } from "react";
-import { Folder } from './FileExplorer';
+import { Folder } from "./FileExplorer";
 
 interface DirectoryProps {
   name: string;
   files: Folder[];
   fileParser: Function;
   path: string;
-
 }
 
-const DirectoryComponent: React.FC<DirectoryProps> = ({ name, files, fileParser, path }) => {
+const DirectoryComponent: React.FC<DirectoryProps> = ({
+  name,
+  files,
+  fileParser,
+  path,
+}) => {
   // each directory component has access to it's name and files on property object
   // hook to tell whether button is opened or not
   const [isOpen, setOpen] = useState(false);
@@ -18,26 +22,39 @@ const DirectoryComponent: React.FC<DirectoryProps> = ({ name, files, fileParser,
     setOpen(!isOpen);
   };
 
-  // TODO: readability refactor for recursive call
   return (
     <div className="folder">
       <button className="folder-button" onClick={handleFolderToggle}>
-        <svg className={isOpen ? 'folder-button-icon chevron-down' : 'folder-button-icon'} 
-         xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-          <path fillRule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+        <svg
+          className={
+            isOpen ? "folder-button-icon chevron-down" : "folder-button-icon"
+          }
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+          />
         </svg>
         <span className="file-button-text">{name}</span>
       </button>
 
       {/* when isOpen is true, render all of the subfiles of the directory component */}
       {isOpen && (
         <div className="sub-files">
-          <div className = 'vl'/>
+          <div className="vl" />
           {/* map over each subfile */}
           {files.map((file) => {
-            {/* generate subPath */}
+            {
+              /* generate subPath */
+            }
             const subPath = `${path}/${file.name}`; // create a variable to store the path
-            {/* recursively render directory component with updated path, filename, and subfiles */}
+            {
+              /* recursively render directory component with updated path, filename, and subfiles */
+            }
             return (
               <div key={file.name}>
                 {file.directory ? (