🤷 do some stuff

Author: deltea

src/components/Comments.svelte

@@ -1,30 +1,41 @@
 <script lang="ts">
   import { Label } from "bits-ui";
-  import { onMount } from "svelte";
   import "iconify-icon";
+  import { createEventDispatcher } from "svelte";
 
-  export let slug: string;
-
-  function createComment() {
-
-  }
-
-  async function loadComments() {
-    const comments = await fetch(`/api/data.json/?slug=${slug}`, {
-      method: "GET",
-      headers: { "Content-Type": "application/json" },
-    }).then(response => response.json());
+  const dispatch = createEventDispatcher<{
+    slug: string;
+    name: string;
+    text: string;
+  }>();
 
-    console.log(comments);
-  }
+  export let comments: {
+    id: number;
+    slug: string | null;
+    name: string | null;
+    created_at: Date | null;
+    text: string | null;
+  }[] = [];
+  export let slug: string;
 
-  // onMount(loadComments);
+  let name = "";
+  let text = "";
 </script>
 
 <section class="mb-xs" id="comments">
+  {#each comments as comment}
+    <div class="bg-neutral-100 dark:bg-neutral-800 p-xs rounded-lg mb-xs">
+      <div class="flex justify-between items-center">
+        <p class="text-sm font-semibold font-jost">{comment.name}</p>
+        <p class="text-xs text-neutral-500 dark:text-neutral-400">{comment.created_at}</p>
+      </div>
+      <p class="text-sm text-neutral dark:text-neutral-300">{comment.text}</p>
+    </div>
+  {/each}
+
   <form
     class="w-full space-y-xs"
-    on:submit|preventDefault={createComment}
+    on:submit|preventDefault={(() => dispatch("createComment", { slug, name, text }))}
   >
     <div class="space-y-xxs">
       <Label.Root for="body" class="uppercase tracking-widest font-semibold text-sm font-jost">
@@ -35,18 +46,20 @@
         class="block w-full outline-none p-2 bg-neutral-100 text-neutral"
         id="body"
         rows={5}
+        bind:value={text}
         required
       />
     </div>
 
     <div class="space-y-xxs">
       <Label.Root for="author" class="uppercase tracking-widest font-semibold text-sm font-jost">
-        Your Name*
+        Your Name* 
       </Label.Root>
       <input
         type="text"
         class="block w-full outline-none p-2 bg-neutral-100 text-neutral"
         id="author"
+        bind:value={name}
         required
       />
     </div>

src/pages/api/data.json.ts

@@ -6,6 +6,7 @@ import { formatDate, image } from "$lib/utils";
 import { documentToHtmlString } from "@contentful/rich-text-html-renderer";
 import type { InferGetStaticPropsType } from "astro";
 import { BLOCKS } from "@contentful/rich-text-types";
+import { PrismaClient } from "@prisma/client";
 
 import PostContent from "$components/PostContent.svelte";
 import Separator from "$components/Separator.svelte";
@@ -62,6 +63,16 @@ export async function getStaticPaths() {
 
 const { slug } = Astro.params;
 const { content, title, date, cover, destination, podcast } = Astro.props;
+
+const prisma = new PrismaClient();
+
+async function createComment(e: CustomEvent) {
+  return await prisma.comments.create({ ...e.detail });
+}
+
+const comments = await prisma.comments.findMany({
+  where: { slug }
+});
 ---
 
 <Layout {title} padding={false}>
@@ -78,9 +89,20 @@ const { content, title, date, cover, destination, podcast } = Astro.props;
   </PageCover>
 
   <div class="lg:mx-lg xl:mx-xl 2xl:mx-xxl m-xs">
-    <PostContent client:load {content} {podcast} />
+    <PostContent
+      client:load
+      {content}
+      {podcast}
+    />
+
     <Separator class="w-auto" />
-    <Comments client:visible {slug} />
+
+    <Comments
+      client:visible
+      {slug}
+      {comments}
+      on:createComment={createComment}
+    />
   </div>
 
   <PostNavigation {slug} />