From cbef6d1289a454eb2b562006c4b5d1e216a4de25 Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Mon, 9 Sep 2024 14:43:53 +0200
Subject: [PATCH] Set markdown renderer as client only to fix hydration issues.
 Will later try to improve it and set it back as normal

---
 components/explorer/PreviewContent.vue           |  4 ++--
 components/prose/ProseA.vue                      |  1 +
 components/prose/ProseTag.vue                    | 16 +++++++++++++---
 components/standard/HoverPopup.vue               |  4 ++--
 components/standard/Markdown.vue                 |  2 +-
 ...nRenderer.vue => MarkdownRenderer.client.vue} |  0
 pages/explorer/[projectId]/[...slug].vue         |  5 +++--
 server/api/project/[projectId]/tags/[tag].get.ts |  5 +++--
 server/api/users/[id].get.ts                     | 16 ++++++++++++++++
 9 files changed, 41 insertions(+), 12 deletions(-)
 rename components/standard/{MarkdownRenderer.vue => MarkdownRenderer.client.vue} (100%)
 create mode 100644 server/api/users/[id].get.ts

diff --git a/components/explorer/PreviewContent.vue b/components/explorer/PreviewContent.vue
index cd386ac..4d782d8 100644
--- a/components/explorer/PreviewContent.vue
+++ b/components/explorer/PreviewContent.vue
@@ -54,9 +54,9 @@ async function fetch()
     fetched.value = true;
     pending.value = true;
 
-    const { data } = await useFetch(`/api/project/${props.project}/file/${encodeURIComponent(props.path)}`);
+    const data = await $fetch(`/api/project/${props.project}/file/${encodeURIComponent(props.path)}`);
 
     pending.value = false;
-    file.value = data.value;
+    file.value = data;
 }
 </script>
