clean up orchestra

darkroomengineering · Nov 22, 2023 · 6764bb1 · 6764bb1 · github-actions · Nov 22, 2023
1 parent e4f519d
commit 6764bb1
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 113 deletions.
diff --git a/libs/orchestra/index.js b/libs/orchestra/index.js
@@ -1,77 +1,34 @@
-import { del, get, set } from 'idb-keyval'
-// import { Studio } from 'libs/theatre/studio'
 import { broadcast } from 'libs/zustand-broadcast'
-import { createContext, useContext, useEffect } from 'react'
+import { useEffect, useState } from 'react'
+import { create } from 'zustand'
 import { createJSONStorage, persist } from 'zustand/middleware'
-import { shallow } from 'zustand/shallow'
-import { createWithEqualityFn } from 'zustand/traditional'
 import s from './orchestra.module.scss'
 
 // avoid to display debug tools on orchestra page
-const useInternalStore = createWithEqualityFn(
-  (set) => ({
-    isVisible: true,
-    setIsVisible: (isVisible) => set({ isVisible }),
-  }),
-  shallow,
-)
-
-// https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md
-const INDEXEDDB_STORAGE = {
-  getItem: async (name) => {
-    // console.log(name, 'has been retrieved')
-    return (await get(name)) || null
-  },
-  setItem: async (name, value) => {
-    // console.log(name, 'with value', value, 'has been saved')
-    await set(name, value)
-  },
-  removeItem: async (name) => {
-    // console.log(name, 'has been deleted')
-    await del(name)
-  },
-}
+let isOrchestraPage = false
 
