From 6107d1916a43ee56f73c9930065aa17a0b9b585d Mon Sep 17 00:00:00 2001
From: Jim O'Donnell <jim@zooniverse.org>
Date: Fri, 18 Feb 2022 19:01:58 +0000
Subject: [PATCH] Add usePersistedStore and useSavedSnapshot -
 `useSavedSnapshot` loads a store snapshot from storage. - `usePersistedStore`
 adds an `onSnapshot` listener that persists store snapshots in storage.

---
 .../src/components/Classifier/hooks/index.js  |  2 +
 .../Classifier/hooks/useHydratedStore.js      | 50 ++-----------------
 .../Classifier/hooks/usePersistedStore.js     | 20 ++++++++
 .../Classifier/hooks/useSavedSnapshot.js      | 39 +++++++++++++++
 4 files changed, 64 insertions(+), 47 deletions(-)
 create mode 100644 packages/lib-classifier/src/components/Classifier/hooks/usePersistedStore.js
 create mode 100644 packages/lib-classifier/src/components/Classifier/hooks/useSavedSnapshot.js

diff --git a/packages/lib-classifier/src/components/Classifier/hooks/index.js b/packages/lib-classifier/src/components/Classifier/hooks/index.js
index 1bb1894dd08..5ee071214b7 100644
--- a/packages/lib-classifier/src/components/Classifier/hooks/index.js
+++ b/packages/lib-classifier/src/components/Classifier/hooks/index.js
@@ -1,3 +1,5 @@
 export { default as useHydratedStore } from './useHydratedStore'
+export { default as usePersistedStore } from './usePersistedStore'
+export { default as useSavedSnapshot } from './useSavedSnapshot'
 export { default as useStore } from './useStore'
 export { default as useWorkflowSnapshot } from './useWorkflowSnapshot'
diff --git a/packages/lib-classifier/src/components/Classifier/hooks/useHydratedStore.js b/packages/lib-classifier/src/components/Classifier/hooks/useHydratedStore.js
index cf0c5d05107..d4036bbc389 100644
--- a/packages/lib-classifier/src/components/Classifier/hooks/useHydratedStore.js
+++ b/packages/lib-classifier/src/components/Classifier/hooks/useHydratedStore.js
@@ -1,53 +1,9 @@
-import  { useEffect, useState } from 'react'
-
-import { asyncSessionStorage, persist } from '@helpers'
-import { useStore } from './'
-
-async function hydrateStore(storageKey) {
-  let snapshot = {}
-  try {
-    snapshot = await loadSnapshot(storageKey, asyncSessionStorage)
-    console.log('store loaded from local storage')
-  } catch (error) {
-    console.log('store snapshot error.')
-    console.error(error)
-  }
-  return snapshot
-}
-
-async function loadSnapshot(storageKey, storage) {
-  const data = await storage.getItem(storageKey)
-  const snapshot = JSON.parse(data)
-  return snapshot
-}
+import { usePersistedStore, useSavedSnapshot, useStore } from './'
 
 export default function useHydratedStore({ authClient, client }, cachePanoptesData = false, storageKey) {
-  const [initialState, setInitialState] = useState(null)
-  const [loaded, setLoaded] = useState(false)
+  const initialState = useSavedSnapshot(cachePanoptesData, storageKey)
   const classifierStore = useStore({ authClient, client, initialState })
-
-  async function onStoreCreated() {
-    if (!loaded && classifierStore && cachePanoptesData) {
-      await persist(storageKey, classifierStore, { storage: asyncSessionStorage })
-    }
-    setLoaded(true)
-  }
-
-  useEffect(() => {
-    onStoreCreated()
-  }, [cachePanoptesData, classifierStore, loaded])
-
-  async function getInitialState() {
-    let _initialState = {}
-    if (cachePanoptesData) {
-      _initialState = await hydrateStore(storageKey)
-    }
-    setInitialState(_initialState)
-  }
-
-  useEffect(() => {
-    getInitialState()
-  }, [])
+  const loaded = usePersistedStore(cachePanoptesData, classifierStore, storageKey)
 
   return { classifierStore, loaded }
 }
\ No newline at end of file
diff --git a/packages/lib-classifier/src/components/Classifier/hooks/usePersistedStore.js b/packages/lib-classifier/src/components/Classifier/hooks/usePersistedStore.js
new file mode 100644
index 00000000000..1049a1d63b6
--- /dev/null
+++ b/packages/lib-classifier/src/components/Classifier/hooks/usePersistedStore.js
@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react'
+
+import { asyncSessionStorage, persist } from '@helpers'
+
+export default function usePersistedStore(enableStorage, store, storageKey) {
+  const [loaded, setLoaded] = useState(false)
+
+  async function onStoreCreated() {
+    if (!loaded && store && enableStorage) {
+      await persist(storageKey, store, { storage: asyncSessionStorage })
+    }
+    setLoaded(true)
+  }
+
+  useEffect(() => {
+    onStoreCreated()
+  }, [enableStorage, store, loaded])
+
+  return loaded
+}
\ No newline at end of file
diff --git a/packages/lib-classifier/src/components/Classifier/hooks/useSavedSnapshot.js b/packages/lib-classifier/src/components/Classifier/hooks/useSavedSnapshot.js
new file mode 100644
index 00000000000..8a2ffcdf2b8
--- /dev/null
+++ b/packages/lib-classifier/src/components/Classifier/hooks/useSavedSnapshot.js
@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react'
+
+import { asyncSessionStorage } from '@helpers'
+
+async function loadSnapshot(storageKey, storage) {
+  const data = await storage.getItem(storageKey)
+  const snapshot = JSON.parse(data)
+  return snapshot
+}
+
+async function hydrateStore(storageKey) {
+  let snapshot = {}
+  try {
+    snapshot = await loadSnapshot(storageKey, asyncSessionStorage)
+    console.log('store loaded from local storage')
+  } catch (error) {
+    console.log('store snapshot error.')
+    console.error(error)
+  }
+  return snapshot
+}
+
+export default function useSavedSnapshot(enableStorage, storageKey) {
+  const [initialState, setInitialState] = useState(null)
+
+  async function getInitialState() {
+    let _initialState = {}
+    if (enableStorage) {
+      _initialState = await hydrateStore(storageKey)
+    }
+    setInitialState(_initialState)
+  }
+
+  useEffect(() => {
+    getInitialState()
+  }, [storageKey])
+
+  return initialState
+}
\ No newline at end of file