Merge pull request #3034 from vivekbopaliya/feat/privatesketch

Private Sketch feat.

Author: raclim

Dockerfile

@@ -28,4 +28,4 @@ ENV NODE_ENV=production
 COPY package.json package-lock.json index.js ./
 RUN npm install --production
 COPY --from=build $APP_HOME/dist ./dist
-CMD ["npm", "run", "start:prod"]
+CMD ["npm", "run", "start:prod"]

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/images/checkmark.svg

@@ -24,7 +24,8 @@ export function setProject(project) {
     type: ActionTypes.SET_PROJECT,
     project,
     files: project.files,
-    owner: project.user
+    owner: project.user,
+    visibility: project.visibility
   };
 }
 
@@ -410,3 +411,50 @@ 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, updatedAt } = 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,
+              updatedAt
+            });
+
+            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/images/earth.svg

@@ -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,48 @@ const MobileNav = () => {
   }
 
   const title = useMemo(resolveTitle, [pageName, project.name]);
-
+  const userIsOwner = user?.username === project.owner?.username;
   const Logo = AsteriskIcon;
+
+  const showPrivacyToggle =
+    project?.owner && title === project.name && userIsOwner;
+  const showOwner = project?.owner && title === project.name && !userIsOwner;
+
+  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>
+        {showPrivacyToggle && (
+          <main className="toolbar__makeprivate">
+            <p>Private</p>
+            <input
+              className="toolbar__togglevisibility"
+              type="checkbox"
+              onChange={toggleVisibility}
+              defaultChecked={project.visibility === 'Private'}
+            />
+          </main>
         )}
+        {showOwner && <h5>by {project?.owner?.username}</h5>}
       </Title>
+
       {/* check if the user is in login page */}
       {pageName === 'login' || pageName === 'signup' ? (
         // showing the CrossIcon

client/images/lock.svg

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -15,22 +15,26 @@ 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 VersionIndicator from '../VersionIndicator';
+import VisibilityDropdown from '../../../User/components/VisibilityDropdown';
+import { changeVisibility } from '../../actions/project';
 
 const Toolbar = (props) => {
   const { isPlaying, infiniteLoop, preferencesIsVisible } = useSelector(
     (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 showVisibilityDropdown = project?.owner && userIsOwner;
 
   const playButtonClass = classNames({
     'toolbar__play-button': true,
@@ -45,6 +49,13 @@ const Toolbar = (props) => {
     'toolbar__preferences-button--selected': preferencesIsVisible
   });
 
+  const handleVisibilityChange = useCallback(
+    (sketchId, sketchName, newVisibility) => {
+      dispatch(changeVisibility(sketchId, sketchName, newVisibility));
+    },
+    [changeVisibility]
+  );
+
   return (
     <div className="toolbar">
       <button
@@ -98,24 +109,34 @@ const Toolbar = (props) => {
           {t('Toolbar.Auto-refresh')}
         </label>
       </div>
+
       <div className="toolbar__project-name-container">
         <ProjectName />
-        {(() => {
-          if (project.owner) {
-            return (
-              <p className="toolbar__project-project.owner">
-                {t('Toolbar.By')}{' '}
-                <Link to={`/${project.owner.username}/sketches`}>
-                  {project.owner.username}
-                </Link>
-              </p>
-            );
-          }
-          return null;
-        })()}
+
+        {showVisibilityDropdown && (
+          <div className="toolbar__visibility">
+            <VisibilityDropdown
+              sketch={project}
+              onVisibilityChange={handleVisibilityChange}
+            />
+          </div>
+        )}
+
+        {/* ✅ Still show owner if not you */}
+        {project?.owner && !userIsOwner && (
+          <p className="toolbar__project-owner">
+            {t('Toolbar.By')}{' '}
+            <Link to={`/${project.owner.username}/sketches`}>
+              {project.owner.username}
+            </Link>
+          </p>
+        )}
+
+        <VersionIndicator />
       </div>
-      <VersionIndicator />
+
       <div style={{ flex: 1 }} />
+
       <button
         className={preferencesButtonClass}
         onClick={() => dispatch(openPreferences())}

client/modules/IDE/actions/project.js

@@ -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/Header/MobileNav.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,
@@ -118,6 +119,8 @@ const SketchList = ({
     [sorting, getButtonLabel, toggleDirectionForField, t]
   );
 
+  const userIsOwner = user.username === username;
+
   return (
     <article className="sketches-table-container">
       <Helmet>
@@ -145,6 +148,7 @@ const SketchList = ({
                   context: mobile ? 'mobile' : ''
                 })
               )}
+              {userIsOwner && renderFieldHeader('visibility', 'Visibility')}
               <th scope="col"></th>
             </tr>
           </thead>
@@ -187,7 +191,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,