Cleaned up comments and unused code and deleted customHooks.ts file

Author: elenaconn

app/src/components/bottom/BottomTabs.tsx

@@ -25,8 +25,6 @@ const BottomTabs = () => {
 
   // breaks if handleChange is commented out
   const handleChange = (event: React.ChangeEvent, value: number) => {
-    // console.log('value', value)
-    // console.log('setTab', setTab)
     setTab(value);
   };
  // Allows users to toggle project between "next.js" and "Classic React"
@@ -36,7 +34,6 @@ const BottomTabs = () => {
     dispatch({ type: 'CHANGE PROJECT TYPE', payload: { projectType } });
   };
   const { components, HTMLTypes } = state;
-  // console.log('components', components)
 
   const changeTheme = e => {
     setTheme(e.target.value);

app/src/components/bottom/CodePreview.tsx

@@ -16,9 +16,7 @@ const CodePreview: React.FC<{
   setTheme: any | null;
   }> = ({ theme, setTheme }) => {
   const wrapper = useRef();
-  // console.log('wrapper', wrapper)
   const dimensions = useResizeObserver(wrapper);
-  // console.log('dimensions', dimensions)
   const { width, height } =
     dimensions || 0;
 
@@ -27,7 +25,7 @@ const CodePreview: React.FC<{
   const currentComponent = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
-// console.log('currentComp in CodePreview', currentComponent)
+
   const handleCodeSnipChange = val => {
     currentComponent.code = val;
   };

app/src/components/main/Canvas.tsx

@@ -7,50 +7,44 @@ import { Component, DragItem } from '../../interfaces/Interfaces';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
 
-// const snapStateArr = [];
+
 function Canvas() {
   const [state, dispatch] = useContext(StateContext);
-  console.log('state in Canvas', state);
-  // const [ prevState, setPrevState ] = useState<Array<object>>([]); // NOT USING
   // find the current component to render on the canvas
   const currentComponent: Component = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
     );
 
-  // console.log('currentComponent', currentComponent)
-
   // changes focus of the canvas to a new component / child
   const changeFocus = (componentId: number, childId: number | null) => {
     dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
-    
   };
+
   // onClickHandler is responsible for changing the focused component and child component
   function onClickHandler(event) {
     event.stopPropagation();
     // note: a null value for the child id means that we are focusing on the top-level component rather than any child
     changeFocus(state.canvasFocus.componentId, null);
-  }
+  };
 
   // stores a snapshot of state into the past array for UNDO
   const snapShotFunc = () => {
     // make a deep clone of state
       const deepCopiedState = JSON.parse(JSON.stringify(state));
       state.past.push(deepCopiedState.components[0].children);
-      // console.log('state in snapShotFunc', state.past)
-    }
-
+  };
 
   // This hook will allow the user to drag items from the left panel on to the canvas
   const [{ isOver }, drop] = useDrop({
     accept: ItemTypes.INSTANCE,
     drop: (item: DragItem, monitor: DropTargetMonitor) => {
       const didDrop = monitor.didDrop();
-      // returns false for direct drop target
+      // takes a snapshot of state to be used in UNDO and REDO cases
       snapShotFunc();
+      // returns false for direct drop target
       if (didDrop) {
         return;
       }
-      // console.log('item', item)
       // if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
       if (item.newInstance) {
         dispatch({

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -17,12 +17,10 @@ function DirectChildHTMLNestable({
 }: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
   const ref = useRef(null);
-// stores a snapshot of state into the past array for nested elements for the UNDO case
+// takes a snapshot of state to be used in UNDO and REDO cases
 const snapShotFunc = () => {
   const deepCopiedState = JSON.parse(JSON.stringify(state));
   state.past.push(deepCopiedState.components[0].children);
-  // state.future.push(deepCopiedState.components[0].children);
-  // console.log('state.past in directChildHTMLNest', state)
 };
   // find the HTML element corresponding with this instance of an HTML element
   // find the current component to render on the canvas
@@ -55,6 +53,7 @@ const snapShotFunc = () => {
     // triggered on drop
     drop: (item: any, monitor: DropTargetMonitor) => {
       const didDrop = monitor.didDrop();
+      // takes a snapshot of state to be used in UNDO and REDO cases
       snapShotFunc();
       if (didDrop) {
         return;

app/src/containers/RightContainer.tsx

@@ -43,7 +43,6 @@ const RightContainer = ({isThemeLight}): JSX.Element => {
   const [deleteComponentError, setDeleteComponentError] = useState(false);
   const { style } = useContext(styleContext);
   const [modal, setModal] = useState(null);
-  const [prevState, setPrevState] = useState(state);
 
 
   const resetFields = () => {
@@ -197,10 +196,7 @@ const RightContainer = ({isThemeLight}): JSX.Element => {
     return styleObj;
   };
 
-/****************************** UNDO AND REDO ****************************************** */
-// undo functionality
-// onClick this function will be invoked.
-// set current state components.children to previous state and store current state children array in another place holder to not lose current state before reassigning to previous position.
+// UNDO/REDO functionality--onClick these functions will be invoked.
 const undoAction = () => {
   dispatch({ type: 'UNDO', payload: {} });
 };
@@ -523,23 +519,15 @@ const redoAction = () => {
             color="primary"
             className={classes.button}
             onClick={undoAction}
-            // onClick={((e) => handleClick(e, prevCount))}
             >
-
-              {/* <i className="fas fa-backward"/> */}
               <i className="fas fa-undo"></i>
             </Button>
             <Button
             color="primary"
             className={classes.button}
             onClick={redoAction}
-
-            // onClick={clearComps}
-            // onClick={redoAction}
-            // onClick = {handleClick}
             >
               <i className="fas fa-redo"></i>
-              {/* <i className="fas fa-forward"/> */}
             </Button>
         </div>
         </div>

app/src/helperFunctions/customHook.ts

@@ -192,15 +192,6 @@ const reducer = (state: State, action: Action) => {
     }
   };
 
-/******************************* REDO ARRAY ********************************* */
-// let redoArr = [];
-// let stateSnap = [state];
-// console.log('stateSnap', stateSnap)
-// const redoArrFunc = (...htmlTag) => {
-  // redoArr.push(...htmlTag);
-  // return redoArr;
-// }
-
   switch (action.type) {
     case 'ADD COMPONENT': {
       if (
@@ -628,10 +619,6 @@ const reducer = (state: State, action: Action) => {
         state.components[0].children = state.past[state.past.length-1];
         //the last element of past array gets pushed into future;
         state.future.push(state.past.pop());
-          // state.past[state.past.length - 1]);
-        //pop the last element off the past array
-        // state.past.pop();
-        console.log('state in UNDO', state);
       //generate code for the Code Preview
       state.components.forEach((el, i) => {
         el.code = generateCode(
@@ -647,16 +634,12 @@ const reducer = (state: State, action: Action) => {
       };
     }
     case 'REDO': {
-      //nothing left to undo
-      // if (state.past.length === 0) return {...state};
       //nothing left to redo
       if(state.future.length === 0) return {...state};
       //the children array of state.components[0] will equal the last element of the future array
         state.components[0].children = state.future[state.future.length - 1];
-        //the last element of the future array gets pushed into the past array
+        //the last element of the future array gets pushed into the past array and the last element of the future array gets popped off
         state.past.push(state.future.pop());
-        //the last element of the future array gets popped off
-        console.log('state in REDO', state);
       //generate code for the Code Preview
       state.components.forEach((el, i) => {
         el.code = generateCode(