feat: when commiting add a commit message field to the commit modal

Chia-Network · Apr 21, 2022 · b0045b0 · b0045b0
1 parent fa6a41a
commit b0045b0
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 79 deletions.
diff --git a/src/components/blocks/CommitModal.js b/src/components/blocks/CommitModal.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { useIntl } from 'react-intl';
+
+import { Modal, modalTypeEnum, Body } from '../../components';
+
+import { commitStagingData } from '../../store/actions/climateWarehouseActions';
+
+const CommitModal = ({ onClose }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+
+  const onCommit = () => {
+    dispatch(commitStagingData('Projects'));
+    onClose();
+  };
+
+  const onCommitAll = () => {
+    dispatch(commitStagingData('all'));
+    onClose();
+  };
+
+  return (
+    <Modal
+      title={intl.formatMessage({ id: 'commit-message' })}
+      body={
+        <div>
+          this is where the field
+          <Body size="Large">
+            {intl.formatMessage({
+              id: 'commit-projects-message-question',
+            })}
+          </Body>
+        </div>
+      }
+      modalType={modalTypeEnum.basic}
+      extraButtonLabel={intl.formatMessage({ id: 'everything' })}
+      extraButtonOnClick={onCommitAll}
+      onClose={() => onClose()}
+      onOk={onCommit}
+      label={intl.formatMessage({ id: 'only-projects' })}
+    />
+  );
+};
+
+export { CommitModal };
diff --git a/src/components/blocks/index.js b/src/components/blocks/index.js
@@ -45,3 +45,4 @@ export * from './UnitsDetails';
 export * from './UnitsIssuanceDetails';
 export * from './UnitsLabelsDetails';
 export * from './AuditItemModal';
+export * from './CommitModal';
diff --git a/src/pages/Projects/index.js b/src/pages/Projects/index.js
@@ -25,10 +25,9 @@ import {
   CreateProjectForm,
   H3,
   UploadXLSX,
-  Modal,
-  modalTypeEnum,
-  Body,
+  CommitModal,
 } from '../../components';
