AuthModalsProvider

AuthModalsProvider.tsx

interface AuthModalsContext {
    showLoginModal: () => void,
    showSignUpModal: () => void,
    showResetPasswordModal: () => void,
}

export const AuthModalsContext = createContext<AuthModalsContext>({
    showLoginModal: () => { throw new Error("AuthModalContext not implemented") },
    showSignUpModal: () => { throw new Error("AuthModalContext not implemented") },
    showResetPasswordModal: () => { throw new Error("AuthModalContext not implemented") },
});

interface AuthModalProps {
    children: ReactNode,
}

export default function AuthModalsProvider({ children }: AuthModalProps) {
    const [showLoginModal, setShowLoginModal] = useState(false);
    const [showSignUpModal, setShowSignUpModal] = useState(false);
    const [showResetPasswordModal, setShowResetPasswordModal] = useState(false);

    const [value] = useState({
        showLoginModal: () => setShowLoginModal(true),
        showSignUpModal: () => setShowSignUpModal(true),
        showResetPasswordModal: () => setShowResetPasswordModal(true),
    });

    return (
        <AuthModalsContext.Provider value={value}>
            {children}
            {showLoginModal &&
                <LoginModal
                    onDismiss={() => setShowLoginModal(false)}
                    onSignUpInsteadClicked={() => {
                        setShowLoginModal(false);
                        setShowSignUpModal(true);
                    }}
                    onForgotPasswordClicked={() => {
                        setShowLoginModal(false);
                        setShowResetPasswordModal(true);
                    }}
                />
            }
            {showSignUpModal &&
                <SignUpModal
                    onDismiss={() => setShowSignUpModal(false)}
                    onLoginInsteadClicked={() => {
                        setShowSignUpModal(false);
                        setShowLoginModal(true);
                    }}
                />
            }
            {showResetPasswordModal &&
                <ResetPasswordModal
                    onDismiss={() => setShowResetPasswordModal(false)}
                    onSignUpClicked={() => {
                        setShowResetPasswordModal(false);
                        setShowSignUpModal(true);
                    }}
                />
            }
        </AuthModalsContext.Provider>
    );
}