fix issues

frontend/dist.go

@@ -0,0 +1,18 @@
+package frontend
+
+import "embed"
+
+// embedded files
+//
+//go:embed dist/assets/*
+var StaticDist embed.FS
+
+// embedded dist/favicon.ico
+//
+//go:embed dist/favicon.ico
+var Favicon []byte
+
+// embedded dist/index.html
+//
+//go:embed dist/index.html
+var IndexPage string

frontend/src/components/ListItem.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="bg-slate-100 border rounded mb-4 p-2 md:mb-8 md:p-4">
-    <div v-if="item.Content.length > 0" class="text-wrap font-sans" v-html="processedContent"></div>
+  <div class="mb-4 md:mb-8 border rounded overflow-hidden" :id="`message-${item.ID}`">
+    <div class="bg-slate-100 p-2  md:p-4">
+      <div v-if="item.Content.length > 0" class="text-wrap font-sans" v-html="processedContent"></div>
 
-    <div v-if="item.Media.length > 0" class="mt-2 md:mt-4">
-      <div class="medias grid grid-cols-3 gap-2 md:gap-4">
-        <template v-for="media in item.Media" :key="media.id">
-          <MediaItem :media="media" :channel="item.ChannelID" />
-        </template>
+      <div v-if="item.Media.length > 0" class="mt-2 md:mt-4">
+        <div class="medias grid grid-cols-3 gap-2 md:gap-4">
+          <template v-for="media in item.Media" :key="media.id">
+            <MediaItem :media="media" :channel="item.ChannelID" />
+          </template>
+        </div>
       </div>
     </div>
+    <div class="grid grid-cols-2">
+      <button class="py-2 bg-slate-100 hover:bg-slate-50 text-center">Like</button>
+      <button class="py-2 bg-slate-100 hover:bg-slate-50 text-center text-red-600" @click="delMessage()">Delete</button>
+    </div>
   </div>
 </template>
 
 <script>
+import { deleteMessage } from "@/services/messages";
 import { computed, defineComponent } from "vue";
 import MediaItem from "./MediaItem.vue";
 
@@ -21,6 +28,7 @@ function nl2br(str, is_xhtml) {
   return (str + "").replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, "$1" + breakTag + "$2");
 }
 
+
 export default defineComponent({
   components: {
     MediaItem,
@@ -35,9 +43,36 @@ export default defineComponent({
       return nl2br(content, false);
     });
 
+    const delMessage = async () => {
+      console.log("delMessage")
+      if (!confirm("Are you sure?")) {
+        return;
+      }
+
+      const itemId = props.item.ID
+
+      await deleteMessage(itemId);
+
+      // delete dom id #message-{{ item.ID }}
+      console.log("delete", `message-${itemId}`);
+      const messageEle = document.getElementById(`message-${itemId}`);
+      if (messageEle) {
+        // remove with animation
+        messageEle.style.transition = "height 0.5s";
+        messageEle.style.height = "0px";
+        messageEle.style.border = "0px";
+        messageEle.style.margin = "0px";
+
+        setTimeout(() => {
+          messageEle.remove();
+        }, 500);
+      }
+    };
+
     return {
       item: props.item,
       processedContent,
+      delMessage,
     };
   },
 });

frontend/src/components/MediaPhoto.vue

@@ -1,5 +1,6 @@
 <template>
-  <img :src="photoSrc()" class="max-w-full h-full max-h-full" loading="lazy" decoding="async" @click="openPreview" />
+  <img :src="photoSrc()" @click="openPreview" decoding="async" loading="lazy"
+    class="w-full max-w-full h-full max-h-full" />
   <div v-if="isPreviewVisible" class="modal" @click="closePreview">
     <img :src="photoSrc()" alt="Preview" class="preview-image" />
   </div>

frontend/src/router/index.js

@@ -10,15 +10,20 @@ const router = createRouter({
       component: () => import('@/views/Home.vue'),
     },
     {
-      path: '/favorites',
-      name: 'favorites',
+      path: '/favorites/:offset(\d+)?',
+      name: 'favorite-messages',
       component: () => import('@/views/FavoriteMessages.vue'),
     },
     {
-      path: '/channels/:channel/messages',
+      path: '/channels/:channel/messages/:offset(\d+)?',
       name: 'channel-messages',
       component: () => import('@/views/ChannelMessages.vue'),
     },
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'NotFound',
+      component: import('@/views/NotFound.vue'),
+    },
   ]
 })
 

frontend/src/services/messages.js

@@ -36,3 +36,10 @@ export async function getFavoriteMessages(params) {
   const resp = await http.get(`/favorites`, { params });
   return processResponseMessage(resp.data);
 }
+
+export async function deleteMessage(messageId) {
+  // return mock('messages', processResponseMessage)
+
+  const resp = await http.delete(`/messages/${messageId}`)
+  return resp.data;
+}

frontend/src/views/ChannelMessages.vue

@@ -16,16 +16,31 @@ import ListItem from "@/components/ListItem.vue";
 import { getChannel } from "@/services/channels";
 import { getChannelMessages } from "@/services/messages";
 import { onMounted, ref } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 
 const route = useRoute();
+const router = useRouter();
+
 
 const channel = ref({});
 const messages = ref([]);
 
 const loadMore = async () => {
-  const items = await getChannelMessages(route.params.channel, { offset: messages.value[messages.value.length - 1].ID });
-  messages.value.push(...items);
+  // router goto next page
+  // offset is last message ID
+  const offset = messages.value[messages.value.length - 1].ID
+  router.push({
+    name: "channel-messages",
+    params: {
+      channel: route.params.channel,
+      offset: offset,
+    },
+  });
+
+  messages.value = await getChannelMessages(route.params.channel, { offset: offset });
+  console.log("messages", messages.value);
+  // page scroll to top with animation
+  window.scrollTo({ top: 0, behavior: "smooth" });
 }
 
 onMounted(async () => {
@@ -34,7 +49,7 @@ onMounted(async () => {
   console.log("channel", channel.value);
 
   // get channel messages
-  messages.value = await getChannelMessages(route.params.channel);
+  messages.value = await getChannelMessages(route.params.channel, { offset: route.params.offset });
   console.log("messages", messages.value);
 });
 </script>

frontend/src/views/FavoriteMessages.vue

@@ -17,15 +17,31 @@
 import ListItem from "@/components/ListItem.vue";
 import { getFavoriteMessages } from "@/services/messages";
 import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
 
 const messages = ref([]);
 
 const loadMore = async () => {
-  const items = await getChannelMessages(route.params.channel, { offset: messages.value[messages.value.length - 1].ID });
-  messages.value.push(...items);
+  // router goto next page
+  // offset is last message ID
+  const offset = messages.value[messages.value.length - 1].ID
+  router.push({
+    name: "favorite-messages",
+    params: {
+      channel: route.params.channel,
+      offset: offset,
+    },
+  });
+
+  messages.value = await getFavoriteMessages({ offset: offset });
+  console.log("messages", messages.value);
+  // page scroll to top with animation
+  window.scrollTo({ top: 0, behavior: "smooth" });
 }
 
 onMounted(async () => {
-  messages.value = await getFavoriteMessages();
+  messages.value = await getFavoriteMessages({ offset: route.params.offset });
 });
 </script>

frontend/src/views/NotFound.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>404 NotFound</h1>
+</template>