Do not render opening state when data is undefined

voorhoede · Sep 15, 2023 · 82b5ea1 · 82b5ea1
1 parent 2c67520
commit 82b5ea1
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/components/CardStatus/CardStatus.vue b/src/components/CardStatus/CardStatus.vue
@@ -1,6 +1,7 @@
 <template>
   <ClientOnly>
     <p
+      v-if="openingHours"
       class="card-status"
       :class="{ 'card-status--open': isOpen }"
       v-bind="$attrs"
@@ -32,13 +33,13 @@ export default {
 <script setup lang="ts">
 import type { OpeningHours } from "~/types/OpeningHours";
 
-const props = defineProps<{ openingHours: OpeningHours[] }>();
+const props = defineProps<{ openingHours?: OpeningHours[] }>();
 
 const isOpen = computed(() => {
   const now = new Date();
   const dayNames = ["su", "mo", "tu", "we", "th", "fr", "sa"];
   const indexToday = dayNames[now.getDay()];
-  const openingHoursToday = props.openingHours?.find(({ day }) => day === indexToday).time;
+  const openingHoursToday = props.openingHours?.find(({ day }) => day === indexToday)?.time;
 
   return openingHoursToday?.some(([startTime, endTime]) => {
     return now >= new Date(startTime) && now <= new Date(endTime);

diff --git a/src/types/Building.ts b/src/types/Building.ts
@@ -20,10 +20,11 @@ export interface BuildingI18n {
   totalSeats: number;
   totalSpaces: number;
   totalRooms: number;
-  openingHours: OpeningHours[];
-
   activeDevices?: number;
+
+  // Client-side loading
   occupancy?: Occupancy | undefined;
+  openingHours?: OpeningHours[];
 }
 
 export type CsvAndCmsBuildingData = Omit<