fix measurement gist issues with better state management

sites/shared/components/wrappers/workbench.js

@@ -1,5 +1,6 @@
-import { useEffect, useState } from 'react'
-import useLocalStorage from 'shared/hooks/useLocalStorage.js'
+import { useEffect, useState, useMemo,} from 'react'
+import useLocalStorage from 'shared/hooks/useLocalStorage'
+import {useGist} from 'shared/hooks/useGist'
 import Layout from 'shared/components/layouts/default'
 import Menu from 'shared/components/workbench/menu/index.js'
 import set from 'lodash.set'
@@ -34,18 +35,6 @@ const views = {
   welcome: () => <p>TODO</p>,
 }
 
-// Generates a default design gist to start from
-const defaultGist = (design, locale='en') => {
-  const gist = {
-  design: design.config.name,
-  version: design.config.version,
-  ...defaultSettings
-  }
-  if (locale) gist.locale = locale
-
-  return gist
-}
-
 const hasRequiredMeasurements = (design, gist) => {
   for (const m of design.config.measurements || []) {
     if (!gist?.measurements?.[m]) return false
@@ -62,7 +51,7 @@ const hasRequiredMeasurements = (design, gist) => {
 const WorkbenchWrapper = ({ app, design, preload=false, from=false, layout=false }) => {
 
   // State for gist
-  const [gist, setGist, ready] = useLocalStorage(`${design.config.name}_gist`, defaultGist(design, app.locale))
+  const [gist, setGist, ready] = useGist(design, app);
   const [messages, setMessages] = useState([])
   const [popup, setPopup] = useState(false)
 
@@ -70,35 +59,33 @@ const WorkbenchWrapper = ({ app, design, preload=false, from=false, layout=false
   // force view to measurements
   useEffect(() => {
     if (
-      ready && gist?._state?.view !== 'measurements'
+      ready && gist._state?.view !== 'measurements'
       && !hasRequiredMeasurements(design, gist)
     ) updateGist(['_state', 'view'], 'measurements')
-  }, [ready])
+  }, [ready, gist._state.view])
 
   // If we need to preload the gist, do so
   useEffect(() => {
     const doPreload = async () => {
       if (preload && from && preloaders[from]) {
         const g = await preloaders[from](preload, design)
-        setGist({ ...gist, ...g.settings })
+        setGist({value: { ...gist, ...g.settings }, type: 'replace'})
       }
     }
     doPreload();
   }, [preload, from])
 
   // Helper methods to manage the gist state
-  const updateGist = (path, content, closeNav=false) => {
-    const newGist = {...gist}
-    set(newGist, path, content)
-    setGist(newGist)
+  const updateGist = useMemo(() => (path, value, closeNav=false) => {
+    setGist({path, value})
     // Force close of menu on mobile if it is open
     if (closeNav && app.primaryMenu) app.setPrimaryMenu(false)
-  }
+  }, [app])
+
   const unsetGist = (path) => {
-    const newGist = {...gist}
-    unset(newGist, path)
-    setGist(newGist)
+    setGist({path, type: 'unset'})
   }
+
   // Helper methods to handle messages
   const feedback = {
     add: msg => {