Use hooks for toastr

theodo · Apr 28, 2020 · da7a79c · da7a79c
1 parent f6f9739
commit da7a79c
Show file tree

Hide file tree

Showing 13 changed files with 85 additions and 162 deletions.
diff --git a/frontend/src/pages/EnvironmentSettings/EnvironmentSettings.tsx b/frontend/src/pages/EnvironmentSettings/EnvironmentSettings.tsx
@@ -5,8 +5,7 @@ import { FormattedMessage, useIntl } 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,22 +21,14 @@ import {
   ProjectSettingsBlock,
 } from './EnvironmentSettings.style';
 
-export type OwnProps = {} & RouteComponentProps<{
+type Props = RouteComponentProps<{
   projectId: string;
 }>;
 
-type Props = {
-  toastrDisplay: ProjectToastrDisplayType;
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) => void;
-} & OwnProps;
-
-const EnvironmentSettings: React.FunctionComponent<Props> = ({
-  match,
-  toastrDisplay,
-  setProjectToastrDisplay,
-}) => {
+const EnvironmentSettings: React.FunctionComponent<Props> = ({ match }) => {
   const intl = useIntl();
   const currentUser = useCurrentUser();
+  const { currentToastrDisplay, resetToastrDisplay } = useToastr();
 
   interface UserOption {
     value: string;
@@ -82,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' }),
@@ -114,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,22 +1,3 @@
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-import { RootState } from 'redux/types';
+import EnvironmentSettings from './EnvironmentSettings';
 
-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';
-
-const mapStateToProps = (state: RootState, props: OwnProps) => ({
-  toastrDisplay: getProjectToastrDisplay(state),
-});
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) =>
-    dispatch(setProjectToastrDisplay({ toastrDisplay })),
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(EnvironmentSettings);
+export default EnvironmentSettings;
diff --git a/frontend/src/pages/GeneralSettings/GeneralSettings.tsx b/frontend/src/pages/GeneralSettings/GeneralSettings.tsx
@@ -5,8 +5,7 @@ import { FormattedMessage, useIntl } 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,27 +16,19 @@ 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;
-
-const GeneralSettings: React.FunctionComponent<Props> = ({
-  match,
-  toastrDisplay,
-  setProjectToastrDisplay,
-  editProjectDetailsRequest,
-}) => {
+} & RouteComponentProps<{
+  projectId: string;
+}>;
+
+const GeneralSettings: React.FunctionComponent<Props> = ({ match, editProjectDetailsRequest }) => {
   const intl = useIntl();
   const currentUser = useCurrentUser();
+  const { currentToastrDisplay, resetToastrDisplay } = useToastr();
 
   interface UserOption {
     value: string;
@@ -69,8 +60,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' }),
@@ -85,10 +76,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,26 +1,17 @@
 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,
 )(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,25 +32,19 @@ 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;
+}>;
 
 const MembersSettings: React.FunctionComponent<Props> = ({
   addMemberToProject,
   removeMemberOfProjectRequest,
   editMemberOfProjectRequest,
   match,
-  toastrDisplay,
-  setProjectToastrDisplay,
 }) => {
   const intl = useIntl();
 
@@ -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,20 +1,12 @@
 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) =>
@@ -23,11 +15,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,
 )(MembersSettings);
diff --git a/...tend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptModal/ScriptModal.tsx b/...tend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptModal/ScriptModal.tsx
@@ -4,7 +4,7 @@ import Modal from 'react-modal';
 import { useAsyncFn } from 'react-use';
 
 import Close from 'icons/Close';
-import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
+import { useToastr } from 'redux/entities/projects/hooks';
 import { modelizeScript } from 'redux/entities/scripts/modelizer';
 import { ScriptType } from 'redux/entities/scripts/types';
 import { makePostRequest, makePutRequest } from 'services/networking/request';
@@ -30,7 +30,6 @@ type Props = {
   addScriptToProjectSuccess: (projectId: string, scriptId: string) => void;
   addScript: (byId: Record<string, ScriptType>) => void;
   editScriptSuccess: (byId: Record<string, ScriptType>) => void;
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) => void;
 } & OwnProps;
 
 export const ScriptModal: React.FunctionComponent<Props> = ({
@@ -42,13 +41,14 @@ export const ScriptModal: React.FunctionComponent<Props> = ({
   addScriptToProjectSuccess,
   addScript,
   editScriptSuccess,
-  setProjectToastrDisplay,
 }) => {
   const intl = useIntl();
 
   const [scriptContent, setScriptContent] = React.useState(script ? script.script : '');
   const [scriptName, setScriptName] = React.useState(script ? script.name : '');
 
+  const { setToastrDisplay } = useToastr();
+
   const [state, createScript] = useAsyncFn(
     async () => {
       try {
@@ -62,10 +62,10 @@ export const ScriptModal: React.FunctionComponent<Props> = ({
         const modelizedScript = modelizeScript(response.body);
         addScript({ [modelizedScript.uuid]: modelizedScript });
         addScriptToProjectSuccess(projectId, modelizedScript.uuid);
-        setProjectToastrDisplay('addScriptToProjectSuccess');
+        setToastrDisplay('addScriptToProjectSuccess');
         close();
       } catch (e) {
-        setProjectToastrDisplay('addScriptToProjectError');
+        setToastrDisplay('addScriptToProjectError');
       }
     },
     [projectId, scriptContent, scriptName],
@@ -86,11 +86,11 @@ export const ScriptModal: React.FunctionComponent<Props> = ({
           throw new Error('No response');
         }
         const modelizedScript = modelizeScript(response.body);
-        setProjectToastrDisplay('editScriptSuccess');
+        setToastrDisplay('editScriptSuccess');
         editScriptSuccess({ [modelizedScript.uuid]: modelizedScript });
         close();
       } catch (e) {
-        setProjectToastrDisplay('editScriptError');
+        setToastrDisplay('editScriptError');
       }
     },
     [projectId, scriptContent, scriptName],

diff --git a/...src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptModal/ScriptModal.wrap.tsx b/...src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptModal/ScriptModal.wrap.tsx
@@ -1,7 +1,6 @@
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
-import { addScriptToProjectSuccess, setProjectToastrDisplay } from 'redux/entities/projects';
-import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
+import { addScriptToProjectSuccess } from 'redux/entities/projects';
 import { addScript, editScriptSuccess } from 'redux/entities/scripts';
 import { getScript } from 'redux/entities/scripts/selectors';
 import { ScriptType } from 'redux/entities/scripts/types';
@@ -17,8 +16,6 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     dispatch(addScriptToProjectSuccess({ projectId, scriptId })),
   addScript: (byId: Record<string, ScriptType>) => dispatch(addScript({ byId })),
   editScriptSuccess: (byId: Record<string, ScriptType>) => dispatch(editScriptSuccess({ byId })),
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) =>
-    dispatch(setProjectToastrDisplay({ toastrDisplay })),
 });
 
 export default connect(