bug fixed

Author: vivekbopaliya

client/modules/IDE/actions/project.js

@@ -410,26 +410,42 @@ export function deleteProject(id) {
       });
   };
 }
-
 export function changeVisibility(projectId, projectName, visibility) {
-  return (dispatch) =>
+  return (dispatch, getState) => {
+    const state = getState();
+
     apiClient
       .patch('/project/visibility', { projectId, visibility })
       .then((response) => {
-        const { visibility: newVisibility } = response.data;
+        if (response.status === 200) {
+          const { visibility: newVisibility } = response.data;
 
-        dispatch({
-          type: ActionTypes.CHANGE_VISIBILITY,
-          payload: { visibility: response.data.visibility }
-        });
+          dispatch({
+            type: ActionTypes.CHANGE_VISIBILITY,
+            payload: {
+              id: response.data.id,
+              visibility: newVisibility
+            }
+          });
 
-        dispatch(setToastText(`The ${projectName} is now ${newVisibility}!`));
-        dispatch(showToast(2000));
+          if (state.project.id === response.data.id) {
+            dispatch({
+              type: ActionTypes.SET_PROJECT_NAME,
+              name: response.data.name
+            });
+          }
+
+          dispatch(
+            setToastText(`${projectName} is now ${newVisibility.toLowerCase()}`)
+          );
+          dispatch(showToast(2000));
+        }
       })
       .catch((error) => {
         dispatch({
           type: ActionTypes.ERROR,
           error: error?.response?.data
         });
       });
+  };
 }

client/modules/IDE/components/Header/Toolbar.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -15,14 +15,11 @@ import {
   setGridOutput,
   setTextOutput
 } from '../../actions/preferences';
-
 import PlayIcon from '../../../../images/play.svg';
 import StopIcon from '../../../../images/stop.svg';
 import PreferencesIcon from '../../../../images/preferences.svg';
 import ProjectName from './ProjectName';
 import { changeVisibility } from '../../actions/project';
-// import IconButton from '../../../../common/IconButton';
-// import { LockIcon, UnlockIcon } from '../../../../common/icons';
 
 const Toolbar = (props) => {
   const { isPlaying, infiniteLoop, preferencesIsVisible } = useSelector(
@@ -34,8 +31,7 @@ const Toolbar = (props) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
 
-  const [visibility, setVisibility] = useState(project.visibility);
-
+  console.log(project.visibility);
   const userIsOwner = user?.username === project.owner?.username;
   const toggleVisibility = (e) => {
     try {
@@ -47,7 +43,6 @@ const Toolbar = (props) => {
           isChecked ? 'Private' : 'Public'
         )
       );
-      setVisibility(isChecked ? 'Private' : 'Public');
     } catch (error) {
       console.log(error);
     }
@@ -128,7 +123,7 @@ const Toolbar = (props) => {
                 <input
                   type="checkbox"
                   className="toolbar__togglevisibility"
-                  defaultChecked={visibility === 'Private'}
+                  defaultChecked={project.visibility === 'Private'}
                   onChange={toggleVisibility}
                 />
               </main>

client/modules/IDE/reducers/projects.js

@@ -6,11 +6,14 @@ const sketches = (state = [], action) => {
       return action.projects;
     case ActionTypes.DELETE_PROJECT:
       return state.filter((sketch) => sketch.id !== action.id);
-    case ActionTypes.CHANGE_VISIBILITY:
-      return state.map((sketch) => ({
-        ...sketch,
-        visibility: action.payload.visibility
-      }));
+    case ActionTypes.CHANGE_VISIBILITY: {
+      return state.map((sketch) => {
+        if (sketch.id === action.payload.id) {
+          return { ...sketch, visibility: action.payload.visibility };
+        }
+        return { ...sketch };
+      });
+    }
     case ActionTypes.RENAME_PROJECT: {
       return state.map((sketch) => {
         if (sketch.id === action.payload.id) {

server/controllers/project.controller.js

@@ -291,14 +291,14 @@ export async function changeProjectVisibility(req, res) {
         visibility: newVisibility
       },
       {
-        new: true
+        new: true,
+        runValidators: true
       }
-    );
-    const updatedProjectWithoutFiles = await Project.findById(
-      updatedProject._id
-    ).select('-files');
+    )
+      .populate('user', 'username')
+      .exec();
 
-    return res.status(200).json(updatedProjectWithoutFiles);
+    return res.status(200).json(updatedProject);
   } catch (error) {
     return res.status(500).json(error);
   }