{"version":3,"sources":["Table.js","App.js","serviceWorker.js","index.js"],"names":["Table","columns","data","useState","filterInput","setFilterInput","useTable","useFilters","useSortBy","getTableProps","getTableBodyProps","headerGroups","rows","prepareRow","setFilter","value","onChange","e","target","undefined","placeholder","map","headerGroup","getHeaderGroupProps","headers","column","getHeaderProps","getSortByToggleProps","className","isSorted","isSortedDesc","render","row","i","getRowProps","cells","cell","getCellProps","Genres","values","genre","idx","key","App","useMemo","Header","accessor","Cell","hour","Math","floor","min","setData","useEffect","a","axios","result","Boolean","window","location","hostname","match","ReactDOM","document","getElementById","navigator","serviceWorker","ready","then","registration","unregister"],"mappings":"8TAGe,SAASA,EAAT,GAAmC,IAAlBC,EAAiB,EAAjBA,QAASC,EAAQ,EAARA,KAAQ,EACTC,mBAAS,IADA,mBACxCC,EADwC,KAC3BC,EAD2B,OAU3CC,YACF,CACEL,UACAC,QAEFK,IACAC,KAZAC,EAJ6C,EAI7CA,cACAC,EAL6C,EAK7CA,kBACAC,EAN6C,EAM7CA,aACAC,EAP6C,EAO7CA,KACAC,EAR6C,EAQ7CA,WACAC,EAT6C,EAS7CA,UAiBF,OACE,oCACE,2BACEC,MAAOX,EACPY,SAXqB,SAAAC,GACzB,IAAMF,EAAQE,EAAEC,OAAOH,YAASI,EAChCL,EAAU,YAAaC,GACvBV,EAAeU,IASXK,YAAa,gBAEf,0BAAWX,IACT,+BACGE,EAAaU,KAAI,SAAAC,GAAW,OAC3B,uBAAQA,EAAYC,sBACjBD,EAAYE,QAAQH,KAAI,SAAAI,GAAM,OAC7B,wCACMA,EAAOC,eAAeD,EAAOE,wBADnC,CAEEC,UACEH,EAAOI,SACHJ,EAAOK,aACL,YACA,WACF,KAGLL,EAAOM,OAAO,mBAMzB,0BAAWrB,IACRE,EAAKS,KAAI,SAACW,EAAKC,GAEd,OADApB,EAAWmB,GAET,uBAAQA,EAAIE,cACTF,EAAIG,MAAMd,KAAI,SAAAe,GACb,OACE,uBAAQA,EAAKC,eAAiBD,EAAKL,OAAO,mB,UC1DxDO,EAAS,SAAC,GAAgB,IAAdC,EAAa,EAAbA,OAChB,OACE,oCACGA,EAAOlB,KAAI,SAACmB,EAAOC,GAClB,OACE,0BAAMC,IAAKD,EAAKb,UAAU,SACvBY,QA4EEG,MApEf,WACE,IAAM1C,EAAU2C,mBACd,iBAAM,CACJ,CACEC,OAAQ,UACR5C,QAAS,CACP,CACE4C,OAAQ,OACRC,SAAU,aAEZ,CACED,OAAQ,OACRC,SAAU,eAIhB,CACED,OAAQ,UACR5C,QAAS,CACP,CACE4C,OAAQ,WACRC,SAAU,iBAEZ,CACED,OAAQ,WACRC,SAAU,cACVC,KAAM,gBAAWhC,EAAX,EAAGqB,KAAQrB,MAAX,OAAyB,kBAAC,EAAD,CAAQwB,OAAQxB,MAEjD,CACE8B,OAAQ,UACRC,SAAU,eACVC,KAAM,YAA0B,IAAfhC,EAAc,EAAtBqB,KAAQrB,MACTiC,EAAOC,KAAKC,MAAMnC,EAAQ,IAC1BoC,EAAMF,KAAKC,MAAMnC,EAAQ,IAC/B,OACE,oCACGiC,EAAO,EAAP,UAAcA,EAAd,cAAwBA,EAAO,EAAI,IAAM,GAAzC,KAAiD,GACjDG,EAAM,EAAN,UAAaA,EAAb,eAAuBA,EAAM,EAAI,IAAM,IAAO,MAKvD,CACEN,OAAQ,SACRC,SAAU,oBAKlB,IAjDW,EAoDW3C,mBAAS,IApDpB,mBAoDND,EApDM,KAoDAkD,EApDA,KA6Db,OAPAC,qBAAU,WACR,sBAAC,4BAAAC,EAAA,sEACsBC,IAAM,8CAD5B,OACOC,EADP,OAECJ,EAAQI,EAAOtD,MAFhB,0CAAD,KAIC,IAGD,yBAAK0B,UAAU,OACb,kBAAC5B,EAAD,CAAOC,QAASA,EAASC,KAAMA,MCvEjBuD,QACW,cAA7BC,OAAOC,SAASC,UAEe,UAA7BF,OAAOC,SAASC,UAEhBF,OAAOC,SAASC,SAASC,MACvB,2DCZNC,IAAS/B,OAAO,kBAAC,EAAD,MAASgC,SAASC,eAAe,SD2H3C,kBAAmBC,WACrBA,UAAUC,cAAcC,MAAMC,MAAK,SAAAC,GACjCA,EAAaC,kB","file":"static/js/main.8d031da7.chunk.js","sourcesContent":["import React, { useState } from \"react\";\nimport { useTable, useFilters, useSortBy } from \"react-table\";\n\nexport default function Table({ columns, data }) {\n  const [filterInput, setFilterInput] = useState(\"\");\n  // Use the state and functions returned from useTable to build your UI\n  const {\n    getTableProps,\n    getTableBodyProps,\n    headerGroups,\n    rows,\n    prepareRow,\n    setFilter\n  } = useTable(\n    {\n      columns,\n      data\n    },\n    useFilters,\n    useSortBy\n  );\n\n  const handleFilterChange = e => {\n    const value = e.target.value || undefined;\n    setFilter(\"show.name\", value);\n    setFilterInput(value);\n  };\n\n  // Render the UI for your table\n  return (\n    <>\n      <input\n        value={filterInput}\n        onChange={handleFilterChange}\n        placeholder={\"Search name\"}\n      />\n      <table {...getTableProps()}>\n        <thead>\n          {headerGroups.map(headerGroup => (\n            <tr {...headerGroup.getHeaderGroupProps()}>\n              {headerGroup.headers.map(column => (\n                <th\n                  {...column.getHeaderProps(column.getSortByToggleProps())}\n                  className={\n                    column.isSorted\n                      ? column.isSortedDesc\n                        ? \"sort-desc\"\n                        : \"sort-asc\"\n                      : \"\"\n                  }\n                >\n                  {column.render(\"Header\")}\n                </th>\n              ))}\n            </tr>\n          ))}\n        </thead>\n        <tbody {...getTableBodyProps()}>\n          {rows.map((row, i) => {\n            prepareRow(row);\n            return (\n              <tr {...row.getRowProps()}>\n                {row.cells.map(cell => {\n                  return (\n                    <td {...cell.getCellProps()}>{cell.render(\"Cell\")}</td>\n                  );\n                })}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n    </>\n  );\n}\n","import React, { useMemo, useState, useEffect } from \"react\";\nimport axios from \"axios\";\n\nimport Table from \"./Table\";\nimport \"./App.css\";\n\nconst Genres = ({ values }) => {\n  return (\n    <>\n      {values.map((genre, idx) => {\n        return (\n          <span key={idx} className=\"badge\">\n            {genre}\n          </span>\n        );\n      })}\n    </>\n  );\n};\n\nfunction App() {\n  const columns = useMemo(\n    () => [\n      {\n        Header: \"TV Show\",\n        columns: [\n          {\n            Header: \"Name\",\n            accessor: \"show.name\"\n          },\n          {\n            Header: \"Type\",\n            accessor: \"show.type\"\n          }\n        ]\n      },\n      {\n        Header: \"Details\",\n        columns: [\n          {\n            Header: \"Language\",\n            accessor: \"show.language\"\n          },\n          {\n            Header: \"Genre(s)\",\n            accessor: \"show.genres\",\n            Cell: ({ cell: { value } }) => <Genres values={value} />\n          },\n          {\n            Header: \"Runtime\",\n            accessor: \"show.runtime\",\n            Cell: ({ cell: { value } }) => {\n              const hour = Math.floor(value / 60);\n              const min = Math.floor(value % 60);\n              return (\n                <>\n                  {hour > 0 ? `${hour} hr${hour > 1 ? \"s\" : \"\"} ` : \"\"}\n                  {min > 0 ? `${min} min${min > 1 ? \"s\" : \"\"}` : \"\"}\n                </>\n              );\n            }\n          },\n          {\n            Header: \"Status\",\n            accessor: \"show.status\"\n          }\n        ]\n      }\n    ],\n    []\n  );\n\n  const [data, setData] = useState([]);\n\n  useEffect(() => {\n    (async () => {\n      const result = await axios(\"https://api.tvmaze.com/search/shows?q=snow\");\n      setData(result.data);\n    })();\n  }, []);\n\n  return (\n    <div className=\"App\">\n      <Table columns={columns} data={data} />\n    </div>\n  );\n}\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n  window.location.hostname === 'localhost' ||\n    // [::1] is the IPv6 localhost address.\n    window.location.hostname === '[::1]' ||\n    // 127.0.0.1/8 is considered localhost for IPv4.\n    window.location.hostname.match(\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n    )\n);\n\nexport function register(config) {\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n    // The URL constructor is available in all browsers that support SW.\n    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n    if (publicUrl.origin !== window.location.origin) {\n      // Our service worker won't work if PUBLIC_URL is on a different origin\n      // from what our page is served on. This might happen if a CDN is used to\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n      return;\n    }\n\n    window.addEventListener('load', () => {\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n      if (isLocalhost) {\n        // This is running on localhost. Let's check if a service worker still exists or not.\n        checkValidServiceWorker(swUrl, config);\n\n        // Add some additional logging to localhost, pointing developers to the\n        // service worker/PWA documentation.\n        navigator.serviceWorker.ready.then(() => {\n          console.log(\n            'This web app is being served cache-first by a service ' +\n              'worker. To learn more, visit https://bit.ly/CRA-PWA'\n          );\n        });\n      } else {\n        // Is not localhost. Just register service worker\n        registerValidSW(swUrl, config);\n      }\n    });\n  }\n}\n\nfunction registerValidSW(swUrl, config) {\n  navigator.serviceWorker\n    .register(swUrl)\n    .then(registration => {\n      registration.onupdatefound = () => {\n        const installingWorker = registration.installing;\n        if (installingWorker == null) {\n          return;\n        }\n        installingWorker.onstatechange = () => {\n          if (installingWorker.state === 'installed') {\n            if (navigator.serviceWorker.controller) {\n              // At this point, the updated precached content has been fetched,\n              // but the previous service worker will still serve the older\n              // content until all client tabs are closed.\n              console.log(\n                'New content is available and will be used when all ' +\n                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n              );\n\n              // Execute callback\n              if (config && config.onUpdate) {\n                config.onUpdate(registration);\n              }\n            } else {\n              // At this point, everything has been precached.\n              // It's the perfect time to display a\n              // \"Content is cached for offline use.\" message.\n              console.log('Content is cached for offline use.');\n\n              // Execute callback\n              if (config && config.onSuccess) {\n                config.onSuccess(registration);\n              }\n            }\n          }\n        };\n      };\n    })\n    .catch(error => {\n      console.error('Error during service worker registration:', error);\n    });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n  // Check if the service worker can be found. If it can't reload the page.\n  fetch(swUrl)\n    .then(response => {\n      // Ensure service worker exists, and that we really are getting a JS file.\n      const contentType = response.headers.get('content-type');\n      if (\n        response.status === 404 ||\n        (contentType != null && contentType.indexOf('javascript') === -1)\n      ) {\n        // No service worker found. Probably a different app. Reload the page.\n        navigator.serviceWorker.ready.then(registration => {\n          registration.unregister().then(() => {\n            window.location.reload();\n          });\n        });\n      } else {\n        // Service worker found. Proceed as normal.\n        registerValidSW(swUrl, config);\n      }\n    })\n    .catch(() => {\n      console.log(\n        'No internet connection found. App is running in offline mode.'\n      );\n    });\n}\n\nexport function unregister() {\n  if ('serviceWorker' in navigator) {\n    navigator.serviceWorker.ready.then(registration => {\n      registration.unregister();\n    });\n  }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(<App />, document.getElementById('root'));\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n"],"sourceRoot":""}