use new types

resources/js/views/NewsList.vue

@@ -1,27 +1,29 @@
 <template>
     <SMPage class="news-list">
-        <SMMessage
-            v-if="formMessage.message"
-            :icon="formMessage.icon"
-            :type="formMessage.type"
-            :message="formMessage.message"
-            class="mt-5" />
-        <SMPanelList
-            :loading="loading"
-            :not-found="posts.value?.length == 0"
-            not-found-text="No news found">
-            <SMPanel
-                v-for="post in posts.value"
-                :key="post.id"
-                :image="post.hero"
-                :to="{ name: 'post-view', params: { slug: post.slug } }"
-                :title="post.title"
-                :date="post.publish_at"
-                :content="post.content"
-                :show-date="false"
-                button="Read More"
-                button-type="outline" />
-        </SMPanelList>
+        <template #container>
+            <SMMessage
+                v-if="message"
+                icon="alert-circle-outline"
+                type="error"
+                :message="message"
+                class="mt-5" />
+            <SMPanelList
+                :loading="loading"
+                :not-found="posts?.length == 0"
+                not-found-text="No news found">
+                <SMPanel
+                    v-for="post in posts"
+                    :key="post.id"
+                    :image="post.hero"
+                    :to="{ name: 'post-view', params: { slug: post.slug } }"
+                    :title="post.title"
+                    :date="post.publish_at"
+                    :content="post.content"
+                    :show-date="false"
+                    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({
-            url: "/posts",
-            params: {
-                limit: 5,
-            },
-        });
-        posts.value = result.json.posts;
+    api.get({
+        url: "/posts",
+        params: {
+            limit: 5,
+        },
+    })
+        .then((result) => {
+            const data = result.data as PostCollection;
 
-        posts.value.forEach((post) => {
-            post.publish_at = new SMDate(post.publish_at, {
-                format: "ymd",
-                utc: true,
-            }).format("yyyy/MM/dd HH:mm:ss");
+            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) => {
+            message.value =
+                error.data?.message || "The server is currently not available";
         });
-    } catch (error) {
-        formMessage.message =
-            error.response?.data?.message ||
-            "The server is currently not available";
-    }
 
     loading.value = false;
 };