chore(ui-kit): better naming for useEmptyableData hook

packages/ui-kit/src/components/Leaderboard/Leaderboard.tsx

@@ -9,7 +9,7 @@ import {
   getTimeZone,
   LeaderboardLabels,
   useCombinedRefsCallback,
-  useConnectedData,
+  useEmptyableData,
   withThemeWrapper
 } from '../../helpers'
 import { useLeaderboard } from '../../hooks/useLeaderboard'
@@ -92,8 +92,8 @@ export const LeaderboardComponent = React.forwardRef<HTMLDivElement, Leaderboard
       }
     }, [chartRef])
 
-    const { data, isEmptyState, setData } = useConnectedData<LeaderboardData>({
-      destroyChart,
+    const { data, isEmptyState, setData } = useEmptyableData<LeaderboardData>({
+      onEmptyData: destroyChart,
       isDataEmpty: (data) => data.rows?.length === 0
     })
 

packages/ui-kit/src/components/PieChart/PieChart.tsx

@@ -6,7 +6,7 @@ import {
   getCustomChartLabelsPlugin,
   getTimeZone,
   useCombinedRefsCallback,
-  useConnectedData,
+  useEmptyableData,
   withThemeWrapper
 } from '../../helpers'
 import { useCounter } from '../../hooks/useCounter'
@@ -136,8 +136,8 @@ export const PieChartComponent = React.forwardRef<HTMLDivElement, PieChartProps>
       }
     }, [chartRef])
 
-    const { data, isEmptyState, setData } = useConnectedData<PieChartData>({
-      destroyChart,
+    const { data, isEmptyState, setData } = useEmptyableData<PieChartData>({
+      onEmptyData: destroyChart,
       isDataEmpty: (data) => data.rows?.length === 0
     })
 

packages/ui-kit/src/components/TimeSeries/TimeSeries.tsx

@@ -9,7 +9,7 @@ import {
   customCanvasBackgroundColor,
   formatLabels,
   getTimeZone,
-  useConnectedData,
+  useEmptyableData,
   useForwardedRefCallback,
   withThemeWrapper
 } from '../../helpers'
@@ -141,8 +141,8 @@ export const TimeSeriesComponent = React.forwardRef<HTMLDivElement, TimeSeriesPr
       chartRef.current = null
     }, [chartRef])
 
-    const { data, isEmptyState, setData } = useConnectedData<TimeSeriesData>({
-      destroyChart,
+    const { data, isEmptyState, setData } = useEmptyableData<TimeSeriesData>({
+      onEmptyData: destroyChart,
       isDataEmpty: (data) => !data.values || !data.labels || data.values.length === 0
     })
 

packages/ui-kit/src/helpers/index.ts

@@ -14,7 +14,7 @@ export * from './storybookCodeTemplate'
 export * from './themeUtils'
 export * from './useCombinedRefs'
 export * from './useCombinedRefsCallback'
-export * from './useConnectedData'
+export * from './useEmptyableData'
 export * from './useForwardedRefCallback'
 export * from './useStorybookAccessToken'
 export * from './withThemeWrapper'

packages/ui-kit/src/helpers/useEmptyableData/index.ts

@@ -0,0 +1 @@
+export * from './useEmptyableData'

packages/ui-kit/src/helpers/useEmptyableData/useEmptyableData.ts

@@ -0,0 +1,37 @@
+import React from 'react'
+
+export type UseEmptyableDataProps<T> = {
+  isDataEmpty: (data: T) => boolean
+  onEmptyData: () => void
+}
+
+/**
+ * Returns a getter and setter for `data` where, whenever `data` changes.
+ *
+ * 1. Check if `data` is empty, using a user-supplied function `isDateEmpty`.
+ * 2. If it's empty, call a user-supplied function `onEmptyData`.
+ *
+ * Returns also a getter for whether the data is empty (`isEmptyState`).
+ */
+
+export const useEmptyableData = <T>({ onEmptyData, isDataEmpty }: UseEmptyableDataProps<T>) => {
+  const [isEmptyState, setIsEmptyState] = React.useState(false)
+  const [data, setData] = React.useState<T | undefined>()
+
+  React.useEffect(() => {
+    const isEmptyStateVal = !data || isDataEmpty(data)
+
+    setIsEmptyState(isEmptyStateVal)
+
+    if (isEmptyStateVal) {
+      onEmptyData()
+      return
+    }
+  }, [data, onEmptyData, isDataEmpty])
+
+  return {
+    data,
+    setData,
+    isEmptyState
+  }
+}