Add basic forms and routes

web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.server.ts

@@ -0,0 +1,59 @@
+import { handleFileUpload } from "$lib/server/utils.js";
+
+export const load = async ({ parent, params, cookies, fetch }) => {
+  const articleData = await fetch(`http://localhost:3000/article?id=eq.${params.articleId}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${cookies.get("session_token")}`,
+      Accept: "application/vnd.pgrst.object+json"
+    }
+  });
+
+  const article = await articleData.json();
+  const { website } = await parent();
+
+  return { website, article };
+};
+
+export const actions = {
+  default: async ({ fetch, cookies, request, params, locals }) => {
+    const data = await request.formData();
+
+    const coverFile = data.get("cover-image") as File;
+    const cover = await handleFileUpload(
+      coverFile,
+      params.websiteId,
+      locals.user.id,
+      cookies.get("session_token"),
+      fetch
+    );
+
+    if (cover?.success === false) {
+      return cover;
+    }
+
+    const res = await fetch(`http://localhost:3000/article?id=eq.${params.articleId}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${cookies.get("session_token")}`
+      },
+      body: JSON.stringify({
+        title: data.get("title"),
+        meta_description: data.get("description"),
+        meta_author: data.get("author"),
+        cover_image: cover?.content,
+        publication_date: data.get("publication-date"),
+        main_content: data.get("main-content")
+      })
+    });
+
+    if (!res.ok) {
+      const response = await res.json();
+      return { success: false, message: response.message };
+    }
+
+    return { success: true, message: "Successfully updated article" };
+  }
+};

web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { enhance } from "$app/forms";
+  import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
+  import { ALLOWED_MIME_TYPES } from "$lib/utils";
+
+  const { data, form } = $props();
+</script>
+
+{#if form?.success}
+  <p>{form.message}</p>
+{/if}
+
+{#if form?.success === false}
+  <p>{form.message}</p>
+{/if}
+
+<WebsiteEditor
+  id={data.website.id}
+  title={data.website.title}
+  previewContent={data.article.main_content}
+>
+  <section>
+    <h2>Edit article</h2>
+
+    <form
+      method="POST"
+      enctype="multipart/form-data"
+      use:enhance={() => {
+        return async ({ update }) => {
+          await update({ reset: false });
+        };
+      }}
+    >
+      <label>
+        Title:
+        <input type="text" name="title" value={data.article.title} />
+      </label>
+      <label>
+        Description:
+        <textarea name="description">{data.article.meta_description}</textarea>
+      </label>
+      <label>
+        Author:
+        <input type="text" name="author" value={data.article.meta_author} />
+      </label>
+      <label>
+        Publication date:
+        <input type="date" name="publication-date" value={data.article.publication_date} />
+      </label>
+      <label>
+        Cover image:
+        <input type="file" name="cover-image" accept={ALLOWED_MIME_TYPES.join(", ")} />
+      </label>
+      <label>
+        Main content:
+        <textarea name="main-content">{data.article.main_content}</textarea>
+      </label>
+
+      <button type="submit">Submit</button>
+    </form>
+  </section>
+</WebsiteEditor>