backend done, frontend progress

Author: vivekbopaliya

client/constants.js

@@ -41,6 +41,7 @@ export const DELETE_COLLECTION = 'DELETE_COLLECTION';
 export const ADD_TO_COLLECTION = 'ADD_TO_COLLECTION';
 export const REMOVE_FROM_COLLECTION = 'REMOVE_FROM_COLLECTION';
 export const EDIT_COLLECTION = 'EDIT_COLLECTION';
+export const CHANGE_VISIBILITY = 'CHANGE_VISIBILITY';
 
 export const DELETE_PROJECT = 'DELETE_PROJECT';
 

client/modules/IDE/actions/project.js

@@ -410,3 +410,27 @@ export function deleteProject(id) {
       });
   };
 }
+
+export function changeVisibility(projectId, visibility) {
+  return (dispatch) =>
+    apiClient
+      .patch('/project/visibility', { projectId, visibility })
+      .then((response) => {
+        console.log(response.data);
+        const { visibility: newVisibility } = response.data;
+
+        dispatch({
+          type: ActionTypes.CHANGE_VISIBILITY,
+          payload: { visibility: response.data.visibility }
+        });
+
+        dispatch(setToastText(`Sketch is switched to ${newVisibility}`));
+        dispatch(showToast(2000));
+      })
+      .catch((error) => {
+        dispatch({
+          type: ActionTypes.ERROR,
+          error: error?.response?.data
+        });
+      });
+}

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

