Merge branch 'dev' into victor/sidebar

Author: martins5225

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/bottom/BottomTabs.tsx

@@ -80,11 +80,11 @@ const BottomTabs = (props): JSX.Element => {
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="CSS Editor"
           />
-          <Tab
+          {/* <Tab (there was no more need for this tab since we created an outside button for the codePreview)
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="Code Preview"
-          />
+          /> */}
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
@@ -129,7 +129,7 @@ const BottomTabs = (props): JSX.Element => {
         {tab === 0 && <CreationPanel isThemeLight={props.isThemeLight} />}
         {tab === 1 && <CustomizationPanel isThemeLight={props.isThemeLight} />}
         {tab === 2 && <StylesEditor theme={theme} setTheme={setTheme} />}
-        {tab === 3 && <CodePreview theme={theme} setTheme={setTheme} />}
+        {/* {tab === 3 && <CodePreview theme={theme} setTheme={setTheme} />} */}
         {tab === 4 && <Tree data={components} />}
         {tab === 5 && <ContextManager theme={theme} setTheme={setTheme} />}
         {tab === 6 && (

app/src/components/main/Canvas.tsx

@@ -5,7 +5,7 @@ import {
   addChild,
   changeFocus,
   snapShotAction,
-  toggleCodePreview
+  // toggleCodePreview
 } from '../../redux/reducers/slice/appStateSlice';
 import { useDispatch, useSelector } from 'react-redux';
 

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

@@ -81,7 +81,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/DeleteProjects.tsx

@@ -53,9 +53,27 @@ function ProjectsDialog(props: ProjectDialogProps) {
       aria-labelledby="project-dialog-title"
       open={open}
     >
-      <DialogTitle style={{ color: "#000" }} id="project-dialog-title">Delete Project</DialogTitle>
+      <DialogTitle style={{ color: "#297ac2" }} id="project-dialog-title">DELETE PROJECTS</DialogTitle>
+      <DialogTitle style={{ color: "#000" }} id="project-dialog-title">User Projects</DialogTitle>
       <List style={{ color: "#000" }}>
-        {projects.map((project: any, index: number) => (
+        {projects.filter((project: any) => project.forked === undefined || project.forked === false).map((project: any, index: number) => (
+          <ListItem
+            button
+            onClick={() => handleDelete(project.name)}
+            key={index}
+          >
+            <ListItemAvatar>
+              <Avatar className={classes.avatar}>
+                <DeleteRoundedIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={project.name} />
+          </ListItem>
+        ))}
+      </List>
+      <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) => (
           <ListItem
             button
             onClick={() => handleDelete(project.name)}

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/MarketplaceButton.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
@@ -55,11 +54,10 @@ function ProjectsDialog(props: ProjectDialogProps) {
       aria-labelledby="project-dialog-title"
       open={open}
     >
-      <DialogTitle style={{ color: "#000" }} id="project-dialog-title">Open Project</DialogTitle>
+      <DialogTitle style={{ color: "#297ac2" }} id="project-dialog-title">SAVED PROJECTS</DialogTitle>
+      <DialogTitle style={{ color: "#000" }} id="project-dialog-title">User Projects</DialogTitle>
       <List style={{ color: "#000" }}>
-      {projects.filter((project: any) => project.forked === undefined).map((project: any, index: number) => {
-  console.log("Logging something inside the map:", project.forked); // Add this line
-  return (
+      {projects.filter((project: any) => project.forked === undefined || project.forked === false).map((project: any, index: number) => (
     <ListItem
       button
       onClick={() => handleListItemClick(project.name)}
@@ -72,15 +70,13 @@ function ProjectsDialog(props: ProjectDialogProps) {
       </ListItemAvatar>
       <ListItemText primary={project.name} />
     </ListItem>
-  );
-})}
+  )
+)}
       </List>
       {/* 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 !== undefined).map((project: any, index: number) => {
-  console.log("Logging something inside the second map:", project.forked); // Add this line
-  return (
+      {projects.filter((project: any) => project.forked === true).map((project: any, index: number) => (
     <ListItem
       button
       onClick={() => handleListItemClick(project.name)}
@@ -93,8 +89,8 @@ function ProjectsDialog(props: ProjectDialogProps) {
       </ListItemAvatar>
       <ListItemText primary={project.name} />
     </ListItem>
-  );
-})}
+  )
+)}
       </List>
     </Dialog>
   );

app/src/components/right/OpenProjects.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);