From 97768c8954949789cf4821cb3bcc3fcf52144248 Mon Sep 17 00:00:00 2001
From: Linda Paiste <lindapaiste@gmail.com>
Date: Tue, 19 Jul 2022 00:32:31 -0500
Subject: [PATCH] use react-redux hooks in Toast
---
client/modules/IDE/components/Toast.jsx | 32 +++++++---------------
client/modules/IDE/pages/IDEView.jsx | 8 +-----
client/modules/IDE/pages/MobileIDEView.jsx | 8 +-----
client/modules/User/pages/AccountView.jsx | 8 ++----
4 files changed, 14 insertions(+), 42 deletions(-)
diff --git a/client/modules/IDE/components/Toast.jsx b/client/modules/IDE/components/Toast.jsx
index 9f29dc1872..0f16282220 100644
--- a/client/modules/IDE/components/Toast.jsx
+++ b/client/modules/IDE/components/Toast.jsx
@@ -1,20 +1,23 @@
-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" />
@@ -22,18 +25,3 @@ function Toast(props) {
</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);
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 04bbb2f9ad..bada353c34 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/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
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 201ad4e5c0..6442a0adba 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/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)
};
diff --git a/client/modules/User/pages/AccountView.jsx b/client/modules/User/pages/AccountView.jsx
index a388997af4..699d707221 100644
--- a/client/modules/User/pages/AccountView.jsx
+++ b/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
};