Merge pull request #60 from bkwak/feature

Feature

Author: bkwak

src/App.jsx

@@ -23,16 +23,10 @@ const App = () => {
         </GlobalContext.Provider>
       </div>
     );
-  } else if (global.isProjectLoaded === 'about') {
-    return (
-      <>
-        <About dispatch={dispatchToGlobal} />
-      </>
-    );
   } else {
     return (
       /**
-       * Wrap the components that we want to share the unique states with (ex: share testCase state with navbar & left panel (the two containers that hold the components that need testCaseRducer)) in the unique providers (ex: TestCaseContext.Provider).
+       * Wrap the components that we want to share the unique states with.
        * You can only provide one value to a Provider.
        *  - In order to avoid creating separate Contexts, wrap multiples in an array (ex: testCase and dispatchToTestCase).
        *
@@ -45,7 +39,9 @@ const App = () => {
        */
       <div
         id={
-          global.isFileDirectoryOpen
+          global.isProjectLoaded === 'about'
+            ? ''
+            : global.isFileDirectoryOpen
             ? global.isRightPanelOpen
               ? styles.fileDirectoryOpenRightPanelOpen
               : styles.fileDirectoryOpenRightPanelClosed
@@ -55,8 +51,17 @@ const App = () => {
         }
       >
         <GlobalContext.Provider value={[global, dispatchToGlobal]}>
-          <NavBar />
-          <LeftPanel />
+          {global.isProjectLoaded === 'about' ? (
+            <>
+              <NavBar inAboutPage={true} />
+              <About dispatch={dispatchToGlobal} />{' '}
+            </>
+          ) : (
+            <>
+              <NavBar inAboutPage={false} />
+              <LeftPanel />
+            </>
+          )}
           {global.isRightPanelOpen ? <RightPanel /> : ''}
         </GlobalContext.Provider>
       </div>

src/components/EditorView/EditorView.module.scss

@@ -28,4 +28,5 @@
   line-height: 1.5;
   position: relative;
   top: -18px;
+  color: rgb(90, 90, 90);
 }

…nents/EndpointTestComponent/Endpoint.jsx …nents/EndpointTestComponent/Endpoint.tsxsrc/components/EndpointTestComponent/Endpoint.jsx renamed to src/components/EndpointTestComponent/Endpoint.tsx src/components/EndpointTestComponent/Endpoint.jsx renamed to src/components/EndpointTestComponent/Endpoint.tsx

@@ -4,6 +4,7 @@ import styles from './Endpoint.module.scss';
 import style from '../ReactTestComponent/Render/Render.module.scss';
 import styled from '../ReactTestComponent/Render/Prop.module.scss';
 import EndpointAssertion from './EndpointAssertion';
+import { Assertion, EndpointObj, Header, Action, EventTarget } from '../../utils/endpointTypes';
 
 import {
   deleteEndpoint,
@@ -18,17 +19,31 @@ const closeIcon = require('../../assets/images/close.png');
 const dragIcon = require('../../assets/images/drag-vertical.png');
 const minusIcon = require('../../assets/images/minus-box-outline.png');
 
-const Endpoint = ({ endpoint, index, dispatchToEndpointTestCase }) => {
-  const handleChangeEndpointFields = (e, field) => {
+interface EndpointProps {
+  endpoint: EndpointObj;
+  index: number;
+  dispatchToEndpointTestCase: (action: Action) => void;
+}
+
+// declare global {
+//   namespace JSX {
+//     interface IntrinsicElements {
+//       input: { id: number | string };
+//     }
+//   }
+// }
+
+const Endpoint = ({ endpoint, index, dispatchToEndpointTestCase }: EndpointProps) => {
+  const handleChangeEndpointFields = ({ target }: EventTarget, field: string) => {
     let updatedEndpoint = { ...endpoint };
 
     field === 'headerName' || field === 'headerValue'
-      ? (updatedEndpoint.headers[e.target.id][field] = e.target.value)
-      : (updatedEndpoint[field] = e.target.value);
+      ? (updatedEndpoint.headers[Number(target.id)][field] = target.value)
+      : (updatedEndpoint[field] = target.value);
     dispatchToEndpointTestCase(updateEndpoint(updatedEndpoint));
 
-    if (e.target.value === 'post') dispatchToEndpointTestCase(togglePost(index));
-    else if (e.target.type === 'select-one' && endpoint.post)
+    if (target.value === 'post') dispatchToEndpointTestCase(togglePost(index));
+    else if (target.type === 'select-one' && endpoint.post)
       dispatchToEndpointTestCase(togglePost(index));
   };
 
@@ -41,21 +56,21 @@ const Endpoint = ({ endpoint, index, dispatchToEndpointTestCase }) => {
     dispatchToEndpointTestCase(addHeader(index));
   };
 
-  const handleClickDeleteHeader = (i) => {
+  const handleClickDeleteHeader = (i: number) => {
     dispatchToEndpointTestCase(deleteHeader(index, i));
   };
 
-  const updatePostData = (e) => {
-    dispatchToEndpointTestCase(updatePost(e.target.value, index));
-    e.target.style.height = 'inherit';
-    e.target.style.height = `${Math.max(Math.min(e.target.scrollHeight, 200), 102)}px`;
+  const updatePostData = ({ target }: EventTarget) => {
+    dispatchToEndpointTestCase(updatePost(target.value, index));
+    target.style.height = 'inherit';
+    target.style.height = `${Math.max(Math.min(target.scrollHeight, 200), 102)}px`;
   };
 
   const addAssertionHandleClick = () => {
     dispatchToEndpointTestCase(addAssertion(index));
   };
 
-  const testDescription = useRef(null);
+  const testDescription = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (testDescription && testDescription.current) {
@@ -141,7 +156,7 @@ const Endpoint = ({ endpoint, index, dispatchToEndpointTestCase }) => {
                 </div>
               </div>
             </div>{' '}
-            {endpoint.assertions.map((assertion, i) => {
+            {endpoint.assertions.map((assertion: Assertion, i: number) => {
               return <EndpointAssertion assertion={assertion} index={index} id={i} />;
             })}{' '}
             {endpoint.post && (
@@ -180,7 +195,7 @@ const Endpoint = ({ endpoint, index, dispatchToEndpointTestCase }) => {
                       </label>
                     </div>
                     <hr />
-                    {endpoint.headers.map((header, i) => {
+                    {endpoint.headers.map((header: Header, i) => {
                       return (
                         <div id={styled.renderPropsFlexBox}>
                           <input

…pointTestComponent/EndpointAssertion.jsx …pointTestComponent/EndpointAssertion.tsxsrc/components/EndpointTestComponent/EndpointAssertion.jsx renamed to src/components/EndpointTestComponent/EndpointAssertion.tsx src/components/EndpointTestComponent/EndpointAssertion.jsx renamed to src/components/EndpointTestComponent/EndpointAssertion.tsx

@@ -5,25 +5,32 @@ import { EndpointTestCaseContext } from '../../context/reducers/endpointTestCase
 import { deleteAssertion, updateAssertion } from '../../context/actions/endpointTestCaseActions';
 import { GlobalContext } from '../../context/reducers/globalReducer';
 import { openBrowserDocs } from '../../context/actions/globalActions';
-import jestMatchers from './JestMatchers.js';
+import jestMatchers from './JestMatchers';
+import { Assertion, EventTarget } from '../../utils/endpointTypes';
 
-const EndpointAssertion = ({ assertion, index, id }) => {
+interface EndpointProps {
+  assertion: Assertion;
+  index: number;
+  id: number;
+}
+
+const EndpointAssertion = ({ assertion, index, id }: EndpointProps) => {
   const [, dispatchToEndpointTestCase] = useContext(EndpointTestCaseContext);
-  const [, dispatchToGlobal] = useContext(GlobalContext);
+  const [, dispatchToGlobal] = useContext<any>(GlobalContext);
 
   const questionIcon = require('../../assets/images/help-circle.png');
   const closeIcon = require('../../assets/images/close.png');
-  const jestURL = 'https://jestjs.io/docs/en/expect';
+  const jestURL: string = 'https://jestjs.io/docs/en/expect';
 
   const handleClickDeleteAssertion = () => {
     dispatchToEndpointTestCase(deleteAssertion(index, id));
   };
 
-  const handleChangeUpdateAssertion = (e, field) => {
+  const handleChangeUpdateAssertion = ({ target }: EventTarget, field: string) => {
     const updatedAssertion =
       field === 'not'
         ? { ...assertion, [field]: !assertion[field] }
-        : { ...assertion, [field]: e.target.value };
+        : { ...assertion, [field]: target.value };
     dispatchToEndpointTestCase(updateAssertion(index, id, updatedAssertion));
   };
 

…ts/EndpointTestComponent/JestMatchers.js …ts/EndpointTestComponent/JestMatchers.tssrc/components/EndpointTestComponent/JestMatchers.js renamed to src/components/EndpointTestComponent/JestMatchers.ts src/components/EndpointTestComponent/JestMatchers.js renamed to src/components/EndpointTestComponent/JestMatchers.ts

@@ -1,4 +1,4 @@
-const jestMatchers = [
+const jestMatchers: string[] = [
   '',
   'to Be',
   'to Equal (object)',

src/components/FileDirectory/FileDirectory.module.scss

@@ -14,6 +14,7 @@
   background-color: white;
   overflow: auto;
   border-right: 1px dotted $mint;
+  z-index: 1;
 
   ul {
     list-style-type: none;

src/components/Modals/ExportFileModal.jsx

@@ -56,7 +56,6 @@ const ExportFileModal = ({ isExportModalOpen, setIsExportModalOpen }) => {
     await fs.writeFile(projectFilePath + `/__tests__/${fileName}.test.js`, file, (err) => {
       if (err) throw err;
     });
-
     dispatchToGlobal(createFileTree(generateFileTreeObject(projectFilePath)));
     displayTestFile(projectFilePath + '/__tests__');
   };
@@ -67,7 +66,7 @@ const ExportFileModal = ({ isExportModalOpen, setIsExportModalOpen }) => {
     dispatchToGlobal(toggleFolderView(testFolderFilePath));
     dispatchToGlobal(highlightFile(`${fileName}.test.js`));
   };
-
+  // co
   const filePathMap = {};
   const generateFileTreeObject = (projectFilePath) => {
     const fileArray = fs.readdirSync(projectFilePath).map((fileName) => {
@@ -96,7 +95,6 @@ const ExportFileModal = ({ isExportModalOpen, setIsExportModalOpen }) => {
       }
       return file;
     });
-
     dispatchToGlobal(setFilePathMap(filePathMap));
     return fileArray;
   };

src/components/NavBar/NavBar.jsx

@@ -24,7 +24,7 @@ const browserIcon = require('../../assets/images/google-chrome.png');
 const codeIcon = require('../../assets/images/visual-studio-code.png');
 const homeIcon = require('../../assets/images/home.png');
 
-const NavBar = () => {
+const NavBar = ({ inAboutPage }) => {
   const [
     { fileTree, isFileDirectoryOpen, projectUrl, rightPanelDisplay },
     dispatchToGlobal,
@@ -38,11 +38,12 @@ const NavBar = () => {
 
   /* switches between code and browser view */
   const handleEditorToggle = () => {
-    dispatchToGlobal(toggleRightPanel('codeEditorView'));
+    if (!inAboutPage) dispatchToGlobal(toggleRightPanel('codeEditorView'));
   };
 
   /* switches between code and browser view */
   const handleBrowserToggle = () => {
+    if (inAboutPage) return;
     if (rightPanelDisplay === 'browserView' && projectUrl) {
       dispatchToGlobal(resetToProjectUrl());
     }
@@ -67,7 +68,7 @@ const NavBar = () => {
    * renders: buttons + icons for navbar, exportFileModal, boxes to open new folder and enter url, file directory
    */
   return (
-    <div id={styles.navBar}>
+    <div id={inAboutPage ? styles.inAboutPage : styles.navBar}>
       <button className={styles.navBtn} onClick={handleToggleFileDirectory}>
         <img src={menuIcon} className={styles.icons} alt='fileExplorer' />
         <span className={styles.tooltip}>Expand File Explorer</span>
@@ -76,10 +77,12 @@ const NavBar = () => {
         <img src={exportIcon} className={styles.icons} alt='export' title='Export a test file' />
         <span className={styles.tooltip}>Export</span>
       </button>
-      <ExportFileModal
-        isExportModalOpen={isExportModalOpen}
-        setIsExportModalOpen={setIsExportModalOpen}
-      />
+      {!inAboutPage && (
+        <ExportFileModal
+          isExportModalOpen={isExportModalOpen}
+          setIsExportModalOpen={setIsExportModalOpen}
+        />
+      )}
       <OpenFolder />
       <button className={styles.navBtn} onClick={handleEditorToggle}>
         <img src={codeIcon} className={styles.icons} alt='codeview' title='Code View' />

src/components/NavBar/NavBar.module.scss

@@ -9,6 +9,9 @@
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
+  // position: absolute;
+  // top: 0;
+  // left: 0;
 }
 
 .navBtn {
@@ -36,10 +39,18 @@
   text-align: center;
   border-radius: 8px;
   margin: 0 auto;
-  z-index: 2;
+  z-index: 3;
 }
 
 .navBtn:hover .tooltip {
   visibility: visible;
   margin-left: 5px;
 }
+
+#inAboutPage {
+  @extend #navBar;
+  float: left;
+  position: fixed;
+  top: 0;
+  left: 0;
+}

src/components/OpenFolder/OpenFolderButton.jsx

@@ -9,8 +9,9 @@ import {
   createFileTree,
   setFilePathMap,
   setProjectFilePath,
-  // updateFile,
-  // setFilePath,
+  toggleFileDirectory,
+  setTestCase,
+  toggleModal,
 } from '../../context/actions/globalActions';
 import { GlobalContext } from '../../context/reducers/globalReducer';
 
@@ -21,7 +22,9 @@ const electronFs = remote.require('fs');
 const { dialog } = remote;
 
 const OpenFolder = () => {
-  const [{ isProjectLoaded }, dispatchToGlobal] = useContext(GlobalContext);
+  const [{ isProjectLoaded, isFileDirectoryOpen, isTestModalOpen }, dispatchToGlobal] = useContext(
+    GlobalContext
+  );
   const filePathMap = {};
 
   const handleOpenFolder = () => {
@@ -42,6 +45,9 @@ const OpenFolder = () => {
       dispatchToGlobal(setProjectFilePath(directoryPath));
       dispatchToGlobal(createFileTree(generateFileTreeObject(directoryPath)));
       dispatchToGlobal(loadProject('load'));
+      dispatchToGlobal(setTestCase(''));
+      if (!isTestModalOpen) dispatchToGlobal(toggleModal());
+      if (!isFileDirectoryOpen) dispatchToGlobal(toggleFileDirectory());
     }
   };