Fixed bugs caused by functional component refs

Author: tsully

src/components/main/CanvasComponentNew.tsx

@@ -3,9 +3,15 @@ import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 import { stateContext } from '../../context/context';
 import { updateInstance } from '../../helperFunctions/instances';
+import { ComponentInstance } from '../../interfaces/interfacesNew';
 
-const CanvasComponent = (props):JSX.Element => {
-  const ref = useRef<HTMLDivElement>(null);
+
+const CanvasComponent = ({
+  id,
+  style,
+  children
+}: ComponentInstance): JSX.Element => {
+  const ref = useRef(null);
   const pageId = 1;
 
   const [context, setContext] = useContext(stateContext);
@@ -18,7 +24,7 @@ const CanvasComponent = (props):JSX.Element => {
       if (didDrop) {
         return;
       }
-      const hoverId = props.id;
+      const hoverId = id;
       // updates state with new instance
       setContext(updateInstance(hoverId, item, context, pageId));
     },
@@ -32,7 +38,7 @@ const CanvasComponent = (props):JSX.Element => {
     item: {
       type: ItemTypes.INSTANCE,
       newInstance: false,
-      id: props.id
+      id: id
     },
     // canDrag: !props.children.length,
     collect: (monitor: any) => ({
@@ -53,9 +59,9 @@ const CanvasComponent = (props):JSX.Element => {
   return (
     <div ref={ref} className="componentDefault" style={elementStyle}>
       I am a Canvas Component! :D
-      {props.children}
+      {children}
     </div>
   );
-}
+};
 
 export default CanvasComponent;

src/components/main/MainCanvasNew.tsx

@@ -24,7 +24,7 @@ const renderCanvas = (state, page) => {
 // renders an instance in the instance tree. If instance has children, those instances will also be rendered recursively
 const renderComponent = component => {
   const { id, style } = component;
-
+  
   // const style = { border: '5px solid pink', margin: '40px' };
   return (
     <CanvasComponent id={id} style={style} key={id}>

src/helperFunctions/instances.ts

@@ -9,7 +9,7 @@ const componentInstanceGenerator = (newComponentData: NewComponentInstance) => {
   // if component already exists then reuse the existing ID
   //  otherwise, create a new ID
   // TODO: pull the nextId value from context
-  console.log('In the new component generator');
+
   let id;
   if (newComponentData.newInstance) {
     id = Math.floor(1000 * Math.random());
@@ -46,7 +46,9 @@ const findInstance = (
     //  if so, return the object
     if (currentNode.id === instanceId) return currentNode;
     // add each of the objects children to the search array
-    currentNode.children.forEach((node:ComponentInstance) => nodeArr.push(node));
+    currentNode.children.forEach((node: ComponentInstance) =>
+      nodeArr.push(node)
+    );
   }
   // if no search is found return -1
   return -1;
@@ -100,25 +102,20 @@ const updateInstance = (
   instanceState: Context,
   pageNum: Number
 ) => {
-  console.log('newComponentData ', newComponentData);
-  console.log('IN UPDATE INSTANCE');
   // copy state so we don't directly mutate state
   const state = { ...instanceState };
   // find instance heirarchy of the current page
   const currentPage = state.pages.find(page => page.pageId === pageNum);
   // create a new instance object w/ newComponentData. This is the component we're going to add to state
   // if we're going to move an existing instance
-  const newComponent = componentInstanceGenerator(
-    newComponentData
-  );
+  const newComponent = componentInstanceGenerator(newComponentData);
   //  if moved component isn't a new isntance, delete the original istance
   if (!newComponentData.newInstance)
     deleteInstance(newComponentData.id, currentPage);
   // find the new parent for the new component
   const newParent = findInstance(newParentId, currentPage);
   // add new component to its new parent
   newParent.children.push(newComponent);
-  console.log('New state is ', state);
   // return updated state
   return state;
 };

src/interfaces/InterfacesNew.ts

@@ -6,7 +6,7 @@ export interface NewComponentInstance {
 
 export interface ComponentInstance {
   id: Number;
-  styling: Object;
+  style: Object;
   children: ComponentInstance[];
 }