DEV Community

Cover image for EasyPollVote [Dev Log #3]
FrancisTRᴅᴇᴠ (っ◔◡◔)っ
FrancisTRᴅᴇᴠ (っ◔◡◔)っ Subscriber

Posted on

EasyPollVote [Dev Log #3]

#discuss #easypvdevlog #nextjs #typescript

Switch-case routing for form actions

Welcome to the Third DEV LOG!

Welcome to the third Dev Log of my full stack application called EasyPollVote (EasyPV)!

 

What is EasyPollVote (EasyPV)?

A Next.js application where the ultimate goal is having the convenience to create your own poll and share it for others to vote on your custom poll!

For example, a user can create their own poll. Their poll can be something like "Do you like Cats or Dogs?" following the two options users can vote on "Cats" or "Dogs". Then, they will be able to send the private link to anyone and the voters can vote on it without the need to create an account!

That is the whole goal. Do note that this goal may change as time goes on!

The current goal is to learn about the use of Supabase!

 

Current Progress

Made small progress. Still fixing the issue of the End Date where it is inconsistent. Speaking of timing, I need to fix the PokeAPI, so it can update on the appropriate date.

Anyway, added a Title on the front page :)

Also, thank you @sylwia-lask for the feedback on the responsive issue!


The issue should be fixed now! :D

With the changes made, I did mention I will get into detail on how the front page (Voting your Pokemon form) functionality work. Do note the solution I have is not perfect and I had ChatGPT to assist me on this project. Feedback is greatly appreciated :)

 

Demo Voting Poll in detail!

Image

I will be discussing on this demo poll. The main functionality is when you start to submit the form. This is the current structure:

{/* Form */ }
<form onSubmit={handleSubmit} className="flex flex-col gap-2 p-10">
    <h1 className="text-center text-xl font-semibold">
        Voting Form
    </h1>
    <input
        name="name"
        placeholder="Name (required)"
        value={formData.name}
        onChange={handleChange}
        className="p-2 border"
        required
    />

    <input
        name="email"
        placeholder="Email (required)"
        value={formData.email}
        onChange={handleChange}
        className="p-2 border"
        required
    />

    {pokemonList.map((pokemon, index) => (
        <label key={index} className="flex items-center gap-2 p-2 border-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700">
            <input
                type="radio"
                name="vote"
                value={pokemon.name}
                onChange={handleChange}
            />
            {pokemon.name}
        </label>
    ))}

    <button disabled={loading} className="bg-blue-500 text-white p-2">
        Submit
    </button>

    {message && <p>{message}</p>}
</form>
Enter fullscreen mode Exit fullscreen mode

You may notice the two big variables: handleChange and handleSubmit.

For handleChange, nothing really big is going on. It is basically updating the formData variable based on the user's input. So when the user click submit, the formData will be sent to the database.

const [formData, setFormData] = useState({
    name: "",
    email: "",
    vote: "",
    // Not uploaded to the Database. This is used for route.ts switch case
    action: "Demo",
});


...


// Handles anything Input related on the Voting Demo Form
const handleChange = (e: any) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
};
Enter fullscreen mode Exit fullscreen mode

For the handleSubmit, this is where the main functionality takes place!

// When the Form is submitted
const handleSubmit = async (e: any) => {
    e.preventDefault();
    setMessage("");

    // If the user did not vote a specific pokemon, error message is shown
    if (!formData.vote) {
        setMessage("Error: Please select a Pokémon to vote for.");
        return;
    }

    // If all inputs are entered, perform a POST request in the route.ts where we head to the "Demo" switch statement
    const res = await fetch("/api/vote", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            name: formData.name,
            email: formData.email,
            vote: formData.vote,
            action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case
        }),
    });

    const data = await res.json();

    if (!res.ok) {
        setMessage(data?.error || "Error: Form submission failed.");
    } else {
        setMessage("Vote submitted successfully!");
        setFormData({
            name: "",
            email: "",
            vote: "",
            action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case
        });
    }
};
Enter fullscreen mode Exit fullscreen mode

When the user clicks "Submit", it checks to see if the user selected their vote. If not, it prompts the error to the user that they need to vote:

// If the user did not vote a specific pokemon, error message is shown
if (!formData.vote) {
    setMessage("Error: Please select a Pokémon to vote for.");
    return;
}
Enter fullscreen mode Exit fullscreen mode

If the check is all good, it performs a POST request on /api/vote and sending it to the database. After that, the form clears out:

