fixed iframe issue

Author: dentonwong

app/src/components/App.tsx

@@ -19,6 +19,7 @@ import { saveProject } from '../helperFunctions/projectGetSaveDel';
 // Intermediary component to wrap main App component with higher order provider components
 export const App = (): JSX.Element => {
   const state = useSelector((store: RootState) => store.appState);
+  
   const [toggleAttempt, setToggleAttempt] = useState(false);
   const dispatch = useDispatch();
   // checks if user is signed in as guest or actual user and changes loggedIn boolean accordingly
@@ -29,38 +30,40 @@ export const App = (): JSX.Element => {
     //setToggleAttempt(!toggleAttempt);
   }, []);
 
+  useEffect(()=>{console.log(state)}, [state])
+
   // following useEffect runs on first mount
   useEffect(() => {
     console.log('state.isLoggedIn', state.isLoggedIn)
     // console.log('cookies.get in App', Cookies.get())
     // if user is a guest, see if a project exists in localforage and retrieve it
-    if (!state.isLoggedIn) {
-      localforage.getItem('guestProject').then((project) => {
-        // if project exists, use dispatch to set initial state to that project
-        if (project) {
-          dispatch(setInitialState(project));
-        }
-      });
-    } else {
-      // otherwise if a user is logged in, use a fetch request to load user's projects from DB
+    // if (!state.isLoggedIn) {
+    //   localforage.getItem('guestProject').then((project) => {
+    //     // if project exists, use dispatch to set initial state to that project
+    //     if (project) {
+    //       dispatch(setInitialState(project));
+    //     }
+    //   });
+    // } else {
+    //   // otherwise if a user is logged in, use a fetch request to load user's projects from DB
 
-      let userId;
-      if (Cookies.get('ssid')) {
-        userId = Cookies.get('ssid');
-      } else {
-        userId = window.localStorage.getItem('ssid');
-      }
-      //also load user's last project, which was saved in localforage on logout
-      localforage.getItem(userId).then((project) => {
-        if (project) {
-          dispatch(setInitialState(project));
-        } else {
-          console.log(
-            'No user project found in localforage, setting initial state blank'
-          );
-        }
-      });
-    }
+    //   let userId;
+    //   if (Cookies.get('ssid')) {
+    //     userId = Cookies.get('ssid');
+    //   } else {
+    //     userId = window.localStorage.getItem('ssid');
+    //   }
+    //   also load user's last project, which was saved in localforage on logout
+    //   localforage.getItem(userId).then((project) => {
+    //     if (project) {
+    //       dispatch(setInitialState(project));
+    //     } else {
+    //       console.log(
+    //         'No user project found in localforage, setting initial state blank'
+    //       );
+    //     }
+    //   });
+    // }
   }, []);
   // useEffect(() => {
   //   // provide config properties to legacy projects so new edits can be auto saved

app/src/components/main/DemoRender.tsx

