UIQM-652 eliminate page refresh when using save and keep ediing

folio-org · Oct 3, 2024 · c2d8672 · c2d8672
1 parent 76bead7
commit c2d8672
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 40 deletions.
diff --git a/src/QuickMarcEditor/QuickMarcEditWrapper.js b/src/QuickMarcEditor/QuickMarcEditWrapper.js
@@ -80,7 +80,7 @@ const QuickMarcEditWrapper = ({
   const showCallout = useShowCallout();
   const location = useLocation();
   const [httpError, setHttpError] = useState(null);
-  const { validationErrorsRef } = useContext(QuickMarcContext);
+  const { validationErrorsRef, relatedRecordVersion } = useContext(QuickMarcContext);
 
   const { token, locale } = stripes.okapi;
   const isRequestToCentralTenantFromMember = applyCentralTenantInHeaders(location, stripes, marcType);
@@ -205,7 +205,7 @@ const QuickMarcEditWrapper = ({
     formValuesToHydrate._actionType = 'edit';
     formValuesToHydrate.relatedRecordVersion = marcType === MARC_TYPES.AUTHORITY
       ? instance._version
-      : new URLSearchParams(location.search).get('relatedRecordVersion');
+      : relatedRecordVersion;
 
     const formValuesToSave = hydrateMarcRecord(formValuesToHydrate);
 

diff --git a/src/QuickMarcEditor/QuickMarcEditor.js b/src/QuickMarcEditor/QuickMarcEditor.js
@@ -119,7 +119,6 @@ const QuickMarcEditor = ({
   const stripes = useStripes();
   const intl = useIntl();
   const formValues = getState().values;
-  const history = useHistory();
   const location = useLocation();
   const showCallout = useShowCallout();
   const [records, setRecords] = useState([]);
@@ -131,8 +130,9 @@ const QuickMarcEditor = ({
   const [isValidatedCurrentValues, setIsValidatedCurrentValues] = useState(false);
   const continueAfterSave = useRef(false);
   const formRef = useRef(null);
+  const lastFocusedInput = useRef(null);
   const confirmationChecks = useRef({ ...REQUIRED_CONFIRMATIONS });
-  const { setValidationErrors } = useContext(QuickMarcContext);
+  const { setValidationErrors, setRelatedRecordVersion } = useContext(QuickMarcContext);
   const { hasErrorIssues, isBackEndValidationMarcType } = useValidation();
 
   const isConsortiaEnv = stripes.hasInterface('consortia');
@@ -155,16 +155,6 @@ const QuickMarcEditor = ({
 
   const saveFormDisabled = submitting || pristine;
 
-  const redirectToVersion = useCallback((updatedVersion) => {
-    const searchParams = new URLSearchParams(location.search);
-
-    searchParams.set('relatedRecordVersion', updatedVersion);
-
-    history.replace({
-      search: searchParams.toString(),
-    });
-  }, [history, location.search]);
-
   const handleSubmitResponse = useCallback((updatedRecord) => {
     if (!updatedRecord?.version) {
       continueAfterSave.current = false;
@@ -173,13 +163,14 @@ const QuickMarcEditor = ({
     }
 
     if (continueAfterSave.current) {
-      redirectToVersion(updatedRecord.version);
+      setRelatedRecordVersion(updatedRecord.version);
+      lastFocusedInput.current?.focus();
 
       return;
     }
 
     onSave();
-  }, [redirectToVersion, onSave]);
+  }, [setRelatedRecordVersion, onSave]);
 
   const closeModals = () => {
     setIsDeleteModalOpened(false);
@@ -462,6 +453,10 @@ const QuickMarcEditor = ({
     }
   }, []);
 
+  const saveLastFocusedInput = useCallback((e) => {
+    lastFocusedInput.current = e.target;
+  }, [lastFocusedInput]);
+
   const shortcuts = useMemo(() => ([{
     name: 'save',
     shortcut: 'mod+s',
@@ -568,6 +563,7 @@ const QuickMarcEditor = ({
                     linksCount={linksCount}
                     isLoadingLinkSuggestions={isLoadingLinkSuggestions}
                     onCheckCentralTenantPerm={onCheckCentralTenantPerm}
+                    onInputFocus={saveLastFocusedInput}
                   />
                 </Col>
               </Row>

diff --git a/src/QuickMarcEditor/QuickMarcEditorContainer.js b/src/QuickMarcEditor/QuickMarcEditorContainer.js
@@ -1,4 +1,4 @@
-import React, {
+import {
   useEffect,
   useState,
   useCallback,
@@ -9,17 +9,16 @@ import { withRouter } from 'react-router';
 import ReactRouterPropTypes from 'react-router-prop-types';
 import noop from 'lodash/noop';
 
-import {
-  stripesConnect,
-} from '@folio/stripes/core';
-
+import { stripesConnect } from '@folio/stripes/core';
 import { LoadingView } from '@folio/stripes/components';
 import {
   baseManifest,
   useShowCallout,
 } from '@folio/stripes-acq-components';
 import { getHeaders } from '@folio/stripes-marc-components';
 
+import { useAuthorityLinksCount } from '../queries';
+import { QuickMarcProvider } from '../contexts';
 import {
   EXTERNAL_INSTANCE_APIS,
   MARC_RECORD_API,
@@ -28,7 +27,6 @@ import {
   LINKING_RULES_API,
   MARC_SPEC_API,
 } from '../common/constants';
-
 import {
   dehydrateMarcRecordResponse,
   getCreateHoldingsMarcRecordResponse,
@@ -40,8 +38,6 @@ import {
   applyCentralTenantInHeaders,
 } from './utils';
 import { QUICK_MARC_ACTIONS } from './constants';
-import { useAuthorityLinksCount } from '../queries';
-import { QuickMarcProvider } from '../contexts';
 
 const propTypes = {
   action: PropTypes.oneOf(Object.values(QUICK_MARC_ACTIONS)).isRequired,
@@ -89,17 +85,15 @@ const QuickMarcEditorContainer = ({
   const [locations, setLocations] = useState();
   const [isLoading, setIsLoading] = useState(true);
   const [fixedFieldSpec, setFixedFieldSpec] = useState();
+  const showCallout = useShowCallout();
+  const { linksCount } = useAuthorityLinksCount({ id: marcType === MARC_TYPES.AUTHORITY && externalId });
 
-  const searchParams = new URLSearchParams(location.search);
   const { token, locale } = stripes.okapi;
   const centralTenantId = stripes.user.user.consortium?.centralTenantId;
 
   const isRequestToCentralTenantFromMember = applyCentralTenantInHeaders(location, stripes, marcType)
     && action !== QUICK_MARC_ACTIONS.CREATE;
 
-  const showCallout = useShowCallout();
-  const { linksCount } = useAuthorityLinksCount({ id: marcType === MARC_TYPES.AUTHORITY && externalId });
-
   const getCloseEditorParams = useCallback((id) => {
     if (marcType === MARC_TYPES.HOLDINGS && action !== QUICK_MARC_ACTIONS.CREATE) {
       return `${instanceId}/${externalId}`;
@@ -125,8 +119,6 @@ const QuickMarcEditorContainer = ({
   }, [externalRecordPath, marcType, externalId, instanceId, action]);
 
   const loadData = useCallback(async () => {
-    setIsLoading(true);
-
     const path = action === QUICK_MARC_ACTIONS.CREATE && marcType === MARC_TYPES.HOLDINGS
       ? EXTERNAL_INSTANCE_APIS[MARC_TYPES.BIB]
       : EXTERNAL_INSTANCE_APIS[marcType];
@@ -175,14 +167,6 @@ const QuickMarcEditorContainer = ({
         linkingRulesResponse,
         fixedFieldSpecResponse,
       ]) => {
-        if (action !== QUICK_MARC_ACTIONS.CREATE) {
-          searchParams.set('relatedRecordVersion', instanceResponse._version);
-
-          history.replace({
-            search: searchParams.toString(),
-          });
-        }
-
         let dehydratedMarcRecord;
 
         if (action === QUICK_MARC_ACTIONS.CREATE) {
@@ -231,7 +215,7 @@ const QuickMarcEditorContainer = ({
   }
 
   return (
-    <QuickMarcProvider>
+    <QuickMarcProvider relatedRecordVersion={instance?._version}>
       <Wrapper
         instance={instance}
         onClose={handleClose}

diff --git a/src/QuickMarcEditor/QuickMarcEditorRows/QuickMarcEditorRows.js b/src/QuickMarcEditor/QuickMarcEditorRows/QuickMarcEditorRows.js
@@ -96,6 +96,7 @@ const QuickMarcEditorRows = ({
   linksCount,
   isLoadingLinkSuggestions,
   onCheckCentralTenantPerm,
+  onInputFocus,
 }) => {
   const location = useLocation();
   const stripes = useStripes();
@@ -266,6 +267,7 @@ const QuickMarcEditorRows = ({
       id="quick-marc-editor-rows"
       data-testid="quick-marc-editor-rows"
       ref={containerRef}
+      onFocus={onInputFocus}
     >
       <FieldArray
         name="records"

diff --git a/src/contexts/QuickMarcContext/QuickMarcContext.js b/src/contexts/QuickMarcContext/QuickMarcContext.js
@@ -14,12 +14,15 @@ const propTypes = {
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,
   ]).isRequired,
+  relatedRecordVersion: PropTypes.number,
 };
 
 const QuickMarcProvider = ({
   children,
+  relatedRecordVersion,
 }) => {
   const [selectedSourceFile, setSelectedSourceFile] = useState(null);
+  const [_relatedRecordVersion, setRelatedRecordVersion] = useState(relatedRecordVersion);
   const validationErrors = useRef({});
 
   const setValidationErrors = useCallback((newValidationErrors) => {
@@ -31,11 +34,15 @@ const QuickMarcProvider = ({
     setSelectedSourceFile,
     validationErrorsRef: validationErrors,
     setValidationErrors,
+    relatedRecordVersion: _relatedRecordVersion,
+    setRelatedRecordVersion,
   }), [
     selectedSourceFile,
     setSelectedSourceFile,
     validationErrors,
     setValidationErrors,
+    _relatedRecordVersion,
+    setRelatedRecordVersion,
   ]);
 
   return (

diff --git a/src/hooks/useFocusFirstFieldWithError/useFocusFirstFieldWithError.js b/src/hooks/useFocusFirstFieldWithError/useFocusFirstFieldWithError.js
@@ -21,6 +21,8 @@ export const useFocusFirstFieldWithError = () => {
       return;
     }
 
-    document.querySelector(`[data-fieldid="${firstFieldWithErrors.id}"] input:enabled`)?.focus();
+    const fieldSelector = `[data-fieldid="${firstFieldWithErrors.id}"]`;
+
+    document.querySelector(`${fieldSelector} input:enabled, ${fieldSelector} textarea:enabled`)?.focus();
   }, [firstFieldWithErrors?.id, validationErrorsRef]);
 };