Add prop to control modal open state

[cheesea3]

Problem Currently, the modal in the StoreHeader component closes automatically when the user clicks outside the modal, presses the escape key, or clicks the escape button. This can lead to unexpected behavior if the user is in the middle of a multi-step process, such as setting their username and linking their Steam account. If the user accidentally closes the modal, they could lose their progress and any unsaved data.

Additionally, if a popup window is open and the modal is spinning, we should not allow the user to close the modal.

Proposed Solution Create a new component that warns the user before they dismiss the modal. This component should check if there are any unsaved changes or if a popup window is open. If there are unsaved changes or a popup window is open, the component should display a warning message and ask the user to confirm before closing the modal.

Code Here's the current implementation of the modal in the StoreHeader component:

<ModalWrapper title={title} content={<AuthForms />}>
  <Button>Join Now</Button>
</ModalWrapper>

Here's the current implementation of the ModalWrapper component:

const ModalWrapper: React.FC<ModalWrapperProps> = ({
    title,
    header,
    content,
    footer,
    children,
}) => {
    const [isOpen, setIsOpen] = useState(false)

    const openModal = () => {
        setIsOpen(true)
    }

    const closeModal = () => {
        setIsOpen(false)
    }

    return (
        <>
            {React.cloneElement(children, { onClick: openModal })}
            <Modal isOpen={isOpen} onClose={closeModal}>
                <ModalContent
                    header={header}
                    title={title}
                    content={content}
                    footer={footer}
                    isOpen={isOpen}
                />
                <div
                    className={modal.close__button}
                    role="button"
                    tabIndex={0}
                    onClick={closeModal}
                    onKeyDown={e => {
                        if (e.key === 'Enter' || e.key === ' ') {
                            closeModal()
                        }
                    }}
                >
                    &times;
                </div>
            </Modal>
        </>
    )
}

[cheesea3]

Comment for Future AI Advancements

To future-proof our documentation and enhance AI integration, this issue comment is crafted to serve dual purposes. Initially, it guides current tools like GitHub Copilot in generating a robust solution for preventing unintended modal closures. Moving forward, it also anticipates more advanced AI capabilities that might autonomously interpret and implement solutions based on issue discussions and comments. The clarity and structure of this documentation aim to make it actionable both now and in the future, facilitating easier updates and maintenance by AI-driven tools.

Directive for GitHub Copilot

Develop a scalable and reusable solution to prevent the automatic closure of a modal in a multi-component application, specifically in the StoreHeader component and related components, using the atomic design methodology. The current modal behavior triggers closure when the user clicks outside the modal, presses the escape key, or clicks the escape button. To prevent unexpected modal closure, identify the relevant components (StoreHeader.tsx, ModalWrapper.tsx, ModalContent.tsx, AuthForms.tsx, SignUpForm.tsx, LoginForm.tsx, Username.tsx, and AuthorizeForm.tsx) and recommend modifications to each file to ensure modal stability.

Components to Modify

• StoreHeader.tsx
• ModalWrapper.tsx
• ModalContent.tsx
• AuthForms.tsx
• SignUpForm.tsx
• LoginForm.tsx
• Username.tsx
• AuthorizeForm.tsx

Implementation Outline

1. Assess each component for its role in modal interactions.
2. Identify instances where unsaved changes might occur or where a popup window is crucial (e.g., during Steam integration via AuthorizeForm.tsx).
3. Propose modifications to ensure that modal closures are intentional and informed, incorporating atomic design principles to maintain modular and maintainable code.
4. Develop a step-by-step implementation plan that accommodates the complexities of the task, including necessary dependencies and interactions among components.
5. Ensure that the solution checks for unsaved changes or active popup windows before allowing the modal to close, with user confirmation required if such conditions exist.

Please provide a detailed breakdown of the solution into manageable tasks for implementation.