Merge pull request #12 from oslabs-beta/Miko

components and html elements render

Author: Evan-Crews

app/src/components/main/DemoRender.tsx

@@ -66,10 +66,10 @@ 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 === 'a') componentsToRender.push(<Box component={elementType} href={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>);
+        else if (elementType === 'a' || elementType === 'Link') componentsToRender.push(<Box component={'a'} href={activeLink} 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>);
-        else if (elementType === 'LinkTo') componentsToRender.push(<Link to={activeLink}>{innerText}</Link>);
+        // else if (elementType === 'LinkTo') componentsToRender.push(<Link to={activeLink}>{innerText}</Link>);
         else componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}{renderedChildren}</Box>);
         key += 1;
       }
@@ -80,26 +80,28 @@ const DemoRender = (): JSX.Element => {
   let code = '';
   //compone
 
-  componentBuilder(state.components[0].children).forEach(element => {
-    if(element.props.component === 'Link') {
-      return;
+  componentBuilder(state.components[0].children).forEach((element, index) => {
+    // if(element.props.component === 'Link') {
+    //   return;
+    //   // element.props.component = 'a';
+    //   // element.props.id = `rend${6}`;
+    // } else if(typeof element.type === 'function') {
+    //   return;
+    // }
+    console.log('element' + index, element);
+    console.log('component' + index, state.components[0].children[index * 2 + 1]);
+    try{
+      if(element.props.component === 'Link') {
+        
+      }
       // element.props.component = 'a';
       // element.props.id = `rend${6}`;
-    } else if(typeof element.type === 'function') {
+      code += ReactDOMServer.renderToString(element)
+    } catch {
       return;
     }
-    code += ReactDOMServer.renderToString(element)
   });
 
-  // state.components[0].children?.forEach(element => {
-  //   if(element.name === 'Switch' || element.name === 'Link') {
-  //     element.name = 'a';
-  //     element.typeId = 6;
-  //   }
-  //   console.log(element)
-  // });
-  // console.log('code', code);
-
   useEffect(() => {
     cssRefresher();
   }, [])