Css edits

Author: raulclassico7

app/src/components/App.tsx

@@ -1,6 +1,6 @@
 import '../public/styles/style.css';
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   setInitialState,
   toggleLoggedIn
@@ -19,16 +19,20 @@ import { saveProject } from '../helperFunctions/projectGetSaveDel';
 // Intermediary component to wrap main App component with higher order provider components
 export const App = (): JSX.Element => {
   const state = useSelector((store: RootState) => store.appState);
+  const [toggleAttempt, setToggleAttempt] = useState(false);
   const dispatch = useDispatch();
   // checks if user is signed in as guest or actual user and changes loggedIn boolean accordingly
   useEffect(() => {
     if (window.localStorage.getItem('ssid') !== 'guest') {
-      dispatch(toggleLoggedIn());
+      dispatch(toggleLoggedIn(true));
     }
+    //setToggleAttempt(!toggleAttempt);
   }, []);
 
   // following useEffect runs on first mount
   useEffect(() => {
+    console.log('state.isLoggedIn', state.isLoggedIn)
+    // console.log('cookies.get in App', Cookies.get())
     // if user is a guest, see if a project exists in localforage and retrieve it
     if (!state.isLoggedIn) {
       localforage.getItem('guestProject').then((project) => {
@@ -39,6 +43,7 @@ export const App = (): JSX.Element => {
       });
     } else {
       // otherwise if a user is logged in, use a fetch request to load user's projects from DB
+      
       let userId;
       if (Cookies.get('ssid')) {
         userId = Cookies.get('ssid');

app/src/components/main/CanvasContainer.tsx

@@ -19,7 +19,6 @@ function CanvasContainer(props): JSX.Element {
   // onClickCodePreview swaps the rendered component from the canvas to the code preview editor
   const onClickCodePreview = () => {
     dispatch(toggleCodePreview());
-    console.log(state.codePreview);
   }
 
   const canvasContainerStyle = {

app/src/components/main/DemoRender.tsx

@@ -82,7 +82,7 @@ const DemoRender = (): JSX.Element => {
         const elementType = element.name;
         const childId = element.childId;
         const elementStyle = element.style;
-        const innerText = element.attributes.compText;
+        const innerText = element.attributes.compText; 
         const classRender = element.attributes.cssClasses;
         const activeLink = element.attributes.compLink;
         let renderedChildren;

app/src/components/marketplace/MarketplaceCard.tsx

@@ -18,9 +18,11 @@ import React from 'react';
 import imageSrc from '../../../../resources/marketplace_images/marketplace_image.png';
 import { red } from '@mui/material/colors';
 import axios from 'axios';
-import {useDispatch, useSelector} from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../redux/store';
 import { saveProject } from '../../helperFunctions/projectGetSaveDel';
+import { useHistory } from 'react-router-dom';
+import { openProject } from '../../redux/reducers/slice/appStateSlice';
 
 interface Project {
   forked: String,
@@ -37,21 +39,27 @@ interface Project {
 
 const ITEM_HEIGHT = 48;
 const MarketplaceCard = ({proj} :{proj: Project}) => {
+  const dispatch = useDispatch();
+  const history = useHistory();
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
   const state = useSelector((store:RootState) => store.appState);
-  console.log('HEY', state)
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
   const handleClone = async () => { // creates a copy of the project 
-    const updatedProject: Project = JSON.parse(JSON.stringify(proj)); // creates a deep copy
-    updatedProject.forked = `Forked from ${updatedProject.username}`;
-    await axios.post('/cloneProject', {
-      updatedProject
-    });
+    const docId = proj._id;
+    const response = await axios.get(`/cloneProject/${docId}`, { params: { username: window.localStorage.getItem('username') } });//passing in username as a query param is query params
+    const project = response.data.project;
     alert('Project cloned!');
     setAnchorEl(null);
+    return project;
+  };
+  
+  const handleCloneOpen = async() => {
+    const project = await handleClone();
+    history.push('/');
+    dispatch(openProject(project));
   };
   const handleClose = () => {
     setAnchorEl(null);
@@ -110,11 +118,19 @@ const MarketplaceCard = ({proj} :{proj: Project}) => {
           <MenuItem
             onClick={handleClone}
             sx={{
-              color: '#C6C6C6'
+              color: '#fff'
             }}
           >
             Clone
           </MenuItem>
+          <MenuItem
+            onClick={handleCloneOpen}
+            sx={{
+              color: '#fff'
+            }}
+          >
+            Clone and open
+          </MenuItem>
         </Menu>
       </Card>
     </>

app/src/components/marketplace/Searchbar.tsx

@@ -29,8 +29,12 @@ const SearchBar = ({marketplaceProjects, updateDisplayProjects }):JSX.Element =>
       //a-zA-Z letters (lowercase and uppercase) and underscore symbol
       //All together: match either the start/end of a line/string or any character that is not a letter.
       //Looks for anything that has the searchText in between non-letter characters
+      const patternString2 = '(?:^|.)' + searchText.toLowerCase() + '(?:$|.)';
+      //Only difference is that (?:^|.) (?:$|.) look for anything that matches the string in between any other characters for the username search
+      //test3 and 1test) would both match for string 'test'
+
       const searchResults = marketplaceProjects.reduce((results, curr) => {
-        if(curr.name.match(patternString) || curr.username.match(patternString))
+        if(curr.name.match(patternString) || curr.username.match(patternString2))
           results.push(curr)
         return results;
       }, [])

app/src/components/right/LoginButton.tsx

@@ -3,19 +3,19 @@ import { useSelector, useDispatch } from 'react-redux';
 import { toggleLoggedIn } from '../../redux/reducers/slice/appStateSlice';
 import config from '../../../../config.js';
 import { RootState } from '../../redux/store';
+import Cookies from 'js-cookie';
 // note that API_BASE_URL is assigned to different pages on dev mode vs prod mode
 const { API_BASE_URL, API_BASE_URL2 } = config;
 
 export default function LoginButton() {
   const state = useSelector((store:RootState) => store.appState);
   const dispatch = useDispatch();
-
   const handleLogout = () => {
+  
     window.localStorage.clear();
-    document.cookie = 'ssid' + '=; Max-Age=0';
 
     if (state.isLoggedIn) {
-      dispatch(toggleLoggedIn());
+      dispatch(toggleLoggedIn(false));
     }
 
     window.location.href = state.isLoggedIn

app/src/components/right/OpenProjects.tsx

@@ -24,7 +24,6 @@ export interface ProjectDialogProps {
 function ProjectsDialog(props: ProjectDialogProps) {
   const classes = useStyles();
   const { onClose, open, projects } = props;
-  console.log(projects)
   const state = useSelector((store:RootState) => store.appState);
   const dispatch = useDispatch();
   // If no projects selected, keep the name of the current displayed

app/src/components/right/SaveProjectButton.tsx

@@ -8,8 +8,9 @@ import DialogTitle from '@mui/material/DialogTitle';
 import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
 import { saveProject } from '../../helperFunctions/projectGetSaveDel';
 import {useDispatch, useSelector} from 'react-redux'
-import {updateProjectName} from '../../redux/reducers/slice/appStateSlice';
+import {updateProjectName, updateProjectId} from '../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../redux/store';
+import { State } from '../../interfaces/Interfaces';
 
 export default function FormDialog() {
   const [open, setOpen] = useState(false);
@@ -34,7 +35,7 @@ const dispatch = useDispatch();
       // If errors occur on the backend, the project name still gets updated
 
       dispatch(updateProjectName(projectName))
-      saveProject(projectName, state);
+      saveProject(projectName, state).then((project: State) => dispatch(updateProjectId(project._id)))//updates the slice with new _id from mongo
       setOpen(false);
     } else {
       setInvalidProjectName(true);

app/src/components/top/NavBar.tsx

@@ -1,21 +1,36 @@
-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';
+import { updateProjectId, updateProjectName, updateProjectPublished } from '../../redux/reducers/slice/appStateSlice';
+import { State } from '../../interfaces/Interfaces';
+
 
 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
   );
 
+  const dispatch = useDispatch();
+
+  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 +64,35 @@ 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((newProject: State) => {
+        console.log('Project published successfully', newProject);
+        setPublishModalOpen(false);
+        dispatch(updateProjectId(newProject._id))
+        dispatch(updateProjectName(newProject.name))
+        dispatch(updateProjectPublished(newProject.published))
+      })
+      .catch((error) => {
+        console.error('Error publishing project:', error.message);
+      });
+      
+    };
+
+    useEffect(()=>{
+      console.log('stateName = ',state.name);
+      console.log('published =', state.published);   
+    }, [state.name, state.published])
+  
   return (
     <nav
       className="main-navbar"
@@ -59,15 +103,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 +129,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';
@@ -8,11 +7,10 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import LoginButton from '../right/LoginButton';
-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 +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('');
@@ -201,6 +201,9 @@ function navbarDropDown(props) {
     setAnchorEl(event.currentTarget);
   };
 
+
+
+
   const clearWorkspace = () => {
     // Reset state for project to initial state
     const resetState = () => {
@@ -292,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
@@ -357,7 +385,7 @@ function navbarDropDown(props) {
       ></input>
       <button onClick={() => joinRoom()}>Join Room</button>
       <p>In Room: {joinedRoom}</p>
-      <Link to="/marketplace" style={{ textDecoration: 'none' }} target="_blank">
+      <Link to="/marketplace" style={{ textDecoration: 'none' }}>
         <button>
           Marketplace
           <svg
@@ -399,4 +427,4 @@ function navbarDropDown(props) {
   );
 }
 
-export default navbarDropDown;
+export default navbarDropDown;