From 90c28ed1513ba1d585501ed1ef2ded21e6525941 Mon Sep 17 00:00:00 2001
From: Jona <8698248+jonamil@users.noreply.github.com>
Date: Mon, 3 Jun 2024 20:35:16 +0200
Subject: [PATCH] Refactor comment components and fetching approach

---
 src/components/CommentItem.vue     | 129 ++++++++--------
 src/components/TheCommentsList.vue |  99 -------------
 src/components/TheCommentsView.vue | 231 ++++++++++++++++++++++++++---
 3 files changed, 277 insertions(+), 182 deletions(-)
 delete mode 100644 src/components/TheCommentsList.vue

diff --git a/src/components/CommentItem.vue b/src/components/CommentItem.vue
index e7e5f89..e13662d 100644
--- a/src/components/CommentItem.vue
+++ b/src/components/CommentItem.vue
@@ -1,9 +1,8 @@
 <template>
   <div class="space-y-px">
     <div
-      v-if="commentItem && !(commentItem.deleted || commentItem.dead) && commentItem.text"
       class="mx-auto flex max-w-150 pl-3.5 pr-3.5 @container"
-      :class="[isCollapsed ? 'bg-gray-100 hover:bg-gray-100' : 'hover:bg-gray-50']"
+      :class="[isCollapsed ? 'bg-gray-100' : '']"
     >
       <div
         v-for="index in outsideIndentations"
@@ -36,9 +35,9 @@
             @click="isCollapsed = !isCollapsed"
           >
             <div class="flex-1">
-              <span class="font-serif text-base-serif italic">{{ commentItem.by }}</span>
+              <span class="font-serif text-base-serif italic">{{ item.by }}</span>
               <span
-                v-if="commentItem.by === postBy"
+                v-if="item.by === content.currentPostItem?.by"
                 class="my-[-0.25rem] ml-1.5 inline-block rounded-sm bg-orange-200/90 px-1 pb-[0.21875rem] pt-[0.0625rem] leading-3 text-orange-700 [font-feature-settings:'smcp','c2sc']"
               >
                 OP
@@ -46,7 +45,7 @@
             </div>
             <div
               class="flex items-center gap-1"
-              :title="!isCollapsed ? absoluteTimestamp(commentItem.time) : ''"
+              :title="!isCollapsed ? absoluteTimestamp(item.time) : ''"
             >
               <BaseIcon
                 v-show="isCollapsed"
@@ -69,30 +68,25 @@
         </div>
       </div>
     </div>
-    <template v-if="commentItem && hasKids">
-      <CommentItem
-        v-for="(commentId, index) in commentItem.kids"
-        v-show="!isCollapsed"
-        :key="index"
-        :id="commentId"
-        :level="level + 1"
-        :first-of-level="index === 0"
-        :last-of-level="index === commentItem.kids!.length - 1"
-        :consecutive-last-levels="
-          index === commentItem.kids!.length - 1 ? consecutiveLastLevels + 1 : 0
-        "
-        :post-by="postBy"
-        @count-descendant="
-          descendants += 1;
-          $emit('countDescendant');
-        "
-      />
-    </template>
+    <CommentItem
+      v-for="(kidItem, index) in kidItems"
+      v-show="!isCollapsed"
+      :key="index"
+      :item="kidItem"
+      :level="level + 1"
+      :first-of-level="index === 0"
+      :last-of-level="index === kidItems.length - 1"
+      :consecutive-last-levels="index === kidItems.length - 1 ? consecutiveLastLevels + 1 : 0"
+      @count-descendant="
+        descendants += 1;
+        $emit('countDescendant');
+      "
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed, watchEffect } from 'vue';
 import DOMPurify from 'dompurify';
 import smartquotes from 'smartquotes-ts';
 import type { HackerNewsItem } from '@/types';
@@ -102,52 +96,67 @@ import CommentItem from '@/components/CommentItem.vue';
 import { useRelativeTimestamp } from '@/composables/relativeTimestamp';
 import { useContentStore } from '@/stores/ContentStore';
 
