Cold Comments - Reactiflux

Cold

Posts Comments

RReactiflux

•Created by Cold on 12/22/2024 in #react-forum

State not getting updated

Once all notifications have had their relevant props applied, for some reason, setNotifications then works.

63 replies

RReactiflux

•Created by Cold on 12/22/2024 in #react-forum

State not getting updated

So, to summarize, I have created a separate localNotifications state that is not shared between components. This acts as an intermediary store, so that the data can be processed properly, setting shouldNotify accordingly

63 replies

RReactiflux

•Created by Cold on 12/22/2024 in #react-forum

State not getting updated

Here is what I did:

    const { notifications, setNotifications } = useNotificationStore();
    const [localNotifications, setLocalNotifications] = useState<
        Notification[]
    >([]);
    const { warnings, setWarnings } = useWarningStore();
    const [loading, setLoading] = useState(true);
    const router = useRouter();

    useEffect(() => {
        const existingUUIDs = new Set(
            notifications?.map((notification) => notification.uuid),
        );
        localNotifications.forEach(
            (notification) =>
                (notification.shouldNotify = !existingUUIDs.has(
                    notification.uuid,
                )),
        );
        setNotifications(localNotifications);
    }, [localNotifications]);

    useEffect(() => {
        if (!loading && user) {
            const eventSource = new EventSource(
                process.env.NEXT_PUBLIC_BACKEND_URI + "/users/@me/events",
                {
                    withCredentials: true,
                },
            );

            eventSource.onerror = (error) => {
                console.error("EventSource failed: ", error);
                eventSource.close();
            };

            eventSource.onmessage = (event) => {
                const data = JSON.parse(event.data);

                if (user) {
                    setLocalNotifications(data.notifications);
                    setWarnings(data.warnings);

                    setUser({
                        ...user,
                        banned: data.banned,
                        limited: data.limited,
                    });
                } else eventSource.close();
            };

            return () => eventSource.close();
        }
    }, [loading]);

    const { notifications, setNotifications } = useNotificationStore();
    const [localNotifications, setLocalNotifications] = useState<
        Notification[]
    >([]);
    const { warnings, setWarnings } = useWarningStore();
    const [loading, setLoading] = useState(true);
    const router = useRouter();

    useEffect(() => {
        const existingUUIDs = new Set(
            notifications?.map((notification) => notification.uuid),
        );
        localNotifications.forEach(
            (notification) =>
                (notification.shouldNotify = !existingUUIDs.has(
                    notification.uuid,
                )),
        );
        setNotifications(localNotifications);
    }, [localNotifications]);

    useEffect(() => {
        if (!loading && user) {
            const eventSource = new EventSource(
                process.env.NEXT_PUBLIC_BACKEND_URI + "/users/@me/events",
                {
                    withCredentials: true,
                },
            );

            eventSource.onerror = (error) => {
                console.error("EventSource failed: ", error);
                eventSource.close();
            };

            eventSource.onmessage = (event) => {
                const data = JSON.parse(event.data);

                if (user) {
                    setLocalNotifications(data.notifications);
                    setWarnings(data.warnings);

                    setUser({
                        ...user,
                        banned: data.banned,
                        limited: data.limited,
                    });
                } else eventSource.close();
            };

            return () => eventSource.close();
        }
    }, [loading]);

63 replies

RReactiflux

•Created by Cold on 12/22/2024 in #react-forum

State not getting updated

I have managed to fix this! But I am absolutely not happy with the solution.

63 replies

RReactiflux

•Created by Cold on 12/22/2024 in #react-forum

State not getting updated

My understanding of passing a variable into the array for useEffect is that this watches for changes to the value, running the method passed if it changes

63 replies

RReactiflux

•Created by Cold on 12/22/2024 in #react-forum

State not getting updated

Now, my first thought was that maybe the same thing was happening, where notifications does not get updated. But if this were the case, then the Watcher component would not have been able to detect the change!

63 replies

RReactiflux

•Created by Cold on 12/22/2024 in #react-forum

State not getting updated

watcher.tsx

import { useNotification } from "@/components/notification/index";
import { useNotificationStore } from "@/components/user";
import { useEffect } from "react";

