{"version":3,"sources":["components/Layout.js","components/ArtistInput.js","components/Home.js","App.js","registerServiceWorker.js","index.js"],"names":["Layout","Container","fluid","this","props","children","Component","displayName","name","ArtistInput","onChange","e","parentThis","searchArtists","type","id","className","placeholder","htmlFor","setState","numberOfTracks","target","value","selected","Home","state","artists","artistName","artistId","tracks","newNumberOfTracks","mainDivisors","favoriteTrack","highlight","searchArtistsAPI","fetch","then","response","json","console","log","artistsTable","aria-labelledby","map","artist","images","length","key","onClick","selectArtist","src","url","alt","document","getElementById","ReactDOM","render","getTracks","spinner","Spinner","animation","role","parseInt","generateBracket","message","slice","rel","href","shuffleArray","tr_id","id_group","halfOfTracks","done","push","tracksBracket","Table","index","data-tip","pickTrack","data-group","data-value","data-image","album","data-album","disabled","returnJsx","forEach","divisor","includes","counter","divider","Math","unshift","rowSpan","dataset","column","data-column","data-divider","newBracketButton","window","location","reload","setTimeout","classList","add","array","i","j","floor","random","columnPosition","position","element","neighbour","even_odd","contains","advanceTrack","ending","querySelectorAll","group","member","remove","neighbourId","rowPosition","ceil","nexTrackId","nextTrackPosition","setAttribute","image","parentNode","generateResultDiv","resultDiv","App","exact","path","component","isLocalhost","Boolean","hostname","match","registerValidSW","swUrl","navigator","serviceWorker","register","registration","onupdatefound","installingWorker","installing","onstatechange","controller","catch","error","baseUrl","getElementsByTagName","getAttribute","rootElement","basename","URL","process","origin","addEventListener","status","headers","get","indexOf","ready","unregister","checkValidServiceWorker","registerServiceWorker"],"mappings":"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","file":"static/js/main.021b5345.chunk.js","sourcesContent":["import React, { Component } from 'react';\r\nimport { Container } from 'reactstrap';\r\n\r\nexport class Layout extends Component {\r\n  static displayName = Layout.name;\r\n\r\n  render () {\r\n    return (\r\n      <div>\r\n        <Container fluid={true}>\r\n          {this.props.children}\r\n        </Container>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n","import React, { Component } from 'react';\r\n\r\nexport class ArtistInput extends Component {\r\n\r\n    render() {\r\n        return (\r\n            <div>\r\n                <input onChange = {e => this.props.parentThis.searchArtists(e) }  type=\"name\" id=\"artistName\" className=\"form-control my-2 artistName\" placeholder=\"Artist\" />  \r\n                <label htmlFor=\"numberOfTracks\" className=\"chooseNumberOfTracks\">Choose the number of tracks</label>\r\n                <select id=\"numberOfTracks\" className=\"numberOfTracks\" name=\"numberOfTracks\" onChange={e => this.props.parentThis.setState({ numberOfTracks: e.target.value })}>\r\n                    <option value=\"128\">128 tracks</option>\r\n                    <option value=\"64\">64 tracks</option>\r\n                    <option selected value=\"32\">32 tracks</option>\r\n                    <option value=\"16\">16 tracks</option>\r\n                    <option value=\"8\">8 tracks</option>\r\n                </select>\r\n            </div>\r\n        )\r\n    }\r\n    \r\n}","import React, { Component } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { Table, Spinner} from 'reactstrap';\r\nimport {ArtistInput} from \"./ArtistInput\"\r\n\r\nimport ReactTooltip from 'react-tooltip';\r\n\r\n\r\nexport class Home extends Component {\r\n  state = { \r\n    artists: [],\r\n    artistName: \"\",\r\n    artistId: \"\",\r\n    tracks: [],\r\n    numberOfTracks: 32,\r\n    newNumberOfTracks: 0,\r\n    mainDivisors: [],\r\n    favoriteTrack: \"\",\r\n    highlight: false\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div className=\"backgroundDiv\">\r\n        <div className=\"mainDiv\"> \r\n          <div className=\"mainTitle\">\r\n            <p className=\"mainTitleP\">Music Madness Bracket Generator</p>\r\n            <p className=\"subTitleP\">Generate interactive tournament brackets for your favorite artists \r\n              based on their Spotify's  top tracks </p>\r\n          </div>\r\n\r\n          <div className=\"newBracketButtontDiv\" id=\"newBracketButtontDiv\"></div> \r\n          <p id=\"subTableLabel\"> </p>\r\n          <div id=\"resultDivParent\" className=\"resultDivParent\"></div>\r\n\r\n          <p id=\"tableLabel\">Search Artists</p>\r\n          <div id=\"artistInput\">\r\n            <ArtistInput parentThis={this}/>\r\n          </div>\r\n          <div id=\"artistsTableParent\"><div id=\"artistsTable\"></div></div>\r\n\r\n          <div id=\"tracksBracket\" className=\"tracksBracket\"></div>\r\n          <div id=\"spinner\"></div>\r\n\r\n          <div className=\"creatorDiv\">\r\n            <p className=\"text-muted\">\r\n              Created by <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://www.linkedin.com/in/espedito-junior-931527128/\">Espedito Junior</a>\r\n            </p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  searchArtists = e => {\r\n    this.setState({artistName: e.target.value}, this.searchArtistsAPI);\r\n  }\r\n\r\n  searchArtistsAPI = e => {\r\n\r\n    if(this.state.artistName !== \"\" && this.state.artistName !== \"#\" && this.state.artistName !== \"&\" \r\n      && this.state.artistName !== \"*\" && this.state.artistName !== \"+\" && this.state.artistName !== \";\" ) {\r\n      fetch('/Artists?artistName='+this.state.artistName).then(response => {\r\n        response.json().then( json => {\r\n  \r\n          if(json[\"artists\"]) {\r\n            this.setState({ artists: json[\"artists\"][\"items\"]});\r\n\r\n            console.log(this.state.artists);\r\n\r\n            const artistsTable =  (\r\n              <table className='table' aria-labelledby=\"tabelLabel\">\r\n                <tbody>\r\n                  {this.state.artists.map(artist => {\r\n                    if(artist.images.length > 0 ) {\r\n                        return (\r\n                        <tr key={artist.id} onClick={() => { this.selectArtist(artist.id,artist.name) }} className=\"clickMe\">\r\n                          <td className=\"artistTd\">\r\n                            <div className=\"artistTableMain rounded\">\r\n                              <div className=\"artistTableImage\"><img src={artist.images[2] ? artist.images[2].url : artist.images[0].url} alt={artist.name} /></div>\r\n                              <div className=\"artistTableText\"><span>{artist.name}</span></div>\r\n                            </div>\r\n                          </td>\r\n                        </tr>\r\n                      )\r\n                    } else {\r\n                      return \"\"\r\n                    }\r\n                  })}\r\n                </tbody>\r\n              </table>\r\n            );\r\n\r\n            if(document.getElementById('artistsTable')) {\r\n              ReactDOM.render(artistsTable, document.getElementById('artistsTable'));\r\n            }\r\n\r\n          }\r\n  \r\n        });\r\n      });\r\n    } \r\n  }\r\n\r\n  selectArtist = (id,name) => {\r\n    this.setState({artistId: id}, this.getTracks);\r\n    this.setState({artistName: name}, this.searchArtistsAPI);\r\n  }\r\n\r\n  getTracks = e => {\r\n    console.log(\"Get tracks of : \" + this.state.artistId);\r\n    console.log(\"Get number : \" + this.state.numberOfTracks);\r\n\r\n    const spinner = (\r\n      <Spinner animation=\"border\" role=\"status\">\r\n        <span className=\"sr-only\">Loading...</span>\r\n      </Spinner>\r\n    );\r\n\r\n    ReactDOM.render(null, document.getElementById('artistsTableParent'));\r\n    ReactDOM.render(spinner, document.getElementById('spinner'));\r\n    ReactDOM.render(null, document.getElementById('artistInput'));\r\n    ReactDOM.render(\"Loading \" + this.state.artistName+\"'s top \"+this.state.numberOfTracks+\" tracks from Spotify...\", document.getElementById('tableLabel'));\r\n\r\n    fetch('/Tracks?artistId='+this.state.artistId+'&numberOfTracks='+this.state.numberOfTracks).then(response => {\r\n      response.json().then( json => {\r\n        \r\n        console.log(json);\r\n\r\n\r\n        if(parseInt(json.length) === parseInt(this.state.numberOfTracks)) {\r\n          \r\n          this.generateBracket(json);\r\n\r\n          console.log(\"exato\");\r\n\r\n        } else {\r\n\r\n          console.log(\"faltou\");\r\n\r\n          this.setState({ newNumberOfTracks: this.state.numberOfTracks });\r\n\r\n          while(this.state.newNumberOfTracks >= json.length) {\r\n            this.setState({ newNumberOfTracks: this.state.newNumberOfTracks/2 });\r\n          }\r\n\r\n          var message = \"\";\r\n\r\n          if(this.state.newNumberOfTracks >= 8) {\r\n            message = \"Not enough tracks for a \"+this.state.numberOfTracks+\r\n              \" tracks bracket. The largest bracket possible has \" + this.state.newNumberOfTracks + \" tracks\";\r\n\r\n            this.setState({ numberOfTracks: this.state.newNumberOfTracks });\r\n            this.generateBracket(json.slice(0,this.state.newNumberOfTracks));\r\n            ReactDOM.render(<div id=\"artistsTable\"></div>, document.getElementById('artistsTableParent'));\r\n\r\n          } else {\r\n            message = \"This artist doesn’t have enought tracks for our smallest bracket possible. Please select another artist\";\r\n            ReactDOM.render(<ArtistInput parentThis={this} />, document.getElementById('artistInput'));\r\n            ReactDOM.render(<div id=\"artistsTable\"></div>, document.getElementById('artistsTableParent'));\r\n          } \r\n\r\n          ReactDOM.render(message, document.getElementById('subTableLabel'));  \r\n          ReactDOM.render(null, document.getElementById('spinner'));  \r\n\r\n        }\r\n        \r\n\r\n      });\r\n    });\r\n\r\n  }\r\n\r\n  generateBracket(json) {\r\n\r\n    var tracks = this.shuffleArray(json);\r\n        \r\n    var tr_id = 1;\r\n    var id_group = 1;\r\n \r\n    var lastDivider = 4;\r\n\r\n    var halfOfTracks = this.state.numberOfTracks/2;\r\n\r\n    var mainDivisors = [];\r\n    var done = [];\r\n\r\n    while(halfOfTracks >= 4) {\r\n\r\n      mainDivisors.push(halfOfTracks);\r\n\r\n      halfOfTracks = halfOfTracks/2;\r\n    }\r\n\r\n    this.setState({ mainDivisors: mainDivisors});\r\n\r\n    const tracksBracket =  (\r\n      <div className=\"tracksBracketTableParent\">\r\n        <ReactTooltip />\r\n        <Table className=\"tracksBracketTable\">\r\n          <tbody>\r\n            {tracks.map((value, index) => {\r\n              if(index % 2 === 0 &&  index+1 <= tracks.length-1) {\r\n                return (\r\n                  <tr id={\"tr_\" + (tr_id)}>\r\n                    <td className={\"td_odd_\"+tr_id} data-tip={value.name}\r\n                      onClick={(e) => { this.pickTrack(1,index+1,e,lastDivider) }}  \r\n                    >\r\n                      <input \r\n                      className={\"clickable odd_\"+tr_id}\r\n                      data-group={\"odd_\"+id_group} data-value={value.name} \r\n                      data-image={value.album.images[0].url}\r\n                      data-album={value.album.name}\r\n                      id={\"odd_1_\"+tr_id}  disabled value={value.name}/>\r\n                    </td>\r\n                      {(() => {\r\n                        const returnJsx = [];\r\n                        \r\n                        this.state.mainDivisors.forEach((divisor) => {\r\n                        \r\n                          if(!done.includes(index) && (index % divisor === 0)) {\r\n\r\n                            var counter =  divisor;\r\n                            var divider = counter*2;\r\n                            var log = 0;\r\n\r\n                            if(index === 0) {\r\n                              counter =  divisor*2;\r\n                              divider = null;\r\n                            }\r\n\r\n                            while(counter >= lastDivider)  {\r\n\r\n                              log = (Math.log(counter) / Math.log(2));\r\n\r\n                              returnJsx.unshift(\r\n                                <td className={\"td_odd_\"+log+\"_\"+((index/counter)+1)}\r\n                                rowSpan={counter/2} \r\n                                onClick={(e) => { this.pickTrack(e.target.dataset.column,index+1,e,e.target.dataset.divider) }}\r\n                                data-tip=\"\" \r\n                                > \r\n                                    <input id={\"odd_\"+log+\"_\"+((index/counter)+1)} \r\n                                    data-column={log}\r\n                                    data-divider={divider} disabled/>\r\n                                </td>\r\n                              );\r\n\r\n                              returnJsx.push(\r\n                                <td className={\"td_even_\"+log+\"_\"+((index/counter)+1)}\r\n                                rowSpan={counter/2} \r\n                                onClick={(e) => { this.pickTrack(e.target.dataset.column,index+2,e,e.target.dataset.divider) }}\r\n                                data-tip=\"\" \r\n                                >\r\n                                    <input id={\"even_\"+log+\"_\"+((index/counter)+1)} \r\n                                    data-column={log}\r\n                                    data-divider={divider} disabled/>\r\n                                </td>\r\n                              );\r\n                              \r\n                              divider = counter;\r\n                              counter = counter/2;\r\n                            }\r\n\r\n                            done.push(index);\r\n                          }\r\n\r\n                        });\r\n\r\n                        return returnJsx;\r\n                        \r\n                      })()}\r\n                    <td onClick={(e) => { this.pickTrack(1,(index+2),e,lastDivider)}}\r\n                      className={\"td_even_\"+tr_id} \r\n                      data-tip={tracks[index+1].name}\r\n                    >\r\n                      <input  className={\"clickable even_\"+tr_id}\r\n                      data-group={\"even_\"+id_group} data-value={tracks[index+1].name}\r\n                      data-image={tracks[index+1].album.images[0].url}\r\n                      data-album={tracks[index+1].album.name}\r\n                      id={\"input_even_1_\"+tr_id}   disabled value={tracks[index+1].name} /> \r\n                    </td>\r\n                  </tr>\r\n                )\r\n              } else {\r\n                if(tr_id % 2 === 0){\r\n                  id_group++;\r\n                }\r\n                tr_id++;\r\n                return \"\"\r\n              }\r\n            })}\r\n          </tbody>\r\n        </Table>\r\n\r\n      </div>\r\n    );\r\n\r\n    const newBracketButton = (\r\n      <button className=\"btn btn-outline-secondary customButton\" onClick={() => { window.location.reload() }}>\r\n        Generate a new bracket for another artist\r\n      </button>\r\n    );\r\n    \r\n    ReactDOM.render(newBracketButton, document.getElementById('newBracketButtontDiv'));\r\n    ReactDOM.render(null, document.getElementById('spinner'));\r\n    ReactDOM.render(null, document.getElementById('tracksBracket'));        \r\n    ReactDOM.render(tracksBracket, document.getElementById('tracksBracket'));\r\n    \r\n    setTimeout(() => {\r\n      document.getElementById('tracksBracket').classList.add(\"tracksBracketVisible\");\r\n    }, 500);\r\n\r\n    ReactDOM.render(\"Pick your favorite \"+this.state.artistName+\"'s tracks\", document.getElementById('tableLabel'));\r\n  }\r\n\r\n  shuffleArray(array) {\r\n    for (let i = array.length - 1; i > 0; i--) {\r\n        const j = Math.floor(Math.random() * (i + 1));\r\n        [array[i], array[j]] = [array[j], array[i]];\r\n    }\r\n    return array;\r\n  }\r\n\r\n  pickTrack (columnPosition, position, element, divider){\r\n\r\n    console.log(element.target.id);\r\n    columnPosition = parseInt(columnPosition);\r\n\r\n    var even_odd = \"\";\r\n\r\n    if(position % 2 === 0) {\r\n      even_odd = \"even\";\r\n    } else {\r\n      even_odd = \"odd\";\r\n    }\r\n\r\n    var neighbour;\r\n\r\n    if(element.target.dataset.value && element.target.classList.contains(\"clickable\") && divider) {\r\n      \r\n      var advanceTrack = false;\r\n      var ending = false;\r\n\r\n      if(columnPosition === 1) {\r\n        var groupMembers = document.querySelectorAll(\"[data-group='\"+element.target.dataset.group+\"']\");\r\n        \r\n        groupMembers.forEach(member =>  {\r\n            member.classList.remove(\"clickable\");\r\n            member.classList.add(\"notClicked\");\r\n          }\r\n        );\r\n        advanceTrack = true;\r\n        element.target.classList.add(\"clicked\");\r\n      } else {\r\n\r\n        var rowPosition = (((position-1)/(divider/2))+1);\r\n        var neighbourId;\r\n        if(rowPosition % 2 === 0 || (even_odd === \"even\" && Math.floor(rowPosition) % 2 === 0)) {\r\n          neighbourId = even_odd + \"_\" + columnPosition + \"_\" + (Math.ceil(position/divider*2) - 1);\r\n        } else {\r\n          neighbourId = even_odd + \"_\" + columnPosition + \"_\" + (Math.ceil(position/divider*2) + 1);      \r\n        }\r\n\r\n        neighbour = document.getElementById(neighbourId);\r\n \r\n        if(neighbour.dataset.value) {\r\n          advanceTrack = true;\r\n        } else {\r\n          neighbour.classList.add(\"highlight\");\r\n          setTimeout(() => {\r\n            neighbour.classList.remove(\"highlight\");\r\n          }, 500);\r\n        }\r\n      }\r\n\r\n      if(advanceTrack) {\r\n        var nexTrackId = even_odd + \"_\" + (columnPosition+1) + \"_\" + (Math.ceil(position/divider));  \r\n        var nextTrackPosition = document.getElementById(nexTrackId);\r\n\r\n        console.log(nexTrackId);\r\n\r\n        nextTrackPosition.dataset.value = element.target.dataset.value;\r\n        nextTrackPosition.value = element.target.dataset.value;\r\n        nextTrackPosition.classList.add(\"clickable\");\r\n        nextTrackPosition.setAttribute(\"data-image\", element.target.dataset.image);\r\n        nextTrackPosition.setAttribute(\"data-album\", element.target.dataset.album);\r\n\r\n        var nextTrackPositionParent = nextTrackPosition.parentNode;\r\n        nextTrackPositionParent.setAttribute(\"data-tip\", element.target.dataset.value);\r\n\r\n      }\r\n  \r\n    } else if(element.target.dataset.value && element.target.classList.contains(\"clickable\") && !divider) {\r\n\r\n      if(even_odd === \"even\") {\r\n        neighbour = document.getElementById(\"odd_\"+columnPosition+\"_1\"); \r\n      } else {\r\n        neighbour = document.getElementById(\"even_\"+columnPosition+\"_1\"); \r\n      }\r\n\r\n      if(neighbour.dataset.value) {\r\n        ending = true;\r\n\r\n        var favoriteTrack= {\"name\": element.target.dataset.value, \"image\": element.target.dataset.image};\r\n\r\n        this.setState({favoriteTrack: favoriteTrack}, function (){\r\n          this.generateResultDiv();\r\n        });\r\n        \r\n      } else {\r\n        neighbour.classList.add(\"highlight\");\r\n        setTimeout(() => {\r\n          neighbour.classList.remove(\"highlight\");\r\n        }, 500);\r\n      }\r\n\r\n    } else {\r\n      console.log(\"vazio\");\r\n    }\r\n\r\n    if((advanceTrack && columnPosition !== 1) || ending) {\r\n      neighbour.classList.remove(\"clickable\");\r\n      neighbour.classList.add(\"notClicked\");\r\n      element.target.classList.remove(\"clickable\");\r\n      \r\n      if(!ending) {\r\n        element.target.classList.add(\"clicked\");\r\n      } else {\r\n        element.target.classList.add(\"champion\");\r\n      }\r\n    }\r\n  }\r\n\r\n  generateResultDiv() {\r\n\r\n    const resultDiv =  ( \r\n      <div className=\"resultDivTrack\">\r\n        <h4 className=\"favoriteTrackNameLabel\">Your favorite {this.state.artistName} track:</h4>\r\n        <h3 className=\"favoriteTrackName\">{this.state.favoriteTrack.name}</h3>\r\n        <img className=\"imgResult\" alt={this.state.favoriteTrack.name} src={this.state.favoriteTrack.image}></img>\r\n      </div>\r\n    );\r\n    \r\n    \r\n    ReactDOM.render(null, document.getElementById('subTableLabel')); \r\n    ReactDOM.render(null, document.getElementById('tableLabel')); \r\n    ReactDOM.render(null, document.getElementById('resultDivParent')); \r\n    ReactDOM.render(resultDiv, document.getElementById('resultDivParent'));\r\n\r\n    setTimeout(() => {\r\n      document.getElementById('resultDivParent').classList.add(\"resultDivParentVisible\");\r\n      window.location.href = \"#root\";\r\n    }, 500);\r\n\r\n\r\n  }\r\n\r\n}","import React, { Component } from 'react';\r\nimport { Route } from 'react-router';\r\nimport { Layout } from './components/Layout';\r\nimport { Home } from './components/Home';\r\n\r\nimport './custom.css'\r\n\r\nexport default class App extends Component {\r\n  static displayName = App.name;\r\n\r\n  render () {\r\n    return (\r\n      <Layout>\r\n        <Route exact path='/' component={Home} />\r\n      </Layout>\r\n    );\r\n  }\r\n}\r\n","// In production, we register a service worker to serve assets from local cache.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\r\n// cached resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\r\n// This link also includes instructions on opting out of this behavior.\r\n\r\nconst isLocalhost = Boolean(\r\n  window.location.hostname === 'localhost' ||\r\n  // [::1] is the IPv6 localhost address.\r\n  window.location.hostname === '[::1]' ||\r\n  // 127.0.0.1/8 is considered localhost for IPv4.\r\n  window.location.hostname.match(\r\n    /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n  )\r\n);\r\n\r\nexport default function register () {\r\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n    // The URL constructor is available in all browsers that support SW.\r\n    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);\r\n    if (publicUrl.origin !== window.location.origin) {\r\n      // Our service worker won't work if PUBLIC_URL is on a different origin\r\n      // from what our page is served on. This might happen if a CDN is used to\r\n      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374\r\n      return;\r\n    }\r\n\r\n    window.addEventListener('load', () => {\r\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n      if (isLocalhost) {\r\n        // This is running on localhost. Lets check if a service worker still exists or not.\r\n        checkValidServiceWorker(swUrl);\r\n      } else {\r\n        // Is not local host. Just register service worker\r\n        registerValidSW(swUrl);\r\n      }\r\n    });\r\n  }\r\n}\r\n\r\nfunction registerValidSW (swUrl) {\r\n  navigator.serviceWorker\r\n    .register(swUrl)\r\n    .then(registration => {\r\n      registration.onupdatefound = () => {\r\n        const installingWorker = registration.installing;\r\n        installingWorker.onstatechange = () => {\r\n          if (installingWorker.state === 'installed') {\r\n            if (navigator.serviceWorker.controller) {\r\n              // At this point, the old content will have been purged and\r\n              // the fresh content will have been added to the cache.\r\n              // It's the perfect time to display a \"New content is\r\n              // available; please refresh.\" message in your web app.\r\n              console.log('New content is available; please refresh.');\r\n            } else {\r\n              // At this point, everything has been precached.\r\n              // It's the perfect time to display a\r\n              // \"Content is cached for offline use.\" message.\r\n              console.log('Content is cached for offline use.');\r\n            }\r\n          }\r\n        };\r\n      };\r\n    })\r\n    .catch(error => {\r\n      console.error('Error during service worker registration:', error);\r\n    });\r\n}\r\n\r\nfunction checkValidServiceWorker (swUrl) {\r\n  // Check if the service worker can be found. If it can't reload the page.\r\n  fetch(swUrl)\r\n    .then(response => {\r\n      // Ensure service worker exists, and that we really are getting a JS file.\r\n      if (\r\n        response.status === 404 ||\r\n        response.headers.get('content-type').indexOf('javascript') === -1\r\n      ) {\r\n        // No service worker found. Probably a different app. Reload the page.\r\n        navigator.serviceWorker.ready.then(registration => {\r\n          registration.unregister().then(() => {\r\n            window.location.reload();\r\n          });\r\n        });\r\n      } else {\r\n        // Service worker found. Proceed as normal.\r\n        registerValidSW(swUrl);\r\n      }\r\n    })\r\n    .catch(() => {\r\n      console.log(\r\n        'No internet connection found. App is running in offline mode.'\r\n      );\r\n    });\r\n}\r\n\r\nexport function unregister () {\r\n  if ('serviceWorker' in navigator) {\r\n    navigator.serviceWorker.ready.then(registration => {\r\n      registration.unregister();\r\n    });\r\n  }\r\n}\r\n","import 'bootstrap/dist/css/bootstrap.css';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { BrowserRouter } from 'react-router-dom';\r\nimport App from './App';\r\nimport registerServiceWorker from './registerServiceWorker';\r\n\r\nconst baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');\r\nconst rootElement = document.getElementById('root');\r\n\r\nReactDOM.render(\r\n  <BrowserRouter basename={baseUrl}>\r\n    <App />\r\n  </BrowserRouter>,\r\n  rootElement);\r\n\r\nregisterServiceWorker();\r\n\r\n"],"sourceRoot":""}