Form Action / Server Action / Same UUID being shared accross different instances

Unanswered

Standard Chinchilla posted this in #help-forum

Standard ChinchillaOP

2024-03-29T17:54:24.000Z

I am using nextjs 14 server actions. I am having an issue with my UpdateStatusButton component.
I have two seperate instances(1 google chrome, 1 incognito) open with different users signed in and the server action appears to only acknowledge the first user who interacts with the app. Which results in errors as no alert can be found relating to that user based on database policies where users can only edit their own alerts.
Any clue why this might be happening?

3 Replies

Standard ChinchillaOP

2024-03-29T17:54:30.000Z

Here is my code

{activeAlerts.map((alert, index) => (
    <div
        key={index}
    >
        <div className=" flex flex-row items-center gap-4">        
            <UpdateStatusButton {...alert} />
        </div>
    </div>
))}

function UpdateStatusButton(alert: AlertProps) {
    const initialEditState = {
        message: "",
        alert_status: false,
    };
    const formRef = useRef<HTMLFormElement>(null);

    const [state, formAction] = useFormState(updateAlertStatus, initialEditState);

    useEffect(() => {
        console.log("status button state");
        console.log(state);
        if (state.message === "success") {
            console.log(alert.id);
            formRef.current?.reset();
            mutate("/api/activePredictionAlerts");
        }
    }, [state]);

    return (
        <form action={formAction} ref={formRef}>
            <input
                className="sr-only"
                // type="text"
                type="hidden"
                id="alertId"
                name="alertId"
                defaultValue={alert.id}
            ></input>
            {/* passing the boolean as a string */}
            <input
                className="sr-only"
                // type="text"
                type="hidden"
                id="enabled"
                name="enabled"
                defaultValue={String(alert.enabled)}
            ></input>

            <button
                type="submit"
                
            >
                {alert.enabled ? "Stop" : "Start"}
            </button>
        </form>
    );
}

Here is the action

export async function updateAlertStatus(prevState: any, formData: FormData) {
    

    const { data: userData, error } = await supabase.auth.getUser();
    console.log(userData?.user?.id);

    console.log(formData);
... 
}

Here are the logs
I should be getting two different user id's but only one is being recognized.
How can i fix this?

f76b7d54-3f46-4a87-8c5e-d3c159878a82
FormData {
  [Symbol(state)]: [
    { name: 'alertId', value: '23' },
    { name: 'enabled', value: 'true' }
  ]
}
23
f76b7d54-3f46-4a87-8c5e-d3c159878a82
FormData {
  [Symbol(state)]: [
    { name: 'alertId', value: '19' },
    { name: 'enabled', value: 'true' }
  ]
}
19