Merge pull request #35 from brianjshan/left

Fixed some component 🐛s

Author: jinsoolim

__tests__/enzyme.test.tsx

@@ -16,39 +16,37 @@ import LeftContainer from '../app/src/containers/LeftContainer';
 
 // npm test -- -u
 
-
 describe('Test the CanvasContainer component', () => {
   const target = shallow(<CanvasContainer />);
   it('Matches snapshot', () => {
-    expect(target).toMatchSnapshot()
-  })
+    expect(target).toMatchSnapshot();
+  });
   it('Contains Canvas component', () => {
     expect(target.contains(<Canvas />)).toBe(true);
-  })
-})
+  });
+});
 
 describe('Test the MainContainer component', () => {
   const target = shallow(<MainContainer />);
   it('Contains CanvasContainer component', () => {
     expect(target.contains(<CanvasContainer />)).toBe(true);
-  })
+  });
   it('Contains BottomPanel component', () => {
     expect(target.contains(<BottomPanel />)).toBe(true);
-  })
-})
+  });
+});
 
 describe('Test the BottomTabs component', () => {
   const target = shallow(<BottomTabs />);
   it('Matches snapshot', () => {
-    expect(target).toMatchSnapshot()
-  })
-})
+    expect(target).toMatchSnapshot();
+  });
+});
 
 describe('Test All 10 default HTML elements have rendered', () => {
-
   const target = shallow(
-    <DndProvider backend={HTML5Backend} >
-      <StateContext.Provider value={initialState} >
+    <DndProvider backend={HTML5Backend}>
+      <StateContext.Provider value={initialState}>
         <HTMLPanel />
       </StateContext.Provider>
     </DndProvider>

app/electron/main.js

@@ -251,7 +251,7 @@ app.on('web-contents-created', (event, contents) => {
       'https://github.com',
       'https://nextjs.org',
       'https://developer.mozilla.org',
-      'https://www.facebook.com',
+      'https://www.facebook.com'
     ];
 
     // Log and prevent the app from redirecting to a new page
@@ -406,12 +406,10 @@ ipcMain.on('github', event => {
   });
   // const authUrl =
   //   githubUrl + 'client_id=' + options.client_id + '&scope=' + options.scopes;
-  const authUrl =
-    `${githubUrl}client_id=${process.env.GITHUB_ID}`;
+  const authUrl = `${githubUrl}client_id=${process.env.GITHUB_ID}`;
   github.loadURL(authUrl);
   github.show();
-  const handleCallback = (url) => {
-
+  const handleCallback = url => {
     const raw_code = /code=([^&]\*)/.exec(url) || null;
     const code = raw_code && raw_code.length > 1 ? raw_code[1] : null;
     const error = /\?error=(.+)\$/.exec(url);
@@ -430,18 +428,20 @@ ipcMain.on('github', event => {
           'log you in using Github. Please try again.'
       );
     }
-  }
+  };
 
   github.webContents.on('will-navigate', (e, url) => handleCallback(url));
 
   github.webContents.on('did-finish-load', (e, url, a, b) => {
     github.webContents.selectAll();
-  })
+  });
 
-  github.webContents.on('did-get-redirect-request', (e, oldUrl, newUrl) => handleCallback(newUrl));
+  github.webContents.on('did-get-redirect-request', (e, oldUrl, newUrl) =>
+    handleCallback(newUrl)
+  );
 
   // Reset the authWindow on close
-  github.on('close', () => authWindow = null, false);
+  github.on('close', () => (authWindow = null), false);
 
   // if final callback is reached and we get a redirect from server back to our app, close oauth window
   github.webContents.on('will-redirect', (e, callbackUrl) => {
@@ -460,9 +460,10 @@ ipcMain.on('github', event => {
         message: 'Github Oauth Successful!'
       });
       github.close();
-      win.webContents.executeJavaScript(`window.localStorage.setItem('ssid', '${ssid}')`)
+      win.webContents
+        .executeJavaScript(`window.localStorage.setItem('ssid', '${ssid}')`)
         .then(result => win.loadURL(selfHost))
-        .catch(err => console.log(err))
+        .catch(err => console.log(err));
     }
   });
 });

app/src/components/bottom/BottomTabs.tsx

@@ -62,11 +62,27 @@ const BottomTabs = () => {
               value={theme}
               onChange={changeTheme}
             >
-              <option style ={{backgroundColor: '#252526'}} value={'monokai'}>Monokai</option>
-              <option style ={{backgroundColor: '#252526'}} value={'github'}>Github</option>
-              <option style ={{backgroundColor: '#252526'}} value={'solarized_dark'}>Solarized Dark</option>
-              <option style ={{backgroundColor: '#252526'}} value={'terminal'}>Terminal</option>
-              <option style ={{backgroundColor: '#252526'}} value={'solarized_light'}>Solarized Light</option>
+              <option style={{ backgroundColor: '#252526' }} value={'monokai'}>
+                Monokai
+              </option>
+              <option style={{ backgroundColor: '#252526' }} value={'github'}>
+                Github
+              </option>
+              <option
+                style={{ backgroundColor: '#252526' }}
+                value={'solarized_dark'}
+              >
+                Solarized Dark
+              </option>
+              <option style={{ backgroundColor: '#252526' }} value={'terminal'}>
+                Terminal
+              </option>
+              <option
+                style={{ backgroundColor: '#252526' }}
+                value={'solarized_light'}
+              >
+                Solarized Light
+              </option>
             </NativeSelect>
           </div>
         </FormControl>
@@ -83,7 +99,7 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: '#333333',
     height: '100%',
     color: '#fff',
-    boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
+    boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
   },
   bottomHeader: {
     flex: 1,

app/src/components/left/HTMLPanel.tsx

@@ -15,7 +15,7 @@ const HTMLPanel = (): JSX.Element => {
   let startingID = 0;
   state.HTMLTypes.forEach(element => {
     if (element.id >= startingID) startingID = element.id;
-  })
+  });
   startingID += 1;
 
   const [currentID, setCurrentID] = useState(startingID);
