Save opt in state to valtio

studio/components/ui/PageTelemetry.tsx

@@ -1,25 +1,31 @@
+import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
+import { PropsWithChildren, useEffect } from 'react'
+
 import { useParams, useTelemetryProps } from 'common'
 import { useSelectedOrganization } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_URL, IS_PLATFORM, LOCAL_STORAGE_KEYS } from 'lib/constants'
-import { observer } from 'mobx-react-lite'
-import { useRouter } from 'next/router'
-import { PropsWithChildren, useEffect } from 'react'
+import { useAppStateSnapshot } from 'state/app-state'
 
 const PageTelemetry = ({ children }: PropsWithChildren<{}>) => {
   const router = useRouter()
   const { ref } = useParams()
   const telemetryProps = useTelemetryProps()
   const selectedOrganization = useSelectedOrganization()
+  const snap = useAppStateSnapshot()
 
-  const consent =
-    typeof window !== 'undefined'
-      ? localStorage.getItem(LOCAL_STORAGE_KEYS.TELEMETRY_CONSENT)
-      : null
+  useEffect(() => {
+    const consent =
+      typeof window !== 'undefined'
+        ? localStorage.getItem(LOCAL_STORAGE_KEYS.TELEMETRY_CONSENT)
+        : null
+    snap.setIsOptedInTelemetry(consent === 'true')
+  }, [])
 
   useEffect(() => {
     function handleRouteChange(url: string) {
-      handlePageTelemetry(url)
+      if (snap.isOptedInTelemetry) handlePageTelemetry(url)
     }
 
     // Listen for page changes after a navigation or when the query changes
@@ -27,16 +33,16 @@ const PageTelemetry = ({ children }: PropsWithChildren<{}>) => {
     return () => {
       router.events.off('routeChangeComplete', handleRouteChange)
     }
-  }, [router])
+  }, [router, snap.isOptedInTelemetry])
 
   useEffect(() => {
     // Send page telemetry on first page load
     // Waiting for router ready before sending page_view
     // if not the path will be dynamic route instead of the browser url
-    if (router.isReady) {
+    if (router.isReady && snap.isOptedInTelemetry) {
       handlePageTelemetry(router.asPath)
     }
-  }, [router.isReady])
+  }, [router.isReady, snap.isOptedInTelemetry])
 
   /**
    * send page_view event
@@ -44,12 +50,14 @@ const PageTelemetry = ({ children }: PropsWithChildren<{}>) => {
    * @param route: the browser url
    * */
   const handlePageTelemetry = async (route: string) => {
-    if (IS_PLATFORM && consent === 'true') {
+    if (IS_PLATFORM) {
       /**
        * Get referrer from browser
        */
       let referrer: string | undefined = document.referrer
 
+      console.log('handle page telemetry')
+
       /**
        * Send page telemetry
        */

studio/pages/_app.tsx

@@ -55,6 +55,7 @@ import Favicons from 'components/head/Favicons'
 import ConsentToast from 'components/ui/ConsentToast'
 import { IS_PLATFORM, LOCAL_STORAGE_KEYS } from 'lib/constants'
 import { toast } from 'react-hot-toast'
+import { useAppStateSnapshot } from 'state/app-state'
 
 dayjs.extend(customParseFormat)
 dayjs.extend(utc)
@@ -65,6 +66,7 @@ dart(Prism)
 function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
   const consentToastId = useRef<string>()
   const queryClient = useRootQueryClient()
+  const snap = useAppStateSnapshot()
   const [rootStore] = useState(() => new RootStore())
 
   // [Joshen] Some issues with using createBrowserSupabaseClient
@@ -79,20 +81,19 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
 
   const getSavingState = () => rootStore.content.savingState
 
-  const onAcceptConsent = () => {
-    if (typeof window !== 'undefined')
-      localStorage.setItem(LOCAL_STORAGE_KEYS.TELEMETRY_CONSENT, 'true')
-    if (consentToastId.current) toast.dismiss(consentToastId.current)
-  }
-  const onOptOut = () => {
-    if (typeof window !== 'undefined')
-      localStorage.setItem(LOCAL_STORAGE_KEYS.TELEMETRY_CONSENT, 'false')
-    if (consentToastId.current) toast.dismiss(consentToastId.current)
-  }
-
   useEffect(() => {
     // Check for telemetry consent
     if (typeof window !== 'undefined') {
+      const onAcceptConsent = () => {
+        snap.setIsOptedInTelemetry(true)
+        if (consentToastId.current) toast.dismiss(consentToastId.current)
+      }
+
+      const onOptOut = () => {
+        snap.setIsOptedInTelemetry(false)
+        if (consentToastId.current) toast.dismiss(consentToastId.current)
+      }
+
       const hasAcknowledgedConsent = localStorage.getItem(LOCAL_STORAGE_KEYS.TELEMETRY_CONSENT)
       if (hasAcknowledgedConsent === null) {
         consentToastId.current = toast(

studio/pages/account/me.tsx

@@ -16,6 +16,7 @@ import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import AlertError from 'components/ui/AlertError'
 import { LOCAL_STORAGE_KEYS } from 'lib/constants'
 import { useEffect, useState } from 'react'
+import { useAppStateSnapshot } from 'state/app-state'
 
 const User: NextPageWithLayout = () => {
   return (
@@ -200,28 +201,18 @@ const ThemeSettings = observer(() => {
 })
 
 const AnalyticsSettings = observer(() => {
-  const [isOptedIn, setIsOptedIn] = useState(false)
-
-  useEffect(() => {
-    const telemetryConsent =
-      typeof window !== 'undefined'
-        ? localStorage.getItem(LOCAL_STORAGE_KEYS.TELEMETRY_CONSENT)
-        : null
-    if (telemetryConsent === 'true') setIsOptedIn(true)
-  }, [])
+  const snap = useAppStateSnapshot()
 
   const onToggleOptIn = () => {
-    const value = !isOptedIn ? 'true' : 'false'
-    setIsOptedIn(!isOptedIn)
-    if (typeof window !== 'undefined')
-      localStorage.setItem(LOCAL_STORAGE_KEYS.TELEMETRY_CONSENT, value)
+    const value = !snap.isOptedInTelemetry ? 'true' : 'false'
+    snap.setIsOptedInTelemetry(value === 'true')
   }
 
   return (
     <Panel title={<h5 key="panel-title">Analytics</h5>}>
       <Panel.Content>
         <Toggle
-          checked={isOptedIn}
+          checked={snap.isOptedInTelemetry}
           onChange={onToggleOptIn}
           label="Opt-in to send telemetry data from the dashboard"
           descriptionText="By opting into sending telemetry data, Supabase can improve the overall dashboard user experience"

studio/state/app-state.ts

@@ -0,0 +1,17 @@
+import { LOCAL_STORAGE_KEYS } from 'lib/constants'
+import { proxy, snapshot, useSnapshot } from 'valtio'
+
+export const appState = proxy({
+  isOptedInTelemetry: false,
+  setIsOptedInTelemetry: (value: boolean) => {
+    appState.isOptedInTelemetry = value
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(LOCAL_STORAGE_KEYS.TELEMETRY_CONSENT, value.toString())
+    }
+  },
+})
+
+export const getAppStateSnapshot = () => snapshot(appState)
+
+export const useAppStateSnapshot = (options?: Parameters<typeof useSnapshot>[1]) =>
+  useSnapshot(appState, options)