Merge pull request #23 from buddhajjigae/annotation-feature

Annotation feature final update

Author: jonocr

app/src/components/bottom/CodePreview.tsx

@@ -34,6 +34,7 @@ const CodePreview: React.FC<{
   useEffect(() => {
     setDivHeight(height);
   }, [height])
+
   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

@@ -12,46 +12,43 @@ function Annotation({
   annotations,
 }: Annotations) {
   const [state, dispatch] = useContext(StateContext);
-  const [annotation, setAnnotations] = useState('');
-  const ref = useRef(null);
+  const [annotation, setAnnotations] = useState(annotations);
   // 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 = (id) => {
-    const childEle = handleFindAnno(childrenArray, id);
     setOpen(true);
   };
 
-  // For closing the modal
+  // For closing the modal and setting the global annotation value to the hook value
   const handleClose = (id) => {
-    const focusIndex = state.canvasFocus.componentId - 1;
-    const childrenArray = state.components[focusIndex].children;
     const childEle = handleFindAnno(childrenArray, id);
-    
-    if(childEle) {
+    if (childEle) {
+      // set global annotation value for this component to it's hook value
       childEle.annotations = annotation;
     }
-
     setOpen(false);
   };
 
   /**
    * 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;
 
-    if(value === '' || value === undefined) {
+    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;
+    }
+    if (value != annotation) {
       setAnnotations(value);
     }
   }
@@ -61,13 +58,18 @@ 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];
-      }
-
-      if(array[i].children.length > 0) {
-        return handleFindAnno(array[i], id);
+    for (let i = 0; i < array.length; i++) {
+      const currentElement = array[i];
+      if (currentElement.childId === id) {
+        return currentElement;
+      // 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;
+        }
       }
     }
     return '';
@@ -77,28 +79,24 @@ function Annotation({
    * 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);
+    const event = {
+      target: { value: annotation },
+      id: id,
     }
-  }, [state.canvasFocus])
-
+    handleAnnoChange(event);
+  }, [])
+  
   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'}}>
+    <div style={{ padding: '1px', float: 'right' }}>
       <button className='annotate-button-empty' id={"btn" + id} onClick={() => handleOpen(id)} ref={ref}>Notes</button>
-      <Modal 
+      <Modal
         open={open}
         onClose={() => handleClose(id)}
         keepMounted={true}
@@ -110,4 +108,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>

app/src/helperFunctions/renderChildren.tsx

@@ -14,7 +14,7 @@ import StateContext from '../context/context';
 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;
+    const { type, typeId, style, childId, children, attributes, name, annotations} = child;
     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)
@@ -26,7 +26,8 @@ const renderChildren = (children: ChildElement[]) => {
           type={type}
           typeId={typeId}
           key={'DirChildComp' + childId.toString() + name}
-          name={child.name}
+          name={name}
+          annotations={annotations}
         />
       );
     }
@@ -39,7 +40,8 @@ const renderChildren = (children: ChildElement[]) => {
           type={type}
           typeId={typeId}
           key={'DirChildHTML' + childId.toString() + name}
-          name={child.name}
+          name={name}
+          annotations={annotations}
         />
       );
     }
@@ -53,7 +55,8 @@ const renderChildren = (children: ChildElement[]) => {
           typeId={typeId}
           children={children}
           key={'DirChildHTMLNest' + childId.toString() + name}
-          name={child.name}
+          name={name}
+          annotations={annotations}
         />
         </div>
       );
@@ -66,7 +69,7 @@ const renderChildren = (children: ChildElement[]) => {
           typeId={typeId}
           children={children}
           key={'DirChildHTMLNest' + childId.toString() + name}
-          name={child.name}
+          name={name}
         />
       );
     }
@@ -80,7 +83,7 @@ const renderChildren = (children: ChildElement[]) => {
           typeId={typeId}
           children={children}
           key={'RouteLink' + childId.toString() + name}
-          name={child.name}
+          name={name}
         />
       );
     }