finished react 8
This commit is contained in:
parent
94fe4b3801
commit
7d7280cf9a
9
react/8/pics/src/api/unsplash.js
Normal file
9
react/8/pics/src/api/unsplash.js
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
// Create an axios client with custom properties
|
||||||
|
export default axios.create({
|
||||||
|
baseURL: "https://api.unsplash.com/",
|
||||||
|
headers: {
|
||||||
|
Authorization: 'Client-ID b4d9ccd8113d1f68079b8eb43747bfe5e56705409be3ed9e1db0accbc3da35ce'
|
||||||
|
}
|
||||||
|
})
|
|
@ -1,22 +1,24 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import SearchBar from './SearchBar'
|
import SearchBar from './SearchBar'
|
||||||
import axios from 'axios'
|
import unsplash from '../api/unsplash'
|
||||||
|
import ImageList from './ImageList'
|
||||||
|
|
||||||
class App extends React.Component {
|
class App extends React.Component {
|
||||||
async onSearchSubmit(term) {
|
state = { images: [] }
|
||||||
const response = await axios.get("https://api.unsplash.com/search/photos", {
|
|
||||||
|
onSearchSubmit = async term => {
|
||||||
|
const response = await unsplash.get('/search/photos', {
|
||||||
params: { query: term },
|
params: { query: term },
|
||||||
headers: {
|
|
||||||
Authorization: 'Client-ID b4d9ccd8113d1f68079b8eb43747bfe5e56705409be3ed9e1db0accbc3da35ce'
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
console.log(response.data.results)
|
|
||||||
|
this.setState({ images: response.data.results })
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="ui container" style={{ marginTop: "10px" }}>
|
<div className="ui container" style={{ marginTop: "10px" }}>
|
||||||
<SearchBar onSubmit={this.onSearchSubmit} />
|
<SearchBar onSubmit={this.onSearchSubmit} />
|
||||||
|
<ImageList images={this.state.images} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
11
react/8/pics/src/components/ImageList.js
Normal file
11
react/8/pics/src/components/ImageList.js
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const ImageList = (props) => {
|
||||||
|
const images = props.images.map((image) => {
|
||||||
|
return <img key={image.id} src={image.urls.regular} alt={image.description} />
|
||||||
|
})
|
||||||
|
|
||||||
|
return <div>{images}</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ImageList
|
Loading…
Reference in a new issue