fix bugs and added protected route for private sketch

Author: vivekbopaliya

.babelrc

@@ -62,6 +62,20 @@
           }
         ]
       ]
+    },
+    "test": {
+      "presets": [
+        "@babel/preset-env",
+        [
+          "@babel/preset-react",
+          {
+            "runtime": "automatic"
+          }
+        ]
+      ],
+      "plugins": [
+        "babel-plugin-styled-components"
+      ]
     }
   },
   "plugins": [

.env.example

@@ -19,7 +19,7 @@ MAILGUN_KEY=<your-mailgun-api-key>
 ML5_LIBRARY_USERNAME=ml5
 ML5_LIBRARY_EMAIL=[email protected]
 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

.eslintrc

@@ -14,7 +14,8 @@
     "import/named": 0,
     "import/namespace": 0,
     "import/no-unresolved": 0,
-    "import/no-named-as-default": 2,
+    "import/no-named-as-default": 0,
+    "import/no-named-as-default-member": 0,
     "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
     "indent": 0,
     "no-console": 0,

.github/CONTRIBUTING.md

@@ -46,7 +46,7 @@ For first-time contributors or those who want to start with a small task, [check
 If you're looking for a bigger project to take on, look through the issues tagged [good medium issue](https://github.com/processing/p5.js-web-editor/labels/good%20medium%20issue). These issues are self-contained projects that may take longer to work on, but are great if you're looking to get more deeply involved in contributing!
 
 ### Project Board
-Many issues are related to each other and fall under bigger projects. To get a bigger picture, look at the [All Projects](https://github.com/processing/p5.js-web-editor/projects/4) board.
+Many issues are related to each other and fall under bigger projects. To get a bigger picture, look at the [All Projects](https://github.com/processing/p5.js-web-editor/projects/) board.
 
 ### Project Ideas
 If you're looking for inspiration for Google Summer of Code or a bigger project, there's a [project list](https://github.com/processing/processing/wiki/Project-List#p5js-web-editor) maintained on the Processing wiki.

.github/workflows/deploy-staging.yml

@@ -19,16 +19,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out the repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v2
       - name: Login to Docker Hub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push to Docker Hub
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v4
         with:
           context: .
           file: ./Dockerfile

.github/workflows/deploy.yml

@@ -19,20 +19,20 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out the repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           ref: release
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
         with:
           platforms: linux/amd64,linux/arm64
       - name: Login to Docker Hub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push to Docker Hub
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v4
         with:
           context: .
           file: ./Dockerfile

.storybook/main.js

@@ -4,7 +4,8 @@ const config = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-interactions'
+    '@storybook/addon-interactions',
+    '@storybook/addon-mdx-gfm'
   ],
   framework: {
     name: '@storybook/react-webpack5',

Dockerfile

@@ -1,12 +1,12 @@
-FROM node:16.14.2 as base
+FROM node:16.14.2 AS base
 ENV APP_HOME=/usr/src/app \
   TERM=xterm
 RUN mkdir -p $APP_HOME
 WORKDIR $APP_HOME
 EXPOSE 8000
 EXPOSE 8002
 
-FROM base as development
+FROM base AS development
 ENV NODE_ENV development
 COPY package.json package-lock.json ./
 RUN npm install
@@ -18,11 +18,11 @@ COPY translations/locales ./translations/locales
 COPY public ./public
 CMD ["npm", "start"]
 
-FROM development as build
+FROM development AS build
 ENV NODE_ENV production
 RUN npm run build
 
-FROM base as production
+FROM base AS production
 ENV NODE_ENV=production
 COPY package.json package-lock.json index.js ./
 RUN npm install --production

README.md

@@ -14,24 +14,17 @@ Learn more about [our community](https://p5js.org/community/) and read our commu
 
 ## Getting Started
 
-Make your first sketch in the [p5.js Editor](https://editor.p5js.org/)! Learn more about sketching with p5.js on the [Get Started](https://p5js.org/get-started/) and find everything you can do in the [Reference](https://p5js.org/reference/). You can also look at [examples](https://editor.p5js.org/p5/sketches) and remix them in the p5.js Editor.
+Make your first sketch in the [p5.js Editor](https://editor.p5js.org/)! Learn more about sketching with p5.js on the [Get Started](https://p5js.org/tutorials/get-started/) and find everything you can do in the [Reference](https://p5js.org/reference/). You can also look at [examples](https://editor.p5js.org/p5/sketches) and remix them in the p5.js Editor.
 
 
 ## Issues
 
 If you have found a bug in the p5.js Web Editor, you can file it under the ["issues" tab](https://github.com/processing/p5.js-web-editor/issues). You can also request new features here. A set of templates for reporting issues and requesting features are provided to assist you (and us!). The p5.js Editor is maintained mostly by volunteers, so we thank you for your patience as we try to address your issues as soon as we can. Please post bugs and feature requests in the correct repository if you can:
 
 * p5.js library: [https://github.com/processing/p5.js/issues](https://github.com/processing/p5.js/issues)
-* p5.accessibility: [https://github.com/processing/p5.accessibility/issues](https://github.com/processing/p5.accessibility/issues)
-* p5.sound: [https://github.com/processing/p5.js-sound/issues](https://github.com/processing/p5.js-sound/issues)
 * p5.js website: [https://github.com/processing/p5.js-website/issues](https://github.com/processing/p5.js-website/issues)
 
 
-### How Do I Know My Issue or Pull Request is Getting Reviewed?
-
-To see which pull requests and issues are currently being reviewed, check the [PR Review Board](https://github.com/processing/p5.js-web-editor/projects/9) or the following Milestones: [MINOR Release](https://github.com/processing/p5.js-web-editor/milestone/8). 
-
-
 ## References for Contributing to the p5.js Web Editor
 
 [Code of Conduct](https://editor.p5js.org/code-of-conduct)
@@ -53,5 +46,3 @@ Hosting and technical support has come from:
 <a href="https://releasehub.com/" target="_blank"><img width="100" src="https://assets.website-files.com/603dd147c5b0a480611bd348/603dd147c5b0a469bc1bd451_logo--dark.svg" /></a>
 <br />
 <a href="https://www.browserstack.com/" target="_blank"><img width="100" src="https://user-images.githubusercontent.com/6063380/46976166-ab280a80-d096-11e8-983b-18dd38c8cc9b.png" /></a>
-<br />
-<a href="https://www.fastly.com/" target="_blank"><img width="100" src="https://cdn-assets-us.frontify.com/s3/frontify-enterprise-files-us/eyJwYXRoIjoiZmFzdGx5XC9hY2NvdW50c1wvYzJcLzQwMDEwMjNcL3Byb2plY3RzXC8xMVwvYXNzZXRzXC80ZVwvNzc0XC9lZTZmYzlkOWYzNWE1NjBkNjUzNjFkNGI0NGQ2MTNmZi0xNjIxNTIyODg4LnBuZyJ9:fastly:nVuY3PxyFqQMI6elJsMzxAGLH3IFlmiuMdacHAGRMkE?width=2400" /></a>

client/common/useKeyDownHandlers.js

@@ -33,7 +33,14 @@ export default function useKeyDownHandlers(keyHandlers) {
     const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
     const isCtrl = isMac ? e.metaKey : e.ctrlKey;
     if (e.shiftKey && isCtrl) {
-      handlers.current[`ctrl-shift-${e.key.toLowerCase()}`]?.(e);
+      handlers.current[
+        `ctrl-shift-${
+          /^\d+$/.test(e.code.at(-1)) ? e.code.at(-1) : e.key.toLowerCase()
+        }`
+      ]?.(e);
+    } else if (isCtrl && e.altKey && e.code === 'KeyN') {
+      // specifically for creating a new file
+      handlers.current[`ctrl-alt-n`]?.(e);
     } else if (isCtrl) {
       handlers.current[`ctrl-${e.key.toLowerCase()}`]?.(e);
     }