Merge pull request #26 from oslabs-beta/Ahnafkhvn/shareFunctionality

Built out publish functionality

Author: dentonwong

app/src/components/top/NavBar.tsx

@@ -10,6 +10,8 @@ import logo from '../../public/icons/win/logo.png';
 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 = () => {
@@ -23,6 +25,8 @@ const NavBar = () => {
     (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
@@ -71,15 +75,23 @@ const NavBar = () => {
 
 
     publishProject(state, projectName)
-      .then((promise) => {
-        console.log('Project published successfully', promise);
+      .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

app/src/helperFunctions/projectGetSaveDel.ts

@@ -52,7 +52,7 @@ export const saveProject = (
   })
     .then((res) => res.json())
     .then((data) => {
-      return {_id: data._id, ...data.project}; //passing up what is needed for the global appstateslice
+      return {_id: data._id, published:data.published, ...data.project}; //passing up what is needed for the global appstateslice
     })
     .catch((err) => console.log(`Error saving project ${err}`));
   return project;//returns _id in addition to the project object from the document
@@ -83,7 +83,8 @@ export const publishProject = (
   const publishedProject = response
     .then((res) => res.json())
     .then((data) => {
-      return {_id: data._id, ...data.project};
+      console.log({_id: data._id, published: data.published, ...data.project});
+      return {_id: data._id, published: data.published, ...data.project};
     })
     .catch((err) => {
       console.log(`Error publishing project ${err}`);

app/src/interfaces/Interfaces.ts

@@ -4,7 +4,7 @@ export interface State {
   name: string;
   _id: string;
   forked: boolean;
-  _id: string;
+  published: boolean;
   isLoggedIn: boolean;
   components: Component[];
   rootComponents: number[];

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

@@ -15,6 +15,7 @@ export const initialState: State = {
   name: '',
   _id: '',
   forked: false,
+  published: false,
   isLoggedIn: false,
   // config: { saveFlag: true, saveTimer: false },
   components: [
@@ -775,6 +776,10 @@ const appStateSlice = createSlice({
       const projectId = action.payload; //updates the slice with new _id
       state._id = projectId;
     },
+    updateProjectPublished: (state, action) => {
+      const projectPublished = action.payload; 
+      state.published = projectPublished;
+    },
     deleteElement: (state, action) => {
       let name: string = '';
       const HTMLTypes: HTMLType[] = [...state.HTMLTypes].filter((el) => {
@@ -1298,6 +1303,7 @@ export const {
   resetState,
   updateProjectName,
   updateProjectId,
+  updateProjectPublished,
   deleteElement,
   updateAttributes,
   deleteChild,

server/controllers/marketplaceController.ts

@@ -44,11 +44,14 @@ const marketplaceController: MarketplaceController = {
     if (userId === req.cookies.ssid) {
 
       if (mongoose.isValidObjectId(_id)) {
+
+        const noPub = {...project}
+        delete noPub.published;
         const publishedProject = await Projects.findOneAndUpdate
           (        // looks in projects collection for project by Mongo id
             { _id },
             // update or insert the project
-            { project, createdAt, published: true, comments, name, userId, username },
+            { project: noPub, createdAt, published: true, comments, name, userId, username },
             // Options:
             // upsert: true - if none found, inserts new project, otherwise updates it
             // new: true - returns updated document not the original one
@@ -58,7 +61,8 @@ const marketplaceController: MarketplaceController = {
         return next();
       }else{
         const noId = {...project};
-        delete noId._id; //removing the empty string _id from project
+        delete noId._id;  //removing the empty string _id from project
+        delete noId.published;
         const publishedProject = await Projects.create( { project: noId, createdAt, published: true, comments, name, userId, username });
         res.locals.publishedProject = publishedProject.toObject({ minimize: false }); 
         console.log('published backend new', res.locals.publishedProject)

server/controllers/projectController.ts

@@ -1,22 +1,27 @@
 import { ProjectController } from '../interfaces';
 import { Projects } from '../models/reactypeModels';
+import { State} from '../../app/src/interfaces/Interfaces'
 
 // array of objects, objects inside
 type Projects = { project: {} }[];
 
 const projectController: ProjectController = {
   // saveProject saves current workspace to database
   saveProject: (req, res, next) => {
+    
     // pull project name and project itself from body
     const { name, project, userId, username, comments } = req.body;
+    //deleted published from project
+    const noPub = {...project};
+    delete noPub.published;
     // create createdBy field for the document
     const createdAt = Date.now();
     // pull ssid from cookies for user id
     Projects.findOneAndUpdate(
       // looks in projects collection for project by user and name
       { name, userId, username},
       // update or insert the project
-      { project, createdAt, comments },
+      { project: noPub, createdAt, published: false, comments },
       // Options:
       // upsert: true - if none found, inserts new project, if found, updates project
       // new: true - returns updated document not the original one
@@ -39,7 +44,7 @@ const projectController: ProjectController = {
   // gets all of current user's projects
   getProjects: (req, res, next) => {
     const { userId } = req.body;
-    Projects.find({ userId }, (err, projects: Array<{_id: string; project: any }>) => {
+    Projects.find({ userId }, (err, projects: Array<{_id: string; published: boolean; project: object }>) => {
       if (err) {
         return next({
           log: `Error in projectController.getProjects: ${err}`,
@@ -49,8 +54,9 @@ const projectController: ProjectController = {
         });
       }
       // so it returns each project like it is in state, not the whole object in DB
-      res.locals.projects = projects.map((elem) =>({
+      res.locals.projects = projects.map((elem: {_id: string; published: boolean; project: object } ) =>({
         _id: elem._id,
+        published: elem.published,
         ...elem.project
       }));
       return next();