Use hooks for toastr

theodo · Apr 24, 2020 · e94aec2 · e94aec2
1 parent f4ca48f
commit e94aec2
Show file tree

Hide file tree

Showing 13 changed files with 228 additions and 268 deletions.
diff --git a/frontend/src/pages/EnvironmentSettings/EnvironmentSettings.tsx b/frontend/src/pages/EnvironmentSettings/EnvironmentSettings.tsx
@@ -5,8 +5,7 @@ import { FormattedMessage, InjectedIntlProps } from 'react-intl';
 import ReduxToastr, { toastr } from 'react-redux-toastr';
 import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';
 import { RouteComponentProps } from 'react-router';
-import { useProjectById } from 'redux/entities/projects/hooks';
-import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
+import { useProjectById, useToastr } from 'redux/entities/projects/hooks';
 import { useCurrentUser } from 'redux/user/selectors';
 import { makeGetRequest } from 'services/networking/request';
 import { isUserAdminOfProject } from 'services/utils';
@@ -22,23 +21,14 @@ import {
   ProjectSettingsBlock,
 } from './EnvironmentSettings.style';
 
-export type OwnProps = {} & RouteComponentProps<{
-  projectId: string;
-}>;
+type Props = InjectedIntlProps &
+  RouteComponentProps<{
+    projectId: string;
+  }>;
 
