Merge pull request #30 from oslabs-beta/denton/iframe

liamroh · web-flow · commit 244dc2e043e9 · 2023-08-25T10:49:12.000-07:00
Denton/iframe
diff --git a/app/src/components/App.tsx b/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
@@ -34,33 +35,33 @@ export const App = (): JSX.Element => {
     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
diff --git a/app/src/components/main/DemoRender.tsx b/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 (
diff --git a/app/src/components/marketplace/MarketplaceCard.tsx b/app/src/components/marketplace/MarketplaceCard.tsx
@@ -14,15 +14,15 @@ import {
 } from '@mui/material';
 
 import { MoreVert } from '@mui/icons-material';
-import React from 'react';
+import React, { useEffect } from 'react';
 import imageSrc from '../../../../resources/marketplace_images/marketplace_image.png';
 import { red } from '@mui/material/colors';
 import axios from 'axios';
 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,
@@ -50,10 +50,11 @@ const MarketplaceCard = ({proj} :{proj: Project}) => {
   const handleClone = async () => { // creates a copy of the project 
     const docId = proj._id;
     const response = await axios.get(`/cloneProject/${docId}`, { params: { username: window.localStorage.getItem('username') } });//passing in username as a query param is query params
-    const project = response.data.project;
+    const project = response.data;
+    console.log('handleClone project', response.data)
     alert('Project cloned!');
     setAnchorEl(null);
-    return project;
+    return {_id: project._id, name: project.name, published: project.published, ...project.project};
   };
   
   const handleCloneOpen = async() => {
@@ -66,6 +67,8 @@ const MarketplaceCard = ({proj} :{proj: Project}) => {
   };
 
 
+
+
   return (
     <>
       <Card
diff --git a/app/src/components/marketplace/Searchbar.tsx b/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;
       }, [])
diff --git a/app/src/components/right/DeleteProjects.tsx b/app/src/components/right/DeleteProjects.tsx
@@ -39,8 +39,9 @@ function ProjectsDialog(props: ProjectDialogProps) {
   // If new project selected, close and set value to new project name
   const handleDelete = (value: string) => {
     const selectedProject = projects.filter(
-      (project: any) => project.name === value
-    )[0];
+      (project: any) => project._id === value
+      )[0];
+    console.log('deleting this one', selectedProject)
     deleteProject(selectedProject);
     localforage.removeItem(window.localStorage.getItem('ssid'));
     dispatch(setInitialState(initialState))
@@ -59,7 +60,7 @@ function ProjectsDialog(props: ProjectDialogProps) {
         {projects.filter((project: any) => project.forked === undefined || project.forked === false).map((project: any, index: number) => (
           <ListItem
             button
-            onClick={() => handleDelete(project.name)}
+            onClick={() => handleDelete(project._id)}
             key={index}
           >
             <ListItemAvatar>
@@ -76,7 +77,7 @@ function ProjectsDialog(props: ProjectDialogProps) {
         {projects.filter((project: any) => project.forked === true).map((project: any, index: number) => (
           <ListItem
             button
-            onClick={() => handleDelete(project.name)}
+            onClick={() => handleDelete(project._id)}
             key={index}
           >
             <ListItemAvatar>
diff --git a/app/src/components/right/OpenProjects.tsx b/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];
diff --git a/app/src/components/top/NavBar.tsx b/app/src/components/top/NavBar.tsx
@@ -65,16 +65,14 @@ const NavBar = () => {
   };
 
   const handlePublish = () => {
-    console.log('projectName', projectName)
-    console.log('state.name', state.name)
     if (state.isLoggedIn === true && projectName === '') {
       setInvalidProjectName(true);
       setPublishModalOpen(true);
       return;
     }
     
 
-    publishProject(state, projectName)
+    publishProject(projectName, state)
       .then((newProject: State) => {
         console.log('Project published successfully', newProject);
         setPublishModalOpen(false);
diff --git a/app/src/helperFunctions/projectGetSaveDel.ts b/app/src/helperFunctions/projectGetSaveDel.ts
@@ -26,18 +26,19 @@ export const getProjects = (): Promise<any> => {
       return data;
     })
     .catch((err) => console.log(`Error getting project ${err}`));
-  return projects;
+  return projects;//returns an array of projects with _id, name, project
 };
 
 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}`);
@@ -127,7 +130,7 @@ export const unpublishProject = (
 
 export const deleteProject = (project: any): Promise<Object> => {
   const body = JSON.stringify({
-    name: project.name,
+    _id: project._id,
     userId: window.localStorage.getItem('ssid')
   });
   const deletedProject = fetch(`${serverURL}/deleteProject`, {
@@ -140,7 +143,7 @@ export const deleteProject = (project: any): Promise<Object> => {
   })
     .then((res) => res.json())
     .then((data) => {
-      return data;
+      return {_id: data._id, name: data.name, published:data.published, ...data.project};
     })
     .catch((err) => console.log(`Error deleting project ${err}`));
   return deletedProject;
diff --git a/server/controllers/marketplaceController.ts b/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();
       });
     }
diff --git a/server/controllers/projectController.ts b/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
       }));
@@ -67,8 +68,8 @@ const projectController: ProjectController = {
   // delete project from database **currently not integrated into app**
   deleteProject: (req, res, next) => {
     // pull project name and userId from req.body
-    const { name, userId } = req.body;
-    Projects.findOneAndDelete({ name, userId }, null, (err, deleted) => {
+    const { _id, userId } = req.body;
+    Projects.findOneAndDelete({ _id, userId }, null, (err, deleted) => {
       if (err) {
         return next({
           log: `Error in projectController.deleteProject: ${err}`,

Original file line number	Diff line number	Diff line change
`@@ -63,8 +63,8 @@ const marketplaceController: MarketplaceController = {`
`63`	`63`	`const noId = {...project};`
`64`	`64`	`delete noId._id; //removing the empty string _id from project`
`65`	`65`	`delete noId.published;`
`66`		`- const publishedProject = await Projects.create( { project: noId, createdAt, published: true, comments, name, userId, username });`
`67`		`- res.locals.publishedProject = publishedProject.toObject({ minimize: false });`
	`66`	`+ const publishedProject = await Projects.create( { project: noId, createdAt, published: true, comments, name, userId, username })`
	`67`	`+ res.locals.publishedProject = publishedProject.toObject({ minimize: false });`
`68`	`68`	`console.log('published backend new', res.locals.publishedProject)`
`69`	`69`	`return next();`
`70`	`70`	`}`
`@@ -101,7 +101,7 @@ const marketplaceController: MarketplaceController = {`
`101`	`101`	`}`
`102`	`102`	`});`
`103`	`103`	`}`
`104`		`- res.locals.unpublishedProject = result;`
	`104`	`+ res.locals.unpublishedProject = result.toObject({ minimize: false });`
`105`	`105`	`return next();`
`106`	`106`	`});`
`107`	`107`	`}`