I have a forge app on the global page so it shows up in the Apps header.
When clicking on the app it opens a new page and opens the modal there. How can I make it open the modal in the current page I’m on?
Current code:
import React,
{
useEffect,
useState
} from 'react';
import ForgeReconciler,
{
Modal,
ModalBody,
ModalTransition,
ModalTitle,
ModalFooter,
ModalHeader,
Form,
useForm,
Textfield,
Label,
Button,
HelperMessage
}
from '@forge/react';
const UserLookupModal = () => {
//setting useState to true opens the modal as soon as the app loads, no button; saves a click
const [isOpen, setIsOpen] = useState(true);
const openModal = () => setIsOpen(true);
const closeModal = () => setIsOpen(false);
const { handleSubmit, getFieldId, register } = useForm();
const onSubmit = handleSubmit(data => console.log(data));
useEffect(() => {
invoke('user').then(setData);
}, []);
return (
<>
{isOpen && (
<Modal onClose={closeModal}>
<Form onSubmit={onSubmit}>
<ModalHeader>
<ModalTitle>Find a user</ModalTitle>
</ModalHeader>
<ModalBody>
<Label labelFor={getFieldId('user')}>
Insert user to continue
</Label>
<Textfield {...register('user')} />
<HelperMessage>
You can search by username, display name, or user id
</HelperMessage>
</ModalBody>
<ModalFooter>
<Button appearance="subtle" onClick={closeModal}>
Cancel
</Button>
<Button appearance="primary" type="submit">
Submit
</Button>
</ModalFooter>
</Form>
</Modal>
)}
</>
);
};
ForgeReconciler.render(
<React.StrictMode>
<UserLookupModal />
</React.StrictMode>
);