-export const useOrchestraStore = createWithEqualityFn(
+const useOrchestraStore = create(
   persist(() => ({}), {
     name: 'orchestra',
-    storage: createJSONStorage(() => INDEXEDDB_STORAGE),
+    storage: createJSONStorage(() => localStorage),
   }),
-  shallow,
 )
 
 broadcast(useOrchestraStore, 'orchestra')
 
-export const OrchestraContext = createContext({})
-
 export function useOrchestra() {
-  return useContext(OrchestraContext)
-}
+  const values = useOrchestraStore()
 
-// add around the app
-export function Orchestra({ children }) {
-  const isVisible = useInternalStore(({ isVisible }) => isVisible)
+  const [isVisible, setIsVisible] = useState(false)
 
-  const value = useOrchestraStore((value) => value, shallow)
+  useEffect(() => {
+    setIsVisible(!isOrchestraPage)
+  }, [])
 
-  return (
-    <>
-      <OrchestraContext.Provider value={value}>
-        {children(isVisible ? value : {})}
-      </OrchestraContext.Provider>
-    </>
-  )
+  return isVisible && values
 }
 
 export function OrchestraToggle({ icon, title, id }) {
-  // useEffect(() => {
-  //   useOrchestraStore.setState((state) => {
-  //     const clone = { ...state }
-  //     clone[id] = defaultValue
-  //     return clone
-  //   })
-  // }, [defaultValue])
-
   return (
     <button
       onClick={() => {
@@ -90,11 +47,7 @@ export function OrchestraToggle({ icon, title, id }) {
 
 // to be added to debug pages
 export function OrchestraPage({ children }) {
-  useEffect(() => {
-    useInternalStore.setState(() => ({
-      isVisible: false,
-    }))
-  }, [])
+  isOrchestraPage = true
 
   return <div className={s.orchestra}>{children}</div>
 }
diff --git a/libs/theatre/studio/index.js b/libs/theatre/studio/index.js
@@ -21,7 +21,7 @@ export function Studio() {
 
       initialized = true
     }
-  }, [studio, rafDriver])
+  }, [rafDriver])
 
   useEffect(() => {
     studio.ui.restore()
@@ -32,33 +32,31 @@ export function Studio() {
   }, [])
 
   return (
-    <>
-      <div className={s.studio}>
-        <button
-          onClick={() => {
-            // setVisible(!visible)
-            const id = project.address.projectId
-            const json = studio.createContentOfSaveFile(id)
-            const file = new File(
-              [jsonminify(JSON.stringify(json, null, 2))],
-              'config.json',
-              {
-                type: 'application/json',
-              },
-            )
-            const url = URL.createObjectURL(file)
-            const a = document.createElement('a')
-            a.href = url
-            // create title using id and date up to seconds
-            const title = `${id}-${new Date().toISOString().slice(0, 19)}`
-            a.download = title
-            a.click()
-          }}
-          className={s.save}
-        >
-          💾
-        </button>
-      </div>
-    </>
+    <div className={s.studio}>
+      <button
+        onClick={() => {
+          // setVisible(!visible)
+          const id = project.address.projectId
+          const json = studio.createContentOfSaveFile(id)
+          const file = new File(
+            [jsonminify(JSON.stringify(json, null, 2))],
+            'config.json',
+            {
+              type: 'application/json',
+            },
+          )
+          const url = URL.createObjectURL(file)
+          const a = document.createElement('a')
+          a.href = url
+          // create title using id and date up to seconds
+          const title = `${id}-${new Date().toISOString().slice(0, 19)}`
+          a.download = title
+          a.click()
+        }}
+        className={s.save}
+      >
+        💾
+      </button>
+    </div>
   )
 }
diff --git a/next.config.js b/next.config.js
@@ -30,7 +30,7 @@ const nextConfig = {
   },
   images: {
     // ADD in case you need to import SVGs in next/image component
-    // dangerouslyAllowSVG: true,
+    dangerouslyAllowSVG: true,
     // contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
     remotePatterns: [
       {

diff --git a/pages/_app.js b/pages/_app.js
@@ -5,7 +5,7 @@ import { DeviceDetectionProvider } from 'components/device-detection'
 import { gsap } from 'gsap'
 import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
 import { GTM_ID } from 'libs/analytics'
-import { Orchestra } from 'libs/orchestra'
+import { useOrchestra } from 'libs/orchestra'
 import { useStore } from 'libs/store'
 import { ProjectProvider, RafDriverProvider } from 'libs/theatre'
 import dynamic from 'next/dynamic'
@@ -37,7 +37,7 @@ if (typeof window !== 'undefined') {
 
   gsap.defaults({ ease: 'none' })
   gsap.registerPlugin(ScrollTrigger)
-  ScrollTrigger.clearScrollMemory('manual')
+  ScrollTrigger.clearScrollMemory(window.history.scrollRestoration)
   ScrollTrigger.defaults({ markers: process.env.NODE_ENV === 'development' })
 
   // merge rafs
@@ -62,6 +62,8 @@ function MyApp({ Component, pageProps }) {
     }
   }, [lenis, isNavOpened])
 
+  const { stats, grid, studio, dev } = useOrchestra()
+
   return (
     <>
       {/* Google Tag Manager - Global base code */}
@@ -86,28 +88,19 @@ function MyApp({ Component, pageProps }) {
       )}
       <RealViewport />
       <DeviceDetectionProvider>
-        <Orchestra>
-          {(
-            { studio, grid, stats, dev }, // check _debug/orchestra page to match ids
-          ) => (
-            <ProjectProvider
-              id="Satus"
-              config="/config/Satus-2023-04-17T12_55_21.json"
-            >
-              <RafDriverProvider id="default">
-                <Component {...pageProps} />
-                {studio && <Studio />}
-                {stats && <Stats />}
-                {grid && <GridDebugger />}
-                {typeof document !== 'undefined' &&
-                  document.documentElement.classList.toggle(
-                    'dev',
-                    Boolean(dev),
-                  )}
-              </RafDriverProvider>
-            </ProjectProvider>
-          )}
-        </Orchestra>
+        <ProjectProvider
+          id="Satus"
+          config="/config/Satus-2023-04-17T12_55_21.json"
+        >
+          <RafDriverProvider id="default">
+            <Component {...pageProps} />
+            {studio && <Studio />}
+            {stats && <Stats />}
+            {grid && <GridDebugger />}
+            {typeof document !== 'undefined' &&
+              document.documentElement.classList.toggle('dev', Boolean(dev))}
+          </RafDriverProvider>
+        </ProjectProvider>
       </DeviceDetectionProvider>
     </>
   )