Merge branch 'develop' into refactor/prefer-use-translation

Author: raclim

client/modules/IDE/components/Toast.jsx

@@ -1,39 +1,27 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import * as ToastActions from '../actions/toast';
+import { hideToast } from '../actions/toast';
 
 import ExitIcon from '../../../images/exit.svg';
 
-function Toast(props) {
+export default function Toast() {
+  const { text, isVisible } = useSelector((state) => state.toast);
+  const dispatch = useDispatch();
   const { t } = useTranslation();
+  if (!isVisible) {
+    return null;
+  }
   return (
     <section className="toast">
-      <p>{t(props.text)}</p>
+      <p>{t(text)}</p>
       <button
         className="toast__close"
-        onClick={props.hideToast}
+        onClick={() => dispatch(hideToast())}
         aria-label="Close Alert"
       >
         <ExitIcon focusable="false" aria-hidden="true" />
       </button>
     </section>
   );
 }
-
-Toast.propTypes = {
-  text: PropTypes.string.isRequired,
-  hideToast: PropTypes.func.isRequired
-};
-
-function mapStateToProps(state) {
-  return state.toast;
-}
-
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators(ToastActions, dispatch);
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Toast);

client/modules/IDE/pages/IDEView.jsx

@@ -26,7 +26,6 @@ import * as ProjectActions from '../actions/project';
 import * as EditorAccessibilityActions from '../actions/editorAccessibility';
 import * as PreferencesActions from '../actions/preferences';
 import * as UserActions from '../../User/actions';
-import * as ToastActions from '../actions/toast';
 import * as ConsoleActions from '../actions/console';
 import { getHTMLFile } from '../reducers/files';
 import Overlay from '../../App/components/Overlay';