-const props = defineProps<{
-  id?: number;
-  level: number;
-  firstOfLevel: boolean;
-  lastOfLevel: boolean;
-  consecutiveLastLevels: number;
-  postBy?: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    item: HackerNewsItem;
+    level?: number;
+    firstOfLevel?: boolean;
+    lastOfLevel?: boolean;
+    consecutiveLastLevels?: number;
+  }>(),
+  {
+    level: 0,
+    firstOfLevel: true,
+    lastOfLevel: true,
+    consecutiveLastLevels: 0,
+  }
+);
 
 const content = useContentStore();
 
-// if no ID prop is set, this is a post’s description text that appears above the comment threads
-const isPostDescription = !props.id;
-
-// fetch comment item or return object containing the current post’s data
-const commentItem: HackerNewsItem | null = !isPostDescription
-  ? await fetch(apiItemUrl(props.id)).then((response) => response.json())
-  : {
-      text: content.currentPostItem?.text,
-      by: content.currentPostItem?.by,
-      time: content.currentPostItem?.time,
-    };
+// if item data does not contain 'parent' key, this is a post’s description text that appears above the comment threads
+const isPostDescription = !('parent' in props.item);
 
-const isValid = commentItem && !(commentItem.deleted || !commentItem.dead) && commentItem.text;
-const hasKids = commentItem && commentItem.kids && commentItem.kids.length !== 0 ? true : false;
+const isCollapsed = ref(false);
 
 // count total recursive descendants by emitting events to potential higher-level comment instances
 const descendants = ref(1);
 const emit = defineEmits(['countDescendant']);
+emit('countDescendant');
 
-if (isValid) {
-  emit('countDescendant');
-}
+const kidIds = ref<number[]>(!isPostDescription && props.item.kids ? props.item.kids : []);
+const kidItems = ref<HackerNewsItem[]>([]);
+
+// fetch nested comments if kids exist
+const fetchedItems: HackerNewsItem[] = await Promise.all(
+  kidIds.value.map(async (id) => {
+    return await fetch(apiItemUrl(id)).then((response) => response.json());
+  })
+);
+
+const validItems = fetchedItems.filter(
+  (threadItem) => !threadItem.dead && !threadItem.deleted && threadItem.text
+);
+
+kidItems.value.push(...validItems);
 
 // if a comment is the last of its current level and has no kids, it needs an inside indentation
 // for each consecutive last level counting down from the current one. in all other cases,
 // only outside indentations are needed
-const insideIndentations = props.lastOfLevel && !hasKids ? props.consecutiveLastLevels : 0;
+const insideIndentations =
+  props.lastOfLevel && kidIds.value.length === 0 ? props.consecutiveLastLevels : 0;
 const outsideIndentations = props.level - insideIndentations;
 
-const isCollapsed = ref(false);
+const { text: relativeTimestamp } = useRelativeTimestamp(
+  computed(() => props.item.time),
+  true
+);
+
 
-const { text: relativeTimestamp } = useRelativeTimestamp(commentItem?.time, true);
+const domPurifyInstance = DOMPurify();
 