+
 import {
   setPendingError,
   setValidateForm,
@@ -38,13 +37,10 @@ import {
 import {
   getStagingData,
   deleteStagingData,
-  commitStagingData,
   getPaginatedData,
   retryStagingData,
 } from '../../store/actions/climateWarehouseActions';
 
-import { setCommit } from '../../store/actions/app';
-
 const headings = [
   'currentRegistry',
   'warehouseProjectId',
@@ -124,7 +120,8 @@ const StyledCSVOperationsContainer = styled('div')`
 
 const Projects = () => {
   const [createFormIsDisplayed, setCreateFormIsDisplayed] = useState(false);
-  const { notification, commit } = useSelector(store => store.app);
+  const { notification } = useSelector(store => store.app);
+  const [isCommitModalVisible, setIsCommitModalVisible] = useState(false);
   const climateWarehouseStore = useSelector(store => store.climateWarehouse);
   const [tabValue, setTabValue] = useState(0);
   const intl = useIntl();
@@ -272,16 +269,6 @@ const Projects = () => {
     return null;
   }
 
-  const onCommit = () => {
-    dispatch(commitStagingData('Projects'));
-    dispatch(setCommit(false));
-  };
-
-  const onCommitAll = () => {
-    dispatch(commitStagingData('all'));
-    dispatch(setCommit(false));
-  };
-
   return (
     <>
       <StyledSectionContainer ref={projectsContainerRef}>
@@ -335,28 +322,13 @@ const Projects = () => {
                 <PrimaryButton
                   label={intl.formatMessage({ id: 'commit' })}
                   size="large"
-                  onClick={() => dispatch(setCommit(true))}
+                  onClick={() => setIsCommitModalVisible(true)}
                 />
               )}
           </StyledButtonContainer>
         </StyledHeaderContainer>
-        {commit && (
-          <Modal
-            title={intl.formatMessage({ id: 'commit-message' })}
-            body={
-              <Body size="Large">
-                {intl.formatMessage({
-                  id: 'commit-projects-message-question',
-                })}
-              </Body>
-            }
-            modalType={modalTypeEnum.basic}
-            extraButtonLabel={intl.formatMessage({ id: 'everything' })}
-            extraButtonOnClick={onCommitAll}
-            onClose={() => dispatch(setCommit(false))}
-            onOk={onCommit}
-            label={intl.formatMessage({ id: 'only-projects' })}
-          />
+        {isCommitModalVisible && (
+          <CommitModal onClose={() => setIsCommitModalVisible(false)} />
         )}
         <StyledSubHeaderContainer>
           <Tabs value={tabValue} onChange={handleTabChange}>

diff --git a/src/pages/Units/index.js b/src/pages/Units/index.js
@@ -12,7 +12,6 @@ import { useWindowSize } from '../../components/hooks/useWindowSize';
 import {
   getStagingData,
   deleteStagingData,
-  commitStagingData,
   getPaginatedData,
   retryStagingData,
 } from '../../store/actions/climateWarehouseActions';
@@ -38,11 +37,8 @@ import {
   StagingDataGroups,
   SelectOrganizations,
   UploadXLSX,
-  Modal,
-  modalTypeEnum,
-  Body,
+  CommitModal,
 } from '../../components';
-import { setCommit } from '../../store/actions/app';
 
 const headings = [
   'projectLocationId',
@@ -122,7 +118,8 @@ const StyledCSVOperationsContainer = styled('div')`
 const Units = () => {
   const dispatch = useDispatch();
   const [create, setCreate] = useState(false);
-  const { notification, commit } = useSelector(store => store.app);
+  const { notification } = useSelector(store => store.app);
+  const [isCommitModalVisible, setIsCommitModalVisible] = useState(false);
   const intl = useIntl();
   let location = useLocation();
   let navigate = useNavigate();
@@ -260,16 +257,6 @@ const Units = () => {
     return null;
   }
 
-  const onCommit = () => {
-    dispatch(commitStagingData('Units'));
-    dispatch(setCommit(false));
-  };
-
-  const onCommitAll = () => {
-    dispatch(commitStagingData('all'));
-    dispatch(setCommit(false));
-  };
-
   const onOrganizationSelect = selectedOption => {
     const orgUid = selectedOption[0].orgUid;
     setSelectedOrganization(orgUid);
@@ -335,26 +322,11 @@ const Units = () => {
                 <PrimaryButton
                   label={intl.formatMessage({ id: 'commit' })}
                   size="large"
-                  onClick={() => dispatch(setCommit(true))}
+                  onClick={() => setIsCommitModalVisible(true)}
                 />
               )}
-            {commit && (
-              <Modal
-                title={intl.formatMessage({ id: 'commit-message' })}
-                body={
-                  <Body size="Large">
-                    {intl.formatMessage({
-                      id: 'commit-units-message-question',
-                    })}
-                  </Body>
-                }
-                modalType={modalTypeEnum.basic}
-                onOk={onCommit}
-                extraButtonLabel={intl.formatMessage({ id: 'everything' })}
-                extraButtonOnClick={onCommitAll}
-                onClose={() => dispatch(setCommit(false))}
-                label={intl.formatMessage({ id: 'only-units' })}
-              />
+            {isCommitModalVisible && (
+              <CommitModal onClose={() => setIsCommitModalVisible(false)} />
             )}
           </StyledButtonContainer>
         </StyledHeaderContainer>

diff --git a/src/store/actions/app.js b/src/store/actions/app.js
@@ -15,7 +15,6 @@ export const actions = keyMirror(
   'SET_LOCALE',
   'CONNECTION_CHECK',
   'SET_NOTIFICATION',
-  'COMMIT',
   'PENDING_ERROR',
   'SET_READ_ONLY',
   'SIGN_USER_IN',
@@ -76,11 +75,6 @@ export const setConnectionCheck = bool => ({
   payload: bool,
 });
 
-export const setCommit = bool => ({
-  type: actions.COMMIT,
-  payload: bool,
-});
-
 export const setPendingError = bool => ({
   type: actions.PENDING_ERROR,
   payload: bool,

diff --git a/src/store/reducers/appReducer.js b/src/store/reducers/appReducer.js
@@ -13,7 +13,6 @@ const initialState = {
   connectionCheck: true,
   updateAvailablePleaseRefesh: false,
   notification: null,
-  commit: false,
   pendingError: false,
   readOnlyMode: true,
   apiKey: null,
@@ -45,9 +44,6 @@ const appReducer = (state = initialState, action) => {
     case appActions.DEACTIVATE_PROGRESS_INDICATOR:
       return u({ showProgressOverlay: false }, state);
 
-    case appActions.COMMIT:
-      return u({ commit: action.payload }, state);
-
     case appActions.SET_GLOBAL_ERROR_MESSAGE:
       return u({ errorMessage: action.payload }, state);