-
Notifications
You must be signed in to change notification settings - Fork 352
/
useSearchTime.ts
127 lines (113 loc) · 2.97 KB
/
useSearchTime.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import {
DateRangePreset,
presetStartDate,
presetValue,
} from '@highlight-run/ui/components'
import moment from 'moment'
import { useCallback, useEffect, useState } from 'react'
import { DateTimeParam, StringParam, useQueryParams } from 'use-query-params'
export interface UseSearchTimeReturnValue {
startDate: Date
endDate: Date
selectedPreset?: DateRangePreset
rebaseSearchTime: () => void
updateSearchTime: (start: Date, end: Date, preset?: DateRangePreset) => void
resetSearchTime: () => void
}
type UseSearchTimeProps = {
presets: DateRangePreset[]
initialPreset?: DateRangePreset
}
export function useSearchTime({
presets,
initialPreset,
}: UseSearchTimeProps): UseSearchTimeReturnValue {
const defaultPreset = initialPreset ?? presets[0]
const [params, setParams] = useQueryParams({
relative_time: StringParam,
start_date: DateTimeParam,
end_date: DateTimeParam,
})
const findPreset = useCallback(
(value?: string | null): DateRangePreset => {
if (!value) {
return defaultPreset
}
const foundPreset = presets.find(
(preset) => presetValue(preset) === value,
)
return foundPreset || defaultPreset
},
[defaultPreset, presets],
)
// initalize state to url params
const useRelativeTime =
params.relative_time || !params.start_date || !params.end_date
const [selectedPreset, setSelectedPreset] = useState<
DateRangePreset | undefined
>(useRelativeTime ? findPreset(params.relative_time) : undefined)
const [endDate, setEndDate] = useState<Date>(
useRelativeTime ? moment().toDate() : new Date(params.end_date!),
)
const [startDate, setStartDate] = useState<Date>(
useRelativeTime
? presetStartDate(selectedPreset ?? defaultPreset)
: new Date(params.start_date!),
)
const updateSearchTime = (
start: Date,
end: Date,
preset?: DateRangePreset,
) => {
setStartDate(start)
setEndDate(end)
setSelectedPreset(preset)
}
const resetSearchTime = () => {
const start = presetStartDate(defaultPreset)
const end = moment().toDate()
updateSearchTime(start, end, defaultPreset)
}
const rebaseSearchTime = useCallback(() => {
if (selectedPreset) {
setStartDate(presetStartDate(selectedPreset))
setEndDate(moment().toDate())
}
}, [selectedPreset])
// keep url values in sync with query params
useEffect(() => {
if (selectedPreset) {
let selectedPresetValue: string | undefined =
presetValue(selectedPreset)
if (selectedPresetValue === presetValue(defaultPreset)) {
selectedPresetValue = undefined
}
setParams(
{
relative_time: selectedPresetValue,
start_date: undefined,
end_date: undefined,
},
'replaceIn',
)
} else {
setParams(
{
relative_time: undefined,
start_date: startDate,
end_date: endDate,
},
'replaceIn',
)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [startDate, endDate, selectedPreset])
return {
startDate,
endDate,
selectedPreset,
rebaseSearchTime,
updateSearchTime,
resetSearchTime,
}
}