refactor preview events to use redux

Author: daveajrussell

src/browser/modules/App/App.tsx

@@ -18,7 +18,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { setEditorTheme } from 'neo4j-arc/cypher-language-support'
-import React, { useEffect, useRef } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import { connect } from 'react-redux'
 import { withBus } from 'react-suber'
 import { ThemeProvider } from 'styled-components'
@@ -96,6 +96,10 @@ import {
   updateUdcData
 } from 'shared/modules/udc/udcDuck'
 import { getTelemetrySettings } from 'shared/utils/selectors'
+import {
+  PREVIEW_EVENT,
+  trackPageLoad
+} from 'shared/modules/preview/previewDuck'
 
 export const MAIN_WRAPPER_DOM_ID = 'MAIN_WRAPPER_DOM_ID'
 
@@ -119,49 +123,55 @@ export function App(props: any) {
   const eventMetricsCallback = useRef((_: MetricsData) => _)
   const segmentTrackCallback = useRef((_: MetricsData) => _)
 
+  const invokeTrackingCallbacks = useCallback(
+    ({ category, label, data }: MetricsData) => {
+      if (!isRunningE2ETest() && props.telemetrySettings.allowUserStats) {
+        const extendedData = {
+          browserVersion: version,
+          neo4jEdition: props.edition,
+          connectedTo: props.connectedTo,
+          ...data
+        }
+
+        eventMetricsCallback &&
+          eventMetricsCallback.current &&
+          eventMetricsCallback.current({ category, label, data: extendedData })
+
+        segmentTrackCallback &&
+          segmentTrackCallback.current &&
+          segmentTrackCallback.current({ category, label, data: extendedData })
+      }
+    },
+    [props.telemetrySettings.allowUserStats]
+  )
+
   useEffect(() => {
     const unsub =
       props.bus &&
-      props.bus.take(
-        METRICS_EVENT,
-        ({ category, label, data: originalData }: MetricsData) => {
-          if (!isRunningE2ETest() && props.telemetrySettings.allowUserStats) {
-            const data = {
-              browserVersion: version,
-              neo4jEdition: props.edition,
-              connectedTo: props.connectedTo,
-              ...originalData
-            }
-            eventMetricsCallback &&
-              eventMetricsCallback.current &&
-              eventMetricsCallback.current({ category, label, data })
-            segmentTrackCallback &&
-              segmentTrackCallback.current &&
-              segmentTrackCallback.current({ category, label, data })
-          }
-        }
-      )
+      props.bus.take(METRICS_EVENT, (metricsData: MetricsData) => {
+        invokeTrackingCallbacks(metricsData)
+      })
     return () => unsub && unsub()
-  }, [props.telemetrySettings.allowUserStats, props.bus])
+  }, [props.bus, invokeTrackingCallbacks])
+
+  useEffect(() => {
+    const unsub =
+      props.bus &&
+      props.bus.take(PREVIEW_EVENT, (metricsData: MetricsData) => {
+        invokeTrackingCallbacks(metricsData)
+      })
+    return () => unsub && unsub()
+  }, [props.bus, invokeTrackingCallbacks])
 
   useEffect(() => {
     const initAction = udcInit()
     props.bus && props.bus.send(initAction.type, initAction)
   }, [props.bus])
 
   useEffect(() => {
-    if (!isRunningE2ETest() && props.telemetrySettings.allowUserStats) {
-      const hasTriedPreviewUI =
-        localStorage.getItem('hasTriedPreviewUI') === 'true'
-      segmentTrackCallback &&
-        segmentTrackCallback.current &&
-        segmentTrackCallback.current({
-          category: 'preview',
-          label: 'PREVIEW_PAGE_LOAD',
-          data: { previewUI: false, hasTriedPreviewUI }
-        })
-    }
-  }, [props.telemetrySettings.allowUserStats])
+    const pageLoadAction = trackPageLoad()
+    props.bus && props.bus.send(pageLoadAction.type, pageLoadAction)
+  }, [props.bus, props.telemetrySettings.allowUserStats])
 
   const {
     browserSyncAuthStatus,
@@ -195,6 +205,7 @@ export function App(props: any) {
   }, [titleString])
 
   const wrapperClassNames = codeFontLigatures ? '' : 'disable-font-ligatures'