@@ -90,7 +90,7 @@ const HTMLPanel = (): JSX.Element => {
     setName('');
   };
 
-  const alphanumeric = (input:string): boolean => {
+  const alphanumeric = (input: string): boolean => {
     let letterNumber = /^[0-9a-zA-Z]+$/;
     if (input.match(letterNumber)) return true;
     return false;
@@ -118,10 +118,10 @@ const HTMLPanel = (): JSX.Element => {
 
   const handleDelete = (id: number): void => {
     dispatch({
-      type: "DELETE ELEMENT",
+      type: 'DELETE ELEMENT',
       payload: id
     });
-  }
+  };
 
   return (
     <div>

app/src/components/main/Canvas.tsx

@@ -9,11 +9,11 @@ import renderChildren from '../../helperFunctions/renderChildren';
 const findNestedChild = (curr, components) => {
   components.forEach((comp, i) => {
     comp.children.forEach(child => {
-      if (child.name === curr.name) console.log(child.name)
+      if (child.name === curr.name) console.log('childname', child.name);
     });
     if (comp.children.length !== 0) findNestedChild(curr, comp.children);
   });
-}
+};
 
 function Canvas() {
   const [state, dispatch] = useContext(StateContext);

app/src/containers/RightContainer.tsx

@@ -153,7 +153,25 @@ const RightContainer = (): JSX.Element => {
 
   const isChildOfPage = (): boolean => {
     let isChild: boolean = false;
+
+    // id of target we want to check
     const { id } = configTarget;
+    // put in logic here to check for all nested children
+    // const checkAllChildren = comps => {
+    //   comps.forEach(el => {
+    //     if (el.children.length > 0) {
+    //       checkAllChildren(el.children);
+    //     }
+    //     if (el.type === 'Component' && el.typeId === id) {
+    //       isChild = true;
+    //     }
+    //   });
+    // };
+    // const copyComp = [...state.components];
+    // checkAllChildren(copyComp);
+    // return isChild;
+
+    // was here previously
     state.components.forEach(comp => {
       comp.children.forEach(child => {
         if (child.type === 'Component' && child.typeId === id) {
@@ -215,9 +233,10 @@ const RightContainer = (): JSX.Element => {
   };
 
   const handleDeleteReusableComponent = () => {
-    isChildOfPage()
-      ? handleDialogError('component')
-      : dispatch({ type: 'DELETE REUSABLE COMPONENT', payload: {} });
+    // isChildOfPage()
+    //   ? handleDialogError('component')
+    //   :
+    dispatch({ type: 'DELETE REUSABLE COMPONENT', payload: {} });
   };
 
   const isReusable = (configTarget): boolean => {

app/src/helperFunctions/generateCode.ts

@@ -1,5 +1,9 @@
-import { Component, State, ChildElement, HTMLType } from '../interfaces/Interfaces';
-
+import {
+  Component,
+  State,
+  ChildElement,
+  HTMLType
+} from '../interfaces/Interfaces';
 
 declare global {
   interface Window {
@@ -28,6 +32,7 @@ const generateUnformattedCode = (
   const getEnrichedChildren = (currentComponent: Component | ChildElement) => {
     const enrichedChildren = currentComponent.children.map((elem: any) => {
       const child = { ...elem };
+      console.log('child', child);
       if (child.type === 'Component') {
         const referencedComponent = components.find(
           elem => elem.id === child.typeId
@@ -220,7 +225,6 @@ const generateUnformattedCode = (
 
 // formats code with prettier linter
 const formatCode = (code: string) => {
-
   // in test environment, window.api is not defined,
   // so we reference original prettier format function instead
   if (process.env.NODE_ENV === 'test') {

app/src/helperFunctions/renderChildren.tsx

@@ -14,7 +14,7 @@ const renderChildren = (children: ChildElement[]) => {
   const [state, dispatch] = useContext(StateContext);
   return children.map((child: ChildElement, i: number) => {
     const { type, typeId, style, childId, children, attributes, name } = child;
-    if (name === '') child.name = state.components[typeId - 1 ].name;
+    if (name === '') child.name = state.components[typeId - 1].name;
     // A DirectChildComponent is an instance of a top level component
     // This component will render IndirectChild components (div/components rendered inside a child component)
     if (type === 'Component') {