refactor: move dynamic top matter to component

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

src/components/Timeline.vue

@@ -36,15 +36,8 @@
             <div class="text">{{ viewName }}</div>
           </div>
 
-          <!-- Horizontal scrollable OTD -->
+          <!-- Route-specific top matter -->
-          <OnThisDay
+          <DynamicTopMatter ref="dtm" @load="scrollerManager().adjust()" />
-            v-if="routeIsBase && config.enable_top_memories"
-            :key="config.timeline_path"
-            @load="scrollerManager().adjust()"
-          >
-          </OnThisDay>
-
-          <FolderGrid v-if="folders.length" :items="folders" />
         </div>
       </template>
 
@@ -108,10 +101,9 @@ import { showError } from '@nextcloud/dialogs';
 import { subscribe, unsubscribe } from '@nextcloud/event-bus';
 
 import { getLayout } from '../services/Layout';
-import { IDay, IFolder, IHeadRow, IPhoto, IRow, IRowType } from '../types';
+import { IDay, IHeadRow, IPhoto, IRow, IRowType } from '../types';
 
 import UserConfig from '../mixins/UserConfig';
-import FolderGrid from './FolderGrid.vue';
 import RowHead from './frame/RowHead.vue';
 import Photo from './frame/Photo.vue';
 import ScrollerManager from './ScrollerManager.vue';
@@ -119,8 +111,8 @@ import SelectionManager from './SelectionManager.vue';
 import Viewer from './viewer/Viewer.vue';
 
 import EmptyContent from './top-matter/EmptyContent.vue';
-import OnThisDay from './top-matter/OnThisDay.vue';
 import TopMatter from './top-matter/TopMatter.vue';
+import DynamicTopMatter from './top-matter/DynamicTopMatter.vue';
 
 import * as PublicShareHeader from './top-matter/PublicShareHeader';
 import * as dav from '../services/DavRequests';
@@ -139,12 +131,11 @@ export default defineComponent({
   name: 'Timeline',
 
   components: {
-    FolderGrid,
     RowHead,
     Photo,
     EmptyContent,
-    OnThisDay,
     TopMatter,
+    DynamicTopMatter,
     SelectionManager,
     ScrollerManager,
     Viewer,
@@ -157,8 +148,8 @@ export default defineComponent({
     loading: 0,
     /** Main list of rows */
     list: [] as IRow[],
-    /** List of top folders */
+    /** Dynamic top matter has standalone content */
-    folders: [] as IFolder[],
+    dtmContent: false,
     /** Computed number of columns */
     numCols: 0,
     /** Header rows for dayId key */
@@ -259,7 +250,7 @@ export default defineComponent({
 
     /** Nothing to show here */
     empty(): boolean {
-      return !this.list.length && !this.folders.length;
+      return !this.list.length && !this.dtmContent;
     },
   },
 
@@ -362,7 +353,7 @@ export default defineComponent({
       this.scrollerManager().reset();
       this.loading = 0;
       this.list = [];
-      this.folders = [];
+      this.dtmContent = false;
       this.heads = {};
       this.currentStart = 0;
       this.currentEnd = 0;
@@ -671,39 +662,20 @@ export default defineComponent({
       return query;
     },
 
-    /** Fetch folders */
-    async fetchFolders() {
-      if (!this.routeIsFolders || this.$route.query.recursive) {
-        this.folders = [];
-        return;
-      }
-
-      // Get subfolders URL
-      const folder = utils.getFolderRoutePath(this.config.folders_path);
-      const url = API.Q(API.FOLDERS_SUB(), { folder });
-
-      // Make API call to get subfolders
-      try {
-        this.loading++;
-        const state = this.state;
-        const res = await axios.get<IFolder[]>(url);
-        if (state !== this.state) return;
-        this.folders = res.data;
-      } finally {
-        this.loading--;
-      }
-
-      // Filter out hidden folders
-      if (!this.config.show_hidden_folders) {
-        this.folders = this.folders.filter((f) => !f.name.startsWith('.') && f.previews?.length);
-      }
-    },
-
     /** Fetch timeline main call */
     async fetchDays(noCache = false) {
       // Awaiting this is important because the folders must render
       // before the timeline to prevent glitches
-      await this.fetchFolders();
+      try {
+        this.loading++;
+        const state = this.state;
+        // @ts-ignore
+        const res = await this.$refs.dtm.refresh();
+        if (this.state !== state) return;
+        this.dtmContent = res;
+      } finally {
+        this.loading--;
+      }
 
       // Get URL an cache identifier
       let url: string;

src/components/top-matter/DynamicTopMatter.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="dtm-container" v-if="currentmatter">
+    <component ref="child" :is="currentmatter" @load="$emit('load')" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import UserMixin from '../../mixins/UserConfig';
+
+import FolderDynamicTopMatter from './FolderDynamicTopMatter.vue';
+import OnThisDay from './OnThisDay.vue';
+
+export default defineComponent({
+  name: 'DynamicTopMatter',
+
+  mixins: [UserMixin],
+
+  computed: {
+    currentmatter(): any {
+      if (this.routeIsFolders) {
+        return FolderDynamicTopMatter;
+      } else if (this.routeIsBase && this.config.enable_top_memories) {
+        return OnThisDay;
+      }
+
+      return null;
+    },
+  },
+
+  methods: {
+    async refresh(): Promise<boolean> {
+      if (this.currentmatter) {
+        await this.$nextTick();
+        // @ts-ignore
+        return (await this.$refs.child?.refresh?.()) ?? false;
+      }
+
+      return false;
+    },
+  },
+});
+</script>

src/components/top-matter/FolderDynamicTopMatter.vue

@@ -0,0 +1,57 @@
+<template>
+  <FolderGrid v-if="folders.length" :items="folders" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import axios from '@nextcloud/axios';
+
+import FolderGrid from './FolderGrid.vue';
+import UserMixin from '../../mixins/UserConfig';
+
+import * as utils from '../../services/Utils';
+import { API } from '../../services/API';
+
+import type { IFolder } from '../../types';
+
+export default defineComponent({
+  name: 'FolderDynamicTopMatter',
+
+  data: () => ({
+    folders: [] as IFolder[],
+  }),
+
+  components: {
+    FolderGrid,
+  },
+
+  mixins: [UserMixin],
+
+  methods: {
+    async refresh(): Promise<boolean> {
+      // Clear folders
+      this.folders = [];
+
+      // Get subfolders URL
+      const folder = utils.getFolderRoutePath(this.config.folders_path);
+      const url = API.Q(API.FOLDERS_SUB(), { folder });
+
+      // Make API call to get subfolders
+      try {
+        this.folders = (await axios.get<IFolder[]>(url)).data;
+      } catch (e) {
+        console.error(e);
+        return false;
+      }
+
+      // Filter out hidden folders
+      if (!this.config.show_hidden_folders) {
+        this.folders = this.folders.filter((f) => !f.name.startsWith('.') && f.previews?.length);
+      }
+
+      return this.folders.length > 0;
+    },
+  },
+});
+</script>

src/components/top-matter/FolderGrid.vue

@@ -9,10 +9,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-import UserConfig from '../mixins/UserConfig';
+import UserConfig from '../../mixins/UserConfig';
-import Folder from './frame/Folder.vue';
+import Folder from '../frame/Folder.vue';
 
-import type { IFolder } from '../types';
+import type { IFolder } from '../../types';
 
 export default defineComponent({
   name: 'ClusterGrid',