feat: generic segment (#590)

* chore: generic segment

* fix: fmt

Author: chambo-e

packages/use-segment/src/__tests__/events/pageVisited.ts

@@ -2,12 +2,12 @@ import { Analytics } from '@segment/analytics-next'
 import { PageType, ProductCategory } from './types'
 
 
-const pageVisited = (analytics: Analytics) => async (
+const pageVisited = (analytics?: Analytics) => async (
     pageType: PageType,
     organizationId: string,
     productCategory?: ProductCategory
 ): Promise<void> => {
-    await analytics.page(
+    await analytics?.page(
         {
             page_type: pageType,
             product_category: productCategory,

packages/use-segment/src/__tests__/events/types.ts

@@ -0,0 +1,2 @@
+export type PageType = 'Docs' | 'Blog' | 'Main'
+export type ProductCategory = 'Dedibox' | 'Elements' | 'Datacenter'

packages/use-segment/src/__tests__/index.tsx

@@ -6,12 +6,14 @@ import * as defaultEvents from './events'
 
 const { log } = console
 
+type DefaultEvents = typeof defaultEvents
+
 const wrapper =
   ({
     writeKey,
     onError = e => log(e),
     events = defaultEvents,
-  }: SegmentProviderProps) =>
+  }: SegmentProviderProps<typeof defaultEvents>) =>
   ({ children }: { children: ReactNode }) =>
     (
       <SegmentProvider writeKey={writeKey} onError={onError} events={events}>
@@ -30,14 +32,13 @@ describe('segment hook', () => {
   })
 
   it('useSegment should not load without key', () => {
-    const { result } = renderHook(() => useSegment(), {
+    const { result } = renderHook(() => useSegment<DefaultEvents>(), {
       wrapper: wrapper({
         events: defaultEvents,
         onError: e => log(e),
         writeKey: undefined,
       }),
     })
-    console.log(result.current)
     expect(result.current.analytics).toBe(undefined)
   })
 })

packages/use-segment/src/useSegment.tsx

@@ -1,17 +1,19 @@
 import { Analytics, AnalyticsBrowser } from '@segment/analytics-next'
 import React, {
-  FunctionComponent,
-  ReactElement,
+  ReactNode,
   createContext,
   useContext,
   useEffect,
   useMemo,
   useState,
 } from 'react'
 
-interface SegmentContextInteface {
+type EventFunction = (...args: unknown[]) => Promise<void>
+type Events = Record<string, (analytics?: Analytics) => EventFunction>
+
+interface SegmentContextInterface<T extends Events = Events> {
   analytics: Analytics | undefined
-  events: Record<string, unknown>
+  events: { [K in keyof T]: ReturnType<T[K]> }
   writeKey?: string
   onError?: (err: Error) => void
 }
@@ -23,29 +25,32 @@ const initialContext = {
   writeKey: undefined,
 }
 
-const SegmentContext = createContext<SegmentContextInteface>(initialContext)
+const SegmentContext = createContext<SegmentContextInterface>(initialContext)
 
-export const useSegment = (): SegmentContextInteface => {
-  const context = useContext(SegmentContext)
+export function useSegment<T extends Events>(): SegmentContextInterface<T> {
+  // @ts-expect-error Here we force cast the generic onto the useContext because the context is a
+  // global variable and cannot be generic
+  const context = useContext<SegmentContextInterface<T>>(SegmentContext)
   if (context === undefined) {
     throw new Error('useSegment must be used within a SegmentProvider')
   }
 
   return context
 }
 
-export type SegmentProviderProps = {
+export type SegmentProviderProps<T> = {
   writeKey?: string
   onError: (err: Error) => void
-  events: Record<string, unknown>
+  events: T
+  children: ReactNode
 }
 
-const SegmentProvider: FunctionComponent<SegmentProviderProps> = ({
+function SegmentProvider<T extends Events>({
   children,
   writeKey,
   onError,
   events,
-}): ReactElement => {
+}: SegmentProviderProps<T>) {
   const [analytics, setAnalytics] = useState<Analytics | undefined>(undefined)
 
   useEffect(() => {
@@ -63,13 +68,20 @@ const SegmentProvider: FunctionComponent<SegmentProviderProps> = ({
     }
   }, [onError, writeKey])
 
-  const value = useMemo<SegmentContextInteface>(
-    () => ({
+  const value = useMemo<SegmentContextInterface<T>>(() => {
+    const curiedEvents = Object.entries(events).reduce(
+      (acc, [eventName, eventFn]) => ({
+        ...acc,
+        [eventName]: eventFn(analytics),
+      }),
+      {},
+    ) as { [K in keyof T]: ReturnType<T[K]> }
+
+    return {
       analytics,
-      events,
-    }),
-    [analytics, events],
-  )
+      events: curiedEvents,
+    }
+  }, [analytics, events])
 
   return (
     <SegmentContext.Provider value={value}>{children}</SegmentContext.Provider>