chore(react/launch_bar): get week numbers to render

apps/client/src/widgets/buttons/calendar.ts

@@ -53,7 +53,7 @@ const DROPDOWN_TPL = `
         </div>
     </div>
 
-    <div class="calendar-week"></div>
+
 </div>`;
 
 const DAYS_OF_WEEK = [
@@ -262,11 +262,10 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
                 $newWeekNumber.addClass("calendar-date-exists").attr("data-href", `#root/${weekNoteId}`);
             }
         } else {
-            $newWeekNumber = $("<span>").addClass("calendar-week-number-disabled");
+
         }
 
         $newWeekNumber.addClass("calendar-week-number").attr("data-calendar-week-number", weekNoteId);
-        $newWeekNumber.append($("<span>").html(String(weekNumber)));
         return $newWeekNumber;
     }
 

apps/client/src/widgets/launch_bar/CalendarWidget.tsx

@@ -4,11 +4,11 @@ import { LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_w
 import { Dayjs, dayjs } from "@triliumnext/commons";
 import appContext from "../../components/app_context";
 import { useTriliumOptionInt } from "../react/hooks";
-import { VNode } from "preact";
 import clsx from "clsx";
 import "./CalendarWidget.css";
 import server from "../../services/server";
-import { getMonthInformation } from "./CalendarWidgetUtils";
+import { DateRangeInfo, getMonthInformation, getWeekNumber } from "./CalendarWidgetUtils";
+import { VNode } from "preact";
 
 interface DateNotesForMonth {
     [date: string]: string;
@@ -50,14 +50,14 @@ function Calendar({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO:
 
     return (
         <div className="calendar-body" data-calendar-area="month">
-            {firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} dates={monthInfo.prevMonth.dates} />}
+            {firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} info={monthInfo.prevMonth} />}
-            <CurrentMonthDays date={date} dates={monthInfo.currentMonth.dates} />
+            <CurrentMonthDays date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
             <NextMonthDays date={date} dates={monthInfo.nextMonth.dates} />
         </div>
     )
 }
 
-function PreviousMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
+function PreviousMonthDays({ date, info: { dates, weekNumbers } }: { date: Dayjs, info: DateRangeInfo }) {
     const prevMonth = date.subtract(1, 'month').format('YYYY-MM');
     const [ dateNotesForPrevMonth, setDateNotesForPrevMonth ] = useState<DateNotesForMonth>();
 
@@ -65,15 +65,29 @@ function PreviousMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
         server.get<DateNotesForMonth>(`special-notes/notes-for-month/${prevMonth}`).then(setDateNotesForPrevMonth);
     }, [ date ]);
 
-    return dates.map(date => (
+    return (
-        <CalendarDay date={date} dateNotesForMonth={dateNotesForPrevMonth} className="calendar-date-prev-month" />
+        <>
-    ));
+            <CalendarWeek weekNumber={weekNumbers[0]} />
+            {dates.map(date => <CalendarDay date={date} dateNotesForMonth={dateNotesForPrevMonth} className="calendar-date-prev-month" />)}
+        </>
+    )
 }
 
-function CurrentMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
+function CurrentMonthDays({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) {
-    return dates.map(date => (
+    let dateCursor = date;
-        <CalendarDay date={date} dateNotesForMonth={{}} />
+    const currentMonth = date.month();
-    ));
+    const items: VNode[] = [];
+    while (dateCursor.month() === currentMonth) {
+        const weekNumber = getWeekNumber(dateCursor, firstDayOfWeekISO);
+        if (dateCursor.isoWeekday() === firstDayOfWeekISO) {
+            items.push(<CalendarWeek weekNumber={weekNumber} />)
+        }
+
+        items.push(<CalendarDay date={dateCursor} dateNotesForMonth={{}} />)
+        dateCursor = dateCursor.add(1, "day");
+    }
+
+    return items;
 }
 
 function NextMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
@@ -102,3 +116,8 @@ function CalendarDay({ date, dateNotesForMonth, className }: { date: Dayjs, date
     );
 }
 
+function CalendarWeek({ weekNumber }: { weekNumber: number }) {
+    return (
+        <span className="calendar-week-number calendar-week-number-disabled">{weekNumber}</span>
+    )
+}

apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts

@@ -1,6 +1,6 @@
 import { Dayjs } from "@triliumnext/commons";
 
-interface DateRangeInfo {
+export interface DateRangeInfo {
     weekNumbers: number[];
     dates: Dayjs[];
 }
@@ -8,7 +8,6 @@ interface DateRangeInfo {
 export function getMonthInformation(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number) {
     return {
         prevMonth: getPrevMonthDays(date, firstDayISO, firstDayOfWeekISO),
-        currentMonth: getCurMonthDays(date, firstDayOfWeekISO),
         nextMonth: getNextMonthDays(date, firstDayOfWeekISO)
     }
 }
@@ -29,24 +28,6 @@ function getPrevMonthDays(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: n
     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();
@@ -64,7 +45,7 @@ function getNextMonthDays(date: Dayjs, firstDayOfWeekISO: number): DateRangeInfo
     return { weekNumbers: [], dates };
 }
 
-function getWeekNumber(date: Dayjs, firstDayOfWeekISO: number): number {
+export function getWeekNumber(date: Dayjs, firstDayOfWeekISO: number): number {
     const weekStart = getWeekStartDate(date, firstDayOfWeekISO);
     return weekStart.isoWeek();
 }