fix(calendar): correctly space days when 1 or 2 results only

Author: dvcol

src/components/common/list/ListItemPanel.vue

@@ -214,7 +214,7 @@ const onTagClick = (url?: string) => {
           <TagLink :tag="tag" @on-click="onTagClick" />
         </template>
         <template v-if="!hideTime && date">
-          <NSkeleton v-if="loading" key="date-loader" text style="width: 6%" />
+          <NSkeleton v-if="loading" key="date-loader" text style="width: 8%" />
           <NTag
             v-else
             key="date"

src/stores/data/calendar.store.ts

@@ -110,9 +110,9 @@ export const useCalendarStore = defineStore(CalendarStoreConstants.Store, () =>
     Logger.debug('Fetching calendar', { mode, start_date, end_date, days: days.value });
 
     const timeout = setTimeout(() => {
-      if (mode === 'reload') calendar.value = getEmptyWeeks(startDate, true);
+      if (mode === 'reload') calendar.value = getEmptyWeeks({ startDate, loading: true, days: days.value });
       else if (mode === 'start') calendar.value = [getLoadingPlaceholder(DateUtils.previous(1, endDate)), ...calendar.value];
-      else if (mode === 'end') calendar.value = [...calendar.value, ...getEmptyWeeks(startDate, true)];
+      else if (mode === 'end') calendar.value = [...calendar.value, ...getEmptyWeeks({ startDate, loading: true, days: days.value })];
     }, 100);
 
     const query: TraktCalendarQuery = { start_date, days: days.value };
@@ -121,7 +121,7 @@ export const useCalendarStore = defineStore(CalendarStoreConstants.Store, () =>
     try {
       const newData: CalendarItem[] = await fetchCalendarData(query);
       delete calendarErrors[JSON.stringify(query)];
-      const spacedData = spaceDate(newData, startDate, endDate);
+      const spacedData = spaceDate(newData, { startDate, endDate, days: days.value });
 
       if (mode === 'reload') {
         calendar.value = [...spacedData];

src/stores/data/releases.store.ts

@@ -159,9 +159,9 @@ export const useReleasesStore = defineStore(ReleasesStoreConstants.Store, () =>
     });
 
     const timeout = setTimeout(() => {
-      if (mode === 'reload') releases.value = getEmptyWeeks(startDate, true);
+      if (mode === 'reload') releases.value = getEmptyWeeks({ startDate, loading: true, days: days.value });
       else if (mode === 'start') releases.value = [getLoadingPlaceholder(DateUtils.previous(1, endDate)), ...releases.value];
-      else if (mode === 'end') releases.value = [...releases.value, ...getEmptyWeeks(startDate, true)];
+      else if (mode === 'end') releases.value = [...releases.value, ...getEmptyWeeks({ startDate, loading: true, days: days.value })];
     }, 100);
 
     const query = {

src/utils/calendar.utils.ts

@@ -29,61 +29,82 @@ export const getPlaceholder = (date: Date) => ({ ...CalendarPlaceholder, id: `em
 export const getLoadingPlaceholder = (date: Date) =>
   ({ ...getPlaceholder(date), id: `loading-${date.getTime()}`, type: ListScrollItemType.loading }) as CalendarItem;
 
-export const getEmptyWeeks = (fromDate: Date, loading?: boolean) => {
-  return Array(14)
+export const getEmptyWeeks = ({ startDate, loading = false, days = 14 }: { startDate: Date; loading?: boolean; days?: number }) => {
+  return Array(days)
     .fill(CalendarPlaceholder)
     .map((_, index) => {
-      const date = DateUtils.next(index, fromDate);
+      const date = DateUtils.next(index, startDate);
       return loading ? getLoadingPlaceholder(date) : getPlaceholder(date);
     });
 };
 
-export const spaceDate = (data: CalendarItem[], startDate: Date, endDate: Date): CalendarItem[] => {
-  const spacedData: CalendarItem[] = [];
-  data?.forEach((item, index) => {
-    if (index === 0) {
-      // if the first item isn't the start date, add placeholders
-      if (item.date.getTime() > startDate.getTime() && item.date.toLocaleDateString() !== startDate.toLocaleDateString()) {
-        let previousDate: Date = item.date;
-        while (previousDate.toLocaleDateString() !== startDate.toLocaleDateString()) {
-          previousDate = DateUtils.previous(1, previousDate);
-          spacedData.push(getPlaceholder(previousDate));
-        }
-      }
-      return spacedData.push(item);
+const padStartInterval = (spacedData: CalendarItem[], { item, startDate, added = 0 }: { item: CalendarItem; startDate: Date; added?: number }) => {
+  let _added = added;
+  // if the first item isn't the start date, add placeholders
+  if (item.date.getTime() > startDate.getTime() && item.date.toLocaleDateString() !== startDate.toLocaleDateString()) {
+    let currentDate: Date = startDate;
+    while (item.date.toLocaleDateString() !== currentDate.toLocaleDateString()) {
+      _added += spacedData.push(getPlaceholder(currentDate));
+      currentDate = DateUtils.next(1, currentDate);
     }
+  }
+  return _added;
+};
 
-    if (index === data.length - 1) {
-      spacedData.push(item);
-
-      // if the last item isn't one day before the end date, add placeholders
-      const dayBeforeEnd = DateUtils.previous(1, endDate);
-      if (item.date.getTime() < dayBeforeEnd.getTime() && item.date.toLocaleDateString() !== dayBeforeEnd.toLocaleDateString()) {
-        let nextDate: Date = item.date;
-        while (nextDate.toLocaleDateString() !== dayBeforeEnd.toLocaleDateString()) {
-          nextDate = DateUtils.next(1, nextDate);
-          spacedData.push(getPlaceholder(nextDate));
-        }
-      }
-      return;
+const padEndInterval = (spacedData: CalendarItem[], { item, endDate, added = 0 }: { item: CalendarItem; endDate: Date; added?: number }) => {
+  let _added = added;
+  // if the last item isn't one day before the end date, add placeholders
+  if (item.date.getTime() < endDate.getTime() && item.date.toLocaleDateString() !== endDate.toLocaleDateString()) {
+    let currentDate: Date = DateUtils.next(1, item.date);
+    while (currentDate.toLocaleDateString() !== endDate.toLocaleDateString()) {
+      _added += spacedData.push(getPlaceholder(currentDate));
+      currentDate = DateUtils.next(1, currentDate);
     }
+  }
+  return _added;
+};
 
-    const previous = data[index - 1];
+const padBetweenInterval = (spacedData: CalendarItem[], { item, previous }: { previous: CalendarItem; item: CalendarItem }) => {
+  // if the item us the same date as the previous one, no need to pad
+  if (item.date.toLocaleDateString() === previous.date.toLocaleDateString()) return 0;
+
+  // if the item is the same as the day after the previous one, no need to pad
+  let nextDate: Date = DateUtils.next(1, previous.date);
+  if (item.date.toLocaleDateString() === nextDate.toLocaleDateString()) return 0;
+
+  let added = 0;
+  // if the item isn't at least 1 day after the previous date, add placeholders
+  while (item.date.toLocaleDateString() !== nextDate.toLocaleDateString()) {
+    added += spacedData.push(getPlaceholder(nextDate));
+    nextDate = DateUtils.next(1, nextDate);
+  }
+  return added;
+};
 
-    if (item.date.toLocaleDateString() === previous.date.toLocaleDateString()) return spacedData.push(item);
-    if (item.date.toLocaleDateString() === DateUtils.next(1, previous.date).toLocaleDateString()) return spacedData.push(item);
+export const spaceDate = (data: CalendarItem[], { startDate, endDate, days }: { startDate: Date; endDate: Date; days?: number }): CalendarItem[] => {
+  const spacedData: CalendarItem[] = [];
+  data?.forEach((item, index, array) => {
+    // if we are on the first item
+    if (index === 0) {
+      padStartInterval(spacedData, { item, startDate });
+      // If we have more than 1 item, we can return (end padding in the next iteration)
+      if (array.length > 1) return spacedData.push(item);
+    }
 
-    // if the item isn't at least 1 day after the previous date, add placeholders
-    let previousDate: Date = previous.date;
-    while (item.date.toLocaleDateString() !== DateUtils.next(1, previousDate).toLocaleDateString()) {
-      previousDate = DateUtils.next(1, previousDate);
-      spacedData.push(getPlaceholder(previousDate));
+    // if we have are at least on the 2 item
+    if (index && array.length > 1) padBetweenInterval(spacedData, { item, previous: array[index - 1] });
+
+    // if we are on the last item
+    if (index === array.length - 1) {
+      spacedData.push(item);
+      return padEndInterval(spacedData, { item, endDate });
     }
     spacedData.push(item);
   });
-  if (!spacedData.length) spacedData.push(...getEmptyWeeks(startDate));
 
   // if no data in response fill with placeholders
+  if (!spacedData.length) spacedData.push(...getEmptyWeeks({ startDate, days }));
+
   return spacedData;
 };