-// run text content of comments through smartquotes
-DOMPurify.addHook('afterSanitizeElements', (node) => {
+// optimize/format comment text
+domPurifyInstance.addHook('afterSanitizeElements', (node) => {
   if (node.nodeName && node.nodeName === '#text') {
     if (!node.textContent) return;
 
@@ -167,17 +176,19 @@ DOMPurify.addHook('afterSanitizeElements', (node) => {
 });
 
 // add target="_blank" attribute to all links
-DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+domPurifyInstance.addHook('afterSanitizeAttributes', (node) => {
   if ('target' in node) {
     node.setAttribute('target', '_blank');
   }
 });
 
-// add a prepended p tag because HN comments start with only a text node
-const commentText = DOMPurify.sanitize('<p>' + commentItem?.text);
+const commentText = ref('');
 
-// remove hooks, as they otherwise accumulate from all CommentItem instances
-DOMPurify.removeAllHooks();
+// re-format comment text if it changes
+watchEffect(() => {
+  // add a prepended p tag because HN comments start with only a text node
+  commentText.value = domPurifyInstance.sanitize('<p>' + props.item.text);
+});
 </script>
 
 <style lang="postcss">
diff --git a/src/components/TheCommentsList.vue b/src/components/TheCommentsList.vue
deleted file mode 100644
index c27a2da..0000000
--- a/src/components/TheCommentsList.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <CommentItem
-    v-if="content.currentPostItem?.text"
-    :level="0"
-    :first-of-level="true"
-    :last-of-level="true"
-    :consecutive-last-levels="0"
-    :post-by="content.currentPostItem?.by"
-    class="relative z-20 -mb-2"
-  />
-  <div
-    class="sticky top-0 z-10 mx-auto max-w-150 bg-gradient-to-b from-white from-20% to-white/0 px-2 pt-2"
-  >
-    <div class="flex rounded-[0.15625rem] border border-gray-200 bg-gray-100 px-2 py-1">
-      <div class="flex flex-1 items-center gap-1"></div>
-      <div class="flex items-center gap-0.5 px-1 text-gray-500">
-        Thread {{ currentThreadIndex + 1 }} of {{ threadCount }}
-      </div>
-      <div class="flex flex-1 items-center justify-end gap-1">
-        <BaseButton
-          icon="chevron-up"
-          small
-          :disabled="currentThreadIndex <= 0"
-          @click="scrollThreadIntoView(currentThreadIndex - 1)"
-        />
-        <BaseButton
-          icon="chevron-down"
-          small
-          :disabled="currentThreadIndex + 1 >= threadCount"
-          @click="scrollThreadIntoView(currentThreadIndex + 1)"
-        />
-      </div>
-    </div>
-  </div>
-  <CommentItem
-    v-for="(commentId, index) in content.currentPostItem?.kids"
-    ref="threadInstances"
-    :key="index"
-    :id="commentId"
-    :level="0"
-    :first-of-level="index === 0"
-    :last-of-level="false"
-    :consecutive-last-levels="0"
-    :post-by="content.currentPostItem?.by"
-  />
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import type { ComponentPublicInstance } from 'vue';
-import { useParentElement } from '@vueuse/core';
-import BaseButton from '@/components/BaseButton.vue';
-import CommentItem from '@/components/CommentItem.vue';
-import { useContentStore } from '@/stores/ContentStore';
-
-const content = useContentStore();
-
-const threadCount = ref(content.currentPostItem?.kids?.length ?? 0);
-const threadInstances = ref<ComponentPublicInstance[]>([]);
-
-const threadVisibilities = ref<boolean[]>([]);
-const currentThreadIndex = computed(() =>
-  Math.max(
-    threadVisibilities.value.findIndex((item) => item === true),
-    0
-  )
-);
-
-const parentElement = useParentElement();
-
-onMounted(async () => {
-  const observer = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry, index) => {
-        const entryIndex: number = parseInt(entry.target.getAttribute('data-index') ?? '');
-        threadVisibilities.value[entryIndex] = entry.isIntersecting;
-      });
-    },
-    {
-      root: parentElement.value,
-      rootMargin: '-42px 0px 0px 0px',
-    }
-  );
-
-  threadInstances.value.forEach((threadInstance, index) => {
-    threadInstance.$el.setAttribute('data-index', index);
-    observer.observe(threadInstance.$el);
-  });
-});
-
-function scrollThreadIntoView(index: number) {
-  if (index < 0 || index >= threadCount.value) return;
-
-  threadInstances.value[index].$el.scrollIntoView({
-    behavior: 'smooth',
-    block: 'start',
-  });
-}
-</script>
diff --git a/src/components/TheCommentsView.vue b/src/components/TheCommentsView.vue
index 2ae4516..70a3239 100644
--- a/src/components/TheCommentsView.vue
+++ b/src/components/TheCommentsView.vue
@@ -1,42 +1,225 @@
 <template>
-  <PageColumnBody class="scroll-pt-[2.625rem] space-y-px">
-    <template v-if="renderComments">
-      <Suspense v-if="content.currentPostItem?.kids && content.currentPostItem.kids.length !== 0">
-        <template #default>
-          <TheCommentsList />
-        </template>
-        <template #fallback>
-          <LoadingItem full-height />
-        </template>
-      </Suspense>
-      <LoadingItem
-        v-else
-        full-height
-        message="So far, no comments have been left on this story."
+  <PageColumnBody
+    ref="containerElement"
+    class="scroll-pt-[2.625rem] space-y-px"
+  >
+    <Suspense>
+      <CommentItem
+        v-if="hasDescription"
+        :item="content.currentPostItem!"
+        class="relative z-20 -mb-2"
       />
+    </Suspense>
+    <div
+      v-show="hasComments && someThreadInstancesVisible"
+      class="sticky top-0 z-10 mx-auto max-w-150 bg-gradient-to-b from-white from-20% to-white/0 px-2 pt-2"
+    >
+      <div class="flex rounded-[0.15625rem] border border-gray-200 bg-gray-100 px-2 py-1">
+        <div class="flex flex-1 items-center gap-1"></div>
+        <div class="flex items-center gap-0.5 px-1 text-gray-500">
+          Thread {{ currentThreadIndex + 1 }} of {{ threadItemCount }}
+        </div>
+        <div class="flex flex-1 items-center justify-end gap-1">
+          <BaseButton
+            icon="chevron-up"
+            small
+            :disabled="currentThreadIndex <= 0"
+            @click="scrollThreadIntoView(currentThreadIndex - 1)"
+          />
+          <BaseButton
+            icon="chevron-down"
+            small
+            :disabled="currentThreadIndex + 1 >= threadItemCount"
+            @click="scrollThreadIntoView(currentThreadIndex + 1)"
+          />
+        </div>
+      </div>
+    </div>
+    <template
+      v-for="(threadItems, index) in threadGroups"
+      :key="index"
+    >
+      <Suspense @resolve="isLoadingThreadGroup = false">
+        <CommentItem
+          v-for="(threadItem, index) in threadItems"
+          ref="threadInstances"
+          :key="index"
+          :item="threadItem"
+          :level="0"
+          :first-of-level="index === 0"
+          :last-of-level="false"
+          :consecutive-last-levels="0"
+        />
+      </Suspense>
     </template>
+    <LoadingItem
+      ref="loadingItemInstance"
+      v-show="!hasComments || !someThreadInstancesVisible || !allThreadInstancesVisible"
+      :full-height="!hasDescription && (!hasComments || !someThreadInstancesVisible)"
+      :message="!hasComments ? 'So far, no comments have been left on this story.' : undefined"
+    />
   </PageColumnBody>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, nextTick } from 'vue';
