top-overlay: handle case where row isn't loaded (fix #1125)

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/components/Timeline.vue

@@ -52,12 +52,7 @@
       </template>
 
       <template v-slot="{ item, index }">
-        <RowHead
-          v-if="item.type === 0"
-          :item="item"
-          :monthView="isMonthView"
-          @click="refs.selectionManager.selectHead(item)"
-        />
+        <RowHead v-if="item.type === 0" :item="item" @click="refs.selectionManager.selectHead(item)" />
 
         <template v-else>
           <Photo
@@ -829,6 +824,9 @@ export default defineComponent({
           day: day,
         };
 
+        // Mark month view to change the header title
+        if (this.isMonthView) head.ismonth = true;
+
         // Special headers
         if (this.routeIsThisDay && (!prevDay || Math.abs(prevDay.dayid - day.dayid) > 30)) {
           // thisday view with new year title

src/components/frame/RowHead.vue

@@ -31,10 +31,6 @@ export default defineComponent({
       type: Object as PropType<IHeadRow>,
       required: true,
     },
-    monthView: {
-      type: Boolean,
-      required: true,
-    },
   },
 
   emits: {
@@ -43,25 +39,7 @@ export default defineComponent({
 
   computed: {
     name() {
-      // Check cache
-      if (this.item.name) {
-        return this.item.name;
-      }
-
-      // Make date string
-      // The reason this function is separate from processDays is
-      // because this call is terribly slow even on desktop
-      const dateTaken = utils.dayIdToDate(this.item.dayId);
-      let name: string;
-      if (this.monthView) {
-        name = utils.getMonthDateStr(dateTaken);
-      } else {
-        name = utils.getLongDateStr(dateTaken, true);
-      }
-
-      // Cache and return
-      this.item.name = name;
-      return name;
+      return utils.getHeadRowName(this.item);
     },
   },
 

src/components/top-matter/TimelineTopOverlay.vue

@@ -5,6 +5,8 @@
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue';
 
+import * as utils from '@services/utils';
+
 import type { IHeadRow, IPhoto } from '@typings';
 
 export default defineComponent({
@@ -69,7 +71,7 @@ export default defineComponent({
         return;
       }
 
-      return head.name;
+      return utils.getHeadRowName(head);
     },
   },
 });

src/services/utils/date.ts

@@ -1,5 +1,6 @@
 import { getCanonicalLocale } from '@nextcloud/l10n';
 import { DateTime } from 'luxon';
+import type { IHeadRow } from '@typings';
 
 // Memoize the result of short date conversions
 // These operations are surprisingly expensive
@@ -103,17 +104,24 @@ export function getDurationStr(sec: number) {
 }
 
 /**
- * Returns a hash code from a string
- * @param  {String} str The string to hash.
- * @return {Number}    A 32bit integer
- * @see http://werxltd.com/wp/2010/05/13/javascript-implementation-of-javas-string-hashcode-method/
+ * Get the header text from a row header
+ * @param head Head row object
  */
-export function hashCode(str: string): number {
-  let hash = 0;
-  for (let i = 0, len = str.length; i < len; i++) {
-    let chr = str.charCodeAt(i);
-    hash = (hash << 5) - hash + chr;
-    hash |= 0; // Convert to 32bit integer
+export function getHeadRowName(head: IHeadRow): string {
+  // Check cache
+  if (head.name) return head.name;
+
+  // Make date string
+  // The reason this function is separate from processDays is
+  // because this call is terribly slow even on desktop
+  const dateTaken = dayIdToDate(head.dayId);
+  let name: string;
+  if (head.ismonth) {
+    name = getMonthDateStr(dateTaken);
+  } else {
+    name = getLongDateStr(dateTaken, true);
   }
-  return hash;
+
+  // Cache and return
+  return (head.name = name);
 }

src/typings/timeline.d.ts

@@ -55,6 +55,8 @@ declare module '@typings' {
     type: 0;
     /** Title of the header */
     name?: string;
+    /** Header is for a month instead of day */
+    ismonth?: boolean;
     /**  Boolean if the entire day is selected */
     selected: boolean;
     /** Bigger header text */