refactor: Extract logic-related arguments to the parent of `CompareFi…

…lter` (#26706)
PostHog · Dec 6, 2024 · 5bbf8a7 · 5bbf8a7
1 parent 611722a
commit 5bbf8a7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/frontend/src/lib/components/CompareFilter/CompareFilter.tsx b/frontend/src/lib/components/CompareFilter/CompareFilter.tsx
@@ -1,29 +1,31 @@
 import { LemonSelect } from '@posthog/lemon-ui'
-import { useActions, useValues } from 'kea'
 import { RollingDateRangeFilter } from 'lib/components/DateFilter/RollingDateRangeFilter'
 import { dateFromToText } from 'lib/utils'
 import { useEffect, useState } from 'react'
-import { insightLogic } from 'scenes/insights/insightLogic'
-import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
-export function CompareFilter(): JSX.Element | null {
-    const { insightProps, canEditInsight } = useValues(insightLogic)
+import { CompareFilter as CompareFilterType } from '~/queries/schema'
 
-    const { compareFilter, supportsCompare } = useValues(insightVizDataLogic(insightProps))
-    const { updateCompareFilter } = useActions(insightVizDataLogic(insightProps))
+type CompareFilterProps = {
+    compareFilter?: CompareFilterType | null
+    updateCompareFilter: (compareFilter: CompareFilterType) => void
+    disabled: boolean
+}
 
+export function CompareFilter({
+    compareFilter,
+    updateCompareFilter,
+    disabled,
+}: CompareFilterProps): JSX.Element | null {
     // This keeps the state of the rolling date range filter, even when different drop down options are selected
     // The default value for this is one month
     const [tentativeCompareTo, setTentativeCompareTo] = useState<string>(compareFilter?.compare_to || '-1m')
 
-    const disabled: boolean = !canEditInsight || !supportsCompare
-
     useEffect(() => {
         const newCompareTo = compareFilter?.compare_to
         if (!!newCompareTo && tentativeCompareTo != newCompareTo) {
             setTentativeCompareTo(newCompareTo)
         }
-    }, [compareFilter?.compare_to])
+    }, [compareFilter?.compare_to]) // eslint-disable-line react-hooks/exhaustive-deps
 
     // Hide compare filter control when disabled to avoid states where control is "disabled but checked"
     if (disabled) {

diff --git a/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx b/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx
@@ -34,7 +34,7 @@ import { isValidBreakdown } from '~/queries/utils'
 import { ChartDisplayType } from '~/types'
 
 export function InsightDisplayConfig(): JSX.Element {
-    const { insightProps } = useValues(insightLogic)
+    const { insightProps, canEditInsight } = useValues(insightLogic)
 
     const {
         isTrends,
@@ -54,11 +54,15 @@ export function InsightDisplayConfig(): JSX.Element {
         supportsPercentStackView,
         yAxisScaleType,
         isNonTimeSeriesDisplay,
+        compareFilter,
+        supportsCompare,
     } = useValues(insightVizDataLogic(insightProps))
     const { isTrendsFunnel, isStepsFunnel, isTimeToConvertFunnel, isEmptyFunnel } = useValues(
         funnelDataLogic(insightProps)
     )
 
+    const { updateCompareFilter } = useActions(insightVizDataLogic(insightProps))
+
     const showCompare = (isTrends && display !== ChartDisplayType.ActionsAreaGraph) || isStickiness
     const showInterval =
         isTrendsFunnel ||
@@ -161,7 +165,11 @@ export function InsightDisplayConfig(): JSX.Element {
 
                 {showCompare && (
                     <ConfigFilter>
-                        <CompareFilter />
+                        <CompareFilter
+                            compareFilter={compareFilter}
+                            updateCompareFilter={updateCompareFilter}
+                            disabled={!canEditInsight || !supportsCompare}
+                        />
                     </ConfigFilter>
                 )}
             </div>