Function WithAuth

src/components/auth/WithAuth.tsx:52–99

(WrappedComponent: React.ComponentType<P>)

 * export default WithAuth(MyComponent);
 */
const WithAuth = <P extends WithAuthProps>(WrappedComponent: React.ComponentType<P>) => {
  return (props: Omit<P, keyof WithAuthProps>) => {
    const { isAuthenticated } = useAuthState();
    const [showAuthModal, setShowAuthModal] = React.useState(false);
    const [redirectUrl, setRedirectUrl] = React.useState<RedirectUrl>({
      pathname: '/',
    }); // The URL to redirect to after the user logs in

    /** Function to call when the user tries to perform an action that requires authentication
     * This function should be called before the action that requires authentication is performed and will throw an error if the user is not authenticated
     * 
     * @param redirectUrl - The URL to redirect to after the user logs in
     * 
     * @throws {UserNotLoggedInError} - If the user is not authenticated
     * 
     * @example
     * const handleSaveGraph = () => {
     *    handleActionRequiringAuth({
     *      pathname: 'graph',
     *      queryParams: {
     *        save_graph: "true"
     *      }
     *    });
     * 
     *    // Save the graph
     *    // This code will only be executed if the user is authenticated
     *    saveGraph();
     * };
     */
    const handleActionRequiringAuth = (redirectUrl: RedirectUrl) => {
      if (!isAuthenticated) {
        setShowAuthModal(true);
        setRedirectUrl(redirectUrl);
        throw new UserNotLoggedInError("User is not logged in");
      }
    };

    return (
      <>
        <WrappedComponent {...(props as P)} handleActionRequiringAuth={handleActionRequiringAuth} />
        {
          showAuthModal &&
          <AuthDialog isOpen={showAuthModal} setIsOpen={setShowAuthModal} redirectUrl={redirectUrl} />
        }
      </>
    );
  };
};

export default WithAuth;