+import { ref, computed, watch, onMounted, nextTick } from 'vue';
+import type { ComponentPublicInstance } from 'vue';
+import { useInfiniteScroll } from '@vueuse/core';
+import type { HackerNewsItem } from '@/types';
+import { apiItemUrl } from '@/utils';
+import BaseButton from '@/components/BaseButton.vue';
 import PageColumnBody from '@/components/PageColumnBody.vue';
-import TheCommentsList from '@/components/TheCommentsList.vue';
+import CommentItem from '@/components/CommentItem.vue';
 import LoadingItem from '@/components/LoadingItem.vue';
 import { useContentStore } from '@/stores/ContentStore';
 
 const content = useContentStore();
 
-const renderComments = ref(true);
+const containerElement = ref<ComponentPublicInstance | null>(null);
+
+const threadIds = computed(() => content.currentPostItem?.kids ?? []);
+
+const hasDescription = computed(() => !!content.currentPostItem?.text);
+const hasComments = computed(() => threadIds.value.length > 0);
+
+const threadItems = ref<HackerNewsItem[]>([]);
+const threadItemCount = computed(() => threadItems.value.length);
+
+// thread items are grouped together to enable incrementally loading subsequent groups;
+// the items within these groups are what is rendered as CommentItem instances
+const threadGroups = ref<HackerNewsItem[][]>([]);
+
+// depending on the number of total comments, the number of items in a group is between 3 and 10
+const threadGroupSize = computed(() =>
+  Math.min(Math.max(Math.round(1000 / (content.currentPostItem?.descendants ?? 1)), 3), 10)
+);
+
+const groupedThreadItemsCount = computed(() => threadGroups.value.flat().length);
+
+const threadInstances = ref<ComponentPublicInstance[]>([]);
+const threadInstanceCount = computed(() => threadInstances.value.length);
+const someThreadInstancesVisible = computed(() => threadInstanceCount.value > 0);
+const allThreadInstancesVisible = computed(
+  () => threadInstanceCount.value >= threadItemCount.value
+);
+
+// fetch all thread items (thread refers to a top-level comment)
+async function fetchThreadItems() {
+  threadItems.value = [];
+  threadGroups.value = [];
+
+  const fetchedItems: HackerNewsItem[] = await Promise.all(
+    threadIds.value.map(async (id) => {
+      return await fetch(apiItemUrl(id)).then((response) => response.json());
+    })
+  );
+
+  const validItems = fetchedItems.filter(
+    (threadItem) => !threadItem.dead && !threadItem.deleted && threadItem.text
+  );
+
+  threadItems.value.push(...validItems);
 
+  // load the initial group of thread items
+  loadThreadGroup();
+}
+
+// if this is true, it prevents infinite scrolling callbacks from lading multiple thread groups at once
+const isLoadingThreadGroup = ref(false);
+
+// push the next slice of threadItems as a new thread group
+function loadThreadGroup() {
+  if (isLoadingThreadGroup.value) return;
+
+  isLoadingThreadGroup.value = true;
+
+  threadGroups.value.push(
+    threadItems.value.slice(
+      groupedThreadItemsCount.value,
+      groupedThreadItemsCount.value + threadGroupSize.value
+    )
+  );
+}
+
+// when the current post changes, re-fetch thread items
 watch(
   () => content.currentPostItem,
-  async () => {
-    // force comment items to re-render when post item changes
-    renderComments.value = false;
-    await nextTick();
-    renderComments.value = true;
-    await nextTick();
-  }
+  () => {
+    fetchThreadItems();
+  },
+  { immediate: true }
+);
+
+// load a new thread group when bottom of comments list is reached
+onMounted(() => {
+  useInfiniteScroll(
+    containerElement.value?.$el,
+    () => {
+      if (
+        someThreadInstancesVisible.value &&
+        !allThreadInstancesVisible.value &&
+        !isLoadingThreadGroup.value
+      ) {
+        loadThreadGroup();
+      }
+    },
+    { distance: 60 }
+  );
+});
+
+const threadVisibilities = ref<boolean[]>([]);
+const currentThreadIndex = computed(() =>
+  Math.max(
+    threadVisibilities.value.findIndex((item) => item === true),
+    0
+  )
 );