const Watcher = () => {
    const notify = useNotification();
    const { notifications, setNotifications } = useNotificationStore();

    // Watches for changes to notifications
    useEffect(() => {
        if (notifications) {
                for (const notification of notifications) {
                    if (notification.shouldNotify) {
                        notify({
                            type: notification.type,
                            title: notification.title,
                            content: notification.content,
                        });
                    }
            }
        }
    }, [notifications]);

    return null;
}

export default Watcher;

import { useNotification } from "@/components/notification/index";
import { useNotificationStore } from "@/components/user";
import { useEffect } from "react";

const Watcher = () => {
    const notify = useNotification();
    const { notifications, setNotifications } = useNotificationStore();

    // Watches for changes to notifications
    useEffect(() => {
        if (notifications) {
                for (const notification of notifications) {
                    if (notification.shouldNotify) {
                        notify({
                            type: notification.type,
                            title: notification.title,
                            content: notification.content,
                        });
                    }
            }
        }
    }, [notifications]);

    return null;
}

export default Watcher;

63 replies

RReactiflux

•Created by Cold on 12/22/2024 in #react-forum

State not getting updated

New code in _app.tsx

useEffect(() => {
        if (!loading && user) {
            const eventSource = new EventSource(
                process.env.NEXT_PUBLIC_BACKEND_URI + "/users/@me/events",
                {
                    withCredentials: true,
                },
            );

            eventSource.onerror = (error) => {
                console.error("EventSource failed: ", error);
                eventSource.close();
            }

            eventSource.onmessage = (event) => {
                const data = JSON.parse(event.data);

                if (user) {
                    let notifData: Notification[] = data.notifications;

                    const existingUUIDs = new Set(notifications?.map(notification => notification.uuid));
                    console.log(notifData + "hi");
                    console.log(notifications);

                    notifData.forEach(notification => {
                        notification.shouldNotify = !existingUUIDs.has(notification.uuid);
                    });

                    setNotifications(notifData);
                    setWarnings(data.warnings);

                    setUser({
                        ...user,
                        banned: data.banned,
                        limited: data.limited,
                    });
                } else eventSource.close();
            }

            return () => eventSource.close();
        }
    }, [loading]);

useEffect(() => {
        if (!loading && user) {
            const eventSource = new EventSource(
                process.env.NEXT_PUBLIC_BACKEND_URI + "/users/@me/events",
                {
                    withCredentials: true,
                },
            );

            eventSource.onerror = (error) => {
                console.error("EventSource failed: ", error);
                eventSource.close();
            }

            eventSource.onmessage = (event) => {
                const data = JSON.parse(event.data);

                if (user) {
                    let notifData: Notification[] = data.notifications;

                    const existingUUIDs = new Set(notifications?.map(notification => notification.uuid));
                    console.log(notifData + "hi");
                    console.log(notifications);

                    notifData.forEach(notification => {
                        notification.shouldNotify = !existingUUIDs.has(notification.uuid);
                    });

                    setNotifications(notifData);
                    setWarnings(data.warnings);

                    setUser({
                        ...user,
                        banned: data.banned,
                        limited: data.limited,
                    });
                } else eventSource.close();
            }

            return () => eventSource.close();
        }
    }, [loading]);

63 replies

RReactiflux

•Created by Cold on 12/22/2024 in #react-forum

State not getting updated

What the hell is going on!?!?!?!

63 replies

RReactiflux

•Created by Cold on 12/22/2024 in #react-forum

State not getting updated

@Bao @ bhuynh.dev @FinalDev Hi all, I have completely refactored my code. Instead of the previous solution, I have moved the SSE functionality back into _app.tsx, with a separate Watcher component that watches for changes to the notifications store, pushing any notifications marked with shouldNotify. Now interestingly, this works to an extent. My notifications get pushed successfully, and what should happen, is on the next pass, all existing notifications should have the shouldNotify prop marked as false. But this interestingly doesn't happen. Instead, if I run a console.log for notifications in _app.tsx, this always returns undefined!!! What's stranger is that if I, say for example, make a change to my code and save it whilst running in dev mode, the notifications state updates correctly with console.log outputting the correct data!

63 replies

RReactiflux

•Created by Cold on 12/22/2024 in #react-forum

State not getting updated

Are you saying, set it to [] and then set it to [...data]?

63 replies

RReactiflux

•Created by Cold on 12/22/2024 in #react-forum

State not getting updated

Not quite sure what you mean by this?

63 replies

RReactiflux