+
   return (
     <ErrorBoundary>
       <DesktopApi

src/browser/modules/Stream/PlayFrame.tsx

@@ -47,8 +47,7 @@ import { isConnectedAuraHost } from 'shared/modules/connections/connectionsDuck'
 import { getEdition, isEnterprise } from 'shared/modules/dbMeta/dbMetaDuck'
 import { DARK_THEME } from 'shared/modules/settings/settingsDuck'
 import { LAST_GUIDE_SLIDE } from 'shared/modules/udc/udcDuck'
-import { PreviewFrame } from './StartPreviewFrame'
-import { getTelemetrySettings, TelemetrySettings } from 'shared/utils/selectors'
+import PreviewFrame from './StartPreviewFrame'
 
 const AuraPromotion = () => {
   const theme = useContext(ThemeContext)
@@ -90,15 +89,13 @@ type PlayFrameProps = {
   showPromotion: boolean
   isFullscreen: boolean
   isCollapsed: boolean
-  telemetrySettings: TelemetrySettings
 }
 export function PlayFrame({
   stack,
   bus,
   showPromotion,
   isFullscreen,
-  isCollapsed,
-  telemetrySettings
+  isCollapsed
 }: PlayFrameProps): JSX.Element {
   const [stackIndex, setStackIndex] = useState(0)
   const [atSlideStart, setAtSlideStart] = useState<boolean | null>(null)
@@ -127,8 +124,7 @@ export function PlayFrame({
         bus,
         onSlide,
         initialPlay,
-        showPromotion,
-        telemetrySettings
+        showPromotion
       )
       if (stillMounted) {
         setInitialPlay(false)
@@ -211,8 +207,7 @@ function generateContent(
   bus: Bus,
   onSlide: any,
   shouldUseSlidePointer: boolean,
-  showPromotion = false,
-  telemetrySettings: TelemetrySettings
+  showPromotion = false
 ): Content | Promise<Content> {
   // Not found
   if (stackFrame.response && stackFrame.response.status === 404) {
@@ -301,15 +296,11 @@ function generateContent(
     const updatedContent =
       isPlayStart && showPromotion ? (
         <>
-          {isPreviewAvailable ? (
-            <PreviewFrame telemetrySettings={telemetrySettings} />
-          ) : (
-            content
-          )}
+          {isPreviewAvailable ? <PreviewFrame /> : content}
           <AuraPromotion />
         </>
       ) : isPreviewAvailable ? (
-        <PreviewFrame telemetrySettings={telemetrySettings} />
+        <PreviewFrame />
       ) : (
         content
       )
@@ -392,8 +383,7 @@ const mapStateToProps = (state: GlobalState) => ({
     (getEdition(state) !== null &&
       !isEnterprise(state) &&
       !isConnectedAuraHost(state)) ||
-    inDesktop(state),
-  telemetrySettings: getTelemetrySettings(state)
+    inDesktop(state)
 })
 
 export default connect(mapStateToProps)(withBus(PlayFrame))

src/browser/modules/Stream/StartPreviewFrame.tsx

@@ -17,10 +17,11 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import React, { useRef } from 'react'
-import { isRunningE2ETest } from 'services/utils'
-import { TelemetrySettings } from 'shared/utils/selectors'
-import { MetricsData } from '../Segment'
+import React, { Dispatch } from 'react'
+import { Action } from 'redux'
+import { trackNavigateToPreview } from 'shared/modules/preview/previewDuck'
+import { connect } from 'react-redux'
+import { withBus } from 'react-suber'
 
 export const navigateToPreview = (): void => {
   const path = window.location.pathname
@@ -29,50 +30,14 @@ export const navigateToPreview = (): void => {
   }
 }
 
-const useTrackAndNavigateToPreview = (
-  telemetrySettings: TelemetrySettings
-): (() => void) => {
-  const segmentTrackCallback = useRef((_: MetricsData) => _)
-  const path = window.location.pathname
-
-  return () => {
-    if (!path.endsWith('/preview/')) {
-      if (!isRunningE2ETest() && telemetrySettings.allowUserStats) {
-        const now = Date.now()
-        localStorage.setItem('hasTriedPreviewUI', 'true')
-
-        const timeSinceLastSwitchMs =
-          localStorage.getItem('timeSinceLastSwitchMs') ?? null
-        localStorage.setItem('timeSinceLastSwitchMs', now.toString())
-
-        let timeSinceLastSwitch = null
-        if (timeSinceLastSwitchMs !== null) {
-          timeSinceLastSwitch = now - parseInt(timeSinceLastSwitchMs)
-        }
-
-        segmentTrackCallback &&
-          segmentTrackCallback.current &&
-          segmentTrackCallback.current({
-            category: 'preview',
-            label: 'PREVIEW_UI_SWITCH',
-            data: {
-              switchedTo: 'preview',
-              timeSinceLastSwitch: timeSinceLastSwitch ?? 0
-            }
-          })
-      }
-
-      navigateToPreview()
-    }
-  }
-}
-
 type PreviewFrameProps = {
-  telemetrySettings: TelemetrySettings
+  executeTrackNavigateToPreview: () => void
 }
-export const PreviewFrame = ({ telemetrySettings }: PreviewFrameProps) => {
-  const trackAndNavigateToPreview =
-    useTrackAndNavigateToPreview(telemetrySettings)
+const PreviewFrame = ({ executeTrackNavigateToPreview }: PreviewFrameProps) => {
+  function trackAndNavigateToPreview() {
+    executeTrackNavigateToPreview()
+    navigateToPreview()
+  }
 
   return (
     <>
@@ -136,3 +101,15 @@ export const PreviewFrame = ({ telemetrySettings }: PreviewFrameProps) => {
     </>
   )
 }
+
+const mapDispatchToProps = (dispatch: Dispatch<Action>) => {
+  return {
+    executeTrackNavigateToPreview: () => dispatch(trackNavigateToPreview())
+  }
+}
+
+export default withBus(
+  connect(() => {
+    return {}
+  }, mapDispatchToProps)(PreviewFrame)
+)