fix redirect bug

Author: vivekbopaliya

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -31,20 +31,21 @@ const Toolbar = (props) => {
   const autorefresh = useSelector((state) => state.preferences.autorefresh);
   const dispatch = useDispatch();
   const { t } = useTranslation();
-
   const userIsOwner = user?.username === project.owner?.username;
+  const [isPrivate, setIsPrivate] = useState(project.visibility === 'Private');
+  useEffect(() => {
+    setIsPrivate(project.visibility === 'Private');
+  }, [project]);
+
   const toggleVisibility = (e) => {
     try {
       const isChecked = e.target.checked;
-      dispatch(
-        changeVisibility(
-          project.id,
-          project.name,
-          isChecked ? 'Private' : 'Public'
-        )
-      );
+      const newVisibility = isChecked ? 'Private' : 'Public';
+      setIsPrivate(isChecked);
+      dispatch(changeVisibility(project.id, project.name, newVisibility));
     } catch (error) {
       console.log(error);
+      setIsPrivate(project.visibility === 'Private');
     }
   };
 
@@ -124,7 +125,7 @@ const Toolbar = (props) => {
                 <input
                   type="checkbox"
                   className="toolbar__togglevisibility"
-                  defaultChecked={project.visibility === 'Private'}
+                  checked={isPrivate}
                   onChange={toggleVisibility}
                 />
               </main>

client/modules/IDE/reducers/project.js

@@ -21,12 +21,7 @@ const project = (state, action) => {
     case ActionTypes.SET_PROJECT_NAME:
       return Object.assign({}, { ...state }, { name: action.name });
     case ActionTypes.SET_PROJECT_VISIBILITY:
-      return state.map((sketch) => {
-        if (sketch.id === action.id) {
-          return { ...sketch, visibility: action.visibility };
-        }
-        return sketch;
-      });
+      return Object.assign({}, { ...state }, { visibility: action.visibility });
     case ActionTypes.NEW_PROJECT:
       return {
         id: action.project.id,

client/protected-route.jsx

@@ -1,31 +1,29 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Route, Redirect } from 'react-router-dom';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { getIsUserOwner } from './modules/IDE/selectors/users';
+import { resetProject } from './modules/IDE/actions/project';
 
 // eslint-disable-next-line react/prop-types
 const ProtectedSketchRoute = ({ component: Component, ...rest }) => {
   const project = useSelector((state) => state.project);
   const isUserOwner = useSelector(getIsUserOwner);
+  const dispatch = useDispatch();
+  const hasAccess = isUserOwner || project.visibility !== 'Private';
+  useEffect(() => {
+    if (!hasAccess) {
+      dispatch(resetProject());
+    }
+  }, [hasAccess, dispatch]);
 
-  console.log(project.id);
   return (
     <Route
       {...rest}
       render={(props) => {
-        // Allow access if user is owner or sketch is public
-        if (isUserOwner || project.visibility !== 'Private') {
-          return <Component {...props} />;
+        if (!hasAccess) {
+          return <Redirect to="/" />;
         }
-
-        // Redirect if not so
-        return (
-          <Redirect
-            to={{
-              pathname: '/'
-            }}
-          />
-        );
+        return <Component {...props} />;
       }}
     />
   );

client/routes.jsx

@@ -46,7 +46,7 @@ Route.propTypes = {
 
 const routes = (
   <Switch>
-    <Route exact path="/" component={IDEView} />
+    <ProtectedSketchRoute exact path="/" component={IDEView} />
     <Route path="/login" component={LoginView} />
     <Route path="/signup" component={SignupView} />
     <Route

p5.js-web-editor

@@ -0,0 +1 @@
+Subproject commit edc54da56a8fc86e902e0f09ffc4c480301689c1