frontend changes

frontend/src/lib/api.ts

@@ -1,28 +1,85 @@
-import axios from 'axios';
-import type { Form, Submission } from './types';
+// api.ts
+const API_BASE_URL = 'http://127.0.0.1:8080';
 
-const API_BASE = 'http://localhost:8080'; // Backend URL
+/**
+ * Create a new form.
+ * @param name The name of the form.
+ * @param fields The fields of the form in JSON format.
+ * @returns The ID of the created form.
+ */
+export async function createForm(name: string, fields: unknown): Promise<string> {
+	const response = await fetch(`${API_BASE_URL}/forms`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json'
+		},
+		body: JSON.stringify({ name, fields })
+	});
 
-// Fetch all forms
-export async function fetchForms(): Promise<Form[]> {
-	const response = await axios.get(`${API_BASE}/forms`);
-	return response.data;
+	if (!response.ok) {
+		throw new Error(`Error creating form: ${response.statusText}`);
+	}
+
+	return await response.json();
 }
 
-// Create a new form
-export async function createForm(form: Omit<Form, 'id' | 'created_at'>): Promise<string> {
-	const response = await axios.post(`${API_BASE}/forms`, form);
-	return response.data; // Returns the created form's ID
+/**
+ * Get all forms.
+ * @returns An array of forms.
+ */
+export async function getForms(): Promise<unknown[]> {
+	const response = await fetch(`${API_BASE_URL}/forms`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json'
+		}
+	});
+
+	if (!response.ok) {
+		throw new Error(`Error fetching forms: ${response.statusText}`);
+	}
+
+	return await response.json();
 }
 
-// Fetch form submissions
-export async function fetchSubmissions(formId: string): Promise<Submission[]> {
-	const response = await axios.get(`${API_BASE}/forms/${formId}/submissions`);
-	return response.data;
+/**
+ * Submit a form.
+ * @param formId The ID of the form to submit.
+ * @param data The submission data in JSON format.
+ * @returns The ID of the created submission.
+ */
+export async function submitForm(formId: string, data: unknown): Promise<string> {
+	const response = await fetch(`${API_BASE_URL}/forms/${formId}/submissions`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json'
+		},
+		body: JSON.stringify(data)
+	});
+
+	if (!response.ok) {
+		throw new Error(`Error submitting form: ${response.statusText}`);
+	}
+
+	return await response.json();
 }
 
-// Submit a form
-export async function submitForm(formId: string, data: Record<string, unknown>): Promise<string> {
-	const response = await axios.post(`${API_BASE}/forms/${formId}/submissions`, data);
-	return response.data; // Returns the submission ID
+/**
+ * Get all submissions for a specific form.
+ * @param formId The ID of the form.
+ * @returns An array of submissions for the form.
+ */
+export async function getSubmissions(formId: string): Promise<unknown[]> {
+	const response = await fetch(`${API_BASE_URL}/forms/${formId}/submissions`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json'
+		}
+	});
+
+	if (!response.ok) {
+		throw new Error(`Error fetching submissions: ${response.statusText}`);
+	}
+
+	return await response.json();
 }

frontend/src/routes/+page.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { fetchForms } from '../lib/api';
+	import { getForms } from '../lib/api';
 	import type { Form } from '../lib/types';
 
-	let forms: Form[] = [];
+	let forms: any;
 
 	onMount(async () => {
-		forms = await fetchForms();
+		forms = await getForms();
 	});
 </script>
 

frontend/src/routes/create/+page.svelte

@@ -6,13 +6,24 @@
 	let fields: FormField[] = [];
 
 	function addField() {
-		fields.push({ label: '', name: '', field_type: 'text' });
+		// Use a new array assignment to trigger reactivity
+		fields = [...fields, { label: '', name: '', field_type: 'text' }];
+	}
+
+	function removeField(index: number) {
+		// Reassign to trigger reactivity
+		fields = fields.filter((_, i) => i !== index);
 	}
 
 	async function saveForm() {
-		await createForm({ name, fields });
-		alert('Form created successfully!');
-		location.href = '/';
+		try {
+			await createForm(name, fields);
+			alert('Form created successfully!');
+			location.href = '/';
+		} catch (error) {
+			console.error('Failed to create form:', error);
+			alert('An error occurred while creating the form.');
+		}
 	}
 </script>
 
@@ -20,7 +31,7 @@
 
 <label>
 	Form Name:
-	<input type="text" bind:value={name} />
+	<input type="text" bind:value={name} placeholder="Enter form name" />
 </label>
 
 <h2>Fields</h2>
@@ -28,11 +39,11 @@
 	<div>
 		<label>
 			Label:
-			<input type="text" bind:value={field.label} />
+			<input type="text" bind:value={field.label} placeholder="Enter field label" />
 		</label>
 		<label>
 			Name:
-			<input type="text" bind:value={field.name} />
+			<input type="text" bind:value={field.name} placeholder="Enter field name" />
 		</label>
 		<label>
 			Type:
@@ -43,8 +54,9 @@
 				<option value="textarea">Textarea</option>
 			</select>
 		</label>
-		<button on:click={() => fields.splice(i, 1)}>Remove</button>
+		<button on:click={() => removeField(i)}>Remove</button>
 	</div>
 {/each}
+
 <button on:click={addField}>Add Field</button>
-<button on:click={saveForm}>Save Form</button>
+<button on:click={saveForm} disabled={!name || fields.length === 0}> Save Form </button>

frontend/src/routes/form/[id]/+page.svelte

@@ -1,22 +1,30 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { fetchForms, fetchSubmissions, submitForm } from '../../../lib/api';
+	import { getForms, getSubmissions, submitForm } from '../../../lib/api';
 	import type { Form, Submission } from '../../../lib/types';
+	import { page } from '$app/stores';
 
 	export let params: { id: string };
-	let form: Form | null = null;
-	let submissions: Submission[] = [];
+	console.log('params.id:', params);
+	let form: any | null = null;
+	let submissions: any[] = [];
 	let responseData: Record<string, any> = {};
 
 	onMount(async () => {
-		form = await fetchForms().then((forms) => forms.find((f) => f.id === params.id) || null);
-		submissions = await fetchSubmissions(params.id);
+		const { id } = $page.params; // Use $page.params to access route parameters
+		if (id) {
+			form = await getForms().then((forms) => forms.find((f: any) => f.id === id) || null);
+			submissions = await getSubmissions(id);
+		} else {
+			console.error('Route parameter id is missing');
+		}
 	});
 
 	async function submitResponse() {
-		await submitForm(params.id, responseData);
+		const { id } = $page.params; // Use $page.params to access route parameters
+		await submitForm(id, responseData);
 		alert('Response submitted successfully!');
-		submissions = await fetchSubmissions(params.id); // Refresh submissions
+		submissions = await getSubmissions(params.id); // Refresh submissions
 	}
 </script>
 

frontend/src/routes/form/[id]/+page.ts

@@ -0,0 +1,5 @@
+export function load({ params }) {
+	return {
+		params
+	};
+}