JSFiddle - React, Tailwind, and code Playground

by Nalin Sajwan

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="//unpkg.com/goodtables-ui/dist/goodtables-ui.min.css">

<body>
  <div class="container">
    <div id="form"></div>
  </div>
  <script src="//unpkg.com/[email protected]/dist/goodtables.js"></script>
  <script src="//unpkg.com/[email protected]/dist/qs.js"></script>
  <script src="//unpkg.com/goodtables-ui/dist/goodtables-ui.min.js"></script>
  <script>
    const client = new goodtables.ApiClient({
      apiUrl: 'https://goodtables.io/api',
      apiToken: '1BC4468E64A2A5A5AB3F983B37D1A685F198D62B',
      apiSourceId: '0d48cc24-4106-11eb-a06d-02cd6ba11d04'
    })
    const validate = (source, options) => {
      const queryData = Object.assign({source}, options)

      console.log("queryData ===> ", queryData);
      console.log("source ==> ", source);
      console.log('options ==> ', options);

      return new Promise((resolve, reject) => {
        client.addReport(source, options).then(apiJobId => {
          queryData.apiJobId = apiJobId
          return client.getReport(apiJobId)
        }).then(report => {
          const queryString = `${location.pathname}?${Qs.stringify(queryData)}`
          history.pushState(null, null, queryString);
          resolve(report)
        }).catch(error => {
          reject(error)
        })
      })
    }
    const options = Qs.parse(location.search.slice(1))
    const source = options.source; delete options.source
    const apiJobId = options.apiJobId; delete options.apiJobId
    if ((options.checks || {})['blank-row']){
      options.checks['blank-row'] = JSON.parse(options.checks['blank-row'])
    }
    if ((options.checks || {})['duplicate-row']){
      options.checks['duplicate-row'] = JSON.parse(options.checks['duplicate-row'])
    }

    console.log("options ==>", options);

    const...