openstatus.dev
Openstatus
www.openstatus.dev
fix: wrong date (#185)
authored by
Maximilian Kaske
and committed by
GitHub
aa612ca4
67ce0dbf
+32
-14
+25
-6
apps/web/src/components/data-table/data-table-date-ranger-picker.tsx
+25
-6
apps/web/src/components/data-table/data-table-date-ranger-picker.tsx
···
2
2
3
3
import * as React from "react";
4
4
import { usePathname, useRouter, useSearchParams } from "next/navigation";
5
-
import { format } from "date-fns";
5
+
import { addDays, format } from "date-fns";
6
6
import { Calendar as CalendarIcon } from "lucide-react";
7
7
import type { DateRange } from "react-day-picker";
8
8
···
49
49
id="date"
50
50
variant="outline"
51
51
className={cn(
52
-
"w-[250px] justify-start text-left font-normal",
52
+
"w-[260px] justify-start text-left font-normal",
53
53
!date && "text-muted-foreground",
54
54
)}
55
55
>
···
74
74
mode="range"
75
75
defaultMonth={date?.from}
76
76
selected={date}
77
-
onSelect={(e) => {
78
-
setDate(e);
77
+
onSelect={(value) => {
78
+
setDate(value);
79
+
const { fromDate, toDate } = manipulateDate(value);
80
+
79
81
const searchParams = updateSearchParams({
80
-
fromDate: e?.from?.getTime() || null,
81
-
toDate: e?.to?.getTime() || null,
82
+
fromDate,
83
+
toDate,
82
84
});
83
85
router.replace(`${pathname}?${searchParams}`);
84
86
}}
···
88
90
</div>
89
91
);
90
92
}
93
+
94
+
/**
95
+
* Whenever you select a date, it will use the midnight timestamp of that date.
96
+
* We need to add a day minus one second to include the whole day.
97
+
*/
98
+
function manipulateDate(date?: DateRange | null) {
99
+
const isToDateMidnight = String(date?.to?.getTime()).endsWith("00000");
100
+
101
+
const addOneDayToDate = date?.to
102
+
? addDays(new Date(date.to), 1).getTime() - 1
103
+
: null;
104
+
105
+
return {
106
+
fromDate: date?.from?.getTime() || null,
107
+
toDate: isToDateMidnight ? addOneDayToDate : date?.to?.getTime() || null,
108
+
};
109
+
}
+7
-8
apps/web/src/components/data-table/data-table-toolbar.tsx
+7
-8
apps/web/src/components/data-table/data-table-toolbar.tsx
···
26
26
<DataTableFacetedFilter
27
27
column={table.getColumn("region")}
28
28
title="Region"
29
-
options={Object.keys(regionsDict).map((key) => ({
30
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
31
-
// @ts-expect-error
32
-
label: regionsDict[key].location,
33
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
34
-
// @ts-expect-error
35
-
value: regionsDict[key].code,
36
-
}))}
29
+
options={Object.keys(regionsDict).map((key) => {
30
+
const typedKey = key as keyof typeof regionsDict;
31
+
return {
32
+
label: regionsDict[typedKey].location,
33
+
value: regionsDict[typedKey].code,
34
+
};
35
+
})}
37
36
/>
38
37
)}
39
38
{isFiltered && (