{"version":3,"sources":["App.tsx","reportWebVitals.ts","index.tsx"],"names":["App","state","url","payload","endpointId","log","offset","renderPublishGuide","process","exampleCode","language","style","atomOneDark","renderConsumeGuide","renderLog","className","id","onClick","sendTest","map","entry","i","body","generateLog","fetch","method","mode","headers","then","handleServerResponse","fetchLog","publishMsg","length","resp","text","pathnameParts","URL","pathname","split","console","setState","JSON","stringify","uuidv4","evtSource","EventSource","onopen","e","onerror","err","onmessage","data","parse","this","React","Component","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.d299c600.chunk.js","sourcesContent":["import React from 'react';\nimport './App.css';\nimport {v4 as uuidv4} from 'uuid'\nimport { atomOneDark } from 'react-syntax-highlighter/dist/esm/styles/hljs'\nimport { ocean } from 'react-syntax-highlighter/dist/esm/styles/hljs'\nimport { vs2015 } from 'react-syntax-highlighter/dist/esm/styles/hljs'\nimport SyntaxHighlighter from 'react-syntax-highlighter'\n\ntype Props = {}\n\ntype LogEntry = {\n  id: String,\n  body: String,\n}\n\ntype State = {\n  url: string;\n  payload: string;\n  endpointId: string;\n  log: Array<LogEntry>;\n  offset: number,\n}\n\nclass App extends React.Component<Props, State> {\n  state: State = {\n    url: '',\n    payload: '',\n    endpointId: '',\n    log: [],\n    offset: 0,\n  }\n\n  render() {\n    return (\n      <div className=\"App\">\n        <header className=\"App-header\">\n          <div>\n            <h1>req*log</h1>\n            <h3>Create an event stream with a click.<br/>Publish and consume events with plain HTTP.</h3>\n          </div>\n        </header>\n        <div className='main'>\n          <div className={`input-area visible ${this.state.url && 'hhidden'}`}>\n            <div>\n              <button id='send' onClick={this.generateLog}>Create a Log</button>\n            </div>\n          </div>\n            <div className='interactive'>\n              <div className='guide'>\n                <div>\n                  {this.renderPublishGuide()}\n                </div>\n                <div>\n                  {this.renderConsumeGuide()}\n                </div>\n              </div>\n              {this.renderLog()}\n            </div>\n         </div>\n      </div>\n    );\n  }\n\n  renderPublishGuide = () => {\n    const url = this.state.endpointId ?\n      process.env.REACT_APP_SERVER_URL + \"/log/\" + this.state.endpointId + \"/publish\" :\n      process.env.REACT_APP_SERVER_URL + \"/log/<log id>/publish\"\n    const exampleCode = `fetch('${url}', {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json'\n    },\n    body: JSON.stringify({'id': 42, 'body': 'Hello World'})\n})`\n    return (\n      <>\n        <b>Publishing an event</b>\n        <SyntaxHighlighter language=\"javascript\" style={atomOneDark}>\n          {exampleCode}\n        </SyntaxHighlighter>\n      </>\n    )\n  }\n\n  renderConsumeGuide = () => {\n    const url = this.state.endpointId ?\n      process.env.REACT_APP_SERVER_URL + \"/log/\" + this.state.endpointId + \"/consume\" :\n      process.env.REACT_APP_SERVER_URL + \"/log/<log id>/consume\"\n    const exampleCode =\n`const evtSource = new EventSource(\n  '${url}'\n)\nevtSource.onmessage = (event) => {\n  process(event)\n}`\n\n    return (\n      <>\n        <b>Consuming events with SSE</b>\n        <SyntaxHighlighter language=\"javascript\" style={atomOneDark}>\n          {exampleCode}\n        </SyntaxHighlighter>\n      </>\n    )\n  }\n\n  renderLog = () => {\n    const log = this.state.log\n    return (\n        <div className='log'>\n          <h3>Your event log:</h3>\n          {!this.state.url &&\n            <p className='example'>\n              Create a log to send requests to.\n            </p>\n          }\n          {this.state.url &&\n            <>\n              <p>Your log is at <span className='url'>{this.state.endpointId}</span></p>\n              <p className='example'>\n                <button id='test-publish' onClick={this.sendTest}>Publish a test event</button>\n              </p>\n            </>\n            }\n          {log.map ((entry, i) => (\n            <div className='log-entry' key={i}>\n              <p><b>ID</b>: {entry.id}</p>\n              <p><b>Body</b>: {entry.body}</p>\n            </div>\n          ))}\n        </div>\n    );\n  }\n\n  generateLog = () => {\n    const url = process.env.REACT_APP_SERVER_URL + \"/log\"\n    fetch(url, {\n      method: 'POST',\n      mode: 'cors',\n      headers: {\n        'Content-Type': 'text/plain',\n        'Accept': 'text/plain'\n      }\n    })\n    .then(this.handleServerResponse)\n    .then(this.fetchLog)\n  }\n\n  sendTest = () => {\n    this.publishMsg(`This is message #${this.state.log.length}`)\n  }\n\n  handleServerResponse = (resp: any) => {\n    return resp.text().then((text: string) => {\n      const pathnameParts = new URL(text).pathname.split(\"/\")\n      const endpointId = pathnameParts[pathnameParts.length - 1]\n      console.log(this.setState)\n      this.setState({\n        url: text,\n        endpointId: endpointId\n      })\n    });\n  }\n\n  publishMsg = (body: String) => {\n    const url = process.env.REACT_APP_SERVER_URL + \"/log/\" + this.state.endpointId + \"/publish\"\n    fetch(url, {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json'\n      },\n      body: JSON.stringify({'id': uuidv4(), 'body': body})\n    })\n  }\n\n  fetchLog = () => {\n    const url = process.env.REACT_APP_SERVER_URL + \"/log/\" + this.state.endpointId + \"/consume/webdemo\"\n    const evtSource = new EventSource(url)\n    evtSource.onopen = function(e) {\n      console.log(evtSource)\n    }\n    evtSource.onerror = function(err) {\n      console.log(err)\n    }\n    evtSource.onmessage = (e) => {\n      const data = JSON.parse(e.data)\n      this.setState({\n        log: [...this.state.log, data],\n        offset: this.state.offset + 1,\n      })\n    }\n//     fetch(url, {\n//       method: 'GET',\n//       redirect: 'follow',\n//       mode: 'cors',\n//       headers: {\n//         'Content-Type': 'application/json'\n//       }\n//     }).then(async (resp: any) => {\n//       const json = await resp.json()\n//       this.setState({\n//         log: json\n//       })\n//     });\n  }\n}\n\nexport default App;\n","import { ReportHandler } from 'web-vitals';\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}