generate code works with custom elements

Author: jinsoolim

app/src/components/main/DirectChildHTML.tsx

@@ -10,7 +10,6 @@ import { ItemTypes } from '../../constants/ItemTypes';
 import { stateContext } from '../../context/context';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import IndirectChild from './IndirectChild';
-import HTMLTypes from '../../context/HTMLTypes';
 import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
 
 function DirectChildHTML({
@@ -24,7 +23,7 @@ function DirectChildHTML({
 
   // find the HTML element corresponding with this instance of an HTML element
   // find the current component to render on the canvas
-  const HTMLType: HTMLType = HTMLTypes.find(
+  const HTMLType: HTMLType = state.HTMLTypes.find(
     (type: HTMLType) => type.id === typeId
   );
 

app/src/containers/RightContainer.tsx

@@ -8,7 +8,6 @@ import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 
 import { stateContext } from '../context/context';
-import HTMLTypes from '../context/HTMLTypes';
 
 import ProjectManager from '../components/right/ProjectManager';
 
@@ -116,7 +115,7 @@ const RightContainer = (props): JSX.Element => {
         // if type is HTML Element, search through HTML types to find matching element's name
       } else if (focusChild.type === 'HTML Element') {
         focusTarget.child.type = 'HTML element';
-        focusTarget.child.name = HTMLTypes.find(
+        focusTarget.child.name = state.HTMLTypes.find(
           elem => elem.id === focusChild.typeId
         ).name;
       }
@@ -166,7 +165,7 @@ const RightContainer = (props): JSX.Element => {
   const handlePageDelete = (id) => () => {
     dispatch({ type: 'DELETE PAGE', payload: { id }});
   }
-  
+
   const handleDeleteReusableComponent = () => {
     dispatch({ type: 'DELETE REUSABLE COMPONENT', payload: {} });
   }
@@ -398,7 +397,7 @@ const RightContainer = (props): JSX.Element => {
                 DELETE PAGE
               </Button>
             </div>
-          ) : 
+          ) :
             ''
           )}
         </div>

app/src/context/HTMLTypes.tsx

@@ -97,15 +97,6 @@ const HTMLTypes: HTMLType[] = [
     placeHolderShort: 'Header 2',
     placeHolderLong: '',
     icon: HeaderIcon
-  },
-  {
-    id: 12,
-    tag: 'strong',
-    name: 'Strong',
-    style: {},
-    placeHolderShort: 'Strong',
-    placeHolderLong: '',
-    icon: null
   }
 ];
 

app/src/helperFunctions/generateCode.ts

@@ -1,9 +1,8 @@
-import { Component, State, ChildElement } from '../interfaces/Interfaces';
+import { Component, State, ChildElement, HTMLType } from '../interfaces/Interfaces';
 // import HTMLTypes from '../context/HTMLTypes';
 import initialState from '../context/initialState';
 
-const test = document.getElementsByClassName("makeStyles-HTMLPanelItem-27");
-console.log(test);
+
 
 declare global {
   interface Window {
@@ -16,7 +15,8 @@ const generateUnformattedCode = (
   comps: Component[],
   componentId: number,
   rootComponents: number[],
-  projectType: string
+  projectType: string,
+  HTMLTypes: HTMLType[]
 ) => {
   const components = [...comps];
   // find the component that we're going to generate code for
@@ -40,8 +40,8 @@ const generateUnformattedCode = (
         child['name'] = referencedComponent.name;
         return child;
       } else if (child.type === 'HTML Element') {
-        const referencedHTML = initialState.HTMLTypes.find(elem => elem.id === child.typeId);
-        console.log("ARRAY OF HTMLS: ", initialState.HTMLTypes);
+        const referencedHTML = HTMLTypes.find(elem => elem.id === child.typeId);
+        console.log("ARRAY OF HTMLS: ", HTMLTypes);
         console.log("REF HTML: ", referencedHTML);
         child['tag'] = referencedHTML.tag;
         if (referencedHTML.tag === 'div') {
@@ -247,7 +247,8 @@ const generateCode = (
   components: Component[],
   componentId: number,
   rootComponents: number[],
-  projectType: string
+  projectType: string,
+  HTMLTypes: HTMLType[]
 ) => {
   // console.log('components', components);
   // console.log('componentId', componentId);
@@ -257,7 +258,8 @@ const generateCode = (
     components,
     componentId,
     rootComponents,
-    projectType
+    projectType,
+    HTMLTypes
   );
   return formatCode(code);
 };

app/src/reducers/componentReducer.ts

@@ -105,7 +105,7 @@ const reducer = (state: State, action: Action) => {
     return isChild;
   }
 
-  const updateIds = (components: Array<Object>) => {
+  const updateIds = (components: Component[]) => {
     components.forEach((comp, i) => comp.id = i + 1);
   }
 
@@ -187,7 +187,7 @@ const reducer = (state: State, action: Action) => {
       }
       // if there is a childId (childId here references the direct parent of the new child) find that child and a new child to its children array
 
-  
+
       else {
         const directParent = findChild(parentComponent, childId);
         directParent.children.push(newChild);
@@ -197,7 +197,8 @@ const reducer = (state: State, action: Action) => {
         components,
         parentComponentId,
         [...state.rootComponents],
-        state.projectType
+        state.projectType,
+        state.HTMLTypes
       );
 
       const canvasFocus = {
@@ -246,7 +247,8 @@ const reducer = (state: State, action: Action) => {
         components,
         state.canvasFocus.componentId,
         [...state.rootComponents],
-        state.projectType
+        state.projectType,
+        state.HTMLTypes
       );
 
       return { ...state, components };
@@ -276,7 +278,8 @@ const reducer = (state: State, action: Action) => {
         components,
         state.canvasFocus.componentId,
         [...state.rootComponents],
-        state.projectType
+        state.projectType,
+        state.HTMLTypes
       );
 
       return { ...state, components };
@@ -306,7 +309,8 @@ const reducer = (state: State, action: Action) => {
         components,
         state.canvasFocus.componentId,
         [...state.rootComponents],
-        state.projectType
+        state.projectType,
+        state.HTMLTypes
       );
       const canvasFocus = { ...state.canvasFocus, childId: null };
       return { ...state, components, canvasFocus };
@@ -333,18 +337,18 @@ const reducer = (state: State, action: Action) => {
       // check if component is a child element of a page
       if(isChildOfPage(id)) {
         // TODO: include name of parent in alert
-        // TODO: change canvas focus to parent  
+        // TODO: change canvas focus to parent
         //dialog.showErrorBox('error','Reusable components inside of a page must be deleted from the page');
         alert('Reusable components inside of a page must be deleted from the page');
         //const canvasFocus:Object = { componentId: id, childId: null };
         return  { ...state }
       }
       // filter out components that don't match id
-      const components: Array<Object> = [...state.components].filter(comp => comp.id != id);
+      const components: Component[] = [...state.components].filter(comp => comp.id != id);
 
       updateIds(components);
 
-      // TODO: temporary fix. should point to id directly 
+      // TODO: temporary fix. should point to id directly
       const canvasFocus = { componentId: 1, childId: null };
       return {...state, components, canvasFocus};
     }
@@ -375,7 +379,8 @@ const reducer = (state: State, action: Action) => {
           components,
           component.id,
           [...state.rootComponents],
-          projectType
+          projectType,
+          state.HTMLTypes
         );
       });