From 9f0b5d3b7f4ce6e6df6af33d344be0a01465006d Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 2 Oct 2024 05:54:22 +0000
Subject: [PATCH] feat:handle infinite load

---
 .../components/feed/Changelog/index.vue       | 25 +++++++--
 packages/nc-gui/components/feed/Roadmap.vue   |  3 ++
 packages/nc-gui/components/feed/View.vue      | 12 +----
 .../nc-gui/components/feed/Youtube/Player.vue |  7 ++-
 .../nc-gui/components/feed/Youtube/index.vue  | 52 ++++++++++++++-----
 packages/nc-gui/composables/useProductFeed.ts |  4 +-
 6 files changed, 70 insertions(+), 33 deletions(-)

diff --git a/packages/nc-gui/components/feed/Changelog/index.vue b/packages/nc-gui/components/feed/Changelog/index.vue
index b98b93d730..459724982a 100644
--- a/packages/nc-gui/components/feed/Changelog/index.vue
+++ b/packages/nc-gui/components/feed/Changelog/index.vue
@@ -1,14 +1,29 @@
 <script setup lang="ts">
 const { loadGithubFeed, githubFeed } = useProductFeed()
 
-onMounted(async () => {
-  await loadGithubFeed()
-})
+const scrollContainer = ref<HTMLElement>()
+
+const { isLoading } = useInfiniteScroll(
+  scrollContainer,
+  async () => {
+    if (isLoading.value) return
+    await loadGithubFeed(true)
+  },
+  { distance: 10 },
+)
 </script>
 
 <template>
-  <div class="max-w-260 mx-auto">
-    <FeedChangelogItem v-for="feed in githubFeed" :key="feed.id" :date="feed.published_at" :body="feed?.body" />
+  <div
+    ref="scrollContainer"
+    :style="{
+      height: 'calc(100dvh - var(--toolbar-height) - 3rem)',
+    }"
+    class="overflow-y-auto nc-scrollbar-md mx-auto w-full"
+  >
+    <div class="max-w-260 mx-auto">
+      <FeedChangelogItem v-for="feed in githubFeed" :key="feed.id" :date="feed.published_at" :body="feed?.body" />
+    </div>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/feed/Roadmap.vue b/packages/nc-gui/components/feed/Roadmap.vue
index 63ce08a7d2..f3f1a792eb 100644
--- a/packages/nc-gui/components/feed/Roadmap.vue
+++ b/packages/nc-gui/components/feed/Roadmap.vue
@@ -26,6 +26,9 @@ const handleIframeLoad = () => {
 
 <template>
   <div
+    :style="{
+      height: 'calc(100dvh - var(--toolbar-height))',
+    }"
     :class="{
       'hidden': !isLoaded,
       'block h-full': isLoaded,
diff --git a/packages/nc-gui/components/feed/View.vue b/packages/nc-gui/components/feed/View.vue
index 45ae2f9fa6..96f341fb79 100644
--- a/packages/nc-gui/components/feed/View.vue
+++ b/packages/nc-gui/components/feed/View.vue
@@ -56,17 +56,7 @@ const tabs = [
             </span>
           </div>
         </template>
-        <div
-          :style="{
-            height:
-              activeTab === 'recents'
-                ? 'calc(100dvh - var(--toolbar-height) - var(--topbar-height))'
-                : 'calc(100dvh - var(--toolbar-height))',
-          }"
-          class="overflow-y-auto nc-scrollbar-md mx-auto w-full"
-        >
-          <component :is="tab.container" />
-        </div>
+        <component :is="tab.container" />
       </a-tab-pane>
     </NcTabs>
   </div>
diff --git a/packages/nc-gui/components/feed/Youtube/Player.vue b/packages/nc-gui/components/feed/Youtube/Player.vue
index 59694967c8..bdea9d1344 100644
--- a/packages/nc-gui/components/feed/Youtube/Player.vue
+++ b/packages/nc-gui/components/feed/Youtube/Player.vue
@@ -29,7 +29,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-5">
+  <div class="flex flex-col mt-6 gap-5">
     <div class="aspect-video !rounded-lg mx-auto !h-[428px]">
       <div id="player" ref="videoPlayer" class="plyr__video-embed">
         <iframe
@@ -40,9 +40,12 @@ onBeforeUnmount(() => {
         ></iframe>
       </div>
     </div>
-    <div>
+    <div class="text-gray-900 font-bold text-2xl">
       {{ name }}
     </div>
+    <div class="text-gray-900">
+      {{ body }}
+    </div>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/feed/Youtube/index.vue b/packages/nc-gui/components/feed/Youtube/index.vue
index 929efac166..5e73e5ff02 100644
--- a/packages/nc-gui/components/feed/Youtube/index.vue
+++ b/packages/nc-gui/components/feed/Youtube/index.vue
@@ -1,22 +1,48 @@
 <script setup lang="ts">
 const { youtubeFeed, loadYoutubeFeed } = useProductFeed()
 
-onMounted(() => {
-  loadYoutubeFeed()
-})
+const scrollContainer = ref<HTMLElement>()
+
+const { isLoading } = useInfiniteScroll(
+  scrollContainer,
+  async () => {
+    if (isLoading.value) return
+    await loadYoutubeFeed(true)
+  },
+  { distance: 10 },
+)
+
+const gotoChannel = () => {
+  window.open('https://www.youtube.com/@nocodb?ref=product_feed', '_blank')
+}
 </script>
 
 <template>
-  <div class="flex gap-2 flex-col">
-    <FeedYoutubePlayer
-      v-for="feed in youtubeFeed"
-      :key="feed.id"
-      :html_url="feed.html_url"
-      :name="feed.name"
-      :body="feed.body"
-      :published_at="feed.published_at"
-      :embed_url="feed.embed_url"
-    />
+  <div
+    ref="scrollContainer"
+    :style="{
+      height: 'calc(100dvh - var(--toolbar-height) - 5.25rem)',
+    }"
+    class="overflow-y-auto nc-scrollbar-md mt-9 mx-auto w-full"
+  >
+    <div class="max-w-[764px] mx-auto">
+      <div class="flex gap-3 items-center justify-between">
+        <span class="text-gray-900 font-semibold"> Recent Videos </span>
+        <NcButton type="secondary" size="small" @click="gotoChannel"> Go to Youtube </NcButton>
+      </div>
+
+      <div class="flex gap-2 flex-col">
+        <FeedYoutubePlayer
+          v-for="feed in youtubeFeed"
+          :key="feed.id"
+          :html_url="feed.html_url"
+          :name="feed.name"
+          :body="feed.body"
+          :published_at="feed.published_at"
+          :embed_url="feed.embed_url"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
diff --git a/packages/nc-gui/composables/useProductFeed.ts b/packages/nc-gui/composables/useProductFeed.ts
index 178035ccf6..e65737e114 100644
--- a/packages/nc-gui/composables/useProductFeed.ts
+++ b/packages/nc-gui/composables/useProductFeed.ts
@@ -64,7 +64,7 @@ export const useProductFeed = createSharedComposable(() => {
           },
     })
     ytNextPageToken.value = data.nextPageToken
-    youtubeFeed.value = data.videos
+    youtubeFeed.value = [...youtubeFeed.value, ...data.videos]
   }
 
   const loadGithubFeed = async (loadMore?: boolean) => {
@@ -78,7 +78,7 @@ export const useProductFeed = createSharedComposable(() => {
             per_page: 10,
           },
     })
-    githubFeed.value = data
+    githubFeed.value = [...githubFeed.value, ...data]
   }
 
   return {