fix(insight-variables): variable calendar component using stale value (…

…PostHog#29022)
Stars1233 · Feb 20, 2025 · ad98338 · ad98338
1 parent df74325
commit ad98338
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 18 deletions.
diff --git a/frontend/src/queries/nodes/DataVisualization/Components/Variables/NewVariableModal.tsx b/frontend/src/queries/nodes/DataVisualization/Components/Variables/NewVariableModal.tsx
@@ -8,6 +8,7 @@ import {
     LemonSelect,
 } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { dayjs } from 'lib/dayjs'
 import { LemonField } from 'lib/lemon-ui/LemonField'
 
 import { Variable, VariableType } from '../../types'
@@ -99,8 +100,7 @@ const renderVariableSpecificFields = (
         return (
             <LemonField.Pure label="Default value" className="gap-1">
                 <VariableCalendar
-                    showDefault={true}
-                    variable={variable}
+                    value={dayjs(variable.default_value)}
                     updateVariable={(date) => {
                         updateVariable({ ...variable, default_value: date })
                         // calendar is a special case to reuse LemonCalendarSelect

diff --git a/frontend/src/queries/nodes/DataVisualization/Components/Variables/VariableCalendar.tsx b/frontend/src/queries/nodes/DataVisualization/Components/Variables/VariableCalendar.tsx
@@ -2,33 +2,22 @@ import { LemonCalendarSelect } from '@posthog/lemon-ui'
 import { dayjs } from 'lib/dayjs'
 import { useState } from 'react'
 
-import { DateVariable } from '../../types'
-
 export const VariableCalendar = ({
-    variable,
+    value,
     updateVariable,
-    showDefault = false,
 }: {
-    variable: DateVariable
+    value: dayjs.Dayjs
     updateVariable: (date: string) => void
-    showDefault?: boolean
 }): JSX.Element => {
     const [calendarTime, setCalendarTime] = useState(() => {
-        const dateToCheck = showDefault || !variable.value ? variable.default_value : variable.value
-        if (!dateToCheck) {
-            return false
-        }
         // Check if the date string contains time information (HH:mm or HH:mm:ss)
-        return /\d{2}:\d{2}(:\d{2})?/.test(dateToCheck)
+        return /\d{2}:\d{2}(:\d{2})?/.test(value.format('YYYY-MM-DD HH:mm:00'))
     })
 
-    const [date, setDate] = useState(showDefault ? dayjs(variable.default_value) : dayjs(variable.value))
-
     return (
         <LemonCalendarSelect
-            value={date}
+            value={value}
             onChange={(date) => {
-                setDate(date)
                 updateVariable(
                     calendarTime ? date?.format('YYYY-MM-DD HH:mm:00') ?? '' : date?.format('YYYY-MM-DD') ?? ''
                 )

diff --git a/frontend/src/queries/nodes/DataVisualization/Components/Variables/Variables.tsx b/frontend/src/queries/nodes/DataVisualization/Components/Variables/Variables.tsx
@@ -179,7 +179,7 @@ const VariableInput = ({
                 )}
                 {variable.type === 'Date' && (
                     <VariableCalendar
-                        variable={variable}
+                        value={dayjs(localInputValue)}
                         updateVariable={(date) => {
                             onChange(variable.id, date)
                             closePopover()