Merge branch 'develop' into piyush/refactor-console-redux-toolkit

Author: raclim

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

@@ -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';
 

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,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/constants.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(() => {

client/i18n-test.js

@@ -9,7 +9,7 @@ export const EditorContainer = styled.div`
   transform: ${(props) =>
     props.expanded ? 'translateX(50%)' : 'translateX(0)'};
 
-  > header {
+  > div {
     display: flex;
     ${prop('MobilePanel.secondary')}
     > span {