Merge branch 'develop' into extension-renaming-added

Author: raclim

README.md

@@ -31,17 +31,6 @@ If you have found a bug in the p5.js Web Editor, you can file it under the ["iss
 
 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). 
 
-Issues and Pull Requests categorized under the PATCH or MINOR Release Milestones will be prioritized since they are planned to be merged for the next release to Production. Please feel free to [comment on this pinned issue](https://github.com/processing/p5.js-web-editor/issues/2534) if you would like your issue to be considered for the next release!
-
-
-### When Will the Next Production Release Be?
-
-We will aim to deploy on a 1-2 month basis. Here are some dates we’re working towards: 
-
-2.12.0 MINOR Release: By February 27, 2024
-
-[You can read more about Semantic Versioning and the differences between a MINOR and PATCH release](https://semver.org/). 
-
 
 ## References for Contributing to the p5.js Web Editor
 

client/common/useKeyDownHandlers.js

@@ -33,7 +33,11 @@ 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) {
       handlers.current[`ctrl-${e.key.toLowerCase()}`]?.(e);
     }

client/components/AddRemoveButton.jsx

@@ -1,20 +1,18 @@
 import React from 'react';
-import { useMediaQuery } from 'react-responsive';
 import styled from 'styled-components';
 import { prop, remSize } from '../../theme';
 import DropdownMenu from './DropdownMenu';
 
 import DownFilledTriangleIcon from '../../images/down-filled-triangle.svg';
 import MoreIconSvg from '../../images/more.svg';
+import useIsMobile from '../../modules/IDE/hooks/useIsMobile';
 
 const DotsHorizontal = styled(MoreIconSvg)`
   transform: rotate(90deg);
 `;
 
 const TableDropdownIcon = () => {
-  // TODO: centralize breakpoints
-  const isMobile = useMediaQuery({ maxWidth: 770 });
-
+  const isMobile = useIsMobile();
   return isMobile ? (
     <DotsHorizontal focusable="false" aria-hidden="true" />
   ) : (

client/components/Dropdown/TableDropdown.jsx

@@ -12,12 +12,14 @@ const PreviewNav = ({ owner, project }) => {
     <nav className="nav preview-nav">
       <div className="nav__items-left">
         <div className="nav__item-logo">
-          <LogoIcon
-            role="img"
-            aria-label={t('Common.p5logoARIA')}
-            focusable="false"
-            className="svg__logo"
-          />
+          <Link to={`/${owner.username}/sketches`}>
+            <LogoIcon
+              role="img"
+              aria-label={t('Common.p5logoARIA')}
+              focusable="false"
+              className="svg__logo"
+            />
+          </Link>
         </div>
         <Link
           className="nav__item"

client/components/NavBasic.jsx

@@ -2,7 +2,6 @@
 // multiple files
 export const UPDATE_FILE_CONTENT = 'UPDATE_FILE_CONTENT';
 export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
-
 export const START_SKETCH = 'START_SKETCH';
 export const STOP_SKETCH = 'STOP_SKETCH';
 
@@ -137,9 +136,6 @@ export const SET_SORT_PARAMS = 'SET_SORT_PARAMS';
 export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
 export const CLOSE_SKETCHLIST_MODAL = 'CLOSE_SKETCHLIST_MODAL';
 
-export const START_LOADING = 'START_LOADING';
-export const STOP_LOADING = 'STOP_LOADING';
-
 export const START_SAVING_PROJECT = 'START_SAVING_PROJECT';
 export const END_SAVING_PROJECT = 'END_SAVING_PROJECT';
 

client/components/OverlayManager.jsx

@@ -1,6 +1,5 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-
 import translations from '../translations/locales/en-US/translations.json';
 
 i18n.use(initReactI18next).init({

client/components/PreviewNav.jsx

@@ -1,23 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
+import theme from '../../../theme';
 
-import theme, { Theme } from '../../../theme';
-
-const Provider = ({ children, currentTheme }) => (
-  <ThemeProvider theme={{ ...theme[currentTheme] }}>{children}</ThemeProvider>
-);
+const Provider = ({ children }) => {
+  const currentTheme = useSelector((state) => state.preferences.theme);
+  return (
+    <ThemeProvider theme={{ ...theme[currentTheme] }}>{children}</ThemeProvider>
+  );
+};
 
 Provider.propTypes = {
-  children: PropTypes.node.isRequired,
-  currentTheme: PropTypes.oneOf(Object.keys(Theme)).isRequired
+  children: PropTypes.node.isRequired
 };
 
-function mapStateToProps(state) {
-  return {
-    currentTheme: state.preferences.theme
-  };
-}
-
-export default connect(mapStateToProps)(Provider);
+export default Provider;

client/constants.js

@@ -1,6 +1,6 @@
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
-import { startLoader, stopLoader } from './loader';
+import { startLoader, stopLoader } from '../reducers/loading';
 import { assetsActions } from '../reducers/assets';
 
 const { setAssets, deleteAsset } = assetsActions;

client/i18n-test.js

@@ -1,7 +1,7 @@
 import browserHistory from '../../../browserHistory';
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
-import { startLoader, stopLoader } from './loader';
+import { startLoader, stopLoader } from '../reducers/loading';
 import { setToastText, showToast } from './toast';
 
 const TOAST_DISPLAY_TIME_MS = 1500;
@@ -80,7 +80,7 @@ export function addToCollection(collectionId, projectId) {
 
         const collectionName = response.data.name;
 
-        dispatch(setToastText(`Added to "${collectionName}`));
+        dispatch(setToastText(`Added to "${collectionName}"`));
         dispatch(showToast(TOAST_DISPLAY_TIME_MS));
 
         return response.data;
@@ -110,7 +110,7 @@ export function removeFromCollection(collectionId, projectId) {
 
         const collectionName = response.data.name;
 
-        dispatch(setToastText(`Removed from "${collectionName}`));
+        dispatch(setToastText(`Removed from "${collectionName}"`));
         dispatch(showToast(TOAST_DISPLAY_TIME_MS));
 
         return response.data;

client/modules/App/components/ThemeProvider.jsx

@@ -1,6 +1,6 @@
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
-import { startLoader, stopLoader } from './loader';
+import { startLoader, stopLoader } from '../reducers/loading';
 
 // eslint-disable-next-line
 export function getProjects(username) {

client/modules/IDE/actions/assets.js

@@ -5,6 +5,7 @@ import { rest } from 'msw';
 
 import * as ProjectActions from './projects';
 import * as ActionTypes from '../../../constants';
+import { startLoader, stopLoader } from '../reducers/loading';
 import {
   initialTestState,
   mockProjects
@@ -33,9 +34,9 @@ describe('projects action creator tests', () => {
     store = mockStore(initialTestState);
 
     const expectedActions = [
-      { type: ActionTypes.START_LOADING },
+      { type: startLoader.type },
       { type: ActionTypes.SET_PROJECTS, projects: mockProjects },
-      { type: ActionTypes.STOP_LOADING }
+      { type: stopLoader.type }
     ];
 
     return store

client/modules/IDE/actions/collections.js

@@ -162,6 +162,20 @@ function About(props) {
             {t('About.Discord')}
           </a>
         </p>
+        <p className="about__content-column-list">
+          <a
+            href="https://p5js.org/download/support.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <AsteriskIcon
+              className="about__content-column-asterisk"
+              aria-hidden="true"
+              focusable="false"
+            />
+            Donate
+          </a>
+        </p>
         <p className="about__content-column-list">
           <Link to="/privacy-policy">
             <AsteriskIcon

client/modules/IDE/actions/loader.js

@@ -1,6 +1,5 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import prettyBytes from 'pretty-bytes';
 
 import getConfig from '../../../utils/getConfig';
@@ -18,7 +17,11 @@ const formatPercent = (percent) => {
 };
 
 /* Eventually, this copy should be Total / 250 MB Used */
-const AssetSize = ({ totalSize }) => {
+const AssetSize = () => {
+  const totalSize = useSelector(
+    (state) => state.user.totalSize || state.assets.totalSize
+  );
+
   if (totalSize === undefined) {
     return null;
   }
@@ -40,15 +43,4 @@ const AssetSize = ({ totalSize }) => {
   );
 };
 
-AssetSize.propTypes = {
-  totalSize: PropTypes.number.isRequired
-};
-
-function mapStateToProps(state) {
-  return {
-    user: state.user,
-    totalSize: state.user.totalSize || state.assets.totalSize
-  };
-}
-
-export default connect(mapStateToProps)(AssetSize);
+export default AssetSize;

client/modules/IDE/actions/projects.js

@@ -28,7 +28,12 @@ function EditableInput({
   const { t } = useTranslation();
   React.useEffect(() => {
     if (isEditing) {
-      inputRef.current?.focus();
+      const inputElement = inputRef.current;
+      inputElement.setSelectionRange(
+        inputElement.value.length,
+        inputElement.value.length
+      );
+      inputElement.focus();
     }
   }, [isEditing]);
   React.useEffect(() => {