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';