Merge pull request #27 from oslabs-beta/calvin

demo render fixes

Author: calvincao

app/src/components/main/DemoRender.tsx

@@ -42,8 +42,9 @@ const DemoRender = (): JSX.Element => {
               document.querySelectorAll('a').forEach(element => {
                 element.addEventListener('click', (event) => {
                   event.preventDefault();
-                  window.top.postMessage(event.target.href, '*');
-                })
+                  window.top.postMessage(event.currentTarget.href, '*');
+                  //document.body.style.backgroundColor = 'orange';
+                }, true)
               });
             } catch (err) {
               const app = document.querySelector('#app');
@@ -57,6 +58,7 @@ const DemoRender = (): JSX.Element => {
 
   //Switch between components when clicking on a link in the live render
   window.onmessage = (event) => {
+    if(event.data === undefined) return;
     const component = event.data?.split('/').at(-1);
     const componentId = component && state.components?.find((el) => {
       return el.name.toLowerCase() === component.toLowerCase();
@@ -70,7 +72,6 @@ const DemoRender = (): JSX.Element => {
   const componentBuilder = (array: object, key: number = 0) => {
     const componentsToRender = [];
     for (const element of array) {
-      
       if (element.name !== 'separator') {
         const elementType = element.name;
         const childId = element.childId;
@@ -79,13 +80,13 @@ const DemoRender = (): JSX.Element => {
         const classRender = element.attributes.cssClasses;
         const activeLink = element.attributes.compLink;
         let renderedChildren;
-        if (elementType !== 'input' && elementType !== 'img' && element.children.length > 0) {
+        if (elementType !== 'input' && elementType !== 'img' && elementType !== 'Image' && element.children.length > 0) {
           renderedChildren = componentBuilder(element.children);
         }
         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' || elementType === 'Link') componentsToRender.push(<Box component='a' 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}{renderedChildren}</Box>);
         else if (elementType === 'Switch') componentsToRender.push(<Switch>{renderedChildren}</Switch>);
         else if (elementType === 'Route') componentsToRender.push(<Route exact path={activeLink}>{renderedChildren}</Route>);
         else componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}{renderedChildren}</Box>
@@ -98,9 +99,10 @@ const DemoRender = (): JSX.Element => {
 
   let code = '';
   const currComponent = state.components.find(element => element.id === state.canvasFocus.componentId);
+
   componentBuilder(currComponent.children).forEach(element => {
     try{
-      code += ReactDOMServer.renderToString(element)
+      code += ReactDOMServer.renderToString(element);
     } catch {
       return;
     }

app/src/reducers/componentReducer.ts

@@ -397,6 +397,7 @@ const reducer = (state: State, action: Action) => {
         const canvasFocus = { ...state.canvasFocus, componentId, childId };
         //makes it so the code preview will update when clicking on a new component
         const components = state.components.map(element => {
+          console.log('element', element);
           return Object.assign({}, element);
         });
         return { ...state, components, canvasFocus };

server/controllers/cookieController.js

@@ -2,7 +2,6 @@ const cookieController = {};
 
 // setSSIDCookie - store the user id from database in cookie
 cookieController.setSSIDCookie = (req, res, next) => {
-  console.log('inside setSSIDCookie');
   // set cookie with key 'ssid' and value to user's id
   res.cookie('ssid', res.locals.id, {
     httpOnly: true,

server/controllers/sessionController.js

@@ -33,7 +33,6 @@ sessionController.isLoggedIn = (req, res, next) => {
 
 // startSession - create and save a new session into the database
 sessionController.startSession = (req, res, next) => {
-  console.log('inside startSession');
   // first check if user is logged in already
   Sessions.findOne({ cookieId: res.locals.id }, (err, ses) => {
     if (err) {
@@ -70,7 +69,6 @@ sessionController.startSession = (req, res, next) => {
 };
 
 sessionController.gitHubResponse = (req, res, next) => {
-  console.log('inside gitHubResponse');
   const { code } = req.query;
   if (!code) {
     console.log('code not found');
@@ -97,7 +95,6 @@ sessionController.gitHubResponse = (req, res, next) => {
   )
     .then(res => res.json())
     .then(token => {
-      console.log('token:', token);
       res.locals.token = token['access_token'];
       return next();
     })
@@ -107,7 +104,6 @@ sessionController.gitHubResponse = (req, res, next) => {
 };
 
 sessionController.gitHubSendToken = (req, res, next) => {
-  console.log('inside gitHubSendToken');
   const { token } = res.locals;
   fetch(`https://api.github.com/user/public_emails`, {
     method: 'GET',
@@ -143,7 +139,6 @@ sessionController.gitHubSendToken = (req, res, next) => {
 
 // creates a session when logging in with github
 sessionController.githubSession = (req, res, next) => {
-  console.log('inside gitHubSession');
   // req.user is passed in from passport js -> serializeuser/deserializeuser
   const cookieId = req.user._id;
   Sessions.findOne({ cookieId }, (err, session) => {

server/controllers/userController.js

@@ -26,11 +26,9 @@ const randomPassword = () => {
 };
 
 userController.createUser = (req, res, next) => {
-  console.log('inside createUser');
   let email, username, password;
   // use this condition for Oauth login
   if (res.locals.signUpType === 'oauth') {
-    console.log('line 33 of create user')
     email = res.locals.githubEmail;
     username = email;
     password = randomPassword();
@@ -54,14 +52,12 @@ userController.createUser = (req, res, next) => {
     // handle error of creating a new user
     if (err) {
       if (res.locals.signUpType === 'oauth') {
-        console.log('line 56 of userController'); // oauth enters this condition
         return next();
       }
       if (err.keyValue.email) {
         return res.status(400).json('Email Taken');
       }
       if (err.keyValue.username && res.locals.signUpType === 'oauth') {
-        console.log('line 56 of userController');
         res.locals.githubPassword = password;
         return next();
       }
@@ -78,17 +74,14 @@ userController.createUser = (req, res, next) => {
     }
     // if no error found when creating a new user, send back user ID in res.locals
     res.locals.id = newUser.id;
-    console.log('line 78 of userController');
     return next();
   });
 };
 
 // verifyUser - Obtain username and password from the request body, locate
 // the appropriate user in the database, and then authenticate the submitted password against the password stored in the database.
 userController.verifyUser = (req, res, next) => {
-  console.log('inside verifyUser');
   let { username, password, isFbOauth } = req.body;
-  console.log(username, password, isFbOauth);
   // handle Oauth
   if (res.locals.signUpType === 'oauth') {
     username = res.locals.githubEmail;