+
+// monitor the currently visible topmost thread through an intersection observer
+onMounted(() => {
+  const intersectionObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        const index = parseInt(entry.target.getAttribute('data-index') ?? '');
+        threadVisibilities.value[index] = entry.isIntersecting;
+      });
+    },
+    {
+      root: containerElement.value?.$el,
+      rootMargin: '-42px 0px 0px 0px',
+    }
+  );
+
+  // when new thread instances are rendered, refresh the intersection observer
+  watch(
+    () => threadInstances.value,
+    () => {
+      intersectionObserver.disconnect();
+
+      threadInstances.value.forEach((threadInstance, index) => {
+        threadInstance.$el.setAttribute('data-index', index);
+        intersectionObserver.observe(threadInstance.$el);
+      });
+    },
+    { deep: true }
+  );
+});
+
+const loadingItemInstance = ref<ComponentPublicInstance | null>(null);
+
+function scrollThreadIntoView(index: number) {
+  if (index < 0 || index >= threadItemCount.value) return;
+
+  // if the index points to a thread that is not yet visible, scroll the loading item into view instead
+  // (triggering loadThreadGroup)
+  const element =
+    index >= threadInstanceCount.value
+      ? loadingItemInstance.value?.$el
+      : threadInstances.value[index].$el;
+
+  element.scrollIntoView({
+    behavior: 'smooth',
+    block: 'start',
+  });
+}
 </script>