fix: components

frontend/src/views/ChannelMessages.vue

@@ -1,65 +1,17 @@
 <template>
-  <h1 class="mb-4 font-semibold text-xl">{{ channel.Title }}</h1>
-  <div v-if="messages.length == 0">Empty...</div>
-  <template v-else>
-    <ListItem v-for="message in messages" :key="message.ID" :item="message" />
-
-    <div class="flex items-center justify-center mb-10">
-      <button class="py-2 hover:bg-slate-100 rounded border text-xl font-bold w-full"
-        @click="loadMore">LoadMore</button>
-    </div>
-  </template>
+  <MessageList :getTitle="getTitle" routeName="channel-messages" :getMessages="getChannelMessages" />
 </template>
 
 <script setup>
-import ListItem from "@/components/ListItem.vue";
+import MessageList from "@/components/MessageList.vue";
 import { getChannel } from "@/services/channels";
 import { getChannelMessages } from "@/services/messages";
-import { nextTick, onMounted, ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { useRoute } from "vue-router";
 
 const route = useRoute();
-const router = useRouter();
 
-
-const channel = ref({});
-const messages = ref([]);
-
-const loadMore = async () => {
-  // router goto next page
-  // offset is last message ID
-
-  // page scroll to top with animation
-  window.scrollTo({ top: 0, behavior: "smooth" });
-  const offset = messages.value[messages.value.length - 1].ID
-
-  messages.value = [];
-  router.push({
-    name: "channel-messages",
-    params: {
-      channel: route.params.channel,
-      offset: offset,
-    },
-  });
-
-  // nextTick 干什么用的？
-  nextTick(async () => {
-    messages.value = await getChannelMessages(route.params.channel, { offset: offset });
-    console.log("messages", messages.value);
-  });
+const getTitle = async () => {
+  const channel = await getChannel(route.params.channel);
+  return channel.Title;
 }
-
-
-const loadData = async () => {
-  // get channel info
-  channel.value = await getChannel(route.params.channel);
-  console.log("channel", channel.value);
-
-  // get channel messages
-  messages.value = await getChannelMessages(route.params.channel, { offset: route.params.offset });
-  console.log("messages", messages.value);
-}
-
-watch(route, loadData);
-onMounted(loadData);
 </script>