Merge pull request #29 from oslabs-beta/denton/share

Denton/share

Author: AhnafKhvn

app/src/components/main/DemoRender.tsx

@@ -23,7 +23,8 @@ const DemoRender = (): JSX.Element => {
     width: '100%',
     backgroundColor: '#FBFBFB',
     borderBottom: 'none',
-    overflow: 'auto'
+    overflow: 'auto',
+ 
   };
 
   const html = `
@@ -48,6 +49,10 @@ const DemoRender = (): JSX.Element => {
               app.innerHTML = '<div style="color: red;"><h4>Syntax Error</h4>' + err + '</div>';
             }
           }, false);
+          const handleClickInsideIframe = () => {
+            window.parent.postMessage('iframeClicked', '*');
+          };
+          window.addEventListener('click', handleClickInsideIframe);
         </script>
       </body>
     </html>
@@ -200,6 +205,7 @@ const DemoRender = (): JSX.Element => {
           srcDoc={html}
           width="100%"
           height="100%"
+          style = {{zIndex: -30}}
         />
       </div>
     </>

app/src/components/right/OpenProjects.tsx

@@ -32,21 +32,15 @@ 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.name === value
+      (project: any) => project._id === value
     )[0];
     // dispatch({ type: 'OPEN PROJECT', payload: selectedProject });
     console.log(selectedProject);
     dispatch(openProject(selectedProject))
     onClose();
   };
-  // these two filter between user projects and market projects
-  // const userProjects = projects.filter((project: any) => {
-  //   project.forked === undefined
-  // })
-  // const marketProjects = projects.filter((project: any) => {
-  //   project.forked !== undefined
-  // })
 
   return (
     <Dialog
@@ -60,7 +54,7 @@ function ProjectsDialog(props: ProjectDialogProps) {
       {projects.filter((project: any) => project.forked === undefined || project.forked === false).map((project: any, index: number) => (
     <ListItem
       button
-      onClick={() => handleListItemClick(project.name)}
+      onClick={() => handleListItemClick(project._id)}
       key={index}
     >
       <ListItemAvatar>
@@ -76,10 +70,10 @@ function ProjectsDialog(props: ProjectDialogProps) {
       {/* this section handles the projects cloned from the marketplace */}
       <DialogTitle style={{ color: "#000" }} id="project-dialog-title">MP Projects</DialogTitle>
       <List style={{ color: "#000" }}>
-      {projects.filter((project: any) => project.forked === true).map((project: any, index: number) => (
+      {projects.filter((project: any) => project.forked === true).map((project: any, index: number) => ( 
     <ListItem
       button
-      onClick={() => handleListItemClick(project.name)}
+      onClick={() => handleListItemClick(project._id)}
       key={index}
     >
       <ListItemAvatar>

app/src/components/top/NavBar.tsx

@@ -8,7 +8,7 @@ import NewExportButton from './NewExportButton';
 import { RootState } from '../../redux/store';
 import logo from '../../public/icons/win/logo.png';
 import { useSelector, useDispatch } from 'react-redux';
-import { publishProject } from '../../helperFunctions/projectGetSaveDel';
+import { publishProject, unpublishProject } from '../../helperFunctions/projectGetSaveDel';
 import PublishModal from './PublishModal';
 import { updateProjectId, updateProjectName, updateProjectPublished } from '../../redux/reducers/slice/appStateSlice';
 import { State } from '../../interfaces/Interfaces';
@@ -88,10 +88,16 @@ const NavBar = () => {
 
     };
 
-    useEffect(()=>{
-      console.log('stateName = ',state.name);
-      console.log('published =', state.published);   
-    }, [state.name, state.published])
+    const handleUnpublish = () => {
+      unpublishProject(state)
+        .then((unpublishedProject: State) => {
+          console.log('Project unpublished successfully', unpublishedProject);
+          dispatch(updateProjectPublished(false)); 
+        })
+        .catch((error) => {
+          console.error('Error unpublishing project:', error.message);
+        });
+    };
 
   return (
     <nav
@@ -111,9 +117,15 @@ const NavBar = () => {
         </div>
       </Link>
       <div style={buttonContainerStyle}>
-        <button style={buttonStyle} onClick={handlePublish}>
-          Publish
-        </button>
+        {state.published ? (
+          <button style={buttonStyle} onClick={handleUnpublish}>
+            Unpublish
+          </button>
+        ) : (
+          <button style={buttonStyle} onClick={handlePublish}>
+            Publish
+          </button>
+        )}
         <NewExportButton />
         <Button
           style={moreVertButtonStyle}

app/src/components/top/NavBarButtons.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { Ref, useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { Button } from '@mui/material';
@@ -295,29 +295,39 @@ function navbarDropDown(props) {
   let showMenu = props.dropMenu ? 'navDropDown' : 'hideNavDropDown';
 
   //for closing the menu on clicks outside of it.
-  const useOutsideClick = (callback) => {
+  const useOutsideClick = () => {
     const dropdownRef = useRef(null);
 
     useEffect(() => {
       const handleClick = (event) => {
-        if (
-          dropdownRef.current &&
-          !dropdownRef.current.contains(event.target)
+        if (event.type === "click" &&
+          (dropdownRef.current &&
+          !dropdownRef.current.contains(event.target)) || event.type === "message" && event.data === 'iframeClicked'
         ) {
-          callback();
+          handleClose();
         }
       };
-      document.addEventListener('click', handleClick, true);
+      window.addEventListener('click', handleClick, true);
+      window.addEventListener('message', handleClick);//to capture clicks in the iframe
 
       return () => {
-        document.removeEventListener('click', handleClick, true); //cleanup for memory purposes. ensures handleclick isn't called after the component is no longer rendered
+        window.removeEventListener('click', handleClick, true);
+        window.addEventListener('message', handleClick); //cleanup for memory purposes. ensures handleclick isn't called after the component is no longer rendered
       };
     }, [dropdownRef]);
 
     return dropdownRef;
   };
 
-  const ref = useOutsideClick(handleClose);
+  const ref = useOutsideClick();
+
+  // const handleMessage = (event) => {
+  //   if (event.data === 'iframeClicked') {
+  //     // Handle the click event here, e.g., close the dropdown menu
+  //     handleClose();
+  //   }
+  // };
+  // window.addEventListener('message', handleMessage);
 
   return (
     // <div ref={dropdownRef} className={showMenu}> dropdownRef making the menu fly off and anchorel messingup

app/src/helperFunctions/projectGetSaveDel.ts

@@ -94,6 +94,36 @@ export const publishProject = (
   return publishedProject;
 };
 
+export const unpublishProject = (
+  projectData: State
+): Promise<Object> => {
+  const body = JSON.stringify({
+    _id: projectData._id,
+    userId: window.localStorage.getItem('ssid'),
+  });
+
+  const response = fetch(`${serverURL}/unpublishProject`, {
+    method: 'PATCH',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    credentials: 'include',
+    body,
+  });
+
+  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};
+    })
+    .catch((err) => {
+      console.log(`Error unpublishing project ${err}`);
+      throw err;
+    });
+
+  return unpublishedProject;
+};
 
 export const deleteProject = (project: any): Promise<Object> => {
   const body = JSON.stringify({

server/controllers/marketplaceController.ts

@@ -39,14 +39,14 @@ const marketplaceController: MarketplaceController = {
   publishProject: async (req, res, next) => {
     const { _id, project, comments, userId, username, name } = req.body;
     const createdAt = Date.now();
-    console.log('Publish Project', _id, project, comments, userId, username, name )
 
     if (userId === req.cookies.ssid) {
 
       if (mongoose.isValidObjectId(_id)) {
 
         const noPub = {...project}
         delete noPub.published;
+        delete noPub._id;
         const publishedProject = await Projects.findOneAndUpdate
           (        // looks in projects collection for project by Mongo id
             { _id },