{"version":3,"sources":["api/unsplash.js","components/SearchBar.js","components/ImageCard.js","components/ImageList.js","components/App.js","index.js"],"names":["axios","create","baseURL","headers","Authorization","SearchBar","state","term","onFormSubmit","e","preventDefault","props","onSubmitProp","className","onSubmit","this","type","value","onChange","setState","target","React","Component","ImageCard","setSpans","height","imageRef","current","clientHeight","spans","Math","ceil","createRef","addEventListener","image","description","urls","style","gridRowEnd","ref","alt","src","regular","ImageList","images","map","key","id","App","onSearchSubmit","a","unsplash","get","params","query","response","data","results","marginTop","length","ReactDOM","render","document","querySelector"],"mappings":"8PAEeA,E,OAAAA,EAAMC,OAAO,CAC3BC,QAAS,2BACTC,QAAS,CACRC,cACC,2DCuBYC,E,4MAzBdC,MAAQ,CAACC,KAAM,I,EAEfC,aAAe,SAAAC,GACdA,EAAEC,iBACF,EAAKC,MAAMC,aAAa,EAAKN,MAAMC,O,uDAGzB,IAAD,OACT,OACC,yBAAKM,UAAU,cACd,0BAAMC,SAAUC,KAAKP,aAAcK,UAAU,WAC5C,yBAAKA,UAAU,SACd,+CACA,2BACCG,KAAK,OACLC,MAAOF,KAAKT,MAAMC,KAClBW,SAAU,SAAAT,GAAC,OAAI,EAAKU,SAAS,CAAEZ,KAAME,EAAEW,OAAOH,kB,GAlB7BI,IAAMC,WCuCfC,G,wDArCd,WAAYZ,GAAO,IAAD,8BACjB,cAAMA,IAWPa,SAAW,WACV,IAAMC,EAAS,EAAKC,SAASC,QAAQC,aAE/BC,EAAQC,KAAKC,KAAKN,EAAS,IAEjC,EAAKN,SAAS,CAAEU,WAdhB,EAAKvB,MAAQ,CAAEuB,MAAO,GAEtB,EAAKH,SAAWL,IAAMW,YALL,E,gEASjBjB,KAAKW,SAASC,QAAQM,iBAAiB,OAAQlB,KAAKS,Y,+BAY3C,IAAD,EACqBT,KAAKJ,MAAMuB,MAAhCC,EADA,EACAA,YAAaC,EADb,EACaA,KAErB,OACC,yBAAKC,MAAO,CAACC,WAAW,QAAD,OAAUvB,KAAKT,MAAMuB,SAC3C,yBACCU,IAAKxB,KAAKW,SACVc,IAAKL,EACLM,IAAKL,EAAKM,e,GA/BSrB,IAAMC,YCSfqB,EAPG,SAAChC,GAClB,IAAMiC,EAASjC,EAAMiC,OAAOC,KAAK,SAAAX,GAChC,OAAO,kBAAC,EAAD,CAAWY,IAAKZ,EAAMa,GAAIb,MAAOA,OAEzC,OAAO,yBAAKrB,UAAU,cAAe+B,IC0BvBI,E,4MAzBd1C,MAAQ,CAAEsC,OAAQ,I,EAIlBK,e,uCAAiB,WAAM1C,GAAN,eAAA2C,EAAA,sEAEOC,EAASC,IAAI,iBAAkB,CACrDC,OAAQ,CAAEC,MAAO/C,KAHF,OAEVgD,EAFU,OAMhB,EAAKpC,SAAS,CAAEyB,OAAQW,EAASC,KAAKC,UANtB,2C,6GAWhB,OACC,yBAAK5C,UAAU,eAAewB,MAAO,CAACqB,UAAW,SAChD,kBAAC,EAAD,CAAW9C,aAAcG,KAAKkC,iBAD/B,UAESlC,KAAKT,MAAMsC,OAAOe,OAC1B,kBAAC,EAAD,CAAWf,OAAQ7B,KAAKT,MAAMsC,c,GArBhBvB,IAAMC,WCDxBsC,IAASC,OACR,kBAAC,EAAD,MACAC,SAASC,cAAc,Y","file":"static/js/main.0560c253.chunk.js","sourcesContent":["import axios from 'axios'\n\nexport default axios.create({\n\tbaseURL: 'https://api.unsplash.com',\n\theaders: {\n\t\tAuthorization:\n\t\t\t'Client-ID H3bI0YP6qZkJ00zjl7_zRYNbSu802ix4UMLgGySsbMQ'\n\t},\n})","import React from 'react';\n\nclass SearchBar extends React.Component {\n\n\tstate = {term: ''};\n\n\tonFormSubmit = e => {\n\t\te.preventDefault();\n\t\tthis.props.onSubmitProp(this.state.term);\n\t}\n\n\trender () {\n\t\treturn(\n\t\t\t<div className=\"ui segment\">\n\t\t\t\t<form onSubmit={this.onFormSubmit} className=\"ui form\">\n\t\t\t\t\t<div className=\"field\">\n\t\t\t\t\t\t<label>Image Search</label>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tvalue={this.state.term}\n\t\t\t\t\t\t\tonChange={e => this.setState({ term: e.target.value })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</form>\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nexport default SearchBar;","import React from 'react';\n\nclass ImageCard extends React.Component {\n\n\tconstructor(props){\n\t\tsuper(props);\n\n\t\tthis.state = { spans: 0 }\n\n\t\tthis.imageRef = React.createRef();\n\t}\n\n\tcomponentDidMount(){\n\t\tthis.imageRef.current.addEventListener('load', this.setSpans);\n\t}\n\n\tsetSpans = () => {\n\t\tconst height = this.imageRef.current.clientHeight\n\n\t\tconst spans = Math.ceil(height / 10);\n\n\t\tthis.setState({ spans });\n\t\t\n\t}\n\n\trender (){\n\t\tconst { description, urls} = this.props.image;\n\n\t\treturn (\n\t\t\t<div style={{gridRowEnd: `span ${this.state.spans}`}}>\n\t\t\t\t<img \n\t\t\t\t\tref={this.imageRef}\n\t\t\t\t\talt={description}\n\t\t\t\t\tsrc={urls.regular}\n\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nexport default ImageCard\n","import React from 'react';\nimport './ImageList.css';\nimport ImageCard from './ImageCard';\n\nconst ImageList = (props) => {\n\tconst images = props.images.map( image => {\n\t\treturn <ImageCard key={image.id} image={image} />\n\t});\n\treturn <div className=\"image-list\" >{images}</div>\n}\n\nexport default ImageList\n\n\n\n","import React from 'react';\nimport unsplash from '../api/unsplash.js';\n\nimport SearchBar from './SearchBar';\nimport ImageList from './ImageList';\n\n\nclass App extends React.Component {\n\n\tstate = { images: [] };\n\n\t// onFormSubmit = e => {\n\n\tonSearchSubmit = async term => {\n\t\t\n\t\tconst response = await unsplash.get('/search/photos', {\n\t\t\tparams: { query: term },\n\t\t});\n\n\t\tthis.setState({ images: response.data.results })\n\t};\n\n\n\trender () {\n\t\treturn (\n\t\t\t<div className=\"ui container\" style={{marginTop: '10px'}}>\n\t\t\t\t<SearchBar onSubmitProp={this.onSearchSubmit} />\n\t\t\t\tFound: {this.state.images.length}\n\t\t\t\t<ImageList images={this.state.images} />\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nexport default App;\n\n//results[0].urls.regular","//3rd party\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport App from './components/App';\n\nReactDOM.render(\n\t<App />,\n\tdocument.querySelector('#root')\n);"],"sourceRoot":""}