Enhance logic with redux actions

Author: astleyz

client/src/App.jsx

@@ -8,6 +8,13 @@ import TriggerWorkflowAuthenticated from './pages/TriggerWorkflow/TriggerWorkflo
 import TriggerWorkflowFormAuthenticated from './pages/TriggerWorkflowForm/TriggerWorkflowForm.jsx';
 import { LoginStatus, ROUTE } from './constants.js';
 import { api } from './api';
+import {
+  authorizeUser,
+  closeLoadingCircleInPopup,
+  closePopupWindow,
+  openLoadingCircleInPopup,
+  openPopupWindow,
+} from './store/actions';
 
 function App() {
   const location = useLocation();
@@ -18,16 +25,16 @@ function App() {
 
   useEffect(() => {
     const fetchCallback = async () => {
-      if (code && code.length > 0) {
-        const { data: userInfo } = await api.acg.callbackExecute(code);
-        dispatch({
-          type: 'LOGIN',
-          payload: { authType: LoginStatus.ACG, userName: userInfo.name, userEmail: userInfo.email },
-        });
-        navigate(ROUTE.HOME);
-        dispatch({ type: 'CLOSE_POPUP' });
-        dispatch({ type: 'LOADED_POPUP' });
-      }
+      if (!code || code?.length <= 0) return;
+
+      dispatch(openPopupWindow());
+      dispatch(openLoadingCircleInPopup());
+
+      const { data: userInfo } = await api.acg.callbackExecute(code);
+      dispatch(authorizeUser(LoginStatus.ACG, userInfo.name, userInfo.email));
+      navigate(ROUTE.HOME);
+      dispatch(closePopupWindow());
+      dispatch(closeLoadingCircleInPopup());
     };
 
     fetchCallback();

client/src/api/index.js

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import { persistor, store } from '../store/store';
+import { clearAllState } from '../store/actions';
 
 const isDev = process.env.NODE_ENV === 'development';
 const apiUrl = isDev ? process.env.BACKEND_DEV_HOST : process.env.BACKEND_PROD_HOST;
@@ -13,7 +14,7 @@ instance.interceptors.response.use(
   response => response,
   err => {
     if (err?.response?.status === 401) {
-      store.dispatch({ type: 'CLEAR_STATE' });
+      store.dispatch(clearAllState());
     }
     throw err;
   }

client/src/components/Card/Card.jsx

@@ -6,15 +6,16 @@ import Dropdown from '../Dropdown/Dropdown.jsx';
 import { WorkflowOptions } from '../../constants.js';
 import CreateWorkflowMoreinfoPopup from '../Popups/CreateWorkflowMoreInfo/CreateWorkflowMoreInfo.jsx';
 import textContent from '../../assets/text.json';
+import { openPopupWindow, closePopupWindow } from '../../store/actions';
 
 const Card = ({ img, title, description, linkTo, dropDown, moreInfo }) => {
-  const [isBtsOpened, setBtsOpened] = useState(false);
+  const [isBehindTheScenesOpened, setBehindTheScenesOpened] = useState(false);
   const dispatch = useDispatch();
-  const isOpened = useSelector(state => state.popup.isOpened);
+  const isPopupOpened = useSelector(state => state.popup.isOpened);
 
   const togglePopup = async () => {
-    setBtsOpened(!isBtsOpened);
-    dispatch({ type: isOpened ? 'CLOSE_POPUP' : 'OPEN_POPUP' });
+    setBehindTheScenesOpened(!isBehindTheScenesOpened);
+    dispatch(!isPopupOpened ? openPopupWindow() : closePopupWindow());
   };
 
   return (
@@ -39,7 +40,7 @@ const Card = ({ img, title, description, linkTo, dropDown, moreInfo }) => {
               )}
               <Dropdown options={WorkflowOptions} />
             </div>
-            {isBtsOpened && <CreateWorkflowMoreinfoPopup togglePopup={togglePopup} />}
+            {isBehindTheScenesOpened && <CreateWorkflowMoreinfoPopup togglePopup={togglePopup} />}
           </div>
         )}
       </div>

client/src/components/Dropdown/Dropdown.jsx

@@ -2,37 +2,44 @@ import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styles from './Dropdown.module.css';
 import WorkflowCreationPopup from '../Popups/WorkflowDefinitionCreation/WorkflowDefinitionCreation.jsx';
-import { api } from '../../api';
 import textContent from '../../assets/text.json';
+import { api } from '../../api';
+import {
+  openPopupWindow,
+  closePopupWindow,
+  openLoadingCircleInPopup,
+  closeLoadingCircleInPopup,
+  showErrorTextInPopup,
+  clearErrorTextInPopup,
+  saveCreatedWorkflow,
+  clearCreatedWorkflowFromState,
+} from '../../store/actions';
 
 const Dropdown = ({ options }) => {
   const dispatch = useDispatch();
-  const isOpened = useSelector(state => state.popup.isOpened);
+  const isPopupOpened = useSelector(state => state.popup.isOpened);
   const [selectedDocument, setSelectedDocument] = useState(options[0].value);
 
-  const togglePopup = () => {
-    dispatch({ type: isOpened ? 'CLOSE_POPUP' : 'OPEN_POPUP' });
-    dispatch({ type: 'CLEAR_ERROR_POPUP' });
-    dispatch({ type: 'CLEAR_CREATED_WORKFLOW' });
+  const closePopup = () => {
+    dispatch(closePopupWindow());
+    dispatch(clearErrorTextInPopup());
+    dispatch(clearCreatedWorkflowFromState());
   };
 
   const handleCreateWorkflow = async ({ value, type }) => {
     setSelectedDocument(value);
-    dispatch({ type: 'OPEN_POPUP' });
-    dispatch({ type: 'LOADING_POPUP' });
+    dispatch(openPopupWindow());
+    dispatch(openLoadingCircleInPopup());
     const { status, data } = await api.workflows.createWorkflowDefinition(type);
 
     if (status === 400) {
-      dispatch({
-        type: 'SET_ERROR_POPUP',
-        payload: { errorMessage: data.message, errorHeader: null, templateName: data.templateName },
-      });
-      dispatch({ type: 'LOADED_POPUP' });
+      dispatch(showErrorTextInPopup(null, data.message, data.templateName));
+      dispatch(closeLoadingCircleInPopup());
       return;
     }
 
-    dispatch({ type: 'CREATED_WORKFLOW', payload: { workflowId: data.workflowDefinitionId } });
-    dispatch({ type: 'LOADED_POPUP' });
+    dispatch(saveCreatedWorkflow(data.workflowDefinitionId));
+    dispatch(closeLoadingCircleInPopup());
   };
 
   return (
@@ -59,9 +66,9 @@ const Dropdown = ({ options }) => {
         ))}
       </div>
 
-      {isOpened && (
+      {isPopupOpened && (
         <WorkflowCreationPopup
-          togglePopup={togglePopup}
+          togglePopup={closePopup}
           message={options.find(option => option.value === selectedDocument).message}
         />
       )}

client/src/components/Header/Header.jsx

@@ -6,6 +6,7 @@ import source from '../../assets/img/github-source.svg';
 import textContent from '../../assets/text.json';
 import { LoginStatus, ROUTE } from '../../constants.js';
 import { api } from '../../api';
+import { clearAllState } from '../../store/actions';
 
 const Header = () => {
   const dispatch = useDispatch();
@@ -23,7 +24,7 @@ const Header = () => {
       await api.jwt.logout();
     }
 
-    dispatch({ type: 'CLEAR_STATE' });
+    dispatch(clearAllState());
   };
 
   return (

client/src/components/LoginForm/LoginForm.jsx

@@ -3,32 +3,38 @@ import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import styles from './LoginForm.module.css';
 import withPopup from '../../hocs/withPopup/withPopup.jsx';
+import textContent from '../../assets/text.json';
 import { LoginStatus, ROUTE } from '../../constants.js';
 import { api } from '../../api';
-import textContent from '../../assets/text.json';
+import {
+  authorizeUser,
+  closeLoadingCircleInPopup,
+  closePopupWindow,
+  openLoadingCircleInPopup,
+} from '../../store/actions';
 
-const LoginForm = ({ togglePopup, setLoading }) => {
+const LoginForm = ({ togglePopup }) => {
   const [authType, setAuthType] = useState(LoginStatus.ACG);
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
   const handleSubmit = async e => {
     e.preventDefault();
-    dispatch({ type: 'LOADING_POPUP' });
+    dispatch(openLoadingCircleInPopup());
 
     try {
       if (authType === LoginStatus.JWT) {
         const { data: userInfo } = await api.jwt.login();
-        dispatch({ type: 'LOGIN', payload: { authType, userName: userInfo.name, userEmail: userInfo.email } });
+        dispatch(authorizeUser(authType, userInfo.name, userInfo.email));
         navigate(ROUTE.HOME);
-        dispatch({ type: 'CLOSE_POPUP' });
-        dispatch({ type: 'LOADED_POPUP' });
+        dispatch(closePopupWindow());
+        dispatch(closeLoadingCircleInPopup());
       }
       if (authType === LoginStatus.ACG) {
         api.acg.login();
       }
     } catch (error) {
-      setLoading(false);
+      dispatch(closeLoadingCircleInPopup());
       console.log(error);
     }
   };
@@ -55,9 +61,7 @@ const LoginForm = ({ togglePopup, setLoading }) => {
               />
               {textContent.login.acg}
             </label>
-            <label className={styles.subLabel}>
-              {textContent.login.acgDescription}
-            </label>
+            <label className={styles.subLabel}>{textContent.login.acgDescription}</label>
           </div>
           <div className={styles.radioButtonWrapper}>
             <label className={styles.label}>
@@ -70,9 +74,7 @@ const LoginForm = ({ togglePopup, setLoading }) => {
               />
               {textContent.login.jwt}
             </label>
-            <label className={styles.subLabel}>
-              {textContent.login.jwtDescription}
-            </label>
+            <label className={styles.subLabel}>{textContent.login.jwtDescription}</label>
           </div>
         </div>
         <div className={styles.formButtons}>

client/src/components/Popups/WorkflowDefinitionCreation/WorkflowDefinitionCreation.jsx

@@ -3,8 +3,14 @@ import styles from './WorkflowDefinitionCreation.module.css';
 import withPopup from '../../../hocs/withPopup/withPopup.jsx';
 import imgError from '../../../assets/img/workflow-trigger.svg';
 import imgSuccess from '../../../assets/img/success.svg';
-import { api } from '../../../api';
 import textContent from '../../../assets/text.json';
+import { api } from '../../../api';
+import {
+  closeLoadingCircleInPopup,
+  openLoadingCircleInPopup,
+  showErrorTextInPopup,
+  publishCreatedWorkflow,
+} from '../../../store/actions';
 
 const WorkflowDefinitionCreation = ({ message }) => {
   const dispatch = useDispatch();
@@ -20,24 +26,24 @@ const WorkflowDefinitionCreation = ({ message }) => {
   const handlePublishWorkflow = async () => {
     if (!lastCreatedWorkflow.id) return;
 
-    dispatch({ type: 'LOADING_POPUP' });
+    dispatch(openLoadingCircleInPopup());
     const workflow = await api.workflows.publishWorkflow(lastCreatedWorkflow.id);
 
     if (workflow?.status === 200) {
-      dispatch({ type: 'PUBLISHED_LAST_WORKFLOW' });
-      dispatch({ type: 'LOADED_POPUP' });
+      dispatch(publishCreatedWorkflow());
+      dispatch(closeLoadingCircleInPopup());
       return;
     }
 
-    dispatch({
-      type: 'SET_ERROR_POPUP',
-      payload: {
-        errorHeader: 'Publish workflow was unsuccessful',
-        errorMessage: 'The Docusign server returned an error during the workflow publishing. Try again later.',
-        templateName: null,
-      },
-    });
-    dispatch({ type: 'LOADED_POPUP' });
+    dispatch(
+      showErrorTextInPopup(
+        'Publish workflow was unsuccessful',
+        'The Docusign server returned an error during the workflow publishing. Try again later.',
+        null
+      )
+    );
+
+    dispatch(closeLoadingCircleInPopup());
   };
 
   if (lastCreatedWorkflow?.isPublished) {

client/src/components/Popups/WorkflowTriggerResult/WorkflowTriggerResult.jsx

@@ -3,15 +3,16 @@ import { useDispatch } from 'react-redux';
 import styles from './WorkflowTriggerResult.module.css';
 import withPopup from '../../../hocs/withPopup/withPopup.jsx';
 import imgSuccess from '../../../assets/img/success.svg';
-import { ROUTE } from '../../../constants.js';
 import textContent from '../../../assets/text.json';
+import { ROUTE } from '../../../constants.js';
+import { closePopupWindow } from '../../../store/actions';
 
 const WorkflowTriggerResult = ({ workflowInstanceUrl }) => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
 
   const handleFinishTrigger = async () => {
-    dispatch({ type: 'CLOSE_POPUP' });
+    dispatch(closePopupWindow());
     navigate(ROUTE.HOME);
   };
 
@@ -20,7 +21,9 @@ const WorkflowTriggerResult = ({ workflowInstanceUrl }) => {
       <img src={imgSuccess} alt="" />
       <h2>{textContent.popups.workflowTriggered.title}</h2>
       <p>{textContent.popups.workflowTriggered.description}</p>
-      <a href={workflowInstanceUrl} target="_blank" rel="noreferrer" onClick={handleFinishTrigger}>{textContent.buttons.continue}</a>
+      <a href={workflowInstanceUrl} target="_blank" rel="noreferrer" onClick={handleFinishTrigger}>
+        {textContent.buttons.continue}
+      </a>
     </div>
   );
 };