publish functional

Author: AhnafKhvn

app/src/components/top/NavBar.tsx

@@ -4,14 +4,21 @@ import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import NavBarButtons from './NavBarButtons';
-import NavbarDropDown from './NavBarButtons';
 import NewExportButton from './NewExportButton';
 import { RootState } from '../../redux/store';
 import logo from '../../public/icons/win/logo.png';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import { publishProject } from '../../helperFunctions/projectGetSaveDel';
+import PublishModal from './PublishModal';
+
 
 const NavBar = () => {
   const [dropMenu, setDropMenu] = useState(false);
+  const state = useSelector((store: RootState) => store.appState);
+  const [publishModalOpen, setPublishModalOpen] = useState(false); 
+  const [projectName, setProjectName] = useState(state.name || '');
+  const [invalidProjectName, setInvalidProjectName] = useState(false);
+  const [invalidProjectNameMessage, setInvalidProjectNameMessage] = useState('');
   const isDarkMode = useSelector(
     (state: RootState) => state.darkMode.isDarkMode
   );
@@ -49,6 +56,25 @@ const NavBar = () => {
     marginRight: '10px'
   };
 
+  const handlePublish = () => {
+    if (state.isLoggedIn === true && projectName === '') {
+      setInvalidProjectName(true);
+      setPublishModalOpen(true);
+      return;
+    }
+    
+    if (state.name === '') { 
+      publishProject(state, projectName)
+        .then(() => {
+          console.log('Project published successfully');
+          setPublishModalOpen(false);
+        })
+        .catch((error) => {
+          console.error('Error publishing project:', error.message);
+        });
+      }
+  };
+  
   return (
     <nav
       className="main-navbar"
@@ -59,15 +85,17 @@ const NavBar = () => {
       }
     >
       <Link to="/" style={{ textDecoration: 'none' }}>
-      <div className="main-logo">
-        <Avatar src={logo}></Avatar>
-        <h1 style={isDarkMode ? { color: 'white' } : { color: 'white' }}>
-          ReacType
-        </h1>
-      </div>
-      </Link>  
+        <div className="main-logo">
+          <Avatar src={logo}></Avatar>
+          <h1 style={isDarkMode ? { color: 'white' } : { color: 'white' }}>
+            ReacType
+          </h1>
+        </div>
+      </Link>
       <div style={buttonContainerStyle}>
-        <button style={buttonStyle}>Share</button>
+        <button style={buttonStyle} onClick={handlePublish}>
+          Publish
+        </button>
         <NewExportButton />
         <Button
           style={moreVertButtonStyle}
@@ -83,6 +111,15 @@ const NavBar = () => {
           style={{ color: 'white' }}
         />
       </div>
+      <PublishModal
+        open={publishModalOpen}
+        onClose={() => setPublishModalOpen(false)}
+        onSave={handlePublish}
+        projectName={projectName}
+        onChange={(e) => setProjectName(e.target.value)}
+        invalidProjectName={invalidProjectName}
+        invalidProjectNameMessage={invalidProjectNameMessage}
+      />
     </nav>
   );
 };

app/src/components/top/NavBarButtons.tsx

@@ -1,5 +1,4 @@
 import { useDispatch, useSelector } from 'react-redux';
-
 import { Button } from '@mui/material';
 import DeleteProjects from '../right/DeleteProjects';
 import ExportButton from '../right/ExportButton';
@@ -12,7 +11,7 @@ import MarketplaceButton from '../right/MarketplaceButton';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import ProjectsFolder from '../right/OpenProjects';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { RootState } from '../../redux/store';
 import SaveProjectButton from '../right/SaveProjectButton';
 import { allCooperativeState } from '../../redux/reducers/slice/appStateSlice';
@@ -185,6 +184,8 @@ const StyledMenuItem = withStyles((theme) => ({
 // where the main function starts //
 function navbarDropDown(props) {
   const dispatch = useDispatch();
+  const dropdownRef = useRef(null);
+
   const [modal, setModal] = React.useState(null);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [roomCode, setRoomCode] = React.useState('');
@@ -201,6 +202,23 @@ function navbarDropDown(props) {
     setAnchorEl(event.currentTarget);
   };
 
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        props.setDropMenu(false);
+      }
+    }
+
+    // Attach the event listener
+    document.addEventListener("mousedown", handleClickOutside);
+
+    // Clean up the event listener
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [props]);
+
+
   const clearWorkspace = () => {
     // Reset state for project to initial state
     const resetState = () => {
@@ -295,7 +313,7 @@ function navbarDropDown(props) {
   const showMenu = props.dropMenu ? 'navDropDown' : 'hideNavDropDown';
 
   return (
-    <div className={showMenu}>
+    <div ref={dropdownRef} className={showMenu}>
       <Link to="/tutorial" style={{ textDecoration: 'none' }} target="_blank">
         <button>
           Tutorial
@@ -385,4 +403,4 @@ function navbarDropDown(props) {
   );
 }
 
-export default navbarDropDown;
+export default navbarDropDown;

app/src/components/top/PublishModal.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+
+const PublishModal = ({
+  open,
+  onClose,
+  onSave,
+  projectName,
+  onChange,
+  invalidProjectName,
+  invalidProjectNameMessage,
+}) => {
+  return (
+    <Dialog 
+    style={{ color: "#000" }}
+    open={open}
+    onClose={onClose} 
+    aria-labelledby="form-dialog-title"
+    >
+      <DialogTitle style={{ color: "#000" }} id="form-dialog-title">Publish Project</DialogTitle>
+      <DialogContent>
+        <TextField
+          autoFocus
+          inputProps={{ style: { color: "black" } }}
+          margin="dense"
+          id="name"
+          label="Project Name"
+          type="text" 
+          fullWidth
+          value={projectName}
+          onChange={onChange}
+          helperText={invalidProjectNameMessage}
+          error={invalidProjectName}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="primary">
+          Cancel
+        </Button>
+        <Button onClick={onSave} color="primary">
+          Publish
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default PublishModal;

app/src/containers/MarketplaceContainer.tsx

@@ -34,7 +34,6 @@ const MarketplaceContainer = () => {
 
   };
 
-  
   return (
     <div style={containerStyles}>
       <div style={contentStyles}>

app/src/helperFunctions/projectGetSaveDel.ts

@@ -1,3 +1,5 @@
+import { State } from "../interfaces/Interfaces";
+
 const isDev = process.env.NODE_ENV === 'development';
 const { DEV_PORT, API_BASE_URL } = require('../../../config.js');
 let serverURL = API_BASE_URL;
@@ -54,6 +56,42 @@ export const saveProject = (
   return project;
 };
 
+export const publishProject = (
+  projectData: State, 
+  projectName: string
+): Promise<Object> => {
+  const body = JSON.stringify({
+    _id: projectData._id, 
+    project: { ...projectData, name: projectName },
+    userId: window.localStorage.getItem('ssid'),
+    username: window.localStorage.getItem('username'),
+    comments: [],
+    name: projectName,
+  });
+
+  const response = fetch(`${serverURL}/publishProject`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    credentials: 'include',
+    body
+  });
+
+  const publishedProject = response
+    .then((res) => res.json())
+    .then((data) => {
+      return data.project;
+    })
+    .catch((err) => {
+      console.log(`Error publishing project ${err}`);
+      throw err;
+    });
+
+  return publishedProject;
+};
+
+
 export const deleteProject = (project: any): Promise<Object> => {
   const body = JSON.stringify({
     name: project.name,

app/src/interfaces/Interfaces.ts

@@ -3,6 +3,7 @@ import { DragObjectWithType } from 'react-dnd';
 export interface State {
   name: string;
   forked: boolean;
+  _id: string;
   isLoggedIn: boolean;
   components: Component[];
   rootComponents: number[];
@@ -130,6 +131,12 @@ export interface Attributes {
   compLink?: string;
 }
 
+// interface PublishResponse {
+//   success: boolean; 
+//   error?: string;
+// }
+
+
 export interface Arrow {
   renderArrow: (id: number) => any;
   deleteLines: () => void;

app/src/redux/reducers/slice/appStateSlice.ts

@@ -14,6 +14,7 @@ import manageSeparators from '../../../helperFunctions/manageSeparators';
 export const initialState: State = {
   name: '',
   forked: false,
+  _id: '',
   isLoggedIn: false,
   // config: { saveFlag: true, saveTimer: false },
   components: [

server/controllers/projectController.ts

@@ -39,7 +39,7 @@ const projectController: ProjectController = {
   // gets all of current user's projects
   getProjects: (req, res, next) => {
     const { userId } = req.body;
-    Projects.find({ userId }, (err, projects: Projects) => {
+    Projects.find({ userId }, (err, projects: Array<{_id: string; project: any }>) => {
       if (err) {
         return next({
           log: `Error in projectController.getProjects: ${err}`,
@@ -49,11 +49,15 @@ 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) => elem.project);
+      res.locals.projects = projects.map((elem) =>({
+        _id: elem._id,
+        ...elem.project
+      }));
       return next();
     });
   },
 
+  
   // delete project from database **currently not integrated into app**
   deleteProject: (req, res, next) => {
     // pull project name and userId from req.body