Refactor useStore and useWorkflowSnapshot

- Add a `hooks` directory to the `Classifier` component. Import the `useStore` and `useWorkflowSnapshot` hooks from that directory.
- Explicitly declare `SWR` options in the the `useWorkflowSnapshot` hook.

packages/lib-classifier/src/components/Classifier/ClassifierContainer.js

@@ -1,11 +1,9 @@
 import { GraphQLClient } from 'graphql-request'
 import { Paragraph } from 'grommet'
-import makeInspectable from 'mobx-devtools-mst'
 import { Provider } from 'mobx-react'
 import { persist } from 'mst-persist'
-import useSWR from 'swr'
 import PropTypes from 'prop-types'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import '../../translations/i18n'
 import i18n from 'i18next'
 import {
@@ -16,8 +14,8 @@ import {
 } from '@zooniverse/panoptes-js'
 
 import { asyncSessionStorage } from '@helpers'
+import { useStore, useWorkflowSnapshot } from './hooks'
 import { unregisterWorkers } from '../../workers'
-import RootStore from '../../store'
 import Classifier from './Classifier'
 
 // import { isBackgroundSyncAvailable } from '../../helpers/featureDetection'
@@ -50,41 +48,6 @@ const client = {
 // So we'll unregister the worker for now.
 unregisterWorkers('./queue.js')
 
-let store
-
-function initStore({ authClient, client, initialState }) {
-  if (!store) {
-    store = RootStore.create(initialState, {
-      authClient,
-      client
-    })
-    makeInspectable(store)
-  }
-  return store
-}
-/**
-  useStore hook adapted from
-  https://github.com/vercel/next.js/blob/5201cdbaeaa72b54badc8f929ddc73c09f414dc4/examples/with-mobx-state-tree/store.js#L49-L52
-*/
-function useStore({ authClient, client, initialState }) {
-  const _store = useMemo(() => initStore({ authClient, client, initialState }), [authClient, initialState])
-  return _store
-}
-
-async function fetchWorkflow(workflowID) {
-  if (workflowID) {
-    const { body } = await panoptesClient.get(`/workflows/${workflowID}`)
-    const [ workflowSnapshot ] = body.workflows
-    return workflowSnapshot
-  }
-  return null
-}
-
-function useWorkflowSnapshot(workflowID) {
-  const { data } = useSWR(workflowID, fetchWorkflow)
-  return data ?? null
-}
-
 export default function ClassifierContainer({
   authClient,
   cachePanoptesData = false,

packages/lib-classifier/src/components/Classifier/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useStore } from './useStore'
+export { default as useWorkflowSnapshot } from './useWorkflowSnapshot'

packages/lib-classifier/src/components/Classifier/hooks/useStore.js

@@ -0,0 +1,25 @@
+import makeInspectable from 'mobx-devtools-mst'
+import { useMemo } from 'react'
+
+import RootStore from '@store'
+
+let store
+
+function initStore({ authClient, client, initialState }) {
+  if (!store) {
+    store = RootStore.create(initialState, {
+      authClient,
+      client
+    })
+    makeInspectable(store)
+  }
+  return store
+}
+/**
+  useStore hook adapted from
+  https://github.com/vercel/next.js/blob/5201cdbaeaa72b54badc8f929ddc73c09f414dc4/examples/with-mobx-state-tree/store.js#L49-L52
+*/
+export default function useStore({ authClient, client, initialState }) {
+  const _store = useMemo(() => initStore({ authClient, client, initialState }), [authClient, initialState])
+  return _store
+}

packages/lib-classifier/src/components/Classifier/hooks/useWorkflowSnapshot.js

@@ -0,0 +1,25 @@
+import useSWR from 'swr'
+
+import { panoptes } from '@zooniverse/panoptes-js'
+
+const SWRoptions = {
+  revalidateIfStale: true,
+  revalidateOnMount: true,
+  revalidateOnFocus: true,
+  revalidateOnReconnect: true,
+  refreshInterval: 0
+}
+
+async function fetchWorkflow(workflowID) {
+  if (workflowID) {
+    const { body } = await panoptes.get(`/workflows/${workflowID}`)
+    const [ workflowSnapshot ] = body.workflows
+    return workflowSnapshot
+  }
+  return null
+}
+
+export default function useWorkflowSnapshot(workflowID) {
+  const { data } = useSWR(workflowID, fetchWorkflow, SWRoptions)
+  return data ?? null
+}