From bab5326d7c0a40050d3fb3185663199b9983c956 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 4 Dec 2025 19:22:28 +0200 Subject: [PATCH] refactor(react/launch_bar): use different mechanism for gathering calendar info --- .../src/widgets/launch_bar/CalendarWidget.tsx | 71 ++--------------- .../widgets/launch_bar/CalendarWidgetUtils.ts | 76 +++++++++++++++++++ 2 files changed, 84 insertions(+), 63 deletions(-) create mode 100644 apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts diff --git a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx index ca562bb38..1e149041c 100644 --- a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx +++ b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx @@ -8,6 +8,7 @@ import { VNode } from "preact"; import clsx from "clsx"; import "./CalendarWidget.css"; import server from "../../services/server"; +import { getMonthInformation } from "./CalendarWidgetUtils"; interface DateNotesForMonth { [date: string]: string; @@ -45,19 +46,19 @@ function Calendar({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: const month = date.format('YYYY-MM'); const firstDay = date.startOf('month'); const firstDayISO = firstDay.isoWeekday(); + const monthInfo = getMonthInformation(date, firstDayISO, firstDayOfWeekISO); return (
- {firstDayISO !== firstDayOfWeekISO && } - - + {firstDayISO !== firstDayOfWeekISO && } + +
) } -function PreviousMonthDays({ date, firstDayISO, firstDayOfWeekISO }: { date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number }) { +function PreviousMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) { const prevMonth = date.subtract(1, 'month').format('YYYY-MM'); - const { weekNumber, dates } = getPrevMonthDays(date, firstDayISO, firstDayOfWeekISO); const [ dateNotesForPrevMonth, setDateNotesForPrevMonth ] = useState(); useEffect(() => { @@ -69,18 +70,13 @@ function PreviousMonthDays({ date, firstDayISO, firstDayOfWeekISO }: { date: Day )); } -function CurrentMonthDays({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) { - const dates = getCurMonthDays(date, firstDayOfWeekISO); - +function CurrentMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) { return dates.map(date => ( )); } -function NextMonthDays({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) { - const lastDayOfMonth = date.endOf('month'); - const lastDayISO = lastDayOfMonth.isoWeekday(); - const lastDayOfUserWeek = ((firstDayOfWeekISO + 6 - 1) % 7) + 1; +function NextMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) { const nextMonth = date.add(1, 'month').format('YYYY-MM'); const [ dateNotesForNextMonth, setDateNotesForNextMonth ] = useState(); @@ -88,7 +84,6 @@ function NextMonthDays({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWee server.get(`special-notes/notes-for-month/${nextMonth}`).then(setDateNotesForNextMonth); }, [ date ]); - const dates = lastDayISO !== lastDayOfUserWeek ? getNextMonthDays(date, lastDayISO, firstDayOfWeekISO) : []; return dates.map(date => ( )); @@ -107,53 +102,3 @@ function CalendarDay({ date, dateNotesForMonth, className }: { date: Dayjs, date ); } -function getPrevMonthDays(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number): { weekNumber: number, dates: Dayjs[] } { - const prevMonthLastDay = date.subtract(1, 'month').endOf('month'); - const daysToAdd = (firstDayISO - firstDayOfWeekISO + 7) % 7; - const dates: Dayjs[] = []; - - const firstDay = date.startOf('month'); - const weekNumber = getWeekNumber(firstDay, firstDayOfWeekISO); - - // Get dates from previous month - for (let i = daysToAdd - 1; i >= 0; i--) { - dates.push(prevMonthLastDay.subtract(i, 'day')); - } - - return { weekNumber, dates }; -} - -function getCurMonthDays(date: Dayjs, firstDayOfWeekISO: number) { - let dateCursor = date; - const currentMonth = date.month(); - const dates: Dayjs[] = []; - while (dateCursor.month() === currentMonth) { - dates.push(dateCursor); - dateCursor = dateCursor.add(1, "day"); - } - return dates; -} - -function getNextMonthDays(date: Dayjs, lastDayISO: number, firstDayOfWeekISO): Dayjs[] { - const nextMonthFirstDay = date.add(1, 'month').startOf('month'); - const dates: Dayjs[] = []; - - const lastDayOfUserWeek = ((firstDayOfWeekISO + 6 - 1) % 7) + 1; // ISO wrap - const daysToAdd = (lastDayOfUserWeek - lastDayISO + 7) % 7; - - for (let i = 0; i < daysToAdd; i++) { - dates.push(nextMonthFirstDay.add(i, 'day')); - } - return dates; -} - -function getWeekNumber(date: Dayjs, firstDayOfWeekISO: number): number { - const weekStart = getWeekStartDate(date, firstDayOfWeekISO); - return weekStart.isoWeek(); -} - -function getWeekStartDate(date: Dayjs, firstDayOfWeekISO: number): Dayjs { - const currentISO = date.isoWeekday(); - const diff = (currentISO - firstDayOfWeekISO + 7) % 7; - return date.clone().subtract(diff, "day").startOf("day"); -} diff --git a/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts b/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts new file mode 100644 index 000000000..16d057107 --- /dev/null +++ b/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts @@ -0,0 +1,76 @@ +import { Dayjs } from "@triliumnext/commons"; + +interface DateRangeInfo { + weekNumbers: number[]; + dates: Dayjs[]; +} + +export function getMonthInformation(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number) { + return { + prevMonth: getPrevMonthDays(date, firstDayISO, firstDayOfWeekISO), + currentMonth: getCurMonthDays(date, firstDayOfWeekISO), + nextMonth: getNextMonthDays(date, firstDayOfWeekISO) + } +} + +function getPrevMonthDays(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number): DateRangeInfo { + const prevMonthLastDay = date.subtract(1, 'month').endOf('month'); + const daysToAdd = (firstDayISO - firstDayOfWeekISO + 7) % 7; + const dates: Dayjs[] = []; + + const firstDay = date.startOf('month'); + const weekNumber = getWeekNumber(firstDay, firstDayOfWeekISO); + + // Get dates from previous month + for (let i = daysToAdd - 1; i >= 0; i--) { + dates.push(prevMonthLastDay.subtract(i, 'day')); + } + + return { weekNumbers: [ weekNumber ], dates }; +} + +function getCurMonthDays(date: Dayjs, firstDayOfWeekISO: number): DateRangeInfo { + let dateCursor = date; + const currentMonth = date.month(); + const dates: Dayjs[] = []; + const weekNumbers: number[] = []; + while (dateCursor.month() === currentMonth) { + const weekNumber = getWeekNumber(date, firstDayOfWeekISO); + if (date.isoWeekday() === firstDayOfWeekISO) { + weekNumbers.push(weekNumber); + } + + dates.push(dateCursor); + dateCursor = dateCursor.add(1, "day"); + + } + return { weekNumbers, dates }; +} + +function getNextMonthDays(date: Dayjs, firstDayOfWeekISO: number): DateRangeInfo { + const lastDayOfMonth = date.endOf('month'); + const lastDayISO = lastDayOfMonth.isoWeekday(); + const lastDayOfUserWeek = ((firstDayOfWeekISO + 6 - 1) % 7) + 1; + const nextMonthFirstDay = date.add(1, 'month').startOf('month'); + const dates: Dayjs[] = []; + + if (lastDayISO !== lastDayOfUserWeek) { + const daysToAdd = (lastDayOfUserWeek - lastDayISO + 7) % 7; + + for (let i = 0; i < daysToAdd; i++) { + dates.push(nextMonthFirstDay.add(i, 'day')); + } + } + return { weekNumbers: [], dates }; +} + +function getWeekNumber(date: Dayjs, firstDayOfWeekISO: number): number { + const weekStart = getWeekStartDate(date, firstDayOfWeekISO); + return weekStart.isoWeek(); +} + +function getWeekStartDate(date: Dayjs, firstDayOfWeekISO: number): Dayjs { + const currentISO = date.isoWeekday(); + const diff = (currentISO - firstDayOfWeekISO + 7) % 7; + return date.clone().subtract(diff, "day").startOf("day"); +}