chore(react/launch_bar): add link to existing days

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

@@ -46,22 +46,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         this.manageFirstDayOfWeek();
         this.initWeekCalculation();
 
-        // Month navigation
-        this.$monthSelect = this.$dropdownContent.find('[data-calendar-input="month"]');
-        this.$monthSelect.on("show.bs.dropdown", (e) => {
-            // Don't trigger dropdownShown() at widget level when the month selection dropdown is shown, since it would cause a redundant refresh.
-            e.stopPropagation();
-        });
-        this.monthDropdown = Dropdown.getOrCreateInstance(this.$monthSelect[0]);
-        this.$dropdownContent.find('[data-calendar-input="month-list"] button').on("click", (e) => {
-            const target = e.target as HTMLElement;
-            const value = target.dataset.value;
-            if (value) {
-                this.date = this.date.month(parseInt(value));
-                this.createMonth();
-            }
-        });
-
         // Date click
         this.$dropdownContent.on("click", ".calendar-date", async (ev) => {
             const date = $(ev.target).closest(".calendar-date").attr("data-calendar-date");
@@ -139,18 +123,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         this.init( ?? null);
     }
 
-    createDay() {
-        const $date = $("<span>").html(String(num));
-        const dateNoteId = dateNotesForMonth[this.date.local().format('YYYY-MM-DD')];
-
-        if (dateNoteId) {
-            $newDay.addClass("calendar-date-exists").attr("data-href", `#root/${dateNoteId}`);
-        }
-
-        $newDay.append($date);
-        return $newDay;
-    }
-
     createWeekNumber(weekNumber: number) {
         const weekNoteId = this.date.local().format('YYYY-') + 'W' + String(weekNumber).padStart(2, '0');
         let $newWeekNumber;

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

@@ -85,13 +85,20 @@ function CurrentMonthDays({ date, firstDayOfWeekISO, ...args }: { date: Dayjs, f
     let dateCursor = date;
     const currentMonth = date.month();
     const items: VNode[] = [];
+    const curMonthString = date.format('YYYY-MM');
+    const [ dateNotesForCurMonth, setDateNotesForCurMonth ] = useState<DateNotesForMonth>();
+
+    useEffect(() => {
+        server.get<DateNotesForMonth>(`special-notes/notes-for-month/${curMonthString}`).then(setDateNotesForCurMonth);
+    }, [ date ]);
+
     while (dateCursor.month() === currentMonth) {
         const weekNumber = getWeekNumber(dateCursor, firstDayOfWeekISO);
         if (dateCursor.isoWeekday() === firstDayOfWeekISO) {
             items.push(<CalendarWeek weekNumber={weekNumber} />)
         }
 
-        items.push(<CalendarDay date={dateCursor} dateNotesForMonth={{}} {...args} />)
+        items.push(<CalendarDay date={dateCursor} dateNotesForMonth={dateNotesForCurMonth} {...args} />)
         dateCursor = dateCursor.add(1, "day");
     }
 
@@ -112,13 +119,16 @@ function NextMonthDays({ date, dates, ...args }: { date: Dayjs, dates: Dayjs[] }
 }
 
 function CalendarDay({ date, dateNotesForMonth, className, activeDate, todaysDate }: { date: Dayjs, dateNotesForMonth?: DateNotesForMonth, className?: string } & CalendarArgs) {
+    const dateNoteId = dateNotesForMonth?.[date.local().format('YYYY-MM-DD')];
     return (
         <a
             className={clsx("calendar-date", className,
+                dateNoteId && "calendar-date-exists",
                 date.isSame(activeDate, "day") && "calendar-date-active",
                 date.isSame(todaysDate, "day") && "calendar-date-today"
             )}
             data-calendar-date={date.local().format("YYYY-MM-DD")}
+            data-href={dateNoteId && `#root/${dateNoteId}`}
         >
             <span>
                 {date.date()}