fix bugs with calendar

src/Model/Files/calendarModel.ts

@@ -42,6 +42,13 @@ export default class CalendarModel {
     this.storageModel.write(referencePath, "");
   };
 
+  deleteTaskReference = (monthString: string, taskId: string): void => {
+    const monthPath: string[] = this.getMonthPath(monthString);
+    const referencePath: string[] = [...monthPath, taskId];
+
+    this.storageModel.write(referencePath, "");
+  };
+
   listTaskIds = (monthString: string): string[] => {
     const monthPath: string[] = this.getMonthPath(monthString);
     return this.storageModel.list(monthPath);
@@ -81,7 +88,10 @@ export default class CalendarModel {
     };
 
     for (let i = 0; i < daysInMonth; i++) {
-      grid.days[i + 1] = defaultValueCreator();
+      const paddedDate: string = CalendarModel.padDateOrMonth(
+        (i + 1).toString()
+      );
+      grid.days[paddedDate] = defaultValueCreator();
     }
 
     return grid;
@@ -104,14 +114,15 @@ export default class CalendarModel {
     return CalendarModel.getMonthString(year, month);
   };
 
-  static isoToDateString = (dateISOString: string): string | undefined => {
+  static isoToDateString = (dateISOString: string): string => {
     const [year, month, date, _] = dateISOString.split("-");
-    return date;
+    const paddedDate = CalendarModel.padDateOrMonth(date ?? "");
+    return paddedDate;
   };
 
   static getMonthString = (year: string = "", month: string = ""): string => {
     const paddedYear: string = year.padStart(4, "0");
-    const paddedMonth: string = month.padStart(2, "0");
+    const paddedMonth: string = CalendarModel.padDateOrMonth(month);
     return `${paddedYear}-${paddedMonth}`;
   };
 
@@ -121,9 +132,13 @@ export default class CalendarModel {
     date: string
   ): string => {
     const monthString: string = CalendarModel.getMonthString(year, month);
-    const paddedDate: string = date.padStart(2, "0");
+    const paddedDate: string = CalendarModel.padDateOrMonth(date);
     return `${monthString}-${paddedDate}`;
   };
+
+  static padDateOrMonth = (input: string): string => {
+    return input.padStart(2, "0");
+  };
 }
 
 export enum CalendarModelSubPaths {

src/View/ChatPages/calendarPage.tsx

@@ -40,10 +40,7 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
       calendarPageViewModel.selectedDate,
     ],
     () => {
-      const listState =
-        calendarPageViewModel.monthGrid.value?.days[
-          calendarPageViewModel.selectedDate.toString()
-        ];
+      const listState = calendarPageViewModel.getEventsForDate();
 
       if (listState == undefined) {
         return <div></div>;

src/View/Components/monthGrid.tsx

@@ -5,6 +5,7 @@ import { MonthGrid } from "../../Model/Files/calendarModel";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import { translations } from "../translations";
 import { allowDrop } from "../utility";
+import { localeCompare } from "../../Model/Utility/utility";
 
 export function MonthGrid<T>(
   monthGrid: MonthGrid<React.MapState<T>>,
@@ -47,45 +48,47 @@ export function MonthGrid<T>(
       <div class="day-labels">{...dayLabels}</div>
       <div class="month-grid">
         {...offsetElements}
-        {...Object.entries(monthGrid.days).map((entry) => {
-          const [date, mapState] = entry;
+        {...Object.entries(monthGrid.days)
+          .sort((a, b) => localeCompare(a[0], b[0]))
+          .map((entry) => {
+            const [date, mapState] = entry;
 
-          const isSelected = React.createProxyState(
-            [selectedDate],
-            () => selectedDate.value == parseInt(date)
-          );
+            const isSelected = React.createProxyState(
+              [selectedDate],
+              () => selectedDate.value == parseInt(date)
+            );
 
-          const isToday: boolean =
-            monthGrid.isCurrentMonth == true &&
-            parseInt(date) == new Date().getDate();
+            const isToday: boolean =
+              monthGrid.isCurrentMonth == true &&
+              parseInt(date) == new Date().getDate();
 
-          function select() {
-            selectedDate.value = parseInt(date);
-          }
+            function select() {
+              selectedDate.value = parseInt(date);
+            }
 
-          function drop() {
-            handleDrop(date);
-          }
+            function drop() {
+              handleDrop(date);
+            }
 
-          return (
-            <button
-              class="tile"
-              on:click={select}
-              toggle:selected={isSelected}
-              toggle:today={isToday}
-              on:dragover={allowDrop}
-              on:drop={drop}
-            >
-              <div>
-                <b>{date}</b>
-                <div
-                  class="flex-column gap clip"
-                  children:append={[mapState, converter]}
-                ></div>
-              </div>
-            </button>
-          );
-        })}
+            return (
+              <button
+                class="tile"
+                on:click={select}
+                toggle:selected={isSelected}
+                toggle:today={isToday}
+                on:dragover={allowDrop}
+                on:drop={drop}
+              >
+                <div>
+                  <b>{date}</b>
+                  <div
+                    class="flex-column gap clip"
+                    children:append={[mapState, converter]}
+                  ></div>
+                </div>
+              </button>
+            );
+          })}
       </div>
     </div>
   );

src/ViewModel/Pages/calendarPageViewModel.ts

@@ -60,17 +60,28 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
     this.updateTaskIndices();
   };
 
+  getEventsForDate = (): React.MapState<TaskViewModel> | undefined => {
+    const paddedDate: string = CalendarModel.padDateOrMonth(
+      this.selectedDate.toString()
+    );
+
+    if (this.monthGrid.value == undefined) {
+      return undefined;
+    }
+
+    return this.monthGrid.value.days[paddedDate];
+  };
+
   // view
   getTaskMapState = (
     taskFileContent: TaskFileContent
   ): React.MapState<TaskViewModel> | null => {
     if (this.monthGrid.value == null) return null;
 
-    const dateString: string | undefined = CalendarModel.isoToDateString(
+    const date: string = CalendarModel.isoToDateString(
       taskFileContent.date ?? ""
     );
-    if (dateString == undefined) return null;
-    return this.monthGrid.value.days[dateString];
+    return this.monthGrid.value.days[date];
   };
 
   showTask = (taskFileContent: TaskFileContent): void => {
@@ -78,7 +89,11 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
       taskFileContent.date ?? ""
     );
     if (monthString == undefined || monthString != this.monthString) {
-      // TODO remove
+      this.removeTaskFromView(taskFileContent);
+      this.calendarModel.deleteTaskReference(
+        this.monthString,
+        taskFileContent.fileId
+      );
       return;
     }
 
@@ -90,16 +105,18 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
     );
     const mapState: React.MapState<TaskViewModel> | null =
       this.getTaskMapState(taskFileContent);
-    mapState?.set(taskFileContent.fileId, taskViewModel);
 
+    this.taskViewModels.handleRemoval(taskViewModel, () => {
+      mapState?.remove(taskFileContent.fileId);
+    });
+
+    this.taskViewModels.remove(taskFileContent.fileId);
     this.taskViewModels.set(taskFileContent.fileId, taskViewModel);
+
+    mapState?.set(taskFileContent.fileId, taskViewModel);
   };
 
   removeTaskFromView = (taskFileContent: TaskFileContent): void => {
-    const mapState: React.MapState<TaskViewModel> | null =
-      this.getTaskMapState(taskFileContent);
-    mapState?.remove(taskFileContent.fileId);
-
     this.taskViewModels.remove(taskFileContent.fileId);
   };
 

src/ViewModel/Pages/taskViewModel.ts

@@ -78,7 +78,7 @@ export default class TaskViewModel {
   setDate = (dateISOString: string): void => {
     this.date.value = dateISOString;
     this.save();
-  }
+  };
 
   // view
   open = (): void => {