frontend done

Author: vivekbopaliya

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

@@ -28,11 +28,13 @@ 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 [visibility, setVisibility] = React.useState(project.visibility);
-  console.log(project);
+
+  const userIsOwner = user?.username === project.owner?.username;
   const toggleVisibility = () => {
     try {
       setVisibility((prev) => (prev === 'Public' ? 'Private' : 'Public'));
@@ -128,7 +130,7 @@ const Toolbar = (props) => {
           return null;
         })()}
       </div>
-      {project?.owner && (
+      {userIsOwner && project.owner && (
         <section>
           {visibility === 'Private' ? (
             <Button onClick={toggleVisibility}>Private</Button>

client/modules/IDE/components/SketchList.jsx

@@ -179,7 +179,6 @@ 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}`;
@@ -188,7 +187,7 @@ class SketchListRowBase extends React.Component {
     }
     const title = (
       <p>
-        Make {this.props.sketch.name}
+        Make {this.props.sketch.name}{' '}
         <span className="sketch-visibility__title">
           {this.state.newVisibility === 'Private' ? 'Public' : 'Private'}
         </span>
@@ -215,18 +214,41 @@ class SketchListRowBase extends React.Component {
             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>
+              {this.state.newVisibility === 'Public' ? (
+                <ul className="sketch-visibility_ul">
+                  <li>
+                    Your sketch will stay private and will not be seen by
+                    others.
+                  </li>
+                  <li>
+                    Others will not be able to copy, change, or even see your
+                    sketch.
+                  </li>
+                  <li>This keeps your work safe and private.</li>
+
+                  <li>
+                    you can focus on being creative without worrying about
+                    others seeing your work.
+                  </li>
+                  <li>
+                    You can always come back and adjust who can see your sketch.
+                  </li>
+                </ul>
+              ) : (
+                <ul className="sketch-visibility_ul">
+                  <li>Your sketch will be visible to everyone.</li>
+                  <li>Others can copy, edit, or just check out your sketch.</li>
+
+                  <li>
+                    This helps everyone share ideas and be more creative
+                    together.
+                  </li>
+                  <li>
+                    You can always change who can see your sketch whenever you
+                    want.
+                  </li>
+                </ul>
+              )}
 
               <hr />
               <Button onClick={this.toggleVisibility}>
@@ -415,8 +437,7 @@ class SketchList extends React.Component {
   };
 
   render() {
-    const userIsOwner = this.props.user.username === this.props.username;
-
+    // const userIsOwner = this.props.user.username === this.props.username;
     const username =
       this.props.username !== undefined
         ? this.props.username
@@ -456,23 +477,19 @@ class SketchList extends React.Component {
               </tr>
             </thead>
             <tbody>
-              {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}
-                  />
-                ))}
+              {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}
+                />
+              ))}
             </tbody>
           </table>
         )}

client/modules/User/components/Collection.jsx

@@ -65,7 +65,9 @@ const CollectionItemRowBase = ({
 
   return (
     <tr
-      className={`sketches-table__row ${projectIsDeleted ? 'is-deleted' : ''}`}
+      className={`sketches-table__row ${
+        projectIsDeleted || projectIsPrivate ? 'is-deleted-or-private' : ''
+      }`}
     >
       <th scope="row">{name}</th>
       <td>{dates.format(item.createdAt)}</td>

client/styles/components/_sketch-list.scss

@@ -1,83 +1,50 @@
 @use "sass:math";
 
-.sketch-visibility {
-  text-align: center;
-}
-
-sketch-visibility__title {
-  color: red;
-  text-decoration: underline;
+.sketch-visibility__title {
+  @include themify() {
+    color: getThemifyVariable('hint-arrow-background-color');
+  }
 }
 
-.sketch-visibility h1 {
-  font-size: 24px;
-  font-weight: bold;
-  color: #333;
-  /* Adjust color as needed */
-  margin-bottom: 20px;
+.sketch-visibility {
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .sketch-visibility hr {
   border: none;
-  border-top: 1px solid rgba(255, 255, 255, 0.5);
-  /* Adjust color as needed */
-  width: 80%;
+  height: 1px;
+  background: linear-gradient(to right, transparent, white, transparent);
 }
 
-.sketch-visibility ul {
+.sketch-visibility_ul {
   list-style-type: none;
   padding: 0;
-  text-align: left;
-  margin-bottom: 20px;
+  margin: 0;
+  margin-bottom: 7px;
 }
 
-.sketch-visibility ul li {
-  position: relative;
-  padding-left: 20px;
-  /* Add padding for the text */
+.sketch-visibility_ul li {
+  margin-bottom: 7px;
+  display: flex;
+  align-items: center;
 }
 
-.sketch-visibility ul li::before {
+.sketch-visibility_ul li::before {
   content: "\2022";
-  /* Bullet character */
-  color: #333;
-  /* Adjust color as needed */
-  display: inline-block;
-  width: 15px;
-  /* Increase the width to make the circle bigger */
-  height: 15px;
-  /* Increase the height to make the circle bigger */
-  border-radius: 50%;
-  /* Make it a circle */
-  background-color: #333;
-  /* Adjust color as needed */
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
 
-.sketch-visibility button {
-  display: block;
-  margin: 0 auto;
-  padding: 10px 20px;
-  font-size: 16px;
-  background-color: #007bff;
-  /* Adjust color as needed */
-  color: #fff;
-  /* Adjust color as needed */
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
+  @include themify() {
+    color: getThemifyVariable('hint-arrow-background-color');
+  }
 
-.sketch-visibility button:hover {
-  background-color: #0056b3;
-  /* Adjust color as needed */
+  font-size: 34px;
+  margin-right: 10px;
 }
 
 
+
 .sketches-table-container {
   overflow-y: auto;
   max-width: 100%;
@@ -239,7 +206,7 @@ sketch-visibility__title {
   }
 }
 
-.sketches-table__row.is-deleted>* {
+.sketches-table__row.is-deleted-or-private>* {
   font-style: italic;
 }
 

server/controllers/project.controller.js

@@ -8,6 +8,7 @@ import slugify from 'slugify';
 import Project from '../models/project';
 import User from '../models/user';
 import { resolvePathToFile } from '../utils/filePath';
+import { get404Sketch } from '../views/404Page';
 import generateFileSystemSafeName from '../utils/generateFileSystemSafeName';
 
 export {
@@ -96,14 +97,21 @@ export function getProject(req, res) {
       $or: [{ _id: projectId }, { slug: projectId }]
     })
       .populate('user', 'username')
-      .select('visibility')
       .exec((err, project) => { // eslint-disable-line
         if (err) {
           console.log(err);
           return res
             .status(404)
             .send({ message: 'Project with that id does not exist' });
         }
+        // TODO: most probably, this will require its own 'SketchIsPrivate'  page in future.
+        if (
+          project.visibility === 'Private' &&
+          project.owner.username !== username
+        ) {
+          res.status(401);
+          return get404Sketch((html) => res.send(html));
+        }
         return res.json(project);
       });
   });
@@ -123,6 +131,26 @@ export function getProjectsForUserId(userId) {
   });
 }
 
+// eslint-disable-next-line consistent-return
+// export async function getProjectsForUserId(userId) {
+//   try {
+//     const projects = await Project.find({ user: userId })
+//       // .select('name files id createdAt updatedAt visibility owner.username')
+//       .sort('-createdAt');
+//     // const user = await User.findById(userId);
+
+//     // const filteredProjects = projects.filter((project) => {
+//     //   const userIsOwner = project.owner.username === user.username;
+//     //   return userIsOwner || project.visibility === 'Public';
+//     // });
+
+//     return projects;
+//   } catch (error) {
+//     console.log(error);
+//     console.log(error);
+//   }
+// }
+
 export function getProjectAsset(req, res) {
   const projectId = req.params.project_id;
   Project.findOne({ $or: [{ _id: projectId }, { slug: projectId }] })

server/controllers/project.controller/getProjectsForUser.js

@@ -10,25 +10,40 @@ import { toApi as toApiProjectObject } from '../../domain-objects/Project';
 const createCoreHandler = (mapProjectsToResponse) => async (req, res) => {
   try {
     const { username } = req.params;
+    const currentUser = req.user?._id || '';
+    console.log('current user', currentUser);
+
     if (!username) {
       res.status(422).json({ message: 'Username not provided' });
       return;
     }
+
     const user = await User.findByUsername(username);
     if (!user) {
       res
         .status(404)
         .json({ message: 'User with that username does not exist.' });
       return;
     }
+
     const projects = await Project.find({ user: user._id })
       .sort('-createdAt')
-      .select('name files id createdAt updatedAt visibility')
+      .select('name files user id createdAt updatedAt visibility')
       .exec();
-    const response = mapProjectsToResponse(projects);
+
+    const publicProjectsOnly = projects.filter(
+      (project) => project.visibility === 'Public'
+    );
+
+    const response = mapProjectsToResponse(
+      currentUser !== user._id ? publicProjectsOnly : projects
+    );
+
     res.json(response);
-  } catch (e) {
-    res.status(500).json({ message: 'Error fetching projects' });
+  } catch (error) {
+    res
+      .status(500)
+      .json({ success: false, message: 'Error fetching projects' });
   }
 };