\ No newline at end of file
diff --git a/components/prose/ProseA.vue b/components/prose/ProseA.vue
index 26c7500..1d43ae5 100644
--- a/components/prose/ProseA.vue
+++ b/components/prose/ProseA.vue
@@ -48,6 +48,7 @@ const { data, status, execute } = await useFetch(`/api/project/${project.value}/
     key: key.value,
     ignoreResponseError: true,
     immediate: false,
+    server: false,
     dedupe: 'defer'
 });
 
diff --git a/components/prose/ProseTag.vue b/components/prose/ProseTag.vue
index 2f55fb9..274760c 100644
--- a/components/prose/ProseTag.vue
+++ b/components/prose/ProseTag.vue
@@ -1,8 +1,8 @@
 <template>
-    <HoverPopup class="mw-[400px]">
+    <HoverPopup class="mw-[400px]" @before-show="fetch">
         <template #content>
             <Suspense>
-                <div v-if="status === 'pending'" class="loading w-[400px] h-[150px]"></div>
+                <div v-if="fetched === false" class="loading w-[400px] h-[150px]"></div>
                 <template v-else-if="!!data">
                     <div v-if="data.description" class="pb-4 pt-3 px-8">
                         <span class="text-2xl font-semibold">#{{ data.tag }}</span>
@@ -28,6 +28,8 @@
 </template>
 
 <script setup lang="ts">
+import type { Tag } from '~/types/api';
+
 const { tag } = defineProps({
     tag: {
         type: String,
@@ -35,7 +37,15 @@ const { tag } = defineProps({
     }
 });
 
+const data = ref<Tag>(), fetched = ref(false);
 const route = useRoute();
 const project = computed(() => parseInt(Array.isArray(route.params.projectId) ? '0' : route.params.projectId));
-const { data, status } = useLazyFetch(`/api/project/${project.value}/tags/${tag}`);
+async function fetch()
+{
+    if(fetched.value)
+        return;
+
+    data.value = await $fetch(`/api/project/${project.value}/tags/${encodeURIComponent(tag)}`);
+    fetched.value = true;
+}
 </script>
\ No newline at end of file
diff --git a/components/standard/HoverPopup.vue b/components/standard/HoverPopup.vue
index bb2a912..4a533a5 100644
--- a/components/standard/HoverPopup.vue
+++ b/components/standard/HoverPopup.vue
@@ -1,6 +1,6 @@
 <template>
-    <Teleport to="#teleports" v-if="display">
-        <div :class="$attrs.class" class="absolute border-2 border-light-35 dark:border-dark-35 max-w-[550px] max-h-[450px] bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100" :style="pos"
+    <Teleport to="#teleports">
+        <div v-show="display" :class="$attrs.class" class="absolute border-2 border-light-35 dark:border-dark-35 max-w-[550px] max-h-[450px] bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100" :style="pos"
             @mouseenter="debounce(show, 250)" @mouseleave="debounce(() => { emit('beforeHide'); display = false }, 250)">
             <slot name="content"></slot>
         </div>
diff --git a/components/standard/Markdown.vue b/components/standard/Markdown.vue
index f703c3f..8e31498 100644
--- a/components/standard/Markdown.vue
+++ b/components/standard/Markdown.vue
@@ -1,7 +1,7 @@
 <template>
   <template
     v-if="content && content.length > 0">
-    <Suspense>
+    <Suspense :timeout="0">
       <MarkdownRenderer #default :key="key" v-if="node" :node="node"></MarkdownRenderer>
       <template #fallback><div class="loading"></div></template>
     </Suspense>
diff --git a/components/standard/MarkdownRenderer.vue b/components/standard/MarkdownRenderer.client.vue
similarity index 100%
rename from components/standard/MarkdownRenderer.vue
rename to components/standard/MarkdownRenderer.client.vue
diff --git a/pages/explorer/[projectId]/[...slug].vue b/pages/explorer/[projectId]/[...slug].vue
index a74cefa..1892439 100644
--- a/pages/explorer/[projectId]/[...slug].vue
+++ b/pages/explorer/[projectId]/[...slug].vue
@@ -4,7 +4,7 @@ definePageMeta({
 })
 
 const route = useRoute();
-const { data, status } = await useFetch(`/api/project/${route.params.projectId}/file/${encodeURIComponent(unifySlug(route.params.slug))}`);
+const { data, status } = await useLazyFetch(`/api/project/${route.params.projectId}/file/${encodeURIComponent(unifySlug(route.params.slug))}`);
 </script>
 
 <template>
@@ -12,7 +12,8 @@ const { data, status } = await useFetch(`/api/project/${route.params.projectId}/
         <Title v-if="data">{{ data.title }}</Title>
     </Head>
     <div class="flex-1 flex overflow-hidden">
-        <template v-if="!!data && data.type == 'Markdown' && !!data.content">
+        <template v-if="status === 'pending'"><div class="loading"></div></template>
+        <template v-else-if="!!data && data.type == 'Markdown' && !!data.content">
             <div class="md:px-24 ps-8 my-1 whitespace-break-spaces">
                 <ProseH1>{{ data.title }}</ProseH1>
                 <Markdown :content="data.content"></Markdown>
diff --git a/server/api/project/[projectId]/tags/[tag].get.ts b/server/api/project/[projectId]/tags/[tag].get.ts
index a31a7c4..a8fe618 100644
--- a/server/api/project/[projectId]/tags/[tag].get.ts
+++ b/server/api/project/[projectId]/tags/[tag].get.ts
@@ -5,8 +5,7 @@ export default defineCachedEventHandler(async (e) => {
     try
     {
         const project = getRouterParam(e, "projectId");
-        const tag = getRouterParam(e, "tag");
-        const query = getQuery(e);
+        const tag = decodeURIComponent(getRouterParam(e, "tag") ?? '');
 
         if(!project)
         {
@@ -24,6 +23,8 @@ export default defineCachedEventHandler(async (e) => {
 
         const db = useDatabase();
 
+        console.log(`SELECT * FROM explorer_tags WHERE ${where.join(" and ")}`, criteria);
+
         const content = db.query(`SELECT * FROM explorer_tags WHERE ${where.join(" and ")}`).get(criteria) as Tag;
 
         if(content !== undefined)
diff --git a/server/api/users/[id].get.ts b/server/api/users/[id].get.ts
new file mode 100644
index 0000000..d45318d
--- /dev/null
+++ b/server/api/users/[id].get.ts
@@ -0,0 +1,16 @@
+import useDatabase from "~/composables/useDatabase";
+import type { User } from "~/types/auth";
+
+export default defineEventHandler((e) => {
+    const id = getRouterParam(e, 'id');
+
+    if(!id)
+    {
+        setResponseStatus(e, 400);
+        return;
+    }
+
+    const db = useDatabase();
+    
+    return db.query(`SELECT id, usernamme, email, state FROM users WHERE id = ?1`).get(id) as User;
+});
\ No newline at end of file