Merge branch 'develop' into connie-develop

Author: khanniie

.babelrc

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

.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.

README.md

@@ -14,7 +14,7 @@ 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

client/modules/IDE/components/Editor/index.jsx

@@ -151,6 +151,7 @@ class Editor extends React.Component {
       },
       Enter: 'emmetInsertLineBreak',
       Esc: 'emmetResetAbbreviation',
+      [`Shift-Tab`]: false,
       [`${metaKey}-Enter`]: () => null,
       [`Shift-${metaKey}-Enter`]: () => null,
       [`${metaKey}-F`]: 'findPersistent',
@@ -192,10 +193,6 @@ class Editor extends React.Component {
       if (/^[a-z]$/i.test(e.key) && (mode === 'css' || mode === 'javascript')) {
         showHint(_cm, this.props.autocompleteHinter, this.props.fontSize);
       }
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        this._cm.getInputField().blur();
-      }
     });
 
     this._cm.getWrapperElement().style[

client/modules/IDE/components/FileNode.jsx

@@ -292,6 +292,7 @@ const FileNode = ({
             ref={fileOptionsRef}
             tabIndex="0"
             onClick={toggleFileOptions}
+            onBlur={() => setTimeout(hideFileOptions, 200)}
           >
             <DownArrowIcon focusable="false" aria-hidden="true" />
           </button>

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

@@ -211,7 +211,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   gap: 0.16666666666666666rem;
-  box-shadow: rgba(60,64,67,0.3) 0px 1px 2px 0px, rgba(60,64,67,0.15) 0px 1px 3px 1px;
+  box-shadow: rgba(60,64,67,0.3) 0px 1px 2px 0px,rgba(60,64,67,0.15) 0px 1px 3px 1px;
   min-width: 10rem;
   border-radius: 0.16666666666666666rem;
 }
@@ -324,7 +324,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="sc-fujyAs cSTVlM"
+              classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
               focusable="false"
             />
           </button>
@@ -340,7 +340,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
         >
           <test-file-stub
             aria-hidden="true"
-            classname="sc-iqAclL iOZiVo"
+            classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
             focusable="false"
           />
         </button>
@@ -912,7 +912,7 @@ exports[`Nav renders editor version for mobile 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   gap: 0.16666666666666666rem;
-  box-shadow: rgba(60,64,67,0.3) 0px 1px 2px 0px, rgba(60,64,67,0.15) 0px 1px 3px 1px;
+  box-shadow: rgba(60,64,67,0.3) 0px 1px 2px 0px,rgba(60,64,67,0.15) 0px 1px 3px 1px;
   min-width: 10rem;
   border-radius: 0.16666666666666666rem;
 }
@@ -1025,7 +1025,7 @@ exports[`Nav renders editor version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="sc-fujyAs cSTVlM"
+              classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
               focusable="false"
             />
           </button>
@@ -1041,7 +1041,7 @@ exports[`Nav renders editor version for mobile 1`] = `
         >
           <test-file-stub
             aria-hidden="true"
-            classname="sc-iqAclL iOZiVo"
+            classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
             focusable="false"
           />
         </button>

client/modules/IDE/components/Sidebar.jsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -30,21 +30,37 @@ export default function SideBar() {
   );
   const isExpanded = useSelector((state) => state.ide.sidebarIsExpanded);
   const canEditProject = useSelector(selectCanEditSketch);
+  const isAuthenticated = useSelector(getAuthenticated);
 
   const sidebarOptionsRef = useRef(null);
 
-  const isAuthenticated = useSelector(getAuthenticated);
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (
+        projectOptionsVisible &&
+        sidebarOptionsRef.current &&
+        !sidebarOptionsRef.current.contains(event.target)
+      ) {
+        setTimeout(() => dispatch(closeProjectOptions()), 300);
+      }
+    }
 
-  const onBlurComponent = () => {
-    setTimeout(() => dispatch(closeProjectOptions()), 200);
-  };
+    if (projectOptionsVisible) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [projectOptionsVisible, dispatch]);
 
   const toggleProjectOptions = (e) => {
     e.preventDefault();
     if (projectOptionsVisible) {
       dispatch(closeProjectOptions());
     } else {
-      sidebarOptionsRef.current?.focus();
       dispatch(openProjectOptions());
     }
   };
@@ -65,9 +81,7 @@ export default function SideBar() {
             dispatch(collapseSidebar());
             dispatch(closeProjectOptions());
           }}
-        >
-          {' '}
-        </button>
+        />
       )}
       <section className={sidebarClass}>
         <header
@@ -77,57 +91,54 @@ export default function SideBar() {
           <h3 className="sidebar__title">
             <span>{t('Sidebar.Title')}</span>
           </h3>
-          <div className="sidebar__icons">
+          <div className="sidebar__icons" ref={sidebarOptionsRef}>
             <button
               aria-label={t('Sidebar.ToggleARIA')}
               className="sidebar__add"
               tabIndex="0"
-              ref={sidebarOptionsRef}
               onClick={toggleProjectOptions}
-              onBlur={onBlurComponent}
             >
               <PlusIcon focusable="false" aria-hidden="true" />
             </button>
-            <ul className="sidebar__project-options">
-              <li>
-                <button
-                  aria-label={t('Sidebar.AddFolderARIA')}
-                  onClick={() => {
-                    dispatch(newFolder(rootFile.id));
-                    setTimeout(() => dispatch(closeProjectOptions()), 0);
-                  }}
-                  onBlur={onBlurComponent}
-                >
-                  {t('Sidebar.AddFolder')}
-                </button>
-              </li>
-              <li>
-                <button
-                  aria-label={t('Sidebar.AddFileARIA')}
-                  onClick={() => {
-                    dispatch(newFile(rootFile.id));
-                    setTimeout(() => dispatch(closeProjectOptions()), 0);
-                  }}
-                  onBlur={onBlurComponent}
-                >
-                  {t('Sidebar.AddFile')}
-                </button>
-              </li>
-              {isAuthenticated && (
+            {projectOptionsVisible && (
+              <ul className="sidebar__project-options">
+                <li>
+                  <button
+                    aria-label={t('Sidebar.AddFolderARIA')}
+                    onClick={() => {
+                      dispatch(newFolder(rootFile.id));
+                      setTimeout(() => dispatch(closeProjectOptions()), 300);
+                    }}
+                  >
+                    {t('Sidebar.AddFolder')}
+                  </button>
+                </li>
                 <li>
                   <button
-                    aria-label={t('Sidebar.UploadFileARIA')}
+                    aria-label={t('Sidebar.AddFileARIA')}
                     onClick={() => {
-                      dispatch(openUploadFileModal(rootFile.id));
-                      setTimeout(() => dispatch(closeProjectOptions()), 0);
+                      dispatch(newFile(rootFile.id));
+                      setTimeout(() => dispatch(closeProjectOptions()), 300);
                     }}
-                    onBlur={onBlurComponent}
                   >
-                    {t('Sidebar.UploadFile')}
+                    {t('Sidebar.AddFile')}
                   </button>
                 </li>
-              )}
-            </ul>
+                {isAuthenticated && (
+                  <li>
+                    <button
+                      aria-label={t('Sidebar.UploadFileARIA')}
+                      onClick={() => {
+                        dispatch(openUploadFileModal(rootFile.id));
+                        setTimeout(() => dispatch(closeProjectOptions()), 300);
+                      }}
+                    >
+                      {t('Sidebar.UploadFile')}
+                    </button>
+                  </li>
+                )}
+              </ul>
+            )}
           </div>
         </header>
         <ConnectedFileNode id={rootFile.id} canEdit={canEditProject} />

client/modules/IDE/hooks/custom-hooks.js

@@ -47,8 +47,8 @@ export const useModalBehavior = (hideOverlay) => {
 };
 
 // Usage: useEffectWithComparison((props, prevProps) => { ... }, { prop1, prop2 })
-// This hook basically applies useEffect but keeping track of the last value of relevant props
-// So you can passa a 2-param function to capture new and old values and do whatever with them.
+// This hook basically applies useEffect but keeps track of the last value of relevant props
+// So you can pass a 2-param function to capture new and old values and do whatever with them.
 export const useEffectWithComparison = (fn, props) => {
   const [prevProps, update] = useState({});
 

client/modules/User/components/AccountForm.jsx

@@ -97,7 +97,10 @@ function AccountForm() {
                   {t('AccountForm.EmailSent')}
                 </span>
               ) : (
-                <Button onClick={handleInitiateVerification}>
+                <Button
+                  onClick={handleInitiateVerification}
+                  className="form__resend-button"
+                >
                   {t('AccountForm.Resend')}
                 </Button>
               )}

client/modules/User/components/SignupForm.jsx

@@ -9,21 +9,43 @@ import Button from '../../../common/Button';
 import apiClient from '../../../utils/apiClient';
 import useSyncFormTranslations from '../../../common/useSyncFormTranslations';
 
+const timeoutRef = { current: null };
+
 function asyncValidate(fieldToValidate, value) {
   if (!value || value.trim().length === 0) {
-    return '';
+    return Promise.resolve('');
   }
-  const queryParams = {};
-  queryParams[fieldToValidate] = value;
-  queryParams.check_type = fieldToValidate;
-  return apiClient
-    .get('/signup/duplicate_check', { params: queryParams })
-    .then((response) => {
-      if (response.data.exists) {
-        return response.data.message;
-      }
-      return '';
-    });
+
+  const queryParams = {
+    [fieldToValidate]: value,
+    check_type: fieldToValidate
+  };
+
+  return new Promise((resolve) => {
+    if (timeoutRef.current) {
+      timeoutRef.current();
+    }
+
+    const timerId = setTimeout(() => {
+      apiClient
+        .get('/signup/duplicate_check', { params: queryParams })
+        .then((response) => {
+          if (response.data.exists) {
+            resolve(response.data.message);
+          } else {
+            resolve('');
+          }
+        })
+        .catch(() => {
+          resolve('An error occurred while validating');
+        });
+    }, 300);
+
+    timeoutRef.current = () => {
+      clearTimeout(timerId);
+      resolve('');
+    };
+  });
 }
 
 function validateUsername(username) {
@@ -36,27 +58,30 @@ function validateEmail(email) {
 
 function SignupForm() {
   const { t, i18n } = useTranslation();
-
   const dispatch = useDispatch();
-  function onSubmit(formProps) {
-    return dispatch(validateAndSignUpUser(formProps));
-  }
+  const formRef = useRef(null);
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-  const formRef = useRef(null);
-  const handleVisibility = () => {
-    setShowPassword(!showPassword);
-  };
-  const handleConfirmVisibility = () => {
-    setShowConfirmPassword(!showConfirmPassword);
-  };
+
   useSyncFormTranslations(formRef, i18n.language);
 
+  const handleVisibility = () => setShowPassword(!showPassword);
+  const handleConfirmVisibility = () =>
+    setShowConfirmPassword(!showConfirmPassword);
+
+  function onSubmit(formProps) {
+    console.log("it's happening");
+    return dispatch(validateAndSignUpUser(formProps));
+  }
+
   return (
     <Form
       fields={['username', 'email', 'password', 'confirmPassword']}
       validate={validateSignup}
-      onSubmit={onSubmit}
+      onSubmit={(values) => {
+        console.log('Form onSubmit triggered', values);
+        return onSubmit(values);
+      }}
     >
       {({ handleSubmit, pristine, submitting, invalid, form }) => {
         formRef.current = form;