export fixed and live rendering

Author: MikoGome

app/src/components/bottom/CodePreview.tsx

@@ -45,11 +45,6 @@ const CodePreview: React.FC<{
   );
 
   const [input, setInput] = useState();
-  
-  useEffect(() => {
-    console.log('CodePreview input', input);
-    console.log('currentComponent.code', currentComponent.code);
-  }, [input])
 
   useEffect(() => {
     startService();

app/src/components/main/AddLink.tsx

@@ -11,7 +11,6 @@ import { styleContext } from '../../containers/AppContainer';
 function AddLink({ id }: AddRoutes) {
   const { isThemeLight } = useContext(styleContext);
   const [state, dispatch] = useContext(StateContext);
-  console.log('AddLink\'s state', state);
   const handleClick = (id) => {
     dispatch({
       type: 'ADD CHILD',
@@ -25,8 +24,6 @@ function AddLink({ id }: AddRoutes) {
 
   const handlePageSelect = event => {
     const selectedPageName = event.target.value;
-    console.log('selectedPages State: ', selectedPageName);
-    console.log('page state', state.components[0].children);
     state.components[0].children.forEach(element => {
       if(element.childId === id) {
         element.attributes.compLink = event.target.value;
@@ -36,7 +33,6 @@ function AddLink({ id }: AddRoutes) {
     // dispatch({ type: 'HREF TO', payload: });
   }
 
-  console.log('state', state);
   let pagesItems = state.components.filter(comp => state.rootComponents.includes(comp.id));
   let dropDown = pagesItems.map(comp => <MenuItem value={comp.name}>{comp.name}</MenuItem>);
   return (

app/src/components/main/DemoRender.tsx

@@ -66,6 +66,7 @@ const DemoRender = (): JSX.Element => {
         }
         if (elementType === 'input') componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
         else if (elementType === 'img') componentsToRender.push(<Box component={elementType} src={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
+        else if (elementType === 'Image') componentsToRender.push(<Box component='img' src={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
         else if (elementType === 'a') componentsToRender.push(<Box component={elementType} href='javascript:void(0)' className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>);
         else if (elementType === 'Switch') componentsToRender.push(<Switch>{renderedChildren}</Switch>);
         else if (elementType === 'Route') componentsToRender.push(<Route exact path={activeLink}>{renderedChildren}</Route>);

app/src/components/right/ProjectManager.tsx

@@ -118,6 +118,7 @@ const ProjectManager = () => {
     // when a directory is chosen, the callback will export the project to the chosen folder
     // Note: this listener is imported from the main process via preload.js
     window.api.addAppDirChosenListener(path => {
+      console.log('state compnents', state.components)
       exportProject(
         path,
         state.name

app/src/helperFunctions/generateCode.ts

@@ -45,6 +45,7 @@ const generateUnformattedCode = (
   let providers: string = '';
   let context: string = '';
   let links: boolean = false;
+  let images: boolean = false;
   const isRoot = rootComponents.includes(componentId);
   let importReactRouter = false;
   // returns an array of objects which may include components, html elements, and/or route links
@@ -75,17 +76,24 @@ const generateUnformattedCode = (
           referencedHTML.tag === 'ol' ||
           referencedHTML.tag === 'menu' ||
           referencedHTML.tag === 'li' ||
-          referencedHTML.tag === 'LinkTo' ||
+          referencedHTML.tag === 'Link' ||
           referencedHTML.tag === 'Switch' ||
-          referencedHTML.tag === 'Route'
+          referencedHTML.tag === 'Route' ||
+          referencedHTML.tag === 'Image'
         ) {
           child.children = getEnrichedChildren(child);
         }
+        console.log('referencedHTML', referencedHTML.tag);
         // when we see a Switch or LinkTo, import React Router
-        if (referencedHTML.tag === 'Switch' || referencedHTML.tag === 'LinkTo')
+        if (referencedHTML.tag === 'Switch' || (referencedHTML.tag === 'Link' && projectType === 'Classic React'))
           importReactRouter = true;
+        else if(referencedHTML.tag === 'Link')
+          links = true;
+        if(referencedHTML.tag === 'Image')
+          images = true;
         return child;
       } else if (child.type === 'Route Link') {
+        console.log('hit');
         links = true;
         child.name = components.find(
           (comp: Component) => comp.id === child.typeId
@@ -163,11 +171,17 @@ const generateUnformattedCode = (
       return `${levelSpacer(level, 5)}<${childElement.tag} href=${activeLink} ${elementTagDetails(childElement)}>${innerText}</${childElement.tag}>${levelSpacer(2, (3 + level))}`;
     } else if (childElement.tag === 'input') {
       return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}></${childElement.tag}>${levelSpacer(2, (3 + level))}`;
-    } else if (childElement.tag === 'LinkTo') {
-      return `${levelSpacer(level, 5)}<Link to=${activeLink}${elementTagDetails(childElement)}>${innerText}
-        ${tabSpacer(level)}${writeNestedElements(childElement.children, level + 1)}
+    } else if (childElement.tag === 'Link' && projectType === 'Classic React') {
+      return `${levelSpacer(level, 5)}<Link to=${activeLink}${elementTagDetails(childElement)}>
+        ${tabSpacer(level)}${writeNestedElements(childElement.children, level + 1)}${innerText}
+        ${tabSpacer(level - 1)}</Link>${levelSpacer(2, (3 + level))}`;
+    } else if (childElement.tag === 'Link' && projectType === 'Next.js') {
+      return `${levelSpacer(level, 5)}<Link href=${activeLink}${elementTagDetails(childElement)}>
+        ${tabSpacer(level)}${writeNestedElements(childElement.children, level + 1)}<a>${innerText}</a>
         ${tabSpacer(level - 1)}</Link>${levelSpacer(2, (3 + level))}`;
-    } else if (nestable) {
+    } else if (childElement.tag === 'Image') {
+      return `${levelSpacer(level, 5)}<${childElement.tag} src=${activeLink} ${elementTagDetails(childElement)}/>`;
+    } else if (nestable) { 
       const routePath = (childElement.tag === 'Route') ? (' ' + 'exact path=' + activeLink) : '';
       return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}${routePath}>${innerText}
         ${tabSpacer(level)}${writeNestedElements(childElement.children, level + 1)}
@@ -294,6 +308,8 @@ const generateUnformattedCode = (
     ${importsMapped}
     import Head from 'next/head'
     ${links ? `import Link from 'next/link'` : ``}
+    ${images ? `import Image from 'next/link'` : ``}
+    
     const ${currComponent.name} = (props): JSX.Element => {
       const  [value, setValue] = useState<any | undefined>("INITIAL VALUE");
       return (