From 6764bb1d9b57cfba09a82f3fb3764426e75092db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Roche?= Date: Wed, 22 Nov 2023 17:04:56 +0100 Subject: [PATCH] clean up orchestra --- libs/orchestra/index.js | 71 ++++++------------------------------ libs/theatre/studio/index.js | 56 ++++++++++++++-------------- next.config.js | 2 +- pages/_app.js | 41 +++++++++------------ 4 files changed, 57 insertions(+), 113 deletions(-) diff --git a/libs/orchestra/index.js b/libs/orchestra/index.js index 93286393..bd2885e2 100644 --- 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 ( - <> - - {children(isVisible ? value : {})} - - - ) + return isVisible && values } export function OrchestraToggle({ icon, title, id }) { - // useEffect(() => { - // useOrchestraStore.setState((state) => { - // const clone = { ...state } - // clone[id] = defaultValue - // return clone - // }) - // }, [defaultValue]) - return ( - - +
+ +
) } diff --git a/next.config.js b/next.config.js index 330c1af0..aff79c84 100644 --- 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 index 5bd96b37..70f441be 100644 --- 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 }) { )} - - {( - { studio, grid, stats, dev }, // check _debug/orchestra page to match ids - ) => ( - - - - {studio && } - {stats && } - {grid && } - {typeof document !== 'undefined' && - document.documentElement.classList.toggle( - 'dev', - Boolean(dev), - )} - - - )} - + + + + {studio && } + {stats && } + {grid && } + {typeof document !== 'undefined' && + document.documentElement.classList.toggle('dev', Boolean(dev))} + + )