removed event listener and isObjectType

Author: eddypjr

app/src/components/bottom/CodePreview.tsx

@@ -8,6 +8,8 @@ import 'ace-builds/src-noconflict/theme-solarized_dark';
 import 'ace-builds/src-noconflict/theme-solarized_light';
 import 'ace-builds/src-noconflict/theme-terminal';
 import { Component } from '../../interfaces/Interfaces';
+import { EditorState } from 'draft-js';
+import { Editor } from 'react-draft-wysiwyg';
 import useResizeObserver from '../../tree/useResizeObserver';
 import { string } from 'prop-types';
 
@@ -26,9 +28,10 @@ const CodePreview: React.FC<{
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
 
-  const handleCodeSnipChange = val => {
+  const handleCodeSnipChange = (val) => {
     currentComponent.code = val;
   };
+
   useEffect(() => {
     setDivHeight(height);
   }, [height])
@@ -40,7 +43,6 @@ const CodePreview: React.FC<{
         height: '100%',
         maxWidth: '100%',
         justifyContent: 'center',
-       
       }}
     >
       <AceEditor

app/src/components/main/Canvas.tsx

@@ -32,6 +32,7 @@ function Canvas() {
     // make a deep clone of state
       const deepCopiedState = JSON.parse(JSON.stringify(state));
       state.past.push(deepCopiedState.components[0].children);
+
   };
 
   // This hook will allow the user to drag items from the left panel on to the canvas

app/src/components/main/DirectChildHTML.tsx

@@ -14,6 +14,7 @@ function DirectChildHTML({
   type,
   typeId,
   style,
+  value,
 }: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
   const ref = useRef(null);

app/src/containers/RightContainer.tsx

@@ -49,7 +49,6 @@ const RightContainer = ({isThemeLight}): JSX.Element => {
     const style = configTarget.child
     ? configTarget.child.style
     : configTarget.style;
-    console.log('styleContext style', style)
     setDisplayMode(style.display ? style.display : '');
     setFlexDir(style.flexDirection ? style.flexDirection : '');
     setFlexJustify(style.justifyContent ? style.justifyContent : '');
@@ -68,7 +67,7 @@ const RightContainer = ({isThemeLight}): JSX.Element => {
   // handles all input field changes, with specific updates called based on input's name
   const handleChange = (e: React.ChangeEvent<{ value: any }>) => {
     let inputVal = e.target.value;
-console.log('inputVal', inputVal)
+
     switch (e.target.name) {
       case 'display':
         setDisplayMode(inputVal);
@@ -213,9 +212,6 @@ const undoRedoKey = useCallback((e) => {
 
 useEffect(() => {
   document.addEventListener("keydown", undoRedoKey);
-  return () => {
-    document.removeEventListener("keydown", undoRedoKey);
-  };
 }, []);
 
   // placeholder for handling deleting instance

app/src/helperFunctions/generateCode.ts

@@ -1,3 +1,5 @@
+import React, {useContext, useRef, useState} from 'react';
+import StateContext from '../context/context';
 import {
   Component,
   State,
@@ -69,7 +71,6 @@ const generateUnformattedCode = (
     });
     return enrichedChildren;
   };
-
   // write all code that will be under the "return" of the component
   const writeNestedElements = (enrichedChildren: any) => {
     return `${enrichedChildren
@@ -175,7 +176,6 @@ const generateUnformattedCode = (
     ${classBased ? `import React, {Component} from 'react';` : ''}
     ${!stateful && !classBased ? `import React from 'react';` : ''}
     ${importsMapped}
-
       ${
         classBased
           ? `class ${currentComponent.name} extends Component {`

app/src/interfaces/Interfaces.ts

@@ -17,16 +17,6 @@ export interface State {
   future: any[];
 }
 
-export interface PastElement {
-  type: string;
-  typeId: number;
-  name: string;
-  childId: number;
-  style: object;
-  attributes?: object;
-  children?: PastElement[];
-}
-
 export interface ChildElement {
   type: string;
   typeId: number;
@@ -36,7 +26,6 @@ export interface ChildElement {
   attributes?: object;
   children?: ChildElement[];
 }
-
 export interface Component {
   id: number;
   name: string;

app/src/reducers/componentReducer.ts

@@ -8,7 +8,6 @@ import {
 import initialState from '../context/initialState';
 import generateCode from '../helperFunctions/generateCode';
 import manageSeparators from '../helperFunctions/manageSeparators';
-import { isObjectType } from 'graphql';
 
 let separator = initialState.HTMLTypes[1];
 
@@ -210,7 +209,7 @@ const reducer = (state: State, action: Action) => {
         style: {},
         code: '',
         children: [],
-        isPage: action.payload.root
+        isPage: action.payload.root,
       };
       components.push(newComponent);
 
@@ -238,7 +237,7 @@ const reducer = (state: State, action: Action) => {
       const {
         type,
         typeId,
-        childId
+        childId,
       }: { type: string; typeId: number; childId: any } = action.payload;
 
       const parentComponentId: number = state.canvasFocus.componentId;
@@ -286,15 +285,16 @@ const reducer = (state: State, action: Action) => {
         name: newName,
         childId: state.nextChildId,
         style: {},
-        children: componentChildren
+        children: componentChildren,
+
       };
       const topSeparator: ChildElement = {
         type: 'HTML Element',
         typeId: separator.id,
         name: 'separator',
         childId: state.nextTopSeparatorId,
         style: separator.style,
-        children: []
+        children: [],
       };
 
 
@@ -620,8 +620,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());
-
-        console.log('state in undo', state)
       //generate code for the Code Preview
       state.components.forEach((el, i) => {
         el.code = generateCode(
@@ -643,8 +641,6 @@ const reducer = (state: State, action: Action) => {
         state.components[0].children = state.future[state.future.length - 1];
         //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());
-
-        console.log('state in redo', state)
       //generate code for the Code Preview
       state.components.forEach((el, i) => {
         el.code = generateCode(
@@ -659,6 +655,7 @@ const reducer = (state: State, action: Action) => {
         ...state
       };
     }
+    case 'CHANGEDVALUE': {}
 
     default:
       return state;