{"version":3,"sources":["components/DisplayRecommendations.js","components/Search.js","App.js","reportWebVitals.js","index.js"],"names":["DisplayRecommendations","data","className","scope","undefined","Search","map","result","src","Poster","alt","Title","Type","imdbID","Year","useState","search","setSearch","source","axios","CancelToken","url","process","useSWR","get","cancelToken","token","then","res","revalidateOnFocus","revalidateOnReconnect","refreshWhenOffline","refreshWhenHidden","refreshInterval","error","JSON","stringify","console","log","onChange","event","cancel","target","value","placeholder","App","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"8PAEe,SAASA,EAAT,GAAyC,IAARC,EAAO,EAAPA,KAC5C,OACI,qBAAKC,UAAU,QAAf,SACI,qBAAKA,UAAU,gBAAf,SACI,qBAAKA,UAAU,0BAAf,SACI,qBAAKA,UAAU,4DAAf,SACA,qBAAKA,UAAU,gEAAf,SACI,wBAAOA,UAAU,sCAAjB,UACA,uBAAOA,UAAU,aAAjB,SACI,+BACI,oBAAIC,MAAM,MAAMD,UAAU,iFAA1B,mBAGA,oBAAIC,MAAM,MAAMD,UAAU,kGAA1B,kBAGA,oBAAIC,MAAM,MAAMD,UAAU,sGAA1B,kBAGA,oBAAIC,MAAM,MAAMD,UAAU,kGAA1B,4BAOIE,IAAPH,OAAkCG,IAAdH,EAAKI,OAAoBJ,EAAKI,OAAOC,KAAI,SAACC,GAC3D,OACI,uBAAOL,UAAU,oCAAjB,SACI,+BACI,oBAAIA,UAAU,8BAAd,SACI,sBAAKA,UAAU,oBAAf,UACI,qBAAKA,UAAU,gDAAf,SACI,qBAAKA,UAAU,yBAAyBM,IAAKD,EAAOE,OAAQC,IAAI,OAEpE,qBAAKR,UAAU,UAAf,SACI,qBAAKA,UAAU,8CAAf,SACKK,EAAOI,eAKxB,qBAAIT,UAAU,8BAAd,UACI,qBAAKA,UAAU,oDAAf,SACKK,EAAOK,OAEZ,qBAAKV,UAAU,qDAAf,6BAEJ,oBAAIA,UAAU,8BAAd,SACI,sBAAMA,UAAU,kGAAhB,SACKK,EAAOM,WAGhB,oBAAIX,UAAU,uFAAd,SACKK,EAAOO,WA1BsCP,EAAOM,WAgCrE,uBAAOX,UAAU,oCAAjB,SACI,6BACI,oBAAIA,UAAU,8BAAd,SACI,qBAAKA,UAAU,oBAAf,8BAOhB,uBAAOA,UAAU,oCAAjB,SACI,6BACI,oBAAIA,UAAU,8BAAd,SACI,qBAAKA,UAAU,oBAAf,4CCtEzB,SAASG,IAAU,IAAD,EACDU,mBAAS,IADR,mBACtBC,EADsB,KACdC,EADc,KAGvBC,EADcC,IAAMC,YACCF,SASvBG,EAAG,qCAAiCL,EAAjC,mBAAkDM,YAZ5B,EAoBPC,YAAOF,GALb,kBAAaF,IAAMK,IAAIH,EAAK,CACxCI,YAAaP,EAAOQ,QAEvBC,MAAK,SAAAC,GAAG,OAAEA,EAAI3B,UAdI,CACf4B,mBAAmB,EACnBC,uBAAuB,EACvBC,oBAAoB,EACpBC,mBAAmB,EACnBC,gBAAiB,IAWdhC,EApBsB,EAoBtBA,KAAMiC,EApBgB,EAoBhBA,MAGb,OAAIA,EACA,gEAEI,8BAAMC,KAAKC,UAAUF,QAKzB,gCAEQG,QAAQC,IAAI,wBAAyBtB,GAEzC,uBAAMd,UAAU,QAAhB,UACI,uBAAOqC,SAAU,SAAAC,GACbtB,EAAOuB,OAAO,sBACdxB,EAAUuB,EAAME,OAAOC,QAG3BzC,UAAU,sCAAsC0C,YAAY,8BAC5D,wBAAQ1C,UAAU,4EAAlB,uBAGJ,cAACF,EAAD,CAAwBC,KAAMA,OCtC3B4C,MARf,WACE,OACE,qBAAK3C,UAAU,MAAf,SACE,cAACG,EAAD,OCKSyC,EAZS,SAAAC,GAClBA,GAAeA,aAAuBC,UACxC,6BAAqBrB,MAAK,YAAkD,IAA/CsB,EAA8C,EAA9CA,OAAQC,EAAsC,EAAtCA,OAAQC,EAA8B,EAA9BA,OAAQC,EAAsB,EAAtBA,OAAQC,EAAc,EAAdA,QAC3DJ,EAAOF,GACPG,EAAOH,GACPI,EAAOJ,GACPK,EAAOL,GACPM,EAAQN,OCDdO,IAASC,OACP,cAAC,IAAMC,WAAP,UACE,cAAC,EAAD,MAEFC,SAASC,eAAe,SAM1BZ,M","file":"static/js/main.2626511f.chunk.js","sourcesContent":["import React from 'react'\n\nexport default function DisplayRecommendations({data}) {\n    return (\n        <div className=\"mt-10\">\n            <div className=\"flex flex-col\">\n                <div className=\"md:my-2 overflow-x-auto\">\n                    <div className=\"py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8\">\n                    <div className=\"shadow overflow-hidden border-b border-gray-200 sm:rounded-lg\">\n                        <table className=\"min-w-full divide-y divide-gray-200\">\n                        <thead className=\"bg-gray-50\">\n                            <tr>\n                                <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">\n                                    Title\n                                </th>\n                                <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden md:inline\">\n                                    Type\n                                </th>\n                                <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden md:table-cell\">\n                                    IMDB\n                                </th>\n                                <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden md:inline\">\n                                    Year\n                                </th>\n                            </tr>\n                        </thead>\n                        {\n                            // check if data is loaded or not, if loaded , check for sarch array then show data else show error message\n                            (data!==undefined)?((data.Search!==undefined)?data.Search.map((result)=>{\n                                return(\n                                    <tbody className=\"bg-white divide-y divide-gray-200\" key={result.imdbID}>\n                                        <tr>\n                                            <td className=\"px-6 py-4 whitespace-nowrap\">\n                                                <div className=\"flex items-center\">\n                                                    <div className=\"flex-shrink-0 h-10 w-10 hidden md:inline-flex\">\n                                                        <img className=\"h-10 w-10 rounded-full\" src={result.Poster} alt=\"\" />\n                                                    </div>\n                                                    <div className=\"md:ml-4\">\n                                                        <div className=\"text-left text-sm font-medium text-gray-900\">\n                                                            {result.Title}\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </td>\n                                            <td className=\"px-6 py-4 whitespace-nowrap\">\n                                                <div className=\"text-sm text-center text-gray-900 hidden md:block\">\n                                                    {result.Type}\n                                                </div>\n                                                <div className=\"text-sm text-center text-gray-500 hidden md:inline\">Optimization</div>\n                                            </td>\n                                            <td className=\"px-6 py-4 whitespace-nowrap\">\n                                                <span className=\"px-4  text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 hidden md:inline\">\n                                                    {result.imdbID}\n                                                </span>\n                                            </td>\n                                            <td className=\"px-6 py-4 whitespace-nowrap text-left text-sm text-gray-500 sm:px-0 hidden md:inline\">\n                                                {result.Year}\n                                            </td>\n                                        </tr>\n                                    </tbody>\n                                    )\n                                }):\n                                <tbody className=\"bg-white divide-y divide-gray-200\">\n                                    <tr>\n                                        <td className=\"px-6 py-4 whitespace-nowrap\">\n                                            <div className=\"flex items-center\">  \n                                                No results\n                                            </div>     \n                                        </td>\n                                    </tr>\n                                </tbody>\n                            ):\n                            <tbody className=\"bg-white divide-y divide-gray-200\">\n                                <tr>\n                                    <td className=\"px-6 py-4 whitespace-nowrap\">\n                                        <div className=\"flex items-center\">  \n                                            Loading ...\n                                        </div>     \n                                    </td>\n                                </tr>\n                            </tbody>\n                        }\n                        </table>\n                    </div>\n                    </div>\n                </div>\n                </div>\n        </div>\n    )\n}\n","import axios from \"axios\";\nimport React, { useState } from 'react';\nimport useSWR from 'swr';\nimport DisplayRecommendations from \"./DisplayRecommendations\";\n\nexport default function Search() {\n    const [search, setSearch] = useState('')\n    const CancelToken = axios.CancelToken\n    const source = CancelToken.source()\n    const parameters = {\n        revalidateOnFocus: false,\n        revalidateOnReconnect: false,\n        refreshWhenOffline: false,\n        refreshWhenHidden: false,\n        refreshInterval: 0,\n      };\n    \n    var url = `https://www.omdbapi.com/?s=${search}&apikey=${process.env.REACT_APP_API_KEY}`\n    \n    //adding fetcher for SWR \n    const fetcher = (...args) => axios.get(url, {\n        cancelToken: source.token\n    })\n    .then(res=>res.data)\n    \n    const {data, error} = useSWR(url, fetcher, parameters)\n    \n    //error checking\n    if (error) return (\n        <>\n            \"An error has occurred.\"\n            <pre>{JSON.stringify(error)}</pre>\n        </>\n    )\n    \n    return (\n        <div>\n            {\n                console.log(\"repsonse from api is:\", search)\n            }\n            <form className=\"mt-10\">\n                <input onChange={event => {\n                    source.cancel(\"Operation canceled\")\n                    setSearch(event.target.value)\n                }\n            } \n                className=\"max-w-30 w-96 p-5 rounded shadow-lg\" placeholder=\"What do you want to know?\"/>\n                <button className=\"bg-gray-100 m-2 p-5 rounded-md text-sm shadow-xl border hover:bg-gray-300\">Search</button>\n            </form>\n            {/* passing data as props to the component */}\n            <DisplayRecommendations data={data}/> \n        </div>\n    )\n}\n","import \"./App.css\";\nimport Search from \"./components/Search\";\n\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <Search />    \n    </div>\n  );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\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":""}