hello

src/lib/config.js

@@ -1,3 +1,3 @@
 export const config = {
-    api_url: "http://localhost:3000"
+    api_url: "http://api.omersabic.com:3001"
 }

src/routes/(app)/articles/+page.server.js

@@ -1,6 +1,6 @@
 import { config } from "$lib"
-import { superValidate } from "sveltekit-superforms";
+import { message, superValidate } from "sveltekit-superforms";
-import { formSchema } from "./schema";
+import { createFormSchema, editFormSchema } from "./schema";
 import { zod } from "sveltekit-superforms/adapters";
 import { fail } from "@sveltejs/kit";
 
@@ -20,17 +20,16 @@ export const load = async ({ fetch }) => {
         articles: dataBlog.articles,
         site: dataBlog.site,
         videos: dataVideos.videos,
-        form: await superValidate(zod(formSchema)),
+        createForm: await superValidate(zod(createFormSchema)),
+        editForm: await superValidate(zod(editFormSchema))
     }
 }
 
 /** @type {import("@sveltejs/kit").Actions} */
 export const actions = {
-    default: async (event) => {
+    create: async (event) => {
         console.log("creating article...")
-        const form = await superValidate(event, zod(formSchema));
+        const form = await superValidate(event, zod(createFormSchema));
-        console.log(form.data)
-        console.log(form.valid)
         if (!form.valid) {
             return fail(400, {
                 form,
@@ -44,11 +43,36 @@ export const actions = {
             }
         });
 
-        console.log(res.status)
-        console.log(await res.json())
-
         return {
             form,
         };
+    },
+    edit: async (event) => {
+        const form = await superValidate(event, zod(editFormSchema));
+        if (!form.valid) {
+            return fail(400, {
+                form,
+            });
+        }
+
+        const res = await event.fetch(config.api_url + "/blog/article", {
+            method: "PUT",
+            body: JSON.stringify(form.data),
+            headers: {
+                "content-type": "application/json"
+            }
+        });
+        const resData = await res.json();
+
+        if(!resData.success) {
+            return fail(400, {
+                form,
+                message: resData.message || ""
+            });
+        }
+
+        return {
+            form
+        }
     }
 };

src/routes/(app)/articles/+page.svelte

@@ -4,7 +4,7 @@
 
 	import TooltipButton from '$lib/components/molecules/tooltipbutton.svelte';
 
-	import { formSchema } from './schema';
+	import { createFormSchema } from './schema';
 	import { superForm } from 'sveltekit-superforms';
 	import { zodClient } from 'sveltekit-superforms/adapters';
 	import { toast } from 'svelte-sonner';
@@ -15,8 +15,8 @@
 	export let data;
 	let isDialogOpen = false;
 
-	const form = superForm(data.form, {
+	const form = superForm(data.createForm, {
-		validators: zodClient(formSchema)
+		validators: zodClient(createFormSchema)
 	});
 
 	function submitArticle() {
@@ -24,7 +24,7 @@
 		toast('Article is queued for generation.');
 	}
 
-	/** @type {object | null} */
+	/** @type {import("./schema.js").ArticleData | null} */
 	let editingContent = null;
 
 	/**
@@ -74,6 +74,6 @@
 	</Table.Root>
 </div>
 
-<EditArticleDialog bind:article_data={editingContent} />
+<EditArticleDialog bind:article_data={editingContent} form={data.editForm} />
 
 <!-- <p>{JSON.stringify(data)}</p> -->

src/routes/(app)/articles/createArticleDialog.svelte

@@ -29,6 +29,7 @@
             name="blog-converter"
             id="blog-converter"
             on:submit
+            action="?/create"
         >
             <Form.Field {form} name="video_id">
                 <Form.Control let:attrs>

src/routes/(app)/articles/editArticleDialog.svelte

@@ -1,4 +1,5 @@
 <script>
+	import { page } from '$app/stores';
 	import { Button } from '$lib/components/ui/button';
 	import * as Dialog from '$lib/components/ui/dialog';
 	import * as Form from '$lib/components/ui/form';
@@ -6,19 +7,30 @@
 	import { Label } from '$lib/components/ui/label';
 	import { Switch } from '$lib/components/ui/switch';
 	import { Textarea } from '$lib/components/ui/textarea';
+	import { toast } from 'svelte-sonner';
+	import SuperDebug, { superForm } from 'sveltekit-superforms';
+	import { zodClient } from 'sveltekit-superforms/adapters';
+	import { editFormSchema } from './schema';
 
-	/** @type {object | null} */
+	/** @type {import("sveltekit-superforms").SuperValidated<import("sveltekit-superforms").Infer<import('./schema').EditFormSchema>>} */
+	let data = $page.data.switch;
+	export { data as form };
+
+	/** @type {import("./schema").ArticleData | null} */
 	export let article_data;
 
-    /**
+	const form = superForm(data, {
-	 * @param {any} e
+		validators: zodClient(editFormSchema),
-	 */
+		onSubmit: ({}) => {
-    function updateArticle(e) {
+			toast.success('Article edited successfully.');
-        console.log(e.target.value);
+			article_data = null;
 		}
+	});
+
+	const { form: formData, enhance } = form;
 
 	$: {
-		console.log(article_data);
+		if(article_data !== null) formData.set(article_data || {});
 	}
 </script>
 
@@ -29,23 +41,28 @@
 			<Dialog.Description></Dialog.Description>
 		</Dialog.Header>
 
-		<form id="blog_editor" on:submit|preventDefault={updateArticle}>
+		<form id="blog_editor" action="?/edit" method="post" use:enhance>
+			<Form.Field {form} name="blog_editor">
+				<Form.Control let:attrs>
+					<Input name="id" id="id" value={article_data?.id} class="hidden" />
 					<div>
 						<Label for="is_public_switch">Public</Label>
-				<Switch name="is_public" id="is_public_switch" checked={article_data?.is_public} />
+						<Switch name="is_public" bind:checked={$formData.is_public} />
 					</div>
 					<div>
-				<Input value={article_data?.title} name="" />
+						<Input value={article_data?.title} name="title" />
 					</div>
 					<div>
-				<Textarea name="blog-editor" id="" value={article_data?.content} class="h-80" />
+						<Textarea name="content" value={article_data?.content} class="h-80" />
 						<p class="text-sm text-muted-foreground">
-					Manually edit your article using <a
+							Manually edit your article with <a
 								href="https://www.markdownguide.org/basic-syntax"
 								class="font-bold underline">Markdown</a
 							>
 						</p>
 					</div>
+				</Form.Control>
+			</Form.Field>
 		</form>
 
 		<Dialog.Footer>

src/routes/(app)/articles/schema.js

@@ -9,9 +9,11 @@ export const createFormSchema = z.object({
 /** @typedef {typeof createFormSchema} CreateFormSchema */
 
 export const editFormSchema = z.object({
-  video_id: z.string(),
+  id: z.string(),
-  // length: z.number().optional(),
+  title: z.string(),
-  // format: z.enum(["summary", "listicle", "product review", "news report", "tutorial"]).optional(),
+  content: z.string(),
+  is_public: z.boolean()
 });
 
 /** @typedef {typeof editFormSchema} EditFormSchema */
+/** @typedef {{title: string, content: string, id: string, site_id: string, is_public: boolean, source_video_id: string}} ArticleData */