updated broken publish button and switched import/export

kevinkchandra · kevinkchandra · commit 824d95df723c · 2024-12-06T14:05:53.000-08:00
diff --git a/app/src/components/top/NavBar.tsx b/app/src/components/top/NavBar.tsx
@@ -13,14 +13,14 @@ import logo from '../../public/icons/win/logo.png';
 import { useSelector, useDispatch } from 'react-redux';
 import {
   publishProject,
-  unpublishProject,
+  unpublishProject
 } from '../../helperFunctions/projectGetSaveDel';
 import PublishModal from './PublishModal';
 import {
   updateProjectId,
   updateProjectName,
   updateProjectPublished,
-  toggleScreenshotTrigger,
+  toggleScreenshotTrigger
 } from '../../redux/reducers/slice/appStateSlice';
 import { State } from '../../interfaces/Interfaces';
 
@@ -49,7 +49,8 @@ const NavBar: React.FC = (): JSX.Element => {
   const [publishModalOpen, setPublishModalOpen] = useState(false);
   const [projectName, setProjectName] = useState(state.name || '');
   const [invalidProjectName, setInvalidProjectName] = useState(false);
-  const [invalidProjectNameMessage, setInvalidProjectNameMessage] = useState('');
+  const [invalidProjectNameMessage, setInvalidProjectNameMessage] =
+    useState('');
   const urlAdd = useHistory();
   const isMarketplace = urlAdd.location.pathname === '/marketplace';
 
@@ -76,19 +77,19 @@ const NavBar: React.FC = (): JSX.Element => {
   const buttonContainerStyle = {
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'flex-start',
+    justifyContent: 'flex-start'
   };
 
   const buttonStyle = {
-    backgroundColor: '#0671E3',
+    backgroundColor: '#2D313A',
     border: 'none',
     color: 'white',
     fontSize: '12px',
     padding: '8px 15px',
     cursor: 'pointer',
     marginRight: '10px',
     marginLeft: '5px',
-    borderRadius: '10px',
+    borderRadius: '10px'
   };
 
   const moreVertButtonStyle = {
@@ -103,7 +104,7 @@ const NavBar: React.FC = (): JSX.Element => {
     minWidth: '20px',
     marginLeft: '0px',
     marginRight: '10px',
-    boxShadow: 'none',
+    boxShadow: 'none'
   };
 
   const handlePublish = () => {
@@ -142,7 +143,7 @@ const NavBar: React.FC = (): JSX.Element => {
 
   const handleAlertClose = (
     event: React.SyntheticEvent | Event,
-    reason?: string,
+    reason?: string
   ) => {
     if (reason === 'clickaway') {
       return;
@@ -156,7 +157,7 @@ const NavBar: React.FC = (): JSX.Element => {
 
   const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
     props,
-    ref,
+    ref
   ) {
     return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
   });
@@ -178,7 +179,7 @@ const NavBar: React.FC = (): JSX.Element => {
             </button>
           ) : (
             <button style={buttonStyle} onClick={handlePublish}>
-              Publish
+              Import
             </button>
           )}
           <NewExportButton />
diff --git a/app/src/components/top/NavBarButtons.tsx b/app/src/components/top/NavBarButtons.tsx
@@ -23,6 +23,15 @@ import { resetAllState } from '../../redux/reducers/slice/appStateSlice';
 import { setStyle } from '../../redux/reducers/slice/styleSlice';
 import { emitEvent } from '../../helperFunctions/socket';
 
+// added imports for publish logic
+import { publishProject } from '../../helperFunctions/projectGetSaveDel';
+import {
+  updateProjectId,
+  updateProjectName,
+  updateProjectPublished,
+  toggleScreenshotTrigger,
+} from '../../redux/reducers/slice/appStateSlice';
+
 const { API_BASE_URL } = serverConfig;
 
 const useStyles = makeStyles((theme) => createStyles({
@@ -121,50 +130,70 @@ const navbarDropDown = (props): JSX.Element => {
     props.setDropDownMenu(true);
   };
 
-  const clearWorkspace = () => {
-    // Reset state for project to initial state
-    const resetState = () => {
-      if (roomCode) emitEvent('clearCanvasAction', roomCode, userName);
-      else dispatch(resetAllState());
-    };
-    // Set modal options
-    const children = (
-      <List className="export-preference" style={{ zIndex: '12' }}>
-        <ListItem
-          key={'clear'}
-          button
-          onClick={resetState}
-          style={{
-            backgroundColor: '#E12D39',
-            borderRadius: '50px',
-            marginBottom: '2%',
-            marginTop: '5%',
-          }}
-        >
-          <ListItemText
-            primary={'Yes, delete all project data'}
-            style={{ textAlign: 'center' }}
-            onClick={closeModal}
-          />
-        </ListItem>
-      </List>
-    );
+  // const clearWorkspace = () => {
+  //   // Reset state for project to initial state
+  //   const resetState = () => {
+  //     if (roomCode) emitEvent('clearCanvasAction', roomCode, userName);
+  //     else dispatch(resetAllState());
+  //   };
+  //   // Set modal options
+  //   const children = (
+  //     <List className="export-preference" style={{ zIndex: '12' }}>
+  //       <ListItem
+  //         key={'clear'}
+  //         button
+  //         onClick={resetState}
+  //         style={{
+  //           backgroundColor: '#E12D39',
+  //           borderRadius: '50px',
+  //           marginBottom: '2%',
+  //           marginTop: '5%',
+  //         }}
+  //       >
+  //         <ListItemText
+  //           primary={'Yes, delete all project data'}
+  //           style={{ textAlign: 'center' }}
+  //           onClick={closeModal}
+  //         />
+  //       </ListItem>
+  //     </List>
+  //   );
 
-    // Create modal
-    setModal(
-      createModal({
-        closeModal,
-        children,
-        message: 'Are you sure you want to delete all data?',
-        primBtnLabel: null,
-        primBtnAction: null,
-        secBtnAction: null,
-        secBtnLabel: null,
-        open: true,
-      }),
-    );
-  };
+  //   // Create modal
+  //   setModal(
+  //     createModal({
+  //       closeModal,
+  //       children,
+  //       message: 'Are you sure you want to delete all data?',
+  //       primBtnLabel: null,
+  //       primBtnAction: null,
+  //       secBtnAction: null,
+  //       secBtnLabel: null,
+  //       open: true,
+  //     }),
+  //   );
+  // };
 
+  // handlePublish logic
+  const handlePublish = () => {
+    if (!state.name) {
+      console.error('Project name cannot be empty');
+      return;
+    }
+    if (!state.isLoggedIn) {
+      console.error('User must be logged in to publish');
+      return;
+    }
+    publishProject(state.name, state)
+      .then((newProject) => {
+        dispatch(updateProjectId(newProject._id));
+        dispatch(updateProjectName(newProject.name));
+        dispatch(updateProjectPublished(newProject.published));
+        dispatch(toggleScreenshotTrigger());
+        console.log('Project published successfully!');
+      })
+      .catch((error) => console.error('Error publishing project:', error));
+  };
   const handleClose = () => {
     setAnchorEl(null);
     props.setDropMenu(false);
@@ -217,7 +246,21 @@ const navbarDropDown = (props): JSX.Element => {
           <span>Tutorial</span>
         </button>
       </Link>
-      <button onClick={() => clearWorkspace()}>
+      <button onClick={handlePublish} style={{ backgroundColor: '#0671E3', color: 'white' }}>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-upload"
+    viewBox="0 0 16 16"
+  >
+    <path d="M.5 9.5a.5.5 0 0 0 .5.5h3v5a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-5h3a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5H10V1.5a.5.5 0 0 0-1 0v3H7V1.5a.5.5 0 0 0-1 0v3H.5a.5.5 0 0 0-.5.5v4z" />
+    <path d="M7 6v6h2V6H7z" />
+  </svg>
+  <span>Publish</span>
+</button>
+      {/* <button onClick={() => clearWorkspace()}>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="16"
@@ -229,7 +272,7 @@ const navbarDropDown = (props): JSX.Element => {
           <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z" />
         </svg>
         <span>Clear Canvas</span>
-      </button>
+      </button> */}
       {state.isLoggedIn && (
         <button onClick={handleClick}>
           <svg
diff --git a/app/src/components/top/NewExportButton.tsx b/app/src/components/top/NewExportButton.tsx
@@ -33,7 +33,7 @@ export default function NewExportButton(): JSX.Element {
   const closeModal = () => setModal('');
 
   const buttonStyle = {
-    backgroundColor: '#2D313A',
+    backgroundColor: '#0671E3',
     border: 'none',
     color: 'white',
     fontSize: '12px',
diff --git a/app/src/components/top/PublishModal.tsx b/app/src/components/top/PublishModal.tsx
@@ -35,9 +35,8 @@ const PublishModal = ({
   projectName,
   onChange,
   invalidProjectName,
-  invalidProjectNameMessage,
-}): JSX.Element => {
-  return (
+  invalidProjectNameMessage
+}): JSX.Element => (
     <Dialog
       style={{ color: '#000' }}
       open={open}
@@ -68,11 +67,10 @@ const PublishModal = ({
           Cancel
         </Button>
         <Button onClick={onSave} color="primary">
-          Publish
+          Import
         </Button>
       </DialogActions>
     </Dialog>
-  );
-};
+);
 
 export default PublishModal;
