From 6217ae2ecb20b51c3dd07d8c3fec92f195a74924 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?=
 <40151420+ldericher@users.noreply.github.com>
Date: Thu, 15 Sep 2022 13:11:50 +0000
Subject: [PATCH] refactor: event -> model, Hashable objects

---
 ui/src/components/calendar/Calendar.vue       |  4 +-
 .../components/calendar/CalendarCarousel.vue  | 10 +---
 ui/src/components/calendar/EventItem.vue      |  4 +-
 .../calendar/{event.ts => model.ts}           | 60 ++++++++++---------
 4 files changed, 40 insertions(+), 38 deletions(-)
 rename ui/src/components/calendar/{event.ts => model.ts} (91%)

diff --git a/ui/src/components/calendar/Calendar.vue b/ui/src/components/calendar/Calendar.vue
index 92e196d..f1a9abc 100644
--- a/ui/src/components/calendar/Calendar.vue
+++ b/ui/src/components/calendar/Calendar.vue
@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import Event from "./event";
+import { EventData } from "./model";
 import EventItem from "./EventItem.vue";
 
 @Component({
@@ -27,7 +27,7 @@ export default class Calendar extends Vue {
   private readonly title!: string;
 
   @Prop({ default: () => [] })
-  private readonly events!: Array<Event>;
+  private readonly events!: Array<EventData>;
 }
 </script>
 
diff --git a/ui/src/components/calendar/CalendarCarousel.vue b/ui/src/components/calendar/CalendarCarousel.vue
index 60b3216..6155959 100644
--- a/ui/src/components/calendar/CalendarCarousel.vue
+++ b/ui/src/components/calendar/CalendarCarousel.vue
@@ -7,12 +7,8 @@
     touchless
     hide-delimiters
   >
-    <v-carousel-item v-for="calendar in calendars" :key="calendar.title">
-      <Calendar
-        :key="calendar.title + '-cal'"
-        :title="calendar.title"
-        :events="calendar.events"
-      />
+    <v-carousel-item v-for="calendar in calendars" :key="calendar.hash">
+      <Calendar :title="calendar.title" :events="calendar.events" />
     </v-carousel-item>
   </v-carousel>
 </template>
@@ -20,7 +16,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import Calendar from "./Calendar.vue";
-import { CalendarData, CalendarJSONData } from "./event";
+import { CalendarData, CalendarJSONData } from "./model";
 
 @Component({
   components: {
diff --git a/ui/src/components/calendar/EventItem.vue b/ui/src/components/calendar/EventItem.vue
index f179de0..9c02cc5 100644
--- a/ui/src/components/calendar/EventItem.vue
+++ b/ui/src/components/calendar/EventItem.vue
@@ -31,7 +31,7 @@
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { DateTime, DurationLikeObject } from "luxon";
-import Event from "./event";
+import { EventData } from "./model";
 import EventDate from "./EventDate.vue";
 
 @Component({
@@ -41,7 +41,7 @@ import EventDate from "./EventDate.vue";
 })
 export default class EventItem extends Vue {
   @Prop()
-  private readonly event!: Event;
+  private readonly event!: EventData;
 
   private get data_string(): string {
     const locale_string = this.event.start.toLocaleString(
diff --git a/ui/src/components/calendar/event.ts b/ui/src/components/calendar/model.ts
similarity index 91%
rename from ui/src/components/calendar/event.ts
rename to ui/src/components/calendar/model.ts
index 9e6a284..45c3606 100644
--- a/ui/src/components/calendar/event.ts
+++ b/ui/src/components/calendar/model.ts
@@ -1,31 +1,6 @@
 import { DateTime, Duration } from "luxon";
 
-export type EventJSONData = {
-  summary: string;
-  description: string;
-  dtstart: string;
-  dtend: string;
-};
-
-export default class EventData {
-  public summary: string;
-  public description: string;
-  public start: DateTime;
-  public duration: Duration;
-
-  public constructor(json_data: EventJSONData) {
-    this.summary = json_data.summary;
-    this.description = json_data.description;
-    this.start = DateTime
-      .fromISO(json_data.dtstart)
-      .setLocale(navigator.language);
-    const end = DateTime
-      .fromISO(json_data.dtend)
-      .setLocale(navigator.language);
-
-    this.duration = end.diff(this.start);
-  }
-
+class Hashable {
   public get hash(): string {
     const str = JSON.stringify(this);
 
@@ -38,16 +13,47 @@ export default class EventData {
   }
 }
 
+export type EventJSONData = {
+  summary: string;
+  description: string;
+  dtstart: string;
+  dtend: string;
+};
+
+export class EventData extends Hashable {
+  public summary: string;
+  public description: string;
+  public start: DateTime;
+  public duration: Duration;
+
+  public constructor(json_data: EventJSONData) {
+    super();
+
+    this.summary = json_data.summary;
+    this.description = json_data.description;
+    this.start = DateTime
+      .fromISO(json_data.dtstart)
+      .setLocale(navigator.language);
+    const end = DateTime
+      .fromISO(json_data.dtend)
+      .setLocale(navigator.language);
+
+    this.duration = end.diff(this.start);
+  }
+}
+
 export type CalendarJSONData = {
   title: string;
   events: Array<EventJSONData>;
 };
 
-export class CalendarData {
+export class CalendarData extends Hashable {
   public title: string;
   public events: Array<EventData>;
 
   public constructor(json_data: CalendarJSONData) {
+    super();
+
     this.title = json_data.title
 
     this.events = [];