// If all inputs are entered, perform a POST request in the route.ts where we head to the "Demo" switch statement
const res = await fetch("/api/vote", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
        name: formData.name,
        email: formData.email,
        vote: formData.vote,
        action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case
    }),
});

const data = await res.json();

if (!res.ok) {
    setMessage(data?.error || "Error: Form submission failed.");
} else {
    setMessage("Vote submitted successfully!");
    setFormData({
        name: "",
        email: "",
        vote: "",
        action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case
    });
}
Enter fullscreen mode Exit fullscreen mode

 

That's pretty much what's happening on the client side. You may also notice this part:

action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case
Enter fullscreen mode Exit fullscreen mode

In the api/vote folder, I have multiple PUT requests in where inside of the PUT request, there is a switch case. I won't be able to go into detail now, but one thing to note that it is used to identify which code to execute. In this case, it's "Demo":

case "Demo": {
    const { name, email, vote } = body;

    if (!name || !email || !vote) {
        return NextResponse.json(
            { error: "Missing name, email, or vote" },
            { status: 400 }
        );
    }

    // Insert the row that contains their name, email, and the vote they voted for
    const { error } = await supabase
        .from("VoteDemo")
        .insert([
            {
                Name: name,
                Email: email,
                Vote: vote,
            },
        ]);

    if (error) {
        console.log("Supabase insert error (VoteDemo):", error);

        return NextResponse.json(
            { error: error.message },
            { status: 500 }
        );
    }

    return NextResponse.json({
        success: true,
        message: "Vote saved successfully in VoteDemo",
    });
}
Enter fullscreen mode Exit fullscreen mode

Simply put, it does an insert statement to the "VoteDemo" table of the Name, Email, and Vote (yes @bingkahu, I saw your many votes. on that database).

That is pretty much it for that page. Next week, I will discuss more detail on how the Custom Polls work!

 

Official Website

If you would love to see the project yourself, feel free to check out the link here: https://easypollvote.vercel.app

I recommend to put a fake email and a fake name if you are using the app. Everything works as intended! Check it out and feedback is greatly appreciated!

 

Any questions/comments/feedback? I would love to hear from you!

 

Note: This post is monitored by the University and therefore the repository is currently private until the early Summer!

Top comments (3)

Collapse
 
peacebinflow profile image
PEACEBINFLOW •

The action field as a switch-case router is the detail that caught my attention. It's the kind of pattern you reach for when you're building something real and the clean abstractions haven't arrived yet. You need one endpoint to handle multiple form types, you don't want to over-engineer it, so you toss an action string into the payload and let the backend sort it out. It works. It's readable. It'll probably get refactored later, and that's fine.

What I think is worth flagging is that action: "Demo" is currently client-side and hardcoded. The comment says it's not uploaded to the database, which makes sense—it's routing metadata, not user data. But if someone opens the browser dev tools and changes that "Demo" string to "Live" or "Admin" before submitting, does the backend just trust it? That's the kind of thing that's harmless in a university project but becomes a real vulnerability if the switch case ever includes privileged paths. Not a problem now. Just one of those things that quietly graduates from "works" to "wait, is this safe" once more people start using it.

The @bingkahu mention got a laugh. There's always one person who stress-tests your database with joke votes during development, and honestly it's useful. Better to find edge cases from someone goofing around than from a real user who's confused. Did any of those many votes surface something you hadn't thought about, or was it just volume?

Collapse
 
francistrdev profile image
FrancisTRᴅᴇᴠ (っ◔◡◔)っ •

Hey Thanks for the feedback!

But if someone opens the browser dev tools and changes that "Demo" string to "Live" or "Admin" before submitting, does the backend just trust it?

Unfortunately, yes. There are currently no safeguards for that. As of now, it is not really a priority because the worst case scenario is uploading to the wrong database, hence resulting in an error due to a mismatch. In the future, if I were to do authentication, that is something to actually think about.

Did any of those many votes surface something you hadn't thought about, or was it just volume?

Pretty much both. I was hoping to see how it would look like in the back-end and how data will populate. To be fair, I mention to put fake information just in case. Sometime it is sometimes it's not. Either way, seems to be working as expected. Currently, there is no implementation where you can only vote once. I am planning on doing email verification where you enter your email and you get a 6 digit code to verify. Once you have voted, you cannot use that same email again.

Thanks again!

Collapse
 
ai_made_tools profile image
Joske Vermeulen •

I will try to use it next week andprovide you with feedback