Merge branch 'fixforanno' of https://github.com/MadinventorZero/ReacType

Author: MadinventorZero

app/src/components/bottom/CodePreview.tsx

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

app/src/components/main/Annotation.tsx

@@ -12,29 +12,30 @@ function Annotation({
   annotations,
 }: Annotations) {
   const [state, dispatch] = useContext(StateContext);
-  const [annotation, setAnnotations] = useState('');
+  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 focusIndex = state.canvasFocus.componentId - 1;
   const childrenArray = state.components[focusIndex].children;
 
   // For showing the modal
-  const handleOpen = (id) => {
-    const childEle = handleFindAnno(childrenArray, id);
+  const handleOpen = () => {
     setOpen(true);
   };
-
+  
   // For closing the modal
-  const handleClose = (id) => {
-    const focusIndex = state.canvasFocus.componentId - 1;
-    const childrenArray = state.components[focusIndex].children;
-    const childEle = handleFindAnno(childrenArray, id);
-    
-    if(childEle) {
+  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!!!!!!!!')
       childEle.annotations = annotation;
     }
-
     setOpen(false);
   };
 
@@ -44,15 +45,11 @@ function Annotation({
    */ 
   const handleAnnoChange = (event) => {
     const { value } = event.target;
-
-    if(value === '' || value === undefined) {
+    setAnnotations(value);
+    if (value === '' || value === undefined) {
       ref.current.style.background = '#3ec1ac';
-      ref.current.id = 'btn' + event.target.id;
-      setAnnotations(value);
     } else {
       ref.current.style.background = '#cc99ff';
-      ref.current.id = 'btn' + event.target.id;
-      setAnnotations(value);
     }
   }
 
@@ -61,46 +58,49 @@ function Annotation({
    * where the canvas components are placed
    */
   const handleFindAnno = (array, id) => {
-    for(let i = 0; i < array.length; i++) {
-      if(array[i].childId === Number(id)) {
-        return array[i];
+    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;
+  };
 
-      if(array[i].children.length > 0) {
-        return handleFindAnno(array[i], id);
+  const annoRefresh = (array) => {
+    for (const element of array) {
+      if (element.hasOwnProperty(annotations)) {
+        console.log('Somthing here', ref);
       }
+      if (element.children.length > 0) return annoRefresh(element.children);
     }
-    return '';
-  }
+  };
 
   /**
    * This useEffect allows the annotations to remain persistent when changing between root level components on the right panel
    */
   useEffect(() => {
-    const targetElement = handleFindAnno(childrenArray, id);
-    if (targetElement !== '') {
-      const event = {
-        target : { value: targetElement.annotations},
-        id : id,
-      }
-      console.log("is this a value?", event.target.value);
-      handleAnnoChange(event);
-    }
-  }, [state.canvasFocus])
+    annoRefresh(childrenArray);
+  }, [state.canvasFocus]);
 
   const body = (
     <div className='annotate-position'>
       <span className='annotate-textarea-header'>Notes for: {name} ( {id} )</span>
-      <textarea className='annotate-textarea' id={id.toString()} onChange={handleAnnoChange}>{handleFindAnno(childrenArray, id).annotations}</textarea>
+      <textarea className='annotate-textarea' id={id.toString()} onChange={handleAnnoChange}>{annotations}</textarea>
     </div>
   )
 
   return (
     <div style={{padding: '1px', float: 'right'}}>
-      <button className='annotate-button-empty' id={"btn" + id} onClick={() => handleOpen(id)} ref={ref}>Notes</button>
+      <button className='annotate-button-empty' id={"btn" + id} onClick={() => handleOpen()} ref={ref}>Notes</button>
       <Modal 
         open={open}
-        onClose={() => handleClose(id)}
+        onClose={handleClose}
         keepMounted={true}
       >
         {body}

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;

app/src/helperFunctions/renderChildren.tsx

@@ -27,6 +27,7 @@ const renderChildren = (children: ChildElement[]) => {
           typeId={typeId}
           key={'DirChildComp' + childId.toString() + name}
           name={child.name}
+          annotations={child.annotations}
         />
       );
     }
@@ -40,6 +41,7 @@ const renderChildren = (children: ChildElement[]) => {
           typeId={typeId}
           key={'DirChildHTML' + childId.toString() + name}
           name={child.name}
+          annotations={child.annotations}
         />
       );
     }
@@ -54,6 +56,7 @@ const renderChildren = (children: ChildElement[]) => {
           children={children}
           key={'DirChildHTMLNest' + childId.toString() + name}
           name={child.name}
+          annotations={child.annotations}
         />
         </div>
       );

package.json

@@ -127,11 +127,6 @@
     "cors": "^2.8.5",
     "d3": "^6.2.0",
     "dotenv": "^8.2.0",
-    "electron": "^9.4.2",
-    "electron-debug": "^3.1.0",
-    "electron-devtools-installer": "^2.2.4",
-    "electron-splashscreen": "^1.0.0",
-    "electron-window-manager": "^1.0.6",
     "enzyme": "^3.4.1",
     "enzyme-adapter-react-16": "^1.2.0",
     "eslint-plugin-react-hooks": "^4.2.0",
@@ -186,6 +181,11 @@
     "csp-html-webpack-plugin": "^4.0.0",
     "css-loader": "^2.1.1",
     "dotenv-webpack": "^5.0.1",
+    "electron": "^9.4.2",
+    "electron-debug": "^3.1.0",
+    "electron-devtools-installer": "^2.2.4",
+    "electron-splashscreen": "^1.0.0",
+    "electron-window-manager": "^1.0.6",
     "electron-builder": "^22.7.0",
     "enzyme-to-json": "^3.5.0",
     "eslint": "^4.19.1",