Merge branch 'develop' into feat/pagination-copy

Author: raclim

client/modules/App/components/Overlay.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef } from 'react';
-import MediaQuery from 'react-responsive';
+import { useMediaQuery } from 'react-responsive';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -9,8 +9,8 @@ import type { RootState } from '../../../reducers';
 import ExitIcon from '../../../images/exit.svg';
 
 type OverlayProps = {
-  children?: React.ReactElement;
-  actions?: React.ReactElement;
+  children?: React.ReactNode;
+  actions?: React.ReactNode;
   closeOverlay?: () => void;
   title?: string;
   ariaLabel?: string;
@@ -35,6 +35,9 @@ export const Overlay = ({
 
   const browserHistory = useHistory();
 
+  const isDesktop = useMediaQuery({ minWidth: 770 });
+  const isMobile = useMediaQuery({ maxWidth: 769 });
+
   const close = useCallback(() => {
     const node = ref.current;
     if (!node) return;
@@ -66,7 +69,7 @@ export const Overlay = ({
           <header className="overlay__header">
             <h2 className="overlay__title">{title}</h2>
             <div className="overlay__actions">
-              <MediaQuery minWidth={770}>{actions}</MediaQuery>
+              {isDesktop && actions}
               <button
                 className="overlay__close-button"
                 onClick={close}
@@ -76,11 +79,9 @@ export const Overlay = ({
               </button>
             </div>
           </header>
-          <MediaQuery maxWidth={769}>
-            {actions && (
-              <div className="overlay__actions-mobile">{actions}</div>
-            )}
-          </MediaQuery>
+          {isMobile && actions && (
+            <div className="overlay__actions-mobile">{actions}</div>
+          )}
           {children}
         </section>
       </div>

common/p5Versions.js

@@ -5,7 +5,8 @@ export const currentP5Version = '1.11.11'; // Don't update to 2.x until 2026
 // JSON.stringify([...document.querySelectorAll('._132722c7')].map(n => n.innerText), null, 2)
 // TODO: use their API for this to grab these at build time?
 export const p5Versions = [
-  { version: '2.1.2', label: '(Beta)' },
+  { version: '2.2.0', label: '(Beta)' },
+  '2.1.2',
   '2.1.1',
   '2.0.5',
   '2.0.4',

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "p5.js-web-editor",
-  "version": "2.19.4",
+  "version": "2.19.7",
   "description": "The web editor for p5.js.",
   "scripts": {
     "clean": "rimraf dist",

package.json

@@ -296,6 +296,12 @@ export async function changeProjectVisibility(req, res) {
         .json({ success: false, message: 'No project found.' });
     }
 
+    if (!project.user.equals(req.user._id)) {
+      return res
+        .status(403)
+        .json({ success: false, message: 'Unauthorized action.' });
+    }
+
     if (newVisibility !== 'Private' && newVisibility !== 'Public') {
       return res.status(400).json({ success: false, message: 'Invalid data.' });
     }

server/controllers/project.controller.js

@@ -26,7 +26,11 @@ router.get('/:username/projects', ProjectController.getProjectsForUser);
 
 router.get('/projects/:project_id/zip', ProjectController.downloadProjectAsZip);
 
-router.patch('/project/visibility', ProjectController.changeProjectVisibility);
+router.patch(
+  '/project/visibility',
+  isAuthenticated,
+  ProjectController.changeProjectVisibility
+);
 
 // eslint-disable-next-line import/no-default-export
 export default router;

server/routes/project.routes.ts

@@ -195,6 +195,20 @@ app.get('*', async (req, res) => {
   res.type('txt').send('Not found.');
 });
 
+// Global error handler for unhandled errors
+app.use((error, req, res, next) => {
+  console.error('Unhandled error:', error);
+
+  if (res.headersSent) {
+    return next(error);
+  }
+
+  const statusCode = error.status || 500;
+  return res.status(statusCode).json({
+    error: 'Internal server error'
+  });
+});
+
 // start app
 app.listen(process.env.PORT, (error) => {
   if (!error) {