Merge pull request #25 from oslabs-beta/Ahnafkhvn/shareFunctionality

Ahnafkhvn/share functionality

Author: liamroh

app/src/components/top/NavBar.tsx

@@ -1,21 +1,32 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 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
   );
 
+  useEffect(()=>{
+    setProjectName(state.name)
+  }, [state.name])//update the ProjectName after state.name changes due to loading projects
+
   const buttonContainerStyle = {
     display: 'flex',
     alignItems: 'center',
@@ -49,6 +60,27 @@ const NavBar = () => {
     marginRight: '10px'
   };
 
+  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)
+      .then((promise) => {
+        console.log('Project published successfully', promise);
+        setPublishModalOpen(false);
+      })
+      .catch((error) => {
+        console.error('Error publishing project:', error.message);
+      });
+      
+  };
+  
   return (
     <nav
       className="main-navbar"
@@ -59,15 +91,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 +117,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';
@@ -11,7 +10,7 @@ import LoginButton from '../right/LoginButton';
 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';
@@ -184,6 +183,8 @@ const StyledMenuItem = withStyles((theme) => ({
 // where the main function starts //
 function navbarDropDown(props) {
   const dispatch = useDispatch();
+
+
   const [modal, setModal] = React.useState(null);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [roomCode, setRoomCode] = React.useState('');
@@ -200,6 +201,9 @@ function navbarDropDown(props) {
     setAnchorEl(event.currentTarget);
   };
 
+
+
+
   const clearWorkspace = () => {
     // Reset state for project to initial state
     const resetState = () => {
@@ -291,10 +295,35 @@ function navbarDropDown(props) {
     </svg>
   );
 
-  const showMenu = props.dropMenu ? 'navDropDown' : 'hideNavDropDown';
+  let showMenu = props.dropMenu ? 'navDropDown' : 'hideNavDropDown';
+  
+  //for closing the menu on clicks outside of it.
+  const useOutsideClick = (callback) => {
+    
+    const dropdownRef = useRef(null);
+    
+    useEffect(() => {
+      const handleClick = (event) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+          callback();
+        }
+      }
+      document.addEventListener('click', handleClick, true);
+      
+      return () => {
+        document.removeEventListener('click', handleClick, true);//cleanup for memory purposes. ensures handleclick isn't called after the component is no longer rendered
+      };
+    }, [dropdownRef]);
+
+    return dropdownRef
+    
+  }
+  
+  const ref = useOutsideClick(handleClose);
 
   return (
-    <div className={showMenu}>
+    // <div ref={dropdownRef} className={showMenu}> dropdownRef making the menu fly off and anchorel messingup
+    <div ref={ref} className={showMenu}> 
       <Link to="/tutorial" style={{ textDecoration: 'none' }} target="_blank">
         <button>
           Tutorial
@@ -398,4 +427,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/helperFunctions/projectGetSaveDel.ts

@@ -58,6 +58,42 @@ export const saveProject = (
   return project;//returns _id in addition to the project object from the document
 };
 
+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 {_id: data._id, ...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

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

server/controllers/marketplaceController.ts

@@ -1,6 +1,7 @@
 import Project from '../graphQL/resolvers/query';
 import { MarketplaceController } from '../interfaces';
 import { Projects, Users } from '../models/reactypeModels';
+import mongoose from 'mongoose';
 
 // array of objects, objects inside
 type Projects = { project: {} }[];
@@ -33,36 +34,39 @@ const marketplaceController: MarketplaceController = {
   /**
    * 
    * Middleware function that publishes (and saves) a project to the database
-   * @return sends the updated project to the frontend
+   * @return sends the updated entire project document to the frontend
    */
-  publishProject: (req, res, next) => {
+  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) {
-      Projects.findOneAndUpdate(
-        // looks in projects collection for project by Mongo id
-        { _id },
-        // update or insert the project
-        { project, createdAt, published: true, comments, name, userId, username },
-        // Options:
-        // upsert: true - if none found, inserts new project, otherwise updates it
-        // new: true - returns updated document not the original one
-        { upsert: true, new: true },
-        (err, result) => {
-          if (err) {
-            return next({
-              log: `Error in marketplaceController.publishProject: ${err}`,
-              message: {
-                err: 'Error in marketplaceController.publishProject, check server logs for details'
-              }
-            });
-          }
-          res.locals.publishedProject = result; //returns the entire document
-          return next();
-        }
-      );
+
+      if (mongoose.isValidObjectId(_id)) {
+        const publishedProject = await Projects.findOneAndUpdate
+          (        // looks in projects collection for project by Mongo id
+            { _id },
+            // update or insert the project
+            { project, createdAt, published: true, comments, name, userId, username },
+            // Options:
+            // upsert: true - if none found, inserts new project, otherwise updates it
+            // new: true - returns updated document not the original one
+            { upsert: true, new: true }
+          );
+        res.locals.publishedProject = publishedProject;
+        return next();
+      }else{
+        const noId = {...project};
+        delete noId._id; //removing the empty string _id from project
+        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();
+      }
     }
     else {
+      console.log('userId did not match')
       // we should not expect a user to be able to access another user's id, but included error handling for unexpected errors
       return next({
         log: 'Error in marketplaceController.publishProject',