Skip to content

Commit

Permalink
Merge pull request #64 from oslabs-beta/dev
Browse files Browse the repository at this point in the history
Dev
  • Loading branch information
cvalong authored Apr 12, 2023
2 parents 9ac0899 + 00e9b9f commit ebfd5db
Show file tree
Hide file tree
Showing 12 changed files with 288 additions and 231 deletions.
62 changes: 29 additions & 33 deletions electron-react/src/App.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 });
}
});
}, []);
Expand All @@ -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;
Empty file.
37 changes: 27 additions & 10 deletions electron-react/src/components/FileExplorer/DirectoryComponent.tsx
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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 ? (
Expand Down
Loading

0 comments on commit ebfd5db

Please sign in to comment.