The sole goal of the AuthObserver class is to create a loose way for components to act on a specific event that is triggered. Any component (technically living under the auth context) can access the observer via const {observer} = useAuth();.
The first observer will be subscribed, while the second anonymous function will be considered a duplicate of the first one, although there are no duplicates.
Solution: since JS/TS functions are objects, we can compare them directly.
Optimization
An observer should provide a method to unsubscribe a callback from it. Concerning the application, a component can subscribe to an observer immediately after it is mounted and unsubscribe when it unmounts.
Example here:
const observe = () => {
signout();
toast({
title: "Uh oh! You can't visit this page!",
description: "We're sorry, but you have to signup/login to see this page",
});
navigate("/");
};
React.useEffect(() => {
observer.subscribe("invalid_session", observe);
return () => {
observer.unsubscribe("invalid_session", observe);
};
}, []);
The sole goal of the
AuthObserver
class is to create a loose way for components to act on a specific event that is triggered. Any component (technically living under the auth context) can access the observer viaconst {observer} = useAuth();
.Issue 1
Except that here: https://github.com/coderoyalty/pseudonym-app/blob/032edd7f138512291d91ce42ca342d8b1757e853/app/src/contexts/auth.tsx#L39
An anonymous function (a function without a name) will exploit the goal of this application. Here's how.
The first observer will be subscribed, while the second anonymous function will be considered a duplicate of the first one, although there are no duplicates.
Solution: since JS/TS functions are objects, we can compare them directly.
Optimization
An observer should provide a method to unsubscribe a callback from it. Concerning the application, a component can subscribe to an observer immediately after it is mounted and unsubscribe when it unmounts.
Example here: