Merge branch 'develop' into issue-#2652

lindapaiste · web-flow · commit ec5146ff26f2 · 2024-01-06T13:53:01.000-06:00
diff --git a/client/i18n.js b/client/i18n.js
@@ -42,7 +42,7 @@ export const availableLanguages = [
 
 export function languageKeyToLabel(lang) {
   const languageMap = {
-    be: 'Bengali',
+    be: 'বাংলা',
     de: 'Deutsch',
     'en-US': 'English',
     'es-419': 'Español',
diff --git a/client/middleware.js b/client/middleware.js
@@ -0,0 +1,5 @@
+import { createListenerMiddleware } from '@reduxjs/toolkit';
+
+const listenerMiddleware = createListenerMiddleware();
+
+export default listenerMiddleware;
diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
-import getConfig from '../../utils/getConfig';
+import { showReduxDevTools } from '../../store';
 import DevTools from './components/DevTools';
 import { setPreviousPath } from '../IDE/actions/ide';
 import { setLanguage } from '../IDE/actions/preferences';
@@ -52,9 +52,7 @@ const App = ({ children }) => {
   return (
     <div className="app">
       <CookieConsent hide={hide} />
-      {isMounted &&
-        !window.devToolsExtension &&
-        getConfig('NODE_ENV') === 'development' && <DevTools />}
+      {isMounted && showReduxDevTools() && <DevTools />}
       {children}
     </div>
   );
diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx
@@ -11,7 +11,7 @@ const Frame = styled.iframe`
   border-width: 0;
 `;
 
-function PreviewFrame({ fullView }) {
+function PreviewFrame({ fullView, isOverlayVisible }) {
   const iframe = useRef();
   const previewUrl = getConfig('PREVIEW_URL');
   useEffect(() => {
@@ -28,28 +28,36 @@ function PreviewFrame({ fullView }) {
     hid; microphone; magnetometer; midi; payment; usb; serial; vr; xr-spatial-tracking`;
 
   return (
-    <Frame
-      title="sketch preview"
-      src={frameUrl}
-      sandbox={sandboxAttributes}
-      allow={allow}
-      scrolling="auto"
-      allowtransparency
-      allowpaymentrequest
-      allowFullScreen
-      frameBorder="0"
-      ref={iframe}
-      fullView={fullView}
-    />
+    <>
+      <div
+        className="preview-frame-overlay"
+        style={{ display: isOverlayVisible ? 'block' : 'none' }}
+      />
+      <Frame
+        title="sketch preview"
+        src={frameUrl}
+        sandbox={sandboxAttributes}
+        allow={allow}
+        scrolling="auto"
+        allowtransparency
+        allowpaymentrequest
+        allowFullScreen
+        frameBorder="0"
+        ref={iframe}
+        fullView={fullView}
+      />
+    </>
   );
 }
 
 PreviewFrame.propTypes = {
-  fullView: PropTypes.bool
+  fullView: PropTypes.bool,
+  isOverlayVisible: PropTypes.bool
 };
 
 PreviewFrame.defaultProps = {
-  fullView: false
+  fullView: false,
+  isOverlayVisible: false
 };
 
 export default PreviewFrame;
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
@@ -173,7 +173,9 @@ const IDEView = () => {
                     primary="second"
                     size={ide.consoleIsExpanded ? consoleSize : 29}
                     minSize={29}
-                    onChange={(size) => setConsoleSize(size)}
+                    onChange={(size) => {
+                      setConsoleSize(size);
+                    }}
                     allowResize={ide.consoleIsExpanded}
                     className="editor-preview-subpanel"
                   >
@@ -191,16 +193,10 @@ const IDEView = () => {
                       </h2>
                     </header>
                     <div className="preview-frame__content">
-                      <div
-                        className="preview-frame-overlay"
-                        style={{ display: isOverlayVisible ? 'block' : 'none' }}
+                      <PreviewFrame
+                        cmController={cmRef.current}
+                        isOverlayVisible={isOverlayVisible}
                       />
-                      <div>
-                        {((preferences.textOutput || preferences.gridOutput) &&
-                          ide.isPlaying) ||
-                          ide.isAccessibleOutputPlaying}
-                      </div>
-                      <PreviewFrame cmController={cmRef.current} />
                     </div>
                   </section>
                 </SplitPane>
@@ -215,11 +211,18 @@ const IDEView = () => {
                   split="horizontal"
                   primary="second"
                   minSize={200}
+                  onChange={() => {
+                    setIsOverlayVisible(true);
+                  }}
+                  onDragFinished={() => {
+                    setIsOverlayVisible(false);
+                  }}
                 >
                   <PreviewFrame
                     fullView
                     hide={!ide.isPlaying}
                     cmController={cmRef.current}
+                    isOverlayVisible={isOverlayVisible}
                   />
                   <Console />
                 </SplitPane>
diff --git a/client/modules/IDE/selectors/collections.js b/client/modules/IDE/selectors/collections.js
@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 import differenceInMilliseconds from 'date-fns/differenceInMilliseconds';
 import { find, orderBy } from 'lodash';
 import { DIRECTION } from '../actions/sorting';
diff --git a/client/modules/IDE/selectors/files.js b/client/modules/IDE/selectors/files.js
@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 
 const selectFiles = (state) => state.files;
 
diff --git a/client/modules/IDE/selectors/project.js b/client/modules/IDE/selectors/project.js
@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 
 export const selectProjectOwner = (state) => state.project.owner;
 export const selectProjectId = (state) => state.project.id;
diff --git a/client/modules/IDE/selectors/projects.js b/client/modules/IDE/selectors/projects.js
@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 import differenceInMilliseconds from 'date-fns/differenceInMilliseconds';
 import { orderBy } from 'lodash';
 import { DIRECTION } from '../actions/sorting';
diff --git a/client/modules/IDE/selectors/users.js b/client/modules/IDE/selectors/users.js
@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 import getConfig from '../../../utils/getConfig';
 
 export const getAuthenticated = (state) => state.user.authenticated;
diff --git a/client/modules/User/pages/SignupView.jsx b/client/modules/User/pages/SignupView.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
-import { useTranslation } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 import SignupForm from '../components/SignupForm';
 import SocialAuthButton from '../components/SocialAuthButton';
 import Nav from '../../IDE/components/Header/Nav';
@@ -27,9 +27,13 @@ function SignupView() {
             <SocialAuthButton service={SocialAuthButton.services.google} />
           </div>
           <p className="form__navigation-options">
-            By signing up, you agree to the p5.js Editor&apos;s{' '}
-            <Link to="/terms-of-use">Terms of Use</Link> and{' '}
-            <Link to="/privacy-policy">Privacy Policy</Link>.
+            <Trans
+              i18nKey="SignupView.Warning"
+              components={[
+                <Link to="/terms-of-use">Terms of use</Link>,
+                <Link to="/privacy-policy">Privacy Policy</Link>
+              ]}
+            />
           </p>
           <p className="form__navigation-options">
             {t('SignupView.AlreadyHave')}{' '}
diff --git a/client/store.js b/client/store.js
@@ -1,30 +1,36 @@
-import { createStore, applyMiddleware, compose } from 'redux';
-import thunk from 'redux-thunk';
+import { configureStore } from '@reduxjs/toolkit';
+import listenerMiddleware from './middleware';
 import DevTools from './modules/App/components/DevTools';
 import rootReducer from './reducers';
 import { clearState, loadState } from './persistState';
 import getConfig from './utils/getConfig';
 
-export default function configureStore(initialState) {
-  const enhancers = [applyMiddleware(thunk)];
-
-  if (getConfig('CLIENT') && getConfig('NODE_ENV') === 'development') {
-    // Enable DevTools only when rendering on client and during development.
-    enhancers.push(
-      window.devToolsExtension
-        ? window.devToolsExtension()
-        : DevTools.instrument()
-    );
-  }
+// Enable DevTools only when rendering on client and during development.
+// Display the dock monitor only if no browser extension is found.
+export function showReduxDevTools() {
+  return (
+    getConfig('CLIENT') &&
+    getConfig('NODE_ENV') === 'development' &&
+    !window.__REDUX_DEVTOOLS_EXTENSION__
+  );
+}
 
+export default function setupStore(initialState) {
   const savedState = loadState();
   clearState();
 
-  const store = createStore(
-    rootReducer,
-    savedState != null ? savedState : initialState,
-    compose(...enhancers)
-  );
+  const store = configureStore({
+    reducer: rootReducer,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware({
+        thunk: true,
+        serializableCheck: true,
+        // TODO: enable immutableCheck once the mutations are fixed.
+        immutableCheck: false
+      }).concat(listenerMiddleware.middleware),
+    preloadedState: savedState || initialState,
+    enhancers: showReduxDevTools() ? [DevTools.instrument()] : []
+  });
 
   if (module.hot) {
     // Enable Webpack hot module replacement for reducers
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
@@ -144,6 +144,6 @@
 .checkbox__autorefresh{
 	cursor: pointer;
 	@include themify(){
-		color:getThemifyVariable('logo-color');
+		accent-color:getThemifyVariable('logo-color');
 	}
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/server/controllers/aws.controller.js b/server/controllers/aws.controller.js
diff --git a/server/controllers/user.controller.js b/server/controllers/user.controller.js
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
diff --git a/translations/locales/hi/translations.json b/translations/locales/hi/translations.json

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { createSelector } from 'reselect';`
	`1`	`+import { createSelector } from '@reduxjs/toolkit';`
`2`	`2`	`import differenceInMilliseconds from 'date-fns/differenceInMilliseconds';`
`3`	`3`	`import { find, orderBy } from 'lodash';`
`4`	`4`	`import { DIRECTION } from '../actions/sorting';`
Original file line number	Diff line number	Diff line change
`@@ -144,6 +144,6 @@`
`144`	`144`	`.checkbox__autorefresh{`
`145`	`145`	`cursor: pointer;`
`146`	`146`	`@include themify(){`
`147`		`- color:getThemifyVariable('logo-color');`
	`147`	`+ accent-color:getThemifyVariable('logo-color');`
`148`	`148`	`}`
`149`	`149`	`}`