feat: refactor news and migrate rest of useFetch to $dropFetch

pages/news/[id]/index.vue

@@ -70,10 +70,7 @@
     </div>
 
     <!-- Article content - markdown -->
-    <div
-      class="mx-auto prose prose-invert prose-lg"
-      v-html="renderedContent"
-    />
+    <div class="mx-auto prose prose-invert prose-lg" v-html="renderedContent" />
   </div>
 
   <DeleteNewsModal v-model="currentlyDeleting" />
@@ -85,16 +82,19 @@ import { TrashIcon } from "@heroicons/vue/24/outline";
 import { micromark } from "micromark";
 
 const route = useRoute();
-const { data: article } = await useNews().getById(route.params.id as string);
 const currentlyDeleting = ref();
 const user = useUser();
-
-if (!article.value) {
+const news = useNews();
+if (!news.value) {
+  news.value = await fetchNews();
+}
+const article = computed(() => news.value?.find((e) => e.id == route.params.id));
+if (!article.value)
   throw createError({
     statusCode: 404,
-    message: "Article not found",
+    statusMessage: "Article not found",
+    fatal: true,
   });
-}
 
 // Render markdown content
 const renderedContent = computed(() => {

pages/news/index.vue

@@ -10,8 +10,6 @@
             Stay up to date with the latest updates and announcements.
           </p>
         </div>
-
-        <NewsArticleCreate @refresh="refreshAll" />
       </div>
     </div>
 
@@ -83,9 +81,17 @@
 
 <script setup lang="ts">
 import { DocumentIcon } from "@heroicons/vue/24/outline";
+import type { Article } from "@prisma/client";
+import type { SerializeObject } from "nitropack/types";
 
-const newsDirectory = ref();
-const { data: articles, refresh: refreshArticles } = await useNews().getAll();
+const props = defineProps<{
+  articles: SerializeObject<
+    Article & {
+      tags: Array<{ name: string; id: string }>;
+      author: { displayName: string };
+    }
+  >[];
+}>();
 
 const formatDate = (date: string) => {
   return new Date(date).toLocaleDateString("en-AU", {
@@ -98,11 +104,6 @@ const formatDate = (date: string) => {
 useHead({
   title: "News",
 });
-
-const refreshAll = async () => {
-  await refreshArticles();
-  await newsDirectory.value?.refresh();
-};
 </script>
 
 <style scoped>