Merged with Main

Author: MadinventorZero

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:react/recommended", "airbnb-base"],
+  "extends": ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "airbnb-base"],
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true

app/src/components/bottom/CodePreview.tsx

@@ -34,7 +34,6 @@ const CodePreview: React.FC<{
   useEffect(() => {
     setDivHeight(height);
   }, [height])
-  // console.log(currentComponent.code);
   return (
     <div
     ref={wrapper}

app/src/components/login/SignIn.tsx

@@ -70,7 +70,10 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
   const FBAPPID = process.env.REACT_APP_FB_APP_ID;
 
   // this useEffect will check for cookies and set an item in localstorage for github Oauth session validation
-  useEffect(() => {
+  
+  // Caret start
+  // Commented because window api is broken. Work in progress
+  /* useEffect(() => {
     const githubCookie = setInterval(() => {
       window.api.setCookie();
       window.api.getCookie(cookie => {
@@ -85,7 +88,8 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
         }
       });
     }, 2000);
-  }, []);
+  }, []);*/
+  // Caret end
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let inputVal = e.target.value;

app/src/components/main/Annotation.tsx

@@ -13,27 +13,23 @@ function Annotation({
 }: Annotations) {
   const [state, dispatch] = useContext(StateContext);
   const [annotation, setAnnotations] = useState(annotations);
-  const ref = useRef(null);
   // React hook setting the annotation button modal open/close state
   const [open, setOpen] = React.useState(false);
+  const ref = useRef(null);
+  // focusIndex and childrenArray are used to find the array of all elements on the canvas
   const focusIndex = state.canvasFocus.componentId - 1;
   const childrenArray = state.components[focusIndex].children;
-  
+
   // For showing the modal
-  const handleOpen = () => {
+  const handleOpen = (id) => {
     setOpen(true);
   };
-  
-  // For closing the modal
-  const handleClose = (event) => {
-    const annoId = Number(event.target.ownerDocument.activeElement.lastChild.id);
-    const childEle = handleFindAnno(childrenArray, annoId);
-    // console.log('annoId', annoId);
-    // console.log('childrenArray????', childrenArray);
-    // console.log('childElement we are saving state to', childEle);
-    // console.log('annotation being saved to state', annotation);
-    if (childEle && annotation !== annotations) {
-      // console.log('annotation saved to state!!!!!!!!')
+
+  // For closing the modal and setting the global annotation value to the hook value
+  const handleClose = (id) => {
+    const childEle = handleFindAnno(childrenArray, id);
+    if (childEle) {
+      // set global annotation value for this component to it's hook value
       childEle.annotations = annotation;
     }
     setOpen(false);
@@ -42,40 +38,37 @@ function Annotation({
   /**
    * Handles when text exists in the textarea of the modal. 
    * If text exists/does not exist, corresponding button changes colors.
-   */ 
+   * Sets hook value to what is contained in the textarea
+   */
   const handleAnnoChange = (event) => {
     const { value } = event.target;
-    setAnnotations(value);
     if (value === '' || value === undefined) {
       ref.current.style.background = '#3ec1ac';
     } else {
       ref.current.style.background = '#cc99ff';
     }
+    if (value != annotation) {
+      setAnnotations(value);
+    }
   }
 
   /**
    * This handler will find the specific anno for the corresponding component on the canvas in the childrenArray - 
    * where the canvas components are placed
    */
   const handleFindAnno = (array, id) => {
-    let refElement = '';
     for (let i = 0; i < array.length; i++) {
       const currentElement = array[i];
       if (currentElement.childId === id) {
         return currentElement;
-      }
-      else if (currentElement.children.length > 0) {
-        refElement = handleFindAnno(currentElement.children, id);
-        if (refElement !== '') return refElement;
-      }
-    }
-    return refElement;
-  };
-
-  const annoRefresh = (array) => {
-    for (const element of array) {
-      if (element.hasOwnProperty(annotations)) {
-        console.log('Somthing here', ref);
+      // finds nested element if nested within canvas
+      } else if (currentElement.children.length > 0) {
+        // temp is to prevent a return of empty string since canvas element should always exist and allows the
+        // recursion to continue
+        const temp = handleFindAnno(currentElement.children, id) 
+        if (temp != '') {
+          return temp;
+        }
       }
       if (element.children.length > 0) return annoRefresh(element.children);
     }
@@ -85,9 +78,13 @@ function Annotation({
    * This useEffect allows the annotations to remain persistent when changing between root level components on the right panel
    */
   useEffect(() => {
-    annoRefresh(childrenArray);
-  }, [state.canvasFocus]);
-
+    const event = {
+      target: { value: annotation },
+      id: id,
+    }
+    handleAnnoChange(event);
+  }, [])
+  
   const body = (
     <div className='annotate-position'>
       <span className='annotate-textarea-header'>Notes for: {name} ( {id} )</span>
@@ -96,9 +93,9 @@ function Annotation({
   )
 
   return (
-    <div style={{padding: '1px', float: 'right'}}>
-      <button className='annotate-button-empty' id={"btn" + id} onClick={() => handleOpen()} ref={ref}>Notes</button>
-      <Modal 
+    <div style={{ padding: '1px', float: 'right' }}>
+      <button className='annotate-button-empty' id={"btn" + id} onClick={() => handleOpen(id)} ref={ref}>Notes</button>
+      <Modal
         open={open}
         onClose={handleClose}
         keepMounted={true}
@@ -110,4 +107,4 @@ function Annotation({
 }
 
 export default Annotation;
-// Caret End
+// Caret End

app/src/components/main/DemoRender.tsx

@@ -21,7 +21,7 @@ const DemoRender = (props): JSX.Element => {
     const componentsToRender = [];
     for (const element of array) {
       if (element.name !== 'separator') {
-        // console.log('detail from children array', element);
+       // console.log('detail from children array', element);
         const elementType = element.name;
         const childId = element.childId;
         const elementStyle = element.style;
@@ -45,7 +45,7 @@ const DemoRender = (props): JSX.Element => {
   useEffect(() => {
     const focusIndex = state.canvasFocus.componentId - 1;
     const childrenArray = state.components[focusIndex].children;
-    console.log('Refrenced Children in State!!!', childrenArray);
+   //console.log('Refrenced Children in State!!!', childrenArray);
     const renderedComponents = componentBuilder(childrenArray);
     setComponents(renderedComponents);
   }, [state.components, state.canvasFocus]);

app/src/components/main/renderDemo.css

@@ -18,7 +18,7 @@
 .form {
   position: relative;
   z-index: 1;
-  background: #FFFFFF;
+  background: #000000;
   max-width: 360px;
   margin: 0 auto 100px;
   padding: 45px;
@@ -181,9 +181,10 @@
 }
 
 
-/*
 
 
+/*
+
 List Example
 <ul>
   <li><span>home</span></li>