Fix reader location not persisted if tab closed quickly #599

This change needs to be persisted remotely so that the value can be synced to
other devices running Zotero. To achieve this, we use a fetch request with the
`keepalive` option, ensuring the request is executed even after the tab is
closed.

package.json

@@ -102,7 +102,7 @@
     "redux-async-queue": "^1.0.0",
     "redux-thunk": "^3.1.0",
     "use-debounce": "^10.0.4",
-    "zotero-api-client": "^0.46.0"
+    "zotero-api-client": "^0.47.0"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

src/js/component/reader.jsx

@@ -18,7 +18,7 @@ import {
 } from '../actions';
 import { PDFWorker } from '../common/pdf-worker';
 import { getItemViewState, updateItemViewState } from '../common/viewstate'
-import { useFetchingState } from '../hooks';
+import { useFetchingState, useTrackedSettingsKey } from '../hooks';
 import TagPicker from './item-details/tag-picker';
 import { READER_CONTENT_TYPES } from '../constants/reader';
 import Portal from './portal';
@@ -166,7 +166,7 @@ const Reader = () => {
 	});
 	const location = useSelector(state => state.current.location);
 	const pageIndexSettingKey = getLastPageIndexSettingKey(attachmentKey, libraryKey);
-	const locationValue = useSelector(state => state.libraries[userLibraryKey]?.settings?.entries?.[pageIndexSettingKey]?.value ?? null);
+	const { value: locationValue, update: updateLocationValueSync } = useTrackedSettingsKey(pageIndexSettingKey, userLibraryKey);
 	const attachmentItem = useSelector(state => state.libraries[libraryKey]?.items[attachmentKey]);
 	const isFetchingUrl = useSelector(state => state.libraries[libraryKey]?.attachmentsUrl[attachmentKey]?.isFetching ?? false);
 	const url = useSelector(state => state.libraries[libraryKey]?.attachmentsUrl[attachmentKey]?.url);
@@ -380,11 +380,13 @@ const Reader = () => {
 		state.importedAnnotations, state.viewState
 	]);
 
-	const handleOnBeforeUnload = useCallback(async () => {
+	const handleOnBeforeUnload = useCallback(() => {
 		if (pendingViewState.current) {
-			await updateItemViewState(attachmentItem.key, libraryKey, pendingViewState.current);
+			const pageIndexKey = PAGE_INDEX_KEY_LOOKUP[attachmentItem.contentType];
+			updateItemViewState(attachmentItem.key, libraryKey, pendingViewState.current);
+			updateLocationValueSync(pendingViewState.current[pageIndexKey]);
 		}
-	}, [attachmentItem, libraryKey]);
+	}, [attachmentItem, libraryKey, updateLocationValueSync]);
 
 	useEffect(() => {
 		// pdf js stores last page in localStorage but we want to use one from user library settings instead

src/js/hooks/index.js

@@ -4,3 +4,4 @@ export * from './use-navigation-state';
 export * from './state';
 export * from './use-item-action-handlers';
 export * from './use-items-count';
+export * from './use-tracked-settings-key';

src/js/hooks/use-tracked-settings-key.js

@@ -0,0 +1,26 @@
+import api from 'zotero-api-client';
+
+import { useSelector } from 'react-redux';
+
+// Normally components don't need to track version number of the setting (to avoid re-renders when
+// the version changes) and updates are dispatched asynchonously (and might be queued, e.g., to
+// avoid out-of-order updates). However, to support updating the value on tab/window close, we need
+// a synchroneus version with keepalive fetch call. This hook tracks version of the setting and
+// provides a method to update the setting synchronously, but using this hook might cause re-renders.
+export const useTrackedSettingsKey = (settingsKey, libraryKey) => {
+	const config = useSelector(state => state.config);
+	const value = useSelector(state => state.libraries[libraryKey]?.settings?.entries?.[settingsKey]?.value ?? null);
+	const version = useSelector(state => state.libraries[libraryKey]?.settings?.entries?.[settingsKey]?.version ?? null);
+
+	const update = (newValue) => {
+		if(newValue !== value) {
+			api(config.apiKey, config.apiConfig)
+				.library(libraryKey)
+				.version(version)
+				.settings(settingsKey)
+				.put({ value: newValue }, { keepalive: true });
+		}
+	}
+
+	return { value, update };
+};