Private Sketch feat.

.env.example

@@ -19,7 +19,7 @@ MAILGUN_KEY=<your-mailgun-api-key>
 ML5_LIBRARY_USERNAME=ml5
 ML5_LIBRARY_EMAIL=examples@ml5js.org
 ML5_LIBRARY_PASS=helloml5
-MONGO_URL=mongodb://localhost:27017/p5js-web-editor
+MONGO_URL=mongodb://localhost:27017/local
 PORT=8000
 PREVIEW_PORT=8002
 EDITOR_URL=http://localhost:8000

client/constants.js

@@ -41,6 +41,8 @@ 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 SET_PROJECT_VISIBILITY = 'SET_PROJECT_VISIBILITY';
 
 export const DELETE_PROJECT = 'DELETE_PROJECT';
 

client/modules/IDE/actions/project.js

@@ -410,3 +410,45 @@ export function deleteProject(id) {
       });
   };
 }
+export function changeVisibility(projectId, projectName, visibility) {
+  return (dispatch, getState) => {
+    const state = getState();
+
+    apiClient
+      .patch('/project/visibility', { projectId, visibility })
+      .then((response) => {
+        if (response.status === 200) {
+          const { visibility: newVisibility } = response.data;
+
+          dispatch({
+            type: ActionTypes.CHANGE_VISIBILITY,
+            payload: {
+              id: response.data.id,
+              visibility: newVisibility
+            }
+          });
+
+          if (state.project.id === response.data.id) {
+            dispatch({
+              type: ActionTypes.SET_PROJECT_VISIBILITY,
+              visibility: newVisibility
+            });
+            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/MobileNav.jsx

@@ -35,6 +35,7 @@ import { setLanguage } from '../../actions/preferences';
 import Overlay from '../../../App/components/Overlay';
 import ProjectName from './ProjectName';
 import CollectionCreate from '../../../User/components/CollectionCreate';
+import { changeVisibility } from '../../actions/project';
 
 const Nav = styled(Menubar)`
   background: ${prop('MobilePanel.default.background')};
@@ -75,6 +76,13 @@ const Title = styled.div`
     margin: 0;
   }
 
+  > section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+  }
+
   > h5 {
     font-size: ${remSize(13)};
     font-weight: normal;
@@ -212,6 +220,7 @@ const MobileMenuItem = ({ children, ...props }) => (
 const MobileNav = () => {
   const project = useSelector((state) => state.project);
   const user = useSelector((state) => state.user);
+  const dispatch = useDispatch();
 
   const { t } = useTranslation();
 
@@ -237,21 +246,53 @@ const MobileNav = () => {
   }
 
   const title = useMemo(resolveTitle, [pageName, project.name]);
+  const userIsOwner = user?.username === project.owner?.username;
 
   const Logo = AsteriskIcon;
+
+  const toggleVisibility = (e) => {
+    try {
+      const isChecked = e.target.checked;
+
+      dispatch(
+        changeVisibility(
+          project.id,
+          project.name,
+          isChecked ? 'Private' : 'Public'
+        )
+      );
+    } catch (error) {
+      console.log(error);
+    }
+  };
   return (
     <Nav>
       <LogoContainer>
         <Logo />
       </LogoContainer>
       <Title>
-        <h1>{title === project.name ? <ProjectName /> : title}</h1>
-        {project?.owner && title === project.name && (
-          <Link to={`/${project.owner.username}/sketches`}>
-            by {project?.owner?.username}
-          </Link>
-        )}
+        <h1>{title === project?.name ? <ProjectName /> : title}</h1>
+        {(() => {
+          if (project?.owner && title === project.name && userIsOwner) {
+            return (
+              <main className="toolbar__makeprivate">
+                <p>Private</p>
+                <input
+                  className="toolbar__togglevisibility"
+                  type="checkbox"
+                  onChange={toggleVisibility}
+                  defaultChecked={project.visibility === 'Private'}
+                />
+              </main>
+            );
+          }
+          if (project?.owner && title === project.name) {
+            return <h5>by {project?.owner?.username}</h5>;
+          }
+          return null;
+        })()}
       </Title>
+
       {/* check if the user is in login page */}
       {pageName === 'login' || pageName === 'signup' ? (
         // showing the CrossIcon

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';
@@ -15,7 +15,7 @@ import {
   setGridOutput,
   setTextOutput
 } from '../../actions/preferences';
-
+import { changeVisibility } from '../../actions/project';
 import PlayIcon from '../../../../images/play.svg';
 import StopIcon from '../../../../images/stop.svg';
 import PreferencesIcon from '../../../../images/preferences.svg';
@@ -27,10 +27,27 @@ const Toolbar = (props) => {
     (state) => state.ide
   );
   const project = useSelector((state) => state.project);
+  const user = useSelector((state) => state.user);
   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;
+      const newVisibility = isChecked ? 'Private' : 'Public';
+      setIsPrivate(isChecked);
+      dispatch(changeVisibility(project.id, project.name, newVisibility));
+    } catch (error) {
+      console.log(error);
+      setIsPrivate(project.visibility === 'Private');
+    }
+  };
 
   const playButtonClass = classNames({
     'toolbar__play-button': true,
@@ -101,9 +118,22 @@ const Toolbar = (props) => {
       <div className="toolbar__project-name-container">
         <ProjectName />
         {(() => {
-          if (project.owner) {
+          if (project?.owner && userIsOwner) {
+            return (
+              <main className="toolbar__makeprivate">
+                <p>Private</p>
+                <input
+                  type="checkbox"
+                  className="toolbar__togglevisibility"
+                  checked={isPrivate}
+                  onChange={toggleVisibility}
+                />
+              </main>
+            );
+          }
+          if (project?.owner && !userIsOwner) {
             return (
-              <p className="toolbar__project-project.owner">
+              <p className="toolbar__project-owner">
                 {t('Toolbar.By')}{' '}
                 <Link to={`/${project.owner.username}/sketches`}>
                   {project.owner.username}
@@ -113,8 +143,8 @@ const Toolbar = (props) => {
           }
           return null;
         })()}
+        <VersionIndicator />
       </div>
-      <VersionIndicator />
       <div style={{ flex: 1 }} />
       <button
         className={preferencesButtonClass}

client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

@@ -162,6 +162,22 @@ exports[`Nav renders dashboard version for mobile 1`] = `
   margin: 0;
 }
 
+.c2 > section {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  gap: 5px;
+}
+
 .c2 > h5 {
   font-size: 1.0833333333333333rem;
   font-weight: normal;
@@ -757,6 +773,22 @@ exports[`Nav renders editor version for mobile 1`] = `
   margin: 0;
 }
 
+.c2 > section {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  gap: 5px;
+}
+
 .c2 > h5 {
   font-size: 1.0833333333333333rem;
   font-weight: normal;

client/modules/IDE/components/SketchList.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import React, { useEffect, useState, useMemo, useCallback } from 'react';
@@ -13,9 +14,9 @@ import getSortedSketches from '../selectors/projects';
 import Loader from '../../App/components/loader';
 import Overlay from '../../App/components/Overlay';
 import AddToCollectionList from './AddToCollectionList';
-import SketchListRowBase from './SketchListRowBase';
 import ArrowUpIcon from '../../../images/sort-arrow-up.svg';
 import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
+import SketchListRowBase from './SketchListRowBase';
 
 const SketchList = ({
   user,
@@ -60,7 +61,9 @@ const SketchList = ({
   const renderEmptyTable = () => {
     if (!isLoading() && sketches.length === 0) {
       return (
-        <p className="sketches-table__empty">{t('SketchList.NoSketches')}</p>
+        <p className="sketches-table curative__empty">
+          {t('SketchList.NoSketches')}
+        </p>
       );
     }
     return null;
@@ -118,6 +121,8 @@ const SketchList = ({
     [sorting, getButtonLabel, toggleDirectionForField, t]
   );
 
+  const userIsOwner = user.username === username;
+
   return (
     <article className="sketches-table-container">
       <Helmet>
@@ -145,6 +150,7 @@ const SketchList = ({
                   context: mobile ? 'mobile' : ''
                 })
               )}
+              {userIsOwner && renderFieldHeader('makePrivate', 'Make Private')}
               <th scope="col"></th>
             </tr>
           </thead>
@@ -187,7 +193,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,