use new types

resources/js/views/NewsList.vue

@@ -1,17 +1,18 @@
 <template>
     <SMPage class="news-list">
+        <template #container>
             <SMMessage
-            v-if="formMessage.message"
-            :icon="formMessage.icon"
-            :type="formMessage.type"
-            :message="formMessage.message"
+                v-if="message"
+                icon="alert-circle-outline"
+                type="error"
+                :message="message"
                 class="mt-5" />
             <SMPanelList
                 :loading="loading"
-            :not-found="posts.value?.length == 0"
+                :not-found="posts?.length == 0"
                 not-found-text="No news found">
                 <SMPanel
-                v-for="post in posts.value"
+                    v-for="post in posts"
                     :key="post.id"
                     :image="post.hero"
                     :to="{ name: 'post-view', params: { slug: post.slug } }"
@@ -22,6 +23,7 @@
                     button="Read More"
                     button-type="outline" />
             </SMPanelList>
+        </template>
     </SMPage>
 </template>
 
@@ -33,41 +35,36 @@ import SMPanelList from "../components/SMPanelList.vue";
 import SMPanel from "../components/SMPanel.vue";
 import SMPage from "../components/SMPage.vue";
 import { SMDate } from "../helpers/datetime";
+import { PostCollection, Post } from "../helpers/api.types";
 
-const formMessage = reactive({
-    icon: "",
-    type: "",
-    message: "",
-});
-
+const message = ref("");
 const loading = ref(true);
-const posts = reactive([]);
+let posts: Array<Post> = reactive([]);
 
 const handleLoad = async () => {
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
+    message.value = "";
 
-    try {
-        let result = await api.get({
+    api.get({
         url: "/posts",
         params: {
             limit: 5,
         },
-        });
-        posts.value = result.json.posts;
+    })
+        .then((result) => {
+            const data = result.data as PostCollection;
 
-        posts.value.forEach((post) => {
+            posts = data.posts;
+            posts.forEach((post) => {
                 post.publish_at = new SMDate(post.publish_at, {
                     format: "ymd",
                     utc: true,
                 }).format("yyyy/MM/dd HH:mm:ss");
             });
-    } catch (error) {
-        formMessage.message =
-            error.response?.data?.message ||
-            "The server is currently not available";
-    }
+        })
+        .catch((error) => {
+            message.value =
+                error.data?.message || "The server is currently not available";
+        });
 
     loading.value = false;
 };