@@ -20,6 +20,8 @@ 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 Button from '../../../../common/Button';
 
 const Toolbar = (props) => {
   const { isPlaying, infiniteLoop, preferencesIsVisible } = useSelector(
@@ -28,8 +30,22 @@ const Toolbar = (props) => {
   const project = useSelector((state) => state.project);
   const autorefresh = useSelector((state) => state.preferences.autorefresh);
   const dispatch = useDispatch();
-
   const { t } = useTranslation();
+  const [visibility, setVisibility] = React.useState(project.visibility);
+  console.log(project);
+  const toggleVisibility = () => {
+    try {
+      setVisibility((prev) => (prev === 'Public' ? 'Private' : 'Public'));
+      dispatch(
+        changeVisibility(
+          project.id,
+          visibility === 'Public' ? 'Private' : 'Public'
+        )
+      );
+    } catch (error) {
+      console.log(error);
+    }
+  };
 
   const playButtonClass = classNames({
     'toolbar__play-button': true,
@@ -112,6 +128,15 @@ const Toolbar = (props) => {
           return null;
         })()}
       </div>
+      {project?.owner && (
+        <section>
+          {visibility === 'Private' ? (
+            <Button onClick={toggleVisibility}>Private</Button>
+          ) : (
+            <Button onClick={toggleVisibility}>Public</Button>
+          )}
+        </section>
+      )}
       <button
         className={preferencesButtonClass}
         onClick={() => dispatch(openPreferences())}

client/modules/IDE/components/SketchList.jsx

@@ -24,6 +24,7 @@ import getConfig from '../../../utils/getConfig';
 
 import ArrowUpIcon from '../../../images/sort-arrow-up.svg';
 import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
+import Button from '../../../common/Button';
 
 const ROOT_URL = getConfig('API_URL');
 
@@ -35,11 +36,24 @@ class SketchListRowBase extends React.Component {
     super(props);
     this.state = {
       renameOpen: false,
-      renameValue: props.sketch.name
+      renameValue: props.sketch.name,
+      newVisibility: props.sketch.visibility || 'Public',
+      visibleDialogOpen: false
     };
     this.renameInput = React.createRef();
   }
 
+  toggleVisibility = () => {
+    this.setState((prev) => ({
+      newVisibility: prev.newVisibility === 'Public' ? 'Private' : 'Public'
+    }));
+    this.props.changeVisibility(
+      this.props.sketch.id,
+      this.state.newVisibility === 'Public' ? 'Private' : 'Public'
+    );
+    this.setState({ visibleDialogOpen: false });
+  };
+
   openRename = () => {
     this.setState(
       {
@@ -136,6 +150,12 @@ class SketchListRowBase extends React.Component {
           >
             {this.props.t('SketchList.DropdownDuplicate')}
           </MenuItem>
+          <MenuItem
+            hideIf={!userIsOwner}
+            onClick={() => this.setState({ visibleDialogOpen: true })}
+          >
+            Change Visibility
+          </MenuItem>
           <MenuItem
             hideIf={!this.props.user.authenticated}
             onClick={() => {
@@ -159,12 +179,21 @@ class SketchListRowBase extends React.Component {
   };
 
   render() {
+    console.log(this.props.sketch.visibility);
     const { sketch, username, mobile } = this.props;
     const { renameOpen, renameValue } = this.state;
     let url = `/${username}/sketches/${sketch.id}`;
     if (username === 'p5') {
       url = `/${username}/sketches/${slugify(sketch.name, '_')}`;
     }
+    const title = (
+      <p>
+        Make {this.props.sketch.name}
+        <span className="sketch-visibility__title">
+          {this.state.newVisibility === 'Private' ? 'Public' : 'Private'}
+        </span>
+      </p>
+    );
 
     const name = (
       <React.Fragment>
@@ -179,6 +208,33 @@ class SketchListRowBase extends React.Component {
             ref={this.renameInput}
           />
         )}
+
+        {this.state.visibleDialogOpen && (
+          <Overlay
+            title={title}
+            closeOverlay={() => this.setState({ visibleDialogOpen: false })}
+          >
+            <div className="sketch-visibility">
+              <hr />
+
+              <ul>
+                <li>The sketch will not be visible to others.</li>
+                <li>
+                  Other users will not be able to fork, edit or look the sketch
+                </li>
+                <li>
+                  You can always comeback and change the sketchs visibility
+                  nonetheless
+                </li>
+              </ul>
+
+              <hr />
+              <Button onClick={this.toggleVisibility}>
+                I have read and understand these effects
+              </Button>
+            </div>
+          </Overlay>
+        )}
       </React.Fragment>
     );
 
@@ -189,7 +245,11 @@ class SketchListRowBase extends React.Component {
           key={sketch.id}
           onClick={this.handleRowClick}
         >
-          <th scope="row">{name}</th>
+          <th scope="row" className="sketches-table__rowname">
+            {this.state.newVisibility === 'Private' && <p>Lock</p>}
+            {this.state.newVisibility}
+            {name}
+          </th>
           <td>{formatDateCell(sketch.createdAt, mobile)}</td>
           <td>{formatDateCell(sketch.updatedAt, mobile)}</td>
           {this.renderDropdown()}
@@ -204,7 +264,8 @@ SketchListRowBase.propTypes = {
     id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
     createdAt: PropTypes.string.isRequired,
-    updatedAt: PropTypes.string.isRequired
+    updatedAt: PropTypes.string.isRequired,
+    visibility: PropTypes.string
   }).isRequired,
   username: PropTypes.string.isRequired,
   user: PropTypes.shape({
@@ -216,6 +277,7 @@ SketchListRowBase.propTypes = {
   cloneProject: PropTypes.func.isRequired,
   changeProjectName: PropTypes.func.isRequired,
   onAddToCollection: PropTypes.func.isRequired,
+  changeVisibility: PropTypes.func.isRequired,
   mobile: PropTypes.bool,
   t: PropTypes.func.isRequired
 };
@@ -241,7 +303,6 @@ class SketchList extends React.Component {
     super(props);
     this.props.getProjects(this.props.username);
     this.props.resetSorting();
-
     this.state = {
       isInitialDataLoad: true
     };
@@ -354,6 +415,8 @@ class SketchList extends React.Component {
   };
 
   render() {
+    const userIsOwner = this.props.user.username === this.props.username;
+
     const username =
       this.props.username !== undefined
         ? this.props.username
@@ -393,19 +456,23 @@ class SketchList extends React.Component {
               </tr>
             </thead>
             <tbody>
-              {this.props.sketches.map((sketch) => (
-                <SketchListRow
-                  mobile={mobile}
-                  key={sketch.id}
-                  sketch={sketch}
-                  user={this.props.user}
-                  username={username}
-                  onAddToCollection={() => {
-                    this.setState({ sketchToAddToCollection: sketch });
-                  }}
-                  t={this.props.t}
-                />
-              ))}
+              {this.props.sketches
+                .filter(
+                  (sketch) => userIsOwner || sketch.visibility === 'Public'
+                )
+                .map((sketch) => (
+                  <SketchListRow
+                    mobile={mobile}
+                    key={sketch.id}
+                    sketch={sketch}
+                    user={this.props.user}
+                    username={username}
+                    onAddToCollection={() => {
+                      this.setState({ sketchToAddToCollection: sketch });
+                    }}
+                    t={this.props.t}
+                  />
+                ))}
             </tbody>
           </table>
         )}
@@ -438,7 +505,8 @@ SketchList.propTypes = {
       id: PropTypes.string.isRequired,
       name: PropTypes.string.isRequired,
       createdAt: PropTypes.string.isRequired,
-      updatedAt: PropTypes.string.isRequired
+      updatedAt: PropTypes.string.isRequired,
+      visibility: PropTypes.string
     })
   ).isRequired,
   username: PropTypes.string,

client/modules/IDE/reducers/project.js

@@ -8,7 +8,8 @@ const initialState = () => {
   return {
     name: generatedName,
     updatedAt: '',
-    isSaving: false
+    isSaving: false,
+    visibility: 'Public'
   };
 };
 
@@ -25,15 +26,17 @@ const project = (state, action) => {
         name: action.project.name,
         updatedAt: action.project.updatedAt,
         owner: action.owner,
-        isSaving: false
+        isSaving: false,
+        visibility: action.project.visibility
       };
     case ActionTypes.SET_PROJECT:
       return {
         id: action.project.id,
         name: action.project.name,
         updatedAt: action.project.updatedAt,
         owner: action.owner,
-        isSaving: false
+        isSaving: false,
+        visibility: action.project.visibility
       };
     case ActionTypes.RESET_PROJECT:
       return initialState();

client/modules/IDE/reducers/projects.js

@@ -6,6 +6,11 @@ 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.RENAME_PROJECT: {
       return state.map((sketch) => {
         if (sketch.id === action.payload.id) {

client/modules/User/components/Collection.jsx

@@ -32,6 +32,8 @@ const CollectionItemRowBase = ({
 
   const projectIsDeleted = item.isDeleted;
 
+  const projectIsPrivate = !isOwner && item.project.visibility === 'Private';
+
   const handleSketchRemove = () => {
     const name = projectIsDeleted ? 'deleted sketch' : item.project.name;
 
@@ -44,13 +46,18 @@ const CollectionItemRowBase = ({
     }
   };
 
-  const name = projectIsDeleted ? (
-    <span>{t('Collection.SketchDeleted')}</span>
-  ) : (
-    <Link to={`/${item.project.user.username}/sketches/${item.projectId}`}>
-      {item.project.name}
-    </Link>
-  );
+  let name;
+  if (projectIsDeleted) {
+    name = <span>{t('Collection.SketchDeleted')}</span>;
+  } else if (projectIsPrivate) {
+    name = <span>Project is Private</span>;
+  } else {
+    name = (
+      <Link to={`/${item.project.user.username}/sketches/${item.projectId}`}>
+        {item.project.name}
+      </Link>
+    );
+  }
 
   const sketchOwnerUsername = projectIsDeleted
     ? null
@@ -90,6 +97,7 @@ CollectionItemRowBase.propTypes = {
     project: PropTypes.shape({
       id: PropTypes.string.isRequired,
       name: PropTypes.string.isRequired,
+      visibility: PropTypes.string,
       user: PropTypes.shape({
         username: PropTypes.string.isRequired
       })