Merge pull request #2043 from lindapaiste/refactor/redux-hooks

use react-redux hooks in Toast component

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

@@ -68,7 +68,7 @@ class AccountView extends React.Component {
         <Helmet>
           <title>{this.props.t('AccountView.Title')}</title>
         </Helmet>
-        {this.props.toast.isVisible && <Toast />}
+        <Toast />
 
         <Nav layout="dashboard" />
 
@@ -129,8 +129,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
   };
 }
 
@@ -151,9 +150,6 @@ AccountView.propTypes = {
   location: PropTypes.shape({
     search: PropTypes.string.isRequired,
     pathname: PropTypes.string.isRequired
-  }).isRequired,
-  toast: PropTypes.shape({
-    isVisible: PropTypes.bool.isRequired
   }).isRequired
 };