fix(time): Fix tz issues

SocialChangeLab · Aug 31, 2024 · 6dfcb10 · 6dfcb10
1 parent b0ac566
commit 6dfcb10
Show file tree

Hide file tree

Showing 23 changed files with 224 additions and 190 deletions.
diff --git a/frontend-nextjs/src/appProviders.tsx b/frontend-nextjs/src/appProviders.tsx
@@ -6,7 +6,7 @@ import CustomQueryClientProvider from "./components/QueryClientProvider";
 import { FiltersStoreProvider } from "./providers/FiltersStoreProvider";
 import { TodayProvider } from "./providers/TodayProvider";
 import { UiStoreProvider } from "./providers/UiStoreProvider";
-import { defaultInitState } from "./stores/filtersStore";
+import { getDefaultInitState } from "./stores/filtersStore";
 
 function Providers({
 	children,
@@ -15,10 +15,11 @@ function Providers({
 	return (
 		<CustomQueryClientProvider>
 			<FiltersStoreProvider
+				today={today}
 				initialState={{
-					...defaultInitState,
-					defaultTo: endOfDay(subDays(today, 1)),
+					...getDefaultInitState(today),
 					defaultFrom: startOfDay(subMonths(startOfDay(today), 2)),
+					defaultTo: endOfDay(subDays(today, 1)),
 				}}
 			>
 				<TodayProvider value={today}>

diff --git a/frontend-nextjs/src/components/DraggableTimeFilterRange.tsx b/frontend-nextjs/src/components/DraggableTimeFilterRange.tsx
@@ -11,7 +11,7 @@ import { isInSameAggregationUnit } from "@/utility/useTimeIntervals";
 import useDebounce from "@custom-react-hooks/use-debounce";
 import useElementSize from "@custom-react-hooks/use-element-size";
 import { type Ranger, useRanger } from "@tanstack/react-ranger";
-import { addDays, differenceInDays, startOfDay } from "date-fns";
+import { addDays, compareAsc, differenceInDays } from "date-fns";
 import {
 	type KeyboardEvent as ReactKeyboardEvent,
 	type MouseEvent as ReactMouseEvent,
@@ -33,13 +33,13 @@ function DraggableTimeFilterRange() {
 	const rangerRef = useRef<HTMLDivElement>(null);
 	const midSegmentRef = useRef<HTMLButtonElement>(null);
 	const { from, to, setDateRange } = useFiltersStore((state) => ({
-		from: state.from,
-		to: state.to,
+		from: dateToComparableDateItem(state.from),
+		to: dateToComparableDateItem(state.to),
 		setDateRange: state.setDateRange,
 	}));
 	const { today, datasetStartDate, datasetEndDate } = useToday();
 	const amountOfDays = differenceInDays(datasetEndDate, datasetStartDate) + 1;
-	const intervals = new Array(amountOfDays)
+	const intervals = new Array(Math.abs(amountOfDays))
 		.fill(null)
 		.map((_, i) =>
 			dateToComparableDateItem(addDays(datasetStartDate, i), today),
@@ -50,14 +50,14 @@ function DraggableTimeFilterRange() {
 	const indexOfFrom = useMemo(
 		() =>
 			intervals.findIndex((d) =>
-				isInSameAggregationUnit("day", d, startOfDay(from)),
+				isInSameAggregationUnit("day", d, from),
 			),
 		[from, intervals],
 	);
 	const indexOfTo = useMemo(
 		() =>
 			intervals.findIndex((d) =>
-				isInSameAggregationUnit("day", d, startOfDay(to)),
+				isInSameAggregationUnit("day", d, to),
 			),
 		[to, intervals],
 	);
@@ -90,11 +90,11 @@ function DraggableTimeFilterRange() {
 			intervals[vals[0]] ?? intervals[0],
 			intervals[vals[1]] ?? intervals[intervals.length - 1],
 		]
-			.map((d) => d.time)
-			.sort();
+			.map((d) => new Date(d.time))
+			.sort(compareAsc);
 
 		setTempValues(vals);
-		setDateRange({ from: new Date(from), to: new Date(to) });
+		setDateRange({ from, to });
 	}, []);
 
 	const onChange = useCallback(
@@ -194,8 +194,8 @@ function DraggableTimeFilterRange() {
 		[handleSegmentDrag, onValuesChange, values, startDragging],
 	);
 
-	const handles = rangerInstance.handles().slice(0, 2);
-	const steps = rangerInstance.getSteps().slice(0, 3);
+	const handles = rangerInstance.handles()
+	const steps = rangerInstance.getSteps();
 	return (
 		<div
 			className={cn(
@@ -211,7 +211,7 @@ function DraggableTimeFilterRange() {
 					"relative select-none h-full",
 				)}
 			>
-				{steps.map(({ left, width }, i) => (
+				{steps.slice(0, 3).map(({ left, width }, i) => (
 					<button
 						type="button"
 						// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
@@ -221,22 +221,23 @@ function DraggableTimeFilterRange() {
 							`draggable-time-filter-range-segment`,
 							`absolute h-full w-full left-0 top-0`,
 							i === 1 &&
-								`ring-[1px] ring-grayMed focusable focus-visible:rounded-sm`,
+							`ring-[1px] ring-grayMed focusable focus-visible:rounded-sm`,
 							i !== 1 &&
-								`bg-grayUltraLight mix-blend-multiply dark:mix-blend-screen`,
+							`bg-grayUltraLight mix-blend-multiply dark:mix-blend-screen`,
 						)}
 						tabIndex={i === 1 ? 0 : -1}
 						onMouseDown={(e) => handleSegmentPress(e)}
 						onTouchStart={(e) => handleSegmentPress(e)}
 						style={{ left: `${left}%`, width: `${width}%` }}
 					/>
 				))}
-				{handles.map((props, i) => {
-					const val = intervals[props.value];
+				{handles.slice(0, 2).map((props, i) => {
+					const val = intervals[Math.max(0, Math.min(intervals.length - 1, props.value))];
+					if (!val) return null;
 					return (
 						<Handle
 							{...props}
-							key={`handle-${val?.time ?? ""}`}
+							key={`handle-${val.time}-${val.year}-${val.month}-${val.day}-${i}`}
 							comparableDateObject={val}
 							rangerInstance={rangerInstance}
 							isDragging={isDragging}
@@ -357,10 +358,10 @@ const HandleTooptip = memo(
 					isDragging && `opacity-100`,
 					isDragging && isStart && `-translate-y-1`,
 					isStart &&
-						`[.draggable-time-filter-range:has(.draggable-time-filter-range-segment:hover)_&]:-translate-y-1`,
+					`[.draggable-time-filter-range:has(.draggable-time-filter-range-segment:hover)_&]:-translate-y-1`,
 					isDragging && !isStart && `translate-y-1`,
 					!isStart &&
-						`[.draggable-time-filter-range:has(.draggable-time-filter-range-segment:hover)_&]:translate-y-1`,
+					`[.draggable-time-filter-range:has(.draggable-time-filter-range-segment:hover)_&]:translate-y-1`,
 				)}
 			>
 				{formattedDate.split(" ").map((part, i) => (

diff --git a/frontend-nextjs/src/components/EventsTimeline/EventsTimeline.tsx b/frontend-nextjs/src/components/EventsTimeline/EventsTimeline.tsx
@@ -1,10 +1,8 @@
 "use client";
 import LoadingEventsTimeline from "@/components/EventsTimeline/LoadingEventsTimeline";
-import { useToday } from "@/providers/TodayProvider";
 import { cn } from "@/utility/classNames";
 import {
-	type ComparableDateItemType,
-	dateToComparableDateItem,
+	type ComparableDateItemType
 } from "@/utility/comparableDateItemSchema";
 import { format } from "@/utility/dateUtil";
 import { parseErrorMessage } from "@/utility/errorHandlingUtil";
@@ -44,7 +42,7 @@ function EventsTimeline({
 		data,
 		aggregationUnit,
 	});
-	const { today } = useToday();
+	// const { today } = useToday();
 	const dataSourceInsertions: DataSourceInsertionType[] = [
 		// {
 		// 	date: dateToComparableDateItem(
@@ -68,16 +66,17 @@ function EventsTimeline({
 			<EventsTimelineScrollWrapper>
 				<EventsTimelineChartWrapper columnsCount={columnsCount + 1}>
 					{eventColumns.map(
-						({
-							time,
-							date,
-							eventsWithSize,
-							sumSize,
-							combinedOrganizers,
-							combinedSelectedOrganizers,
-						}) => {
+						(props) => {
+							const {
+								time,
+								date,
+								eventsWithSize,
+								sumSize,
+								combinedOrganizers,
+								combinedSelectedOrganizers,
+							} = props;
 							const insertedDataSource = dataSourceInsertions.find((d) =>
-								isInSameAggregationUnit(aggregationUnit, d.date, date),
+								isInSameAggregationUnit(aggregationUnit, d.date, props),
 							);
 							const indexOfDataSourceInsertion = dataSourceInsertions.findIndex(
 								(d) => d === insertedDataSource,
@@ -96,7 +95,7 @@ function EventsTimeline({
 												"w-px h-full absolute top-0 left-1/2 -translate-x-1/2 pointer-events-none",
 												"bg-grayLight group-hover:opacity-50 event-line opacity-0 transition-opacity",
 												insertedDataSource &&
-													"opacity-100 group-hover:opacity-100 bg-gradient-to-t via-grayLight from-grayUltraLight to-fg",
+												"opacity-100 group-hover:opacity-100 bg-gradient-to-t via-grayLight from-grayUltraLight to-fg",
 											)}
 											aria-hidden={!insertedDataSource}
 										>

diff --git a/frontend-nextjs/src/components/EventsTimeline/LoadingEventsTimeline.tsx b/frontend-nextjs/src/components/EventsTimeline/LoadingEventsTimeline.tsx
@@ -23,11 +23,10 @@ const sizeScale = scalePow(
 
 const LoadingEventsTimeline = memo(() => {
 	const [parentRef, size] = useElementSize();
-	const { today } = useToday();
-	const startDate = new Date("2023-01-01T00:00:00.000Z");
+	const { today, datasetStartDate } = useToday();
 	const intervals = Array.from({ length: 30 }, (_, idx) => idx + 1).reduce(
 		(acc, idx) =>
-			acc.concat(dateToComparableDateItem(addDays(startDate, idx), today)),
+			acc.concat(dateToComparableDateItem(addDays(datasetStartDate, idx), today)),
 		[] as ComparableDateItemType[],
 	);
 

diff --git a/frontend-nextjs/src/components/EventsTimeline/useTimelineEvents.ts b/frontend-nextjs/src/components/EventsTimeline/useTimelineEvents.ts
@@ -1,9 +1,9 @@
+import { ComparableDateItemType } from "@/utility/comparableDateItemSchema";
 import type { OrganisationType, ParsedEventType } from "@/utility/eventsUtil";
 import type { UseEventsReturnType } from "@/utility/useEvents";
 import useTimeIntervals, {
 	isInSameAggregationUnit,
 } from "@/utility/useTimeIntervals";
-import useTimeScale from "@/utility/useTimeScale";
 import { scalePow } from "d3-scale";
 import { useCallback, useMemo } from "react";
 import defaultConfig from "./eventsTimelineConfig";
@@ -49,19 +49,18 @@ function useTimelineEvents({
 	};
 }) {
 	const intervals = useTimeIntervals({ aggregationUnit, from, to });
-	const timeScale = useTimeScale(size.width);
 	const columnsCount = intervals.length;
 	const isInSameUnit = useCallback(
-		(event: ParsedEventType, b: Date) =>
+		(event: ParsedEventType, b: ComparableDateItemType) =>
 			isInSameAggregationUnit(aggregationUnit, event, b),
 		[aggregationUnit],
 	);
 
-	const eventColumns = useMemo(() => {
-		if (!timeScale || !data?.eventsByOrgs || !data?.organisations) return [];
+	const eventColumnsWithoutOrgs = useMemo(() => {
+		if (!data?.allEvents) return [];
 		return intervals.map((comparableDateObject) => {
-			const columnEvents = data.eventsByOrgs.filter((evt) =>
-				isInSameUnit(evt, comparableDateObject.date),
+			const columnEvents = data.allEvents.filter((evt) =>
+				isInSameUnit(evt, comparableDateObject),
 			);
 			const eventsWithSize = columnEvents.sort((a, b) => {
 				const aSize = a.size_number ?? 0;
@@ -78,21 +77,22 @@ function useTimelineEvents({
 				sumSize: columnEvents.reduce((acc, evt) => {
 					return acc + (evt.size_number ?? 0);
 				}, 0),
-				combinedOrganizers: combineOrganizers(columnEvents, data.organisations),
-				combinedSelectedOrganizers: combineOrganizers(
-					columnEvents,
-					data.selectedOrganisations,
-				),
-			};
-		});
-	}, [
-		data?.eventsByOrgs,
-		timeScale,
-		intervals,
-		isInSameUnit,
-		data?.organisations,
-		data?.selectedOrganisations,
-	]);
+				columnEvents,
+			}
+		})
+	}, [data.allEvents, intervals, isInSameUnit])
+
+	const eventColumns = useMemo(() => {
+		if (!data?.organisations) return [];
+		return eventColumnsWithoutOrgs.map((d) => ({
+			...d,
+			combinedOrganizers: combineOrganizers(d.columnEvents, data.organisations),
+			combinedSelectedOrganizers: combineOrganizers(
+				d.columnEvents,
+				data.selectedOrganisations,
+			),
+		}));
+	}, [data.organisations, data.selectedOrganisations, eventColumnsWithoutOrgs]);
 
 	const sizeScale = useMemo(() => {
 		const displayedEvents = eventColumns.reduce((acc, day) => {

diff --git a/frontend-nextjs/src/providers/FiltersStoreProvider.tsx b/frontend-nextjs/src/providers/FiltersStoreProvider.tsx
@@ -6,7 +6,7 @@ import { type StoreApi, useStore } from "zustand";
 import {
 	type FiltersStore,
 	createFiltersStore,
-	defaultInitState,
+	getDefaultInitState,
 } from "@/stores/filtersStore";
 
 export const FiltersStoreContext = createContext<StoreApi<FiltersStore> | null>(
@@ -16,17 +16,20 @@ export const FiltersStoreContext = createContext<StoreApi<FiltersStore> | null>(
 export interface FiltersStoreProviderProps {
 	children: ReactNode;
 	initialState?: Partial<FiltersStore>;
+	today: Date;
 }
 
 export const FiltersStoreProvider = ({
 	children,
-	initialState = defaultInitState,
+	today,
+	initialState
 }: FiltersStoreProviderProps) => {
+	const defaultInitState = getDefaultInitState(today);
 	const storeRef = useRef<StoreApi<FiltersStore>>();
 	if (!storeRef.current) {
-		storeRef.current = createFiltersStore({
+		storeRef.current = createFiltersStore(today, {
 			...defaultInitState,
-			...initialState,
+			...(initialState || {}),
 		});
 	}
 

diff --git a/frontend-nextjs/src/providers/TodayProvider.tsx b/frontend-nextjs/src/providers/TodayProvider.tsx
@@ -1,13 +1,19 @@
 import { endOfDay, parse, startOfDay, subDays } from "date-fns";
 import { createContext, useContext } from "react";
 
+export function getDatasetRange(today: Date) {
+	return {
+		datasetStartDate: startOfDay(parse("01-01-2020", "dd-MM-yyyy", today)),
+		datasetEndDate: endOfDay(subDays(today, 1)),
+	}
+}
+
 const todayContext = createContext(new Date());
 export const TodayProvider = todayContext.Provider;
 export const useToday = () => {
 	const today = useContext(todayContext);
 	return {
 		today,
-		datasetStartDate: startOfDay(parse("01-01-2020", "dd-MM-yyyy", today)),
-		datasetEndDate: endOfDay(subDays(today, 1)),
+		...getDatasetRange(today),
 	};
 };