feat: add frontend

frontend/src/views/ChannelMessages.vue

@@ -1,37 +1,40 @@
 <template>
-    <h1 class="mb-4 font-semibold text-xl">{{ channel.Title }}</h1>
-    <ListItem v-for="item in items" :key="item.id" :item="item" />
+  <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">
+      <button class="px-4 py-2 hover:bg-slate-100 rounded border text-xl font-semibold w-full"
+        @click="loadMore">LoadMore</button>
+    </div>
+  </template>
 </template>
 
 <script setup>
-import { useRoute } from "vue-router";
+import ListItem from "@/components/ListItem.vue";
+import { getChannel } from "@/services/channels";
+import { getChannelMessages } from "@/services/messages";
 import { onMounted, ref } from "vue";
-import ListItem from "../components/ListItem.vue";
-import axios from "axios";
+import { useRoute } from "vue-router";
 
 const route = useRoute();
 
 const channel = ref({});
-const items = ref([]);
+const messages = ref([]);
 
-onMounted(() => {
-    axios.get(`/channels/${route.params.channel}`).then((resp) => {
-        channel.value = resp.data;
-    });
+const loadMore = async () => {
+  const items = await getChannelMessages(route.params.channel, { offset: messages.value[messages.value.length - 1].ID });
+  messages.value.push(...items);
+}
 
-    axios.get(`/channels/${route.params.channel}/messages`).then((resp) => {
-        let data = resp.data;
-        data.map((item) => {
-            let media = item.Media.replace(/"asset_id":\s(\d+)/g, (match, p1, p2, p3, offset, string) => {
-                return `"asset_id": "${p1}"`
-            })
+onMounted(async () => {
+  // get channel info
+  channel.value = await getChannel(route.params.channel);
+  console.log("channel", channel.value);
 
-            item.Media = JSON.parse(media).filter((item) => {
-                return Object.keys(item).length > 0;
-            });
-            console.log(item);
-        });
-        items.value = data;
-    });
+  // get channel messages
+  messages.value = await getChannelMessages(route.params.channel);
+  console.log("messages", messages.value);
 });
 </script>