♻️ Refactor post list

components/PostItem.vue

@@ -27,7 +27,7 @@
       </article>
 
       <v-card v-if="post.body?.attachments?.length > 0" class="mb-5">
-        <attachment-carousel :attachments="post.body?.attachments" />
+        <attachment-carousel :no-clickable-attachment="props.noClickableAttachment" :attachments="post.body?.attachments" />
       </v-card>
 
       <div class="text-sm flex flex-col">
@@ -53,6 +53,6 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ post: any, forceShowContent?: boolean }>()
+const props = defineProps<{ post: any, forceShowContent?: boolean, noClickableAttachment?: boolean }>()
 const config = useRuntimeConfig()
 </script>

components/PostList.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-infinite-scroll :items="posts" :onLoad="loadPost">
+    <template v-for="item in posts" :key="item">
+      <post-item :post="item" no-clickable-attachment />
+    </template>
+  </v-infinite-scroll>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ author?: string, realmId?: number }>()
+
+const config = useRuntimeConfig()
+
+const posts = ref<any[]>([])
+
+async function loadPost({ done }: any) {
+  const searchQueries = new URLSearchParams({
+    take: (10).toString(),
+    offset: posts.value.length.toString(),
+  })
+
+  if (props.author) {
+    searchQueries.set("author", props.author)
+  }
+  if (props.realmId) {
+    searchQueries.set("realmId", props.realmId.toString())
+  }
+
+  const res = await fetch(`${config.public.solarNetworkApi}/cgi/interactive/posts?` + searchQueries)
+  const result = await res.json()
+
+  if (result.data.length > 0) {
+    posts.value.push(...result.data)
+    done("ok")
+  } else {
+    done("empty")
+  }
+
+}
+</script>

components/PostReplyList.vue

@@ -0,0 +1,32 @@
+<template>
+  <v-infinite-scroll :items="posts" :onLoad="loadPost">
+    <template v-for="item in posts" :key="item">
+      <post-item :post="item" no-clickable-attachment />
+    </template>
+  </v-infinite-scroll>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ postId: number }>()
+
+const config = useRuntimeConfig()
+
+const posts = ref<any[]>([])
+
+async function loadPost({ done }: any) {
+  const searchQueries = new URLSearchParams({
+    take: (10).toString(),
+    offset: posts.value.length.toString(),
+  })
+
+  const res = await fetch(`${config.public.solarNetworkApi}/cgi/interactive/posts/${props.postId}/replies?` + searchQueries)
+  const result = await res.json()
+
+  if (result.data.length > 0) {
+    posts.value.push(...result.data)
+    done("ok")
+  } else {
+    done("empty")
+  }
+}
+</script>

components/attachment/Carousel.vue

@@ -7,13 +7,19 @@
     height="auto"
   >
     <v-carousel-item v-for="item in metadata" class="fill-height">
-      <attachment-renderer :item="item" />
+      <nuxt-link v-if="item.mimetype.split('/')[0] == 'image' && !props.noClickableAttachment"
+                 :to="`/gallery/${item.id}`">
+        <attachment-renderer :item="item" />
+      </nuxt-link>
+      <div v-else>
+        <attachment-renderer :item="item" />
+      </div>
     </v-carousel-item>
   </v-carousel>
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ attachments: number[] }>()
+const props = defineProps<{ attachments: number[], noClickableAttachment?: boolean }>()
 const emits = defineEmits(["update:metadata"])
 
 const config = useRuntimeConfig()

components/attachment/Renderer.vue

@@ -20,7 +20,7 @@
   <v-img v-else-if="item.mimetype.split('/')[0] == 'image'" :src="getAttachmentUrl(item.id)" :alt="item.alt"
          class="w-full h-full" cover />
   <video v-else-if="item.mimetype.split('/')[0] == 'video'" :src="getAttachmentUrl(item.id)" class="w-full h-full"
-         controls />
+         controls @click.stop />
   <v-sheet v-else color="rgba(0, 0, 0, .4)" height="calc(100% + 24px)" class="p-5">
     <v-row class="fill-height" align="center" justify="center">
       <v-col class="text-center">