@@ -1,4 +1,4 @@
-import { Link, Route, BrowserRouter as Router, Switch } from 'react-router-dom';
+import { Link, Route, BrowserRouter as Router, Switch, useHistory } from 'react-router-dom';
 import React, { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -15,6 +15,7 @@ const DemoRender = (): JSX.Element => {
   const stylesheet = useSelector(
     (store: RootState) => store.appState.stylesheet
   );
+  const backHome = useHistory();
   const dispatch = useDispatch();
 
   // Create React ref to inject transpiled code in inframe
@@ -193,7 +194,12 @@ const DemoRender = (): JSX.Element => {
 
   //adds the code into the iframe
   useEffect(() => {
+    //load the current state code when the iframe is loaded and when code changes
+    iframe.current.addEventListener('load', ()=>{
+      iframe.current.contentWindow.postMessage(code, '*');
+    })
     iframe.current.contentWindow.postMessage(code, '*');
+
   }, [code]);
 
   return (

app/src/components/marketplace/MarketplaceCard.tsx

@@ -22,7 +22,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../redux/store';
 import { saveProject } from '../../helperFunctions/projectGetSaveDel';
 import { useHistory } from 'react-router-dom';
-import { openProject } from '../../redux/reducers/slice/appStateSlice';
+import { openProject, resetAllState } from '../../redux/reducers/slice/appStateSlice';
 
 interface Project {
   forked: String,

app/src/components/marketplace/Searchbar.tsx

@@ -14,7 +14,6 @@ const SearchBar = ({marketplaceProjects, updateDisplayProjects }):JSX.Element =>
 
 
   useEffect(()=>{
-           
     if(searchText === ''){
 
       updateDisplayProjects(marketplaceProjects)
@@ -34,7 +33,9 @@ const SearchBar = ({marketplaceProjects, updateDisplayProjects }):JSX.Element =>
       //test3 and 1test) would both match for string 'test'
 
       const searchResults = marketplaceProjects.reduce((results, curr) => {
-        if(curr.name.match(patternString) || curr.username.match(patternString2))
+        const lowName = curr.name.toLowerCase()
+        const lowUsername = curr.username.toLowerCase()
+        if(lowName.match(patternString) || lowUsername.match(patternString2))
           results.push(curr)
         return results;
       }, [])

app/src/components/right/OpenProjects.tsx

@@ -32,7 +32,6 @@ function ProjectsDialog(props: ProjectDialogProps) {
   };
   // If new project selected, close and set value to new project name
   const handleListItemClick = (value: string) => {
-    console.log('hadleList value', value)
     const selectedProject = projects.filter(
       (project: any) => project._id === value
     )[0];

app/src/components/top/NavBar.tsx

@@ -74,7 +74,7 @@ const NavBar = () => {
     }
 
 
-    publishProject(state, projectName)
+    publishProject(projectName, state)
       .then((newProject: State) => {
         console.log('Project published successfully', newProject);
         setPublishModalOpen(false);

app/src/helperFunctions/projectGetSaveDel.ts

@@ -30,14 +30,15 @@ export const getProjects = (): Promise<any> => {
 };
 
 export const saveProject = (
-  name: String,
-  workspace: Object
+  name: string,
+  workspace: State
 ): Promise<Object> => {
   const newProject = { ...workspace}
-  delete newProject['_id']; //deleting the _id from the current state slice. We don't actually want it in the project object in the mongo db document
+  delete newProject._id;
+  delete newProject.name; //deleting the _id from the current state slice. We don't actually want it in the project object in the mongo db document
   const body = JSON.stringify({
     name,
-    project: { ...newProject, name },
+    project: { ...newProject},
     userId: window.localStorage.getItem('ssid'),
     username: window.localStorage.getItem('username'),
     comments: []
@@ -52,23 +53,25 @@ export const saveProject = (
   })
     .then((res) => res.json())
     .then((data) => {
-      return {_id: data._id, published:data.published, ...data.project}; //passing up what is needed for the global appstateslice
+      return {_id: data._id, name: data.name, published:data.published, ...data.project}; //passing up what is needed for the global appstateslice
     })
     .catch((err) => console.log(`Error saving project ${err}`));
   return project;//returns _id in addition to the project object from the document
 };
 
 export const publishProject = (
-  projectData: State, 
-  projectName: string
+  name: string,
+  workspace: State
 ): Promise<Object> => {
+  const newProject = { ...workspace}
+  delete newProject.name; 
   const body = JSON.stringify({
-    _id: projectData._id, 
-    project: { ...projectData, name: projectName },
+    _id: workspace._id, 
+    name: name,
+    project: { ...newProject},
     userId: window.localStorage.getItem('ssid'),
     username: window.localStorage.getItem('username'),
     comments: [],
-    name: projectName,
   });
 
   const response = fetch(`${serverURL}/publishProject`, {
@@ -83,8 +86,8 @@ export const publishProject = (
   const publishedProject = response
     .then((res) => res.json())
     .then((data) => {
-      console.log({_id: data._id, published: data.published, ...data.project});
-      return {_id: data._id, published: data.published, ...data.project};
+      console.log({_id: data._id, name: data.name, published:data.published, ...data.project});
+      return {_id: data._id, name: data.name, published:data.published, ...data.project};
     })
     .catch((err) => {
       console.log(`Error publishing project ${err}`);
@@ -114,8 +117,8 @@ export const unpublishProject = (
   const unpublishedProject = response
     .then((res) => res.json())
     .then((data) => {
-      console.log({_id: data._id, published: data.published, ...data.project});
-      return {_id: data._id, published: data.published, ...data.project};
+      console.log({_id: data._id, name: data.name, published:data.published, ...data.project});
+      return {_id: data._id, name: data.name, published:data.published, ...data.project};
     })
     .catch((err) => {
       console.log(`Error unpublishing project ${err}`);

server/controllers/marketplaceController.ts

@@ -63,8 +63,8 @@ const marketplaceController: MarketplaceController = {
         const noId = {...project};
         delete noId._id;  //removing the empty string _id from project
         delete noId.published;
-        const publishedProject = await Projects.create( { project: noId, createdAt, published: true, comments, name, userId, username });
-        res.locals.publishedProject = publishedProject.toObject({ minimize: false }); 
+        const publishedProject = await Projects.create( { project: noId, createdAt, published: true, comments, name, userId, username })
+        res.locals.publishedProject = publishedProject.toObject({ minimize: false });
         console.log('published backend new', res.locals.publishedProject)
         return next();
       }
@@ -101,7 +101,7 @@ const marketplaceController: MarketplaceController = {
             }
           });
         }
-        res.locals.unpublishedProject = result;
+        res.locals.unpublishedProject = result.toObject({ minimize: false });
         return next();
       });
     }

server/controllers/projectController.ts

@@ -54,8 +54,9 @@ const projectController: ProjectController = {
         });
       }
       // so it returns each project like it is in state, not the whole object in DB
-      res.locals.projects = projects.map((elem: {_id: string; published: boolean; project: object } ) =>({
+      res.locals.projects = projects.map((elem: {_id: string; name: string; published: boolean; project: object } ) =>({
         _id: elem._id,
+        name: elem.name,
         published: elem.published,
         ...elem.project
       }));