ReactアプリケーションでWebコンポーネントを使用する

<dwanes-keypad actionText="Call" cancelText="Hang up"></dwanes-keypad>

<!-- Web Component polyfill -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>

<!-- Load the Web Components -->
<script type="module" src="https://unpkg.com/@material/mwc-dialog@canary/mwc-dialog?module"></script>
<script type="module" src="https://unpkg.com/@dwane-vonage/dwanes-keypad@latest/dwanes-keypad.js?module"></script>
<script type="module" src="https://unpkg.com/@dwane-vonage/dwanes-contacts@latest/dwanes-contacts.js?module"></script>

<main>
    <section>
        <dwanes-keypad actionText="Call" cancelText="Hang up" ref="keypad"></dwanes-keypad>
        <div id="status">{this.state.callStatus}</div>
    </section>
    <dwanes-contacts ref="contacts"></dwanes-contacts>
</main>

<mwc-dialog id="dialog" heading="Contacts" ref="dialog">
    <p>Save <span id="number-to-save">{this.state.numberToSave}</span> to contacts?</p>
    <mwc-textfield
        id="text-field"
        minlength="3"
        maxlength="64"
        placeholder="First name"
        dialogInitialFocus
        required
        ref="firstName">
    </mwc-textfield>
    <mwc-button
        id="primary-action-button"
        slot="primaryAction"
        onClick={this.handleSaveContact}>
        Confirm
    </mwc-button>
    <mwc-button
        slot="secondaryAction"
        dialogAction="close">
        Cancel
    </mwc-button>
</mwc-dialog>

this.refs.contacts.addEventListener('contacts-loaded', (event) => {
  contacts = event.detail.contacts;
  console.log('contacts-loaded: ', contacts);
});

this.refs.contacts.addEventListener('contact-selected', (event) => {
  this.refs.keypad.setDigits(event.detail.contact.phone);
});

this.refs.keypad.addEventListener('action-ended', () => {
  this.setState({callStatus: "Call has ended."});
  const contactFound = contacts.find(contact => contact.phone === this.state.numberToSave);
  if (contactFound){
    console.log('Number already in contacts')
  } else {
    this.refs.dialog.show();  
  }
});

this.refs.keypad.addEventListener('digits-sent', event => {
  if (event.detail.digits !== ""){
    this.refs.keypad.createAction();
    this.setState({callStatus: "Call is being made", numberToSave:event.detail.digits});
  } else {
    this.setState({callStatus: "Please enter a phone number."});
  }      
});

this.refs.keypad.addEventListener("digit-added", event => {
  console.log('digit-added: ', event.detail.digit);
});

{name:this.refs.firstName.value, phone:this.state.numberToSave}

this.refs.contacts.saveContact({name:this.refs.firstName.value, phone:this.state.numberToSave});

this.refs.contacts.contactProp = {name:this.refs.firstName.value, phone:this.state.numberToSave};

this.contacts = React.createRef();

<dwanes-contacts ref={this.contacts}></dwanes-contacts>

this.contacts.current.addEventListener('contact-selected', (event) => {
  this.keypad.current.setDigits(event.detail.contact.phone);
});

this.contacts.current.saveContact({name:this.firstName.current.value, phone:this.state.numberToSave});

this.contacts.current.contactProp = {name:this.firstName.current.value, phone:this.state.numberToSave};

this.contacts.current.arrayProp = [value1, value2, value3];

const keypad = useRef(null);
const dialog = useRef(null);
const contactsEl = useRef(null);
const firstName = useRef(null);

<main>
    <section>
      <dwanes-keypad actionText="Call" cancelText="Hang up" ref={keypad}></dwanes-keypad>
      <div id="status">{callStatus}</div>
    </section>
    <dwanes-contacts ref={contactsEl}></dwanes-contacts>
</main>

<mwc-dialog id="dialog" heading="Contacts" ref={dialog}>
    <p>Save <span id="number-to-save">{numberToSave}</span> to contacts?</p>
    <mwc-textfield
      id="text-field"
      minlength="3"
      maxlength="64"
      placeholder="First name"
      dialogInitialFocus
      required
      ref={firstName}>
    </mwc-textfield>
    <mwc-button
      id="primary-action-button"
      slot="primaryAction"
      onClick={handleSaveContact}>
      Confirm
    </mwc-button>
    <mwc-button
      slot="secondaryAction"
      dialogAction="close">
      Cancel
    </mwc-button>
</mwc-dialog>

useEffect(()=> {    
    contactsEl.current.addEventListener('contacts-loaded', handleContactsLoaded);
    contactsEl.current.addEventListener('contact-selected', handleContactSelected);
    keypad.current.addEventListener('digit-added', handleDigitAdded);
    keypad.current.addEventListener('digits-sent', handleDigitsSent);
    keypad.current.addEventListener('action-ended', handleActionEnded);
    
    return () => {
        contactsEl.current.removeEventListener('contacts-loaded', handleContactsLoaded);
        contactsEl.current.removeEventListener('contact-selected', handleContactSelected);
        keypad.current.removeEventListener('digit-added', handleDigitAdded);
        keypad.current.removeEventListener('digits-sent', handleDigitsSent);
        keypad.current.removeEventListener('action-ended', handleActionEnded);
    };
});

contactsEl.current.saveContact({name:firstName.current.value, phone:numberToSave});

contactsEl.current.contactProp = {name:this.firstName.current.value, phone:this.state.numberToSave};

contactsEl.current.arrayProp = [value1, value2, value3];

[
    {
        "action": "talk",
        "text": "Please wait while we connect you."
    },
    {
        "action": "connect",
        "endpoint": [
            {
                "type": "phone",
                "number": "PHONE_NUMBER"
            }
        ]
    }
]