Open and close photon dialog example

PhotonDialogApp.jsx

import './App.css';
import React, { useEffect, useState, useRef } from "react";
import("@photonhealth/webcomponents").catch(() => {});

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <photon-client
        id="7N9QZujlNJHL8EIPqXpu1wq8OuXqoxKb"
        org="org_KzSVZBQixLRkqj5d"
        domain="auth.boson.health"
        audience="https://api.boson.health"
        uri="https://api.boson.health/graphql"
        auto-login="true"
        >
        <PhotonModal isOpen={isOpen} setIsOpen={setIsOpen} />
      </photon-client>
    </>
  );
}

export const PhotonModal = ({ isOpen, setIsOpen }) => {
  const photonDialogRef = useRef(null);
  
  useEffect(() => {
    if (photonDialogRef.current) {
      photonDialogRef.current.addEventListener('photon-dialog-canceled', () => {
        console.log('canceled!')
        setIsOpen(false);
      })
    }
  }, [photonDialogRef]);
  
  return (
    <photon-dialog
      ref={photonDialogRef}
      id="photon-modal"
      label="Send Prescription"
      hide-footer="true"
      width="800px"
      overlay-close="true"
      header="true"
      open={isOpen}
    >
      <photon-prescribe-workflow
        patient-id="pat_01GQGDNW09VRK2CQ0Q41H57RVK"
        enable-order="true"
      />
    </photon-dialog>
  );
};

export default App;