-type Props = {
-  toastrDisplay: ProjectToastrDisplayType;
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) => void;
-} & OwnProps &
-  InjectedIntlProps;
-
-const EnvironmentSettings: React.FunctionComponent<Props> = ({
-  match,
-  intl,
-  toastrDisplay,
-  setProjectToastrDisplay,
-}) => {
+const EnvironmentSettings: React.FunctionComponent<Props> = ({ match, intl }) => {
   const currentUser = useCurrentUser();
+  const { currentToastrDisplay, resetToastrDisplay } = useToastr();
 
   interface UserOption {
     value: string;
@@ -83,8 +73,8 @@ const EnvironmentSettings: React.FunctionComponent<Props> = ({
 
   React.useEffect(
     () => {
-      if ('' !== toastrDisplay) {
-        switch (toastrDisplay) {
+      if ('' !== currentToastrDisplay) {
+        switch (currentToastrDisplay) {
           case 'addAuditParameterSuccess':
             toastr.success(
               intl.formatMessage({ id: 'Toastr.ProjectSettings.success_title' }),
@@ -115,10 +105,10 @@ const EnvironmentSettings: React.FunctionComponent<Props> = ({
             break;
         }
 
-        setProjectToastrDisplay('');
+        resetToastrDisplay();
       }
     },
-    [toastrDisplay, setProjectToastrDisplay, intl],
+    [currentToastrDisplay, resetToastrDisplay, intl],
   );
 
   if (project === undefined) {

diff --git a/frontend/src/pages/EnvironmentSettings/EnvironmentSettings.wrap.tsx b/frontend/src/pages/EnvironmentSettings/EnvironmentSettings.wrap.tsx
@@ -1,23 +1,5 @@
 import { injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-import { RootState } from 'redux/types';
 
-import { setProjectToastrDisplay } from 'redux/entities/projects';
-import { getProjectToastrDisplay } from 'redux/entities/projects/selectors';
-import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
-import EnvironmentSettings, { OwnProps } from './EnvironmentSettings';
+import EnvironmentSettings from './EnvironmentSettings';
 
-const mapStateToProps = (state: RootState, props: OwnProps) => ({
-  toastrDisplay: getProjectToastrDisplay(state),
-});
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) =>
-    dispatch(setProjectToastrDisplay({ toastrDisplay })),
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(injectIntl(EnvironmentSettings));
+export default injectIntl(EnvironmentSettings);
diff --git a/frontend/src/pages/GeneralSettings/GeneralSettings.tsx b/frontend/src/pages/GeneralSettings/GeneralSettings.tsx
@@ -5,8 +5,7 @@ import { FormattedMessage, InjectedIntlProps } from 'react-intl';
 import ReduxToastr, { toastr } from 'react-redux-toastr';
 import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';
 import { RouteComponentProps } from 'react-router';
-import { useProjectById } from 'redux/entities/projects/hooks';
-import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
+import { useProjectById, useToastr } from 'redux/entities/projects/hooks';
 import { useCurrentUser } from 'redux/user/selectors';
 import ProjectDetailsInput from './Components/ProjectDetailsInput';
 import {
@@ -17,28 +16,23 @@ import {
   Title,
 } from './GeneralSettings.style';
 
-export type OwnProps = {} & RouteComponentProps<{
-  projectId: string;
-}>;
-
 type Props = {
-  toastrDisplay: ProjectToastrDisplayType;
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) => void;
   editProjectDetailsRequest: (
     projectId: string,
     payload: { name: string; wpt_api_key: string; wpt_instance_url: string },
   ) => void;
-} & OwnProps &
+} & RouteComponentProps<{
+  projectId: string;
+}> &
   InjectedIntlProps;
 
 const GeneralSettings: React.FunctionComponent<Props> = ({
   match,
   intl,
-  toastrDisplay,
-  setProjectToastrDisplay,
   editProjectDetailsRequest,
 }) => {
   const currentUser = useCurrentUser();
+  const { currentToastrDisplay, resetToastrDisplay } = useToastr();
 
   interface UserOption {
     value: string;
@@ -70,8 +64,8 @@ const GeneralSettings: React.FunctionComponent<Props> = ({
 
   React.useEffect(
     () => {
-      if ('' !== toastrDisplay) {
-        switch (toastrDisplay) {
+      if ('' !== currentToastrDisplay) {
+        switch (currentToastrDisplay) {
           case 'editProjectDetailsSuccess':
             toastr.success(
               intl.formatMessage({ id: 'Toastr.ProjectSettings.success_title' }),
@@ -86,10 +80,10 @@ const GeneralSettings: React.FunctionComponent<Props> = ({
             break;
         }
 
-        setProjectToastrDisplay('');
+        resetToastrDisplay();
       }
     },
-    [toastrDisplay, setProjectToastrDisplay, intl],
+    [currentToastrDisplay, resetToastrDisplay, intl],
   );
 
   if (project === undefined) {

diff --git a/frontend/src/pages/GeneralSettings/GeneralSettings.wrap.tsx b/frontend/src/pages/GeneralSettings/GeneralSettings.wrap.tsx
@@ -1,27 +1,18 @@
 import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
-import { RootState } from 'redux/types';
 
-import { editProjectDetailsRequest, setProjectToastrDisplay } from 'redux/entities/projects';
-import { getProjectToastrDisplay } from 'redux/entities/projects/selectors';
-import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
-import GeneralSettings, { OwnProps } from './GeneralSettings';
-
-const mapStateToProps = (state: RootState, props: OwnProps) => ({
-  toastrDisplay: getProjectToastrDisplay(state),
-});
+import { editProjectDetailsRequest } from 'redux/entities/projects';
+import GeneralSettings from './GeneralSettings';
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) =>
-    dispatch(setProjectToastrDisplay({ toastrDisplay })),
   editProjectDetailsRequest: (
     projectId: string,
     payload: { name: string; wpt_api_key: string; wpt_instance_url: string },
   ) => dispatch(editProjectDetailsRequest({ projectId, payload })),
 });
 
 export default connect(
-  mapStateToProps,
+  null,
   mapDispatchToProps,
 )(injectIntl(GeneralSettings));
diff --git a/frontend/src/pages/MembersSettings/MembersSettings.tsx b/frontend/src/pages/MembersSettings/MembersSettings.tsx
@@ -9,8 +9,8 @@ import ReduxToastr, { toastr } from 'react-redux-toastr';
 import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';
 import { RouteComponentProps } from 'react-router';
 import { ValueType } from 'react-select/lib/types';
-import { useProjectById } from 'redux/entities/projects/hooks';
-import { ProjectMember, ProjectToastrDisplayType } from 'redux/entities/projects/types';
+import { useProjectById, useToastr } from 'redux/entities/projects/hooks';
+import { ProjectMember } from 'redux/entities/projects/types';
 import { modelizeUser } from 'redux/user/modelizer';
 import { useCurrentUser } from 'redux/user/selectors';
 import { ApiUser, User } from 'redux/user/types';
@@ -32,17 +32,13 @@ import {
   SelectUser,
 } from './MembersSettings.style';
 
-export type OwnProps = {} & RouteComponentProps<{
-  projectId: string;
-}>;
-
 type Props = {
   addMemberToProject: (projectId: string, userId: string) => void;
   removeMemberOfProjectRequest: (projectId: string, userId: string) => void;
   editMemberOfProjectRequest: (projectId: string, userId: string, isAdmin: boolean) => void;
-  toastrDisplay: ProjectToastrDisplayType;
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) => void;
-} & OwnProps &
+} & RouteComponentProps<{
+  projectId: string;
+}> &
   InjectedIntlProps;
 
 const MembersSettings: React.FunctionComponent<Props> = ({
@@ -51,8 +47,6 @@ const MembersSettings: React.FunctionComponent<Props> = ({
   editMemberOfProjectRequest,
   match,
   intl,
-  toastrDisplay,
-  setProjectToastrDisplay,
 }) => {
   interface UserOption {
     value: string;
@@ -62,6 +56,8 @@ const MembersSettings: React.FunctionComponent<Props> = ({
 
   const currentUser = useCurrentUser();
 
+  const { currentToastrDisplay, resetToastrDisplay } = useToastr();
+
   const [selectOption, setSelectOption]: [ValueType<UserOption | {}>, any] = React.useState(null);
   const [allUsers, setAllUsers] = React.useState([]);
 
@@ -89,8 +85,8 @@ const MembersSettings: React.FunctionComponent<Props> = ({
 
   React.useEffect(
     () => {
-      if ('' !== toastrDisplay) {
-        switch (toastrDisplay) {
+      if ('' !== currentToastrDisplay) {
+        switch (currentToastrDisplay) {
           case 'addMemberSuccess':
             toastr.success(
               intl.formatMessage({ id: 'Toastr.ProjectSettings.success_title' }),
@@ -105,10 +101,10 @@ const MembersSettings: React.FunctionComponent<Props> = ({
             break;
         }
 
-        setProjectToastrDisplay('');
+        resetToastrDisplay();
       }
     },
-    [toastrDisplay, setProjectToastrDisplay, intl],
+    [currentToastrDisplay, resetToastrDisplay, intl],
   );
 
   const onChange = (selectedOption: ValueType<UserOption | {}>) => {

diff --git a/frontend/src/pages/MembersSettings/MembersSettings.wrap.tsx b/frontend/src/pages/MembersSettings/MembersSettings.wrap.tsx
@@ -1,21 +1,13 @@
 import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
-import { RootState } from 'redux/types';
 
 import {
   addMemberToProjectRequest,
   deleteMemberOfProjectRequest,
   editMemberOfProjectRequest,
-  setProjectToastrDisplay,
 } from 'redux/entities/projects';
-import { getProjectToastrDisplay } from 'redux/entities/projects/selectors';
-import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
-import MembersSettings, { OwnProps } from './MembersSettings';
-
-const mapStateToProps = (state: RootState, props: OwnProps) => ({
-  toastrDisplay: getProjectToastrDisplay(state),
-});
+import MembersSettings from './MembersSettings';
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
   addMemberToProject: (projectId: string, userId: string) =>
@@ -24,11 +16,9 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     dispatch(deleteMemberOfProjectRequest({ projectId, userId })),
   editMemberOfProjectRequest: (projectId: string, userId: string, isAdmin: boolean) =>
     dispatch(editMemberOfProjectRequest({ projectId, userId, isAdmin })),
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) =>
-    dispatch(setProjectToastrDisplay({ toastrDisplay })),
 });
 
 export default connect(
-  mapStateToProps,
+  null,
   mapDispatchToProps,
 )(injectIntl(MembersSettings));