From 5b83238776199b6af83932d164b72d436d5f0417 Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 13 Dec 2024 13:12:38 +0100 Subject: [PATCH 1/5] :bug: Timeline startDate defaulted to current Date when later than current day --- .../src/timeline/hooks/useTimelineRows.ts | 34 ++++++++++++++----- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/@navikt/core/react/src/timeline/hooks/useTimelineRows.ts b/@navikt/core/react/src/timeline/hooks/useTimelineRows.ts index 50f41c2654..efee837463 100644 --- a/@navikt/core/react/src/timeline/hooks/useTimelineRows.ts +++ b/@navikt/core/react/src/timeline/hooks/useTimelineRows.ts @@ -134,17 +134,33 @@ export const useTimelineRows = ( [rows, startDate, endDate, direction], ); -const earliestDate = (earliest: Date, period: Period) => - period.start < earliest ? period.start : earliest; +export const useEarliestDate = ({ + startDate, + rows, +}: { + startDate?: Date; + rows: Omit[][]; +}) => + useMemo(() => { + if (startDate) { + return startDate; + } -const earliestFomDate = (rader: Period[][]) => - rader.flat().reduce(earliestDate, new Date()); + const startDates = rows + .flat() + .filter((period) => period.start) + .map((period) => period.start); -export const useEarliestDate = ({ startDate, rows }: any) => - useMemo( - () => (startDate ? startDate : earliestFomDate(rows)), - [startDate, rows], - ); + if (startDates.length === 0) { + return new Date(); + } + + const earliestDate = startDates.reduce((earliest, current) => + current < earliest ? current : earliest, + ); + + return earliestDate; + }, [startDate, rows]); const latestDate = (latest: Date, period: Period) => period.end > latest ? period.end : latest; From 32280cc6a5d6ceafa6f3ac7b045d8eeae9db59d8 Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 13 Dec 2024 13:21:21 +0100 Subject: [PATCH 2/5] :test_tube: Added tests --- .../timeline/tests/useTimelineRows.test.ts | 133 ++++++++++++++++++ 1 file changed, 133 insertions(+) create mode 100644 @navikt/core/react/src/timeline/tests/useTimelineRows.test.ts diff --git a/@navikt/core/react/src/timeline/tests/useTimelineRows.test.ts b/@navikt/core/react/src/timeline/tests/useTimelineRows.test.ts new file mode 100644 index 0000000000..549b8eaea2 --- /dev/null +++ b/@navikt/core/react/src/timeline/tests/useTimelineRows.test.ts @@ -0,0 +1,133 @@ +import { renderHook } from "@testing-library/react"; +import { addDays, isSameDay } from "date-fns"; +import { describe, expect, test } from "vitest"; +import { + useEarliestDate, + useLatestDate, + useTimelineRows, +} from "../hooks/useTimelineRows"; + +describe("useEarliestDate", () => { + test("returns the provided startDate if it exists", () => { + const startDate = new Date(2023, 0, 1); + const { result } = renderHook(() => + useEarliestDate({ startDate, rows: [] }), + ); + expect(result.current).toEqual(startDate); + }); + + test("returns the earliest date from the rows if startDate is not provided", () => { + const rows = [ + [{ start: new Date(2023, 0, 1) }], + [{ start: new Date(2022, 0, 1) }], + ]; + + /* @ts-expect-error asdas */ + const { result } = renderHook(() => useEarliestDate({ rows })); + expect(result.current).toEqual(new Date(2022, 0, 1)); + }); + + test("returns the earliest date from the rows if startDate is not provided and date is later than todays date", () => { + const earliestDate = addDays(new Date(), 400); + const rows = [ + [{ start: earliestDate }], + [{ start: addDays(earliestDate, 40) }], + ]; + + /* @ts-expect-error asdas */ + const { result } = renderHook(() => useEarliestDate({ rows })); + expect(result.current).toEqual(earliestDate); + }); + + test("returns the current date if no startDate and rows are empty", () => { + const { result } = renderHook(() => useEarliestDate({ rows: [] })); + expect(isSameDay(result.current, new Date())).toBeTruthy(); + }); +}); + +describe("useLatestDate", () => { + test("returns the provided endDate if it exists", () => { + const endDate = new Date(2023, 0, 1); + const { result } = renderHook(() => useLatestDate({ endDate, rows: [] })); + expect(result.current).toEqual(endDate); + }); + + test("returns the latest date from the rows plus one day if endDate is not provided", () => { + const rows = [ + [{ start: new Date(2023, 0, 1), end: new Date(2023, 0, 10) }], + [{ start: new Date(2022, 0, 1), end: new Date(2022, 0, 5) }], + ]; + const { result } = renderHook(() => useLatestDate({ rows })); + expect(result.current).toEqual(addDays(new Date(2023, 0, 10), 1)); + }); + + test("returns the current date plus one day if no endDate and rows are empty", () => { + const { result } = renderHook(() => useLatestDate({ rows: [] })); + expect(result.current).toEqual(addDays(new Date(0), 1)); + }); +}); + +describe("useTimelineRows", () => { + const rows = [ + { + label: "Row 1", + periods: [ + { + start: new Date(2023, 0, 1), + end: new Date(2023, 0, 10), + status: "active", + }, + { + start: new Date(2023, 0, 15), + end: new Date(2023, 0, 20), + status: "inactive", + }, + ], + }, + { + label: "Row 2", + periods: [ + { + start: new Date(2022, 0, 1), + end: new Date(2022, 0, 5), + status: "active", + }, + ], + }, + ]; + + test("returns the correct timeline rows", () => { + const startDate = new Date(2022, 0, 1); + const endDate = new Date(2023, 0, 31); + const direction = "left"; + const { result } = renderHook(() => + useTimelineRows(rows, startDate, endDate, direction), + ); + + expect(result.current).toHaveLength(2); + expect(result.current[0].periods).toHaveLength(2); + expect(result.current[1].periods).toHaveLength(1); + }); + + test("handles empty rows", () => { + const startDate = new Date(2022, 0, 1); + const endDate = new Date(2023, 0, 31); + const direction = "left"; + const { result } = renderHook(() => + useTimelineRows([], startDate, endDate, direction), + ); + + expect(result.current).toHaveLength(0); + }); + + test("handles different directions", () => { + const startDate = new Date(2022, 0, 1); + const endDate = new Date(2023, 0, 31); + const direction = "right"; + const { result } = renderHook(() => + useTimelineRows(rows, startDate, endDate, direction), + ); + + expect(result.current[0].periods[0].start).toEqual(new Date(2023, 0, 15)); + }); +}); From c4ba9cd1eb8abf2e9ba38f5399313e4a14c0c42b Mon Sep 17 00:00:00 2001 From: Ken <26967723+KenAJoh@users.noreply.github.com> Date: Mon, 16 Dec 2024 16:03:20 +0100 Subject: [PATCH 3/5] Update @navikt/core/react/src/timeline/hooks/useTimelineRows.ts Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --- @navikt/core/react/src/timeline/hooks/useTimelineRows.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/react/src/timeline/hooks/useTimelineRows.ts b/@navikt/core/react/src/timeline/hooks/useTimelineRows.ts index efee837463..7701b6f5bd 100644 --- a/@navikt/core/react/src/timeline/hooks/useTimelineRows.ts +++ b/@navikt/core/react/src/timeline/hooks/useTimelineRows.ts @@ -139,7 +139,7 @@ export const useEarliestDate = ({ rows, }: { startDate?: Date; - rows: Omit[][]; + rows: Pick[][]; }) => useMemo(() => { if (startDate) { From 1928dab54587dc1410cbce1d392ce5e869fefa95 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 16 Dec 2024 16:22:22 +0100 Subject: [PATCH 4/5] :fire: Removed old exceptions --- @navikt/core/react/src/timeline/tests/useTimelineRows.test.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/@navikt/core/react/src/timeline/tests/useTimelineRows.test.ts b/@navikt/core/react/src/timeline/tests/useTimelineRows.test.ts index 549b8eaea2..06ea76ee50 100644 --- a/@navikt/core/react/src/timeline/tests/useTimelineRows.test.ts +++ b/@navikt/core/react/src/timeline/tests/useTimelineRows.test.ts @@ -22,7 +22,6 @@ describe("useEarliestDate", () => { [{ start: new Date(2022, 0, 1) }], ]; - /* @ts-expect-error asdas */ const { result } = renderHook(() => useEarliestDate({ rows })); expect(result.current).toEqual(new Date(2022, 0, 1)); }); @@ -34,7 +33,6 @@ describe("useEarliestDate", () => { [{ start: addDays(earliestDate, 40) }], ]; - /* @ts-expect-error asdas */ const { result } = renderHook(() => useEarliestDate({ rows })); expect(result.current).toEqual(earliestDate); }); From f381fae779162f22f6a4bfd9f7af333879e6cd1b Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 16 Dec 2024 20:39:51 +0100 Subject: [PATCH 5/5] :memo: Changeset --- .changeset/wise-worms-destroy.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wise-worms-destroy.md diff --git a/.changeset/wise-worms-destroy.md b/.changeset/wise-worms-destroy.md new file mode 100644 index 0000000000..7fd688cd41 --- /dev/null +++ b/.changeset/wise-worms-destroy.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": patch +--- + +Timeline: In cases where earliest found date were after current date, timeline-start ended up defaulting to current date.