Create ideas page
Using our created methods, we can build a page to submit and view ideas.
First, let's create a load function for our ideas page. This will load the latest ideas from the database.
To do so, create a file called src/routes/+page.js with the following content:
Web
import { getIdeas } from '$lib/ideas';
export async function load() {
return {
ideas: await getIdeas()
};
}
Simple as that! Now, let's create the page itself. Replace the contents in src/routes/+page.svelte with the following:
HTML
<script>
import { invalidateAll } from '$app/navigation';
import { addIdea, deleteIdea } from '$lib/ideas.js';
import { user } from '$lib/user.js';
export let data;
const add = async (e) => {
e.preventDefault();
const formEl = e.target;
const formData = new FormData(formEl);
await addIdea($user.$id, formData.get('title'), formData.get('description'));
invalidateAll();
// Reset form
formEl.reset();
};
const remove = async (id) => {
await deleteIdea(id);
invalidateAll();
};
</script>
{#if $user}
<section>
<h2>Submit Idea</h2>
<form on:submit={add}>
<label>
Title
<input type="text" placeholder="Title" name="title" required />
</label>
<label>
Description
<textarea placeholder="Description" name="description" />
</label>
<button type="submit">Submit</button>
</form>
</section>
{:else}
<section><p>Please login to submit an idea.</p></section>
{/if}
<section>
<h2>Latest Ideas</h2>
{#if data.ideas.total === 0}
<p>No ideas yet.</p>
{:else}
<p>{data.ideas.total} ideas found</p>
{/if}
<ul>
{#each data.ideas.documents as idea}
<li>
<strong>{idea.title}</strong>
{#if idea.description}
<p>{idea.description}</p>
{/if}
{#if $user && idea.userId === $user.$id}
<button type="button" on:click={() => remove(idea.$id)}>Remove</button>
{/if}
</li>
{/each}
</ul>
</section>
<style>
section {
margin-bottom: 3rem;
}
form {
display: grid;
gap: 0.75rem;
}
label {
display: grid;
gap: 0.25rem;
}
ul {
list-style: none;
padding: 0;
}
li {
border-radius: 0.5rem;
border: 2px dashed pink;
min-width: 20%;
padding: 1rem;
margin-bottom: 1rem;
}
</style>
With this you have successfully created an Ideas Tracker! You can now submit ideas and view them.