mardi 18 juillet 2023

SvelteKit: How To Route To URL Based On User Selection?

I'm fairly new to SvelteKit and I ran into a wall.

Brief Overview I'm building a web app where there is a main select element on the home page with different categories pulled in from Supabase. This part is already working and I have it populating from the table. It currently returns an array with an id and a name value.

The plan is for the user to select a category, hit submit, and then it takes them to a page where they'll see a random quote related to the category they select. Those quotes (I'm assuming) will be loaded in from another table in Supabase, based on the category ID selected by the user.

For the folder structure/file setup, I have a "category" folder inside of "routes" and inside of the category folder, I have a folder called "[num]" with the hopes of dynamically pulling in that category id from the user selection and displaying relevant quotes.

The Problem I'm having trouble connecting that category id from the user form submission to the +page.svelte file in the [num] folder to then generate a random related quote.

The Code /routes/+page.svelte form code:

<script>
    export let categories;
</script>
<form>
    <label for="selection">Select a category below:</label>
    <select name="category" id="category">
        <option value="" disabled selected>Select...</option>
        {#each categories as category (category.id)}
            <option value="{category.id}">{category.name}</option>
        {/each}
    </select>
    <button >Get Help</button>
</form>

Array from Supabase that's loaded into the dropdown:

{id: 1, name: 'Category1'}
{id: 2, name: 'Category2'}
{id: 3, name: 'Category3'}

The dropdown only shows the Category name on the frontend, but wanted to share the array here, if it's relevant.

Am I approaching this problem the wrong way? Does anyone have any tips on what I need to include in the +page.svelte and +page.server.js files inside of the [num] folder to get the appropriate data based on the user selection?

I tried reading the SvelteKit documentation on routing, but can't figure out how to apply it to my current code. I also tried experimenting with a several different things in the code, all of which broke the application. Any guidance would be greatly appreciated. I'm just trying to learn.




Aucun commentaire:

Enregistrer un commentaire