Tracking H5P xapi events and send it to LRS

h5p.xapi.tracking.send-to-lrs.js

import React from 'react'
import PropTypes from 'prop-types'
import axios from 'axios'

const H5pContent = ({ iframeSrc }) => {
  const handleContentRef = dom => {
    if (dom) {
      dom.onload = () => {
        dom.contentWindow.H5P.externalDispatcher.on('xAPI', function(event) {
          console.log('INITIAL STATEMENT ON externalDispatcher')
          

          axios({
            method: 'post',
            url: `${process.env.REACT_APP_LRS_HOST}/data/xAPI/statements`,
            headers: {
              'Content-Type': 'application/json'
            },
            data: JSON.stringify(lrsStatement.toLrs()),
          })
            .then(response => {
              console.log('SAVED STATEMENT ID')
              console.log(response.data)
            })
            .catch(error => {
              console.log('FAIL TO SEND STATEMENT')
              console.log(error.response.data)
            })
        })
      }
    }
  }


  return (
    <iframe
      title='h5p-embed'
      ref={handleContentRef}
      src={iframeSrc}
      frameBorder='0'
      allowFullScreen='allowfullscreen'
    />
  )
}

H5pContent.propTypes = {
  iframeSrc: PropTypes.string.isRequired,
}