@@ -255,7 +254,7 @@ class IDEView extends React.Component {
         <Helmet>
           <title>{getTitle(this.props)}</title>
         </Helmet>
-        {this.props.toast.isVisible && <Toast />}
+        <Toast />
         <Nav
           warnIfUnsavedChanges={this.handleUnsavedChanges}
           cmController={this.cmController}
@@ -561,9 +560,6 @@ IDEView.propTypes = {
   closeNewFileModal: PropTypes.func.isRequired,
   closeShareModal: PropTypes.func.isRequired,
   closeKeyboardShortcutModal: PropTypes.func.isRequired,
-  toast: PropTypes.shape({
-    isVisible: PropTypes.bool.isRequired
-  }).isRequired,
   autosaveProject: PropTypes.func.isRequired,
   router: PropTypes.shape({
     setRouteLeaveHook: PropTypes.func
@@ -594,7 +590,6 @@ function mapStateToProps(state) {
     editorAccessibility: state.editorAccessibility,
     user: state.user,
     project: state.project,
-    toast: state.toast,
     console: state.console,
     isUserOwner: getIsUserOwner(state)
   };
@@ -610,7 +605,6 @@ function mapDispatchToProps(dispatch) {
       IDEActions,
       PreferencesActions,
       UserActions,
-      ToastActions,
       ConsoleActions
     ),
     dispatch

client/modules/IDE/pages/MobileIDEView.jsx

@@ -278,7 +278,6 @@ const MobileIDEView = (props) => {
     files,
     toggleForceDesktop,
     logoutUser,
-    toast,
     isUserOwner
   } = props;
 
@@ -383,7 +382,7 @@ const MobileIDEView = (props) => {
           />
         </li>
       </Header>
-      {toast.isVisible && <Toast />}
+      <Toast />
 
       <IDEWrapper>
         <Editor provideController={setCmController} />
@@ -456,10 +455,6 @@ MobileIDEView.propTypes = {
     username: PropTypes.string
   }).isRequired,
 
-  toast: PropTypes.shape({
-    isVisible: PropTypes.bool
-  }).isRequired,
-
   logoutUser: PropTypes.func.isRequired,
 
   getProject: PropTypes.func.isRequired,
@@ -490,7 +485,6 @@ function mapStateToProps(state) {
     preferences: state.preferences,
     user: state.user,
     project: state.project,
-    toast: state.toast,
     console: state.console,
     isUserOwner: getIsUserOwner(state)
   };

client/modules/User/pages/AccountView.jsx

@@ -61,7 +61,7 @@ class AccountView extends React.Component {
         <Helmet>
           <title>{this.props.t('AccountView.Title')}</title>
         </Helmet>
-        {this.props.toast.isVisible && <Toast />}
+        <Toast />
 
         <Nav layout="dashboard" />
 
@@ -122,8 +122,7 @@ function mapStateToProps(state) {
     previousPath: state.ide.previousPath,
     user: state.user,
     apiKeys: state.user.apiKeys,
-    theme: state.preferences.theme,
-    toast: state.toast
+    theme: state.preferences.theme
   };
 }
 
@@ -144,9 +143,6 @@ AccountView.propTypes = {
   location: PropTypes.shape({
     search: PropTypes.string.isRequired,
     pathname: PropTypes.string.isRequired
-  }).isRequired,
-  toast: PropTypes.shape({
-    isVisible: PropTypes.bool.isRequired
   }).isRequired
 };
 

contributor_docs/installation.md

@@ -25,7 +25,6 @@ _Note_: The installation steps assume you are using a Unix-like shell. If you ar
 7. Install MongoDB and make sure it is running
    * For Mac OSX with [homebrew](http://brew.sh/): `brew tap mongodb/brew` then `brew install mongodb-community` and finally start the server with `brew services start mongodb-community` or you can visit the installation guide here [Installation Guide For MacOS](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/)
    * For Windows and Linux: [MongoDB Installation](https://docs.mongodb.com/manual/installation/)
-<<<<<<< HEAD:contributor_docs/installation.md
 8. `$ cp .env.example .env`
 9. (Optional) Update `.env` with necessary keys to enable certain app behaviors, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
 10. Run `$ npm run fetch-examples` to download the example sketches into a user called 'p5'. Note that you need to configure your GitHub Credentials, which you can do by following the [Github API Configuration](#github-api-configuration) section.
@@ -34,16 +33,6 @@ _Note_: The installation steps assume you are using a Unix-like shell. If you ar
 13. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
 14. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
 15. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w`
-=======
-7. `$ cp .env.example .env`
-8. (Optional) Update `.env` with necessary keys to enable certain app behaviours, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
-9. Run `$ npm run fetch-examples` to download the example sketches into a user called 'p5'. Note that you need to configure your GitHub Credentials, which you can do by following the [Github API Configuration](#github-api-configuration) section.
-10. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
-11. `$ npm start`
-12. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
-13. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
-14. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w`
->>>>>>> 1129cb97b545e7fa0a7d463fcf3f1c596e1fbf49:developer_docs/installation.md
 
 ## Docker Installation
 
@@ -54,7 +43,6 @@ Using Docker, you can have a complete, consistent development environment withou
 Note that this takes up a significant amount of space on your machine. Make sure you have at least 5GB free.
 
 1. Install Docker for your operating system
-<<<<<<< HEAD:contributor_docs/installation.md
    * [Mac](https://www.docker.com/docker-mac)
    * [Windows](https://www.docker.com/docker-windows)
 2. Install [Docker Desktop](https://www.docker.com/products/docker-desktop/)
@@ -64,16 +52,6 @@ Note that this takes up a significant amount of space on your machine. Make sure
 6. (Optional) Update `.env` with necessary keys to enable certain app behavoirs, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
 7. `$ docker-compose -f docker-compose-development.yml run --rm app npm run fetch-examples` -  note that you need to configure your GitHub Credentials, which you can do by following the [Github API Configuration](#github-api-configuration) section.
 8. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
-=======
-   * Mac: https://www.docker.com/docker-mac
-   * Windows: https://www.docker.com/docker-windows
-2. Clone this repository and cd into it
-3. `$ docker-compose -f docker-compose-development.yml build`
-4. `$ cp .env.example .env`
-5. (Optional) Update `.env` with necessary keys to enable certain app behaviours, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
-6. `$ docker-compose -f docker-compose-development.yml run --rm app npm run fetch-examples` -  note that you need to configure your GitHub Credentials, which you can do by following the [Github API Configuration](#github-api-configuration) section.
-7. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
->>>>>>> 1129cb97b545e7fa0a7d463fcf3f1c596e1fbf49:developer_docs/installation.md
 
 Now, anytime you wish to start the server with its dependencies, you can run: