Merge pull request #22 from oslabs-beta/denton/pubbutton

Denton/pubbutton

Author: liamroh

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/marketplace/MarketplaceCard.tsx

@@ -20,7 +20,6 @@ import { red } from '@mui/material/colors';
 import axios from 'axios';
 import {useDispatch, useSelector} from 'react-redux'
 import { RootState } from '../../redux/store';
-import { saveProject } from '../../helperFunctions/projectGetSaveDel';
 
 interface Project {
   forked: String,
@@ -40,15 +39,15 @@ const MarketplaceCard = ({proj} :{proj: Project}) => {
   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}`;
+    const username = window.localStorage.getItem('username');
     await axios.post('/cloneProject', {
-      updatedProject
+      updatedProject, username: username //passing in the username from localstorage for verification, just in case someone altered local storage
     });
     alert('Project cloned!');
     setAnchorEl(null);

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,23 @@ 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();
-
+  // console.log('doc cookie 1', Cookies.get())
   const handleLogout = () => {
+    // console.log('doc cookie 2', Cookies.get('ssid'))
+    // // document.cookie = 'ssid' + '=; Max-Age=0';
+    // console.log('doc cookie 3', Cookies.get())
+
     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/NavBarButtons.tsx

@@ -8,7 +8,6 @@ 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';
@@ -357,7 +356,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

app/src/containers/MarketplaceContainer.tsx

@@ -2,6 +2,7 @@ import MarketplaceCardContainer from '../components/marketplace/MarketplaceCardC
 import SearchBar from '../components/marketplace/Searchbar';
 import React, {useEffect, useState} from 'react';
 import axios from 'axios';
+import { CircularProgress } from '@mui/material';
 
 const MarketplaceContainer = () => {
 
@@ -28,13 +29,16 @@ const MarketplaceContainer = () => {
 
   }, []);
 
+
   const updateDisplayProjects = (searchResults) => {
 
     setDisplayProjects(searchResults);//have to pass this down as a prop so that the setting is done outside of Rendering otherwise callstack issues
 
   };
 
 
+
+  
   return (
     <div style={containerStyles}>
       <div style={contentStyles}>
@@ -46,9 +50,17 @@ const MarketplaceContainer = () => {
         <SearchBar marketplaceProjects = {marketplaceProjects} updateDisplayProjects = {updateDisplayProjects}/>
       </div>
         {displayProjects.length ? <MarketplaceCardContainer displayProjects = {displayProjects} /> : 
-          <h2 style={{textAlign: 'center'}}>
-              No Results Found!
-          </h2> 
+        
+          (/*while marketplaceProjects is length 0 means it is not done fetching.  Add loading...*/
+          marketplaceProjects.length  ? 
+            <h2 style={{textAlign: 'center'}}>
+                No Results Found!
+            </h2> 
+            :
+            <h2 style={{textAlign: 'center'}}> {/*added a circular progress bar*/}
+                Loading... <CircularProgress thickness={5.0}/>
+            </h2> 
+          )
         }
     </div>
   );

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;
@@ -31,9 +33,11 @@ export const saveProject = (
   name: String,
   workspace: Object
 ): Promise<Object> => {
+  const newProject = { ...workspace}
+  delete newProject['_id']; //deleting the _id from the current state slice. We don't actually want it in the project object in the mongo db document
   const body = JSON.stringify({
     name,
-    project: { ...workspace, name },
+    project: { ...newProject, name },
     userId: window.localStorage.getItem('ssid'),
     username: window.localStorage.getItem('username'),
     comments: []
@@ -48,10 +52,10 @@ export const saveProject = (
   })
     .then((res) => res.json())
     .then((data) => {
-      return data.project;
+      return {_id: data._id, ...data.project}; //passing up what is needed for the global appstateslice
     })
     .catch((err) => console.log(`Error saving project ${err}`));
-  return project;
+  return project;//returns _id in addition to the project object from the document
 };
 
 export const deleteProject = (project: any): Promise<Object> => {

app/src/index.tsx

@@ -12,7 +12,6 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import App from './components/App';
 import Cookies from 'js-cookie';
 import FBPassWord from './components/login/FBPassWord';
-import MarketplaceButton from './components/right/MarketplaceButton';
 import MarketplaceContainer from './containers/MarketplaceContainer';
 import ProjectDashboard from './Dashboard/ProjectContainer';
 import { Provider } from 'react-redux';

app/src/interfaces/Interfaces.ts

@@ -2,6 +2,7 @@ import { DragObjectWithType } from 'react-dnd';
 
 export interface State {
   name: string;
+  _id: string;
   forked: boolean;
   isLoggedIn: boolean;
   components: Component[];

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

@@ -13,6 +13,7 @@ import manageSeparators from '../../../helperFunctions/manageSeparators';
 
 export const initialState: State = {
   name: '',
+  _id: '',
   forked: false,
   isLoggedIn: false,
   // config: { saveFlag: true, saveTimer: false },
@@ -770,6 +771,10 @@ const appStateSlice = createSlice({
       const projectName = action.payload;
       state.name = projectName;
     },
+    updateProjectId: (state, action) => {
+      const projectId = action.payload; //updates the slice with new _id
+      state._id = projectId;
+    },
     deleteElement: (state, action) => {
       let name: string = '';
       const HTMLTypes: HTMLType[] = [...state.HTMLTypes].filter((el) => {
@@ -1248,8 +1253,8 @@ const appStateSlice = createSlice({
       state.components = components;
     },
 
-    toggleLoggedIn: (state) => {
-      state.isLoggedIn = !state.isLoggedIn;
+    toggleLoggedIn: (state, action) => {
+      state.isLoggedIn = action.payload;
     },
 
     snapShotAction: (state, action) => {
@@ -1292,6 +1297,7 @@ export const {
   changeProjectType,
   resetState,
   updateProjectName,
+  updateProjectId,
   deleteElement,
   updateAttributes,
   deleteChild,

server/controllers/cookieController.ts

@@ -12,17 +12,6 @@ const cookieController: CookieController = {
     return next();
   }, 
 
-  /**
-   * Stores the current user's username in cookie (for use in cloning projects)
-   */
-  setUserCookie: (req, res, next) => {
-    res.cookie('username', res.locals.username, {
-      httpOnly: true, 
-      sameSite: 'none', 
-      secure: true
-    });
-    return next();
-  }
 };
 
 export default cookieController;

server/controllers/marketplaceController.ts

@@ -1,5 +1,5 @@
 import { MarketplaceController } from '../interfaces';
-import { Projects } from '../models/reactypeModels';
+import { Projects, Users } from '../models/reactypeModels';
 
 // array of objects, objects inside
 type Projects = { project: {} }[];
@@ -52,7 +52,7 @@ const marketplaceController: MarketplaceController = {
               }
             });
           }
-          res.locals.publishedProject = result;
+          res.locals.publishedProject = result; //returns the entire document
           return next();
         }
       );
@@ -109,32 +109,52 @@ const marketplaceController: MarketplaceController = {
    * 
    */
   cloneProject: (req, res, next) => {
+    const { updatedProject, username } = req.body;
+    console.log('username in cloneProject end', username);
     // pulls cookies from request
-    const userId = req.cookies.ssid;
-    const username = req.cookies.username;
-    const { updatedProject } = req.body;
-    updatedProject.userId = userId;
-    updatedProject.username = username;
-    updatedProject.project.forked = true; // updated the forked tag
-    delete updatedProject._id; // removes the old project id from the object
-    updatedProject.createdAt = Date.now();
+    const currentuserID = req.cookies.ssid
+    //getting the username based on the cookies ssid
+    Users.findOne({ _id: currentuserID }, (err, user) => {
+      if (err) {
+        return next({
+          log: `Error in marketplaceController.cloneProjects findUser: ${err}`,
+          message: {
+            err: 'Error in marketplaceController.cloneProjects findUser, check server logs for details'
+          }
+        });
+      }else if (user.username !== username){ //prevents users from editing their username to assign a different username to a cloned project
+        return next({
+          log: `Error in marketplaceController.cloneProjects. Window username did not match the corresponding db username: ${err}`,
+          message: {
+            err: 'Error in marketplaceController.cloneProjects. Window username did not match the corresponding db username, check server logs for details'
+          }
+        });
+      }
+      //adding the current user's username and userID since the project is now cloned
+      updatedProject.username = user.username;
+      updatedProject.userId = currentuserID;
+      updatedProject.project.forked = true; // updated the forked tag
+      delete updatedProject._id; // removes the old project id from the object
+      updatedProject.createdAt = Date.now();
+      updatedProject.published = false;
 
-    Projects.create(
-      // creates a copy of the project to the user's library
-      updatedProject,
-      (err, result) => {
-        if (err) {
-          return next({
-            log: `Error in marketplaceController.cloneProject: ${err}`,
-            message: {
-              err: 'Error in marketplaceController.cloneProject, check server logs for details'
-            }
-          });
+      Projects.create(
+        // creates a copy of the project to the user's library with a new generated _id
+        updatedProject,
+        (err, result) => {
+          if (err) {
+            return next({
+              log: `Error in marketplaceController.cloneProject: ${err}`,
+              message: {
+                err: 'Error in marketplaceController.cloneProject, check server logs for details'
+              }
+            });
+          }
+          res.locals.clonedProject = result;
+          return next();
         }
-        res.locals.clonedProject = result;
-        return next();
-      }
-    );
+      );
+    })
   },
 };
 export default marketplaceController;

server/interfaces.ts

@@ -3,7 +3,6 @@ import { Document, NativeError } from 'mongoose';
 
 export interface CookieController {
   setSSIDCookie: RequestHandler;
-  setUserCookie: RequestHandler;
 }
 
 export interface ProjectController {