denton fixed clicking outside of dropdown, fixed wrong project with the same name being opened

Author: dentonwong

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

@@ -88,17 +88,6 @@ const NavBar = () => {
 
     };
 
-    useEffect(()=>{
-      console.log('stateName = ',state.name);
-      console.log('published =', state.published);   
-    }, [state.name, state.published])
-
-    // handleUnpublish = () => {
-    //   .then((project:State) => {
-    //     dispatch(updateProjectPublished(project.published(false));
-    //   })
-    // }
-
     const handleUnpublish = () => {
       unpublishProject(state)
         .then((unpublishedProject: State) => {
@@ -110,10 +99,6 @@ const NavBar = () => {
         });
     };
 
-// In handlePublish pass in state 
-//check to see if user is logged the same way as in publish project for the most part
-// then somehow do dispatch(updateProjectPublished(newProject.published === false))
-  
   return (
     <nav
       className="main-navbar"

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

server/controllers/marketplaceController.ts

@@ -39,7 +39,6 @@ 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) {