diff --git a/react/8/pics/src/api/unsplash.js b/react/8/pics/src/api/unsplash.js new file mode 100644 index 0000000..a915daa --- /dev/null +++ b/react/8/pics/src/api/unsplash.js @@ -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' + } +}) \ No newline at end of file diff --git a/react/8/pics/src/components/App.js b/react/8/pics/src/components/App.js index da574d7..f3a8ff4 100644 --- a/react/8/pics/src/components/App.js +++ b/react/8/pics/src/components/App.js @@ -1,22 +1,24 @@ import React from 'react' import SearchBar from './SearchBar' -import axios from 'axios' +import unsplash from '../api/unsplash' +import ImageList from './ImageList' class App extends React.Component { - async onSearchSubmit(term) { - const response = await axios.get("https://api.unsplash.com/search/photos", { + state = { images: [] } + + onSearchSubmit = async term => { + const response = await unsplash.get('/search/photos', { params: { query: term }, - headers: { - Authorization: 'Client-ID b4d9ccd8113d1f68079b8eb43747bfe5e56705409be3ed9e1db0accbc3da35ce' - } }) - console.log(response.data.results) + + this.setState({ images: response.data.results }) } render() { return (
+
) } diff --git a/react/8/pics/src/components/ImageList.js b/react/8/pics/src/components/ImageList.js new file mode 100644 index 0000000..b979934 --- /dev/null +++ b/react/8/pics/src/components/ImageList.js @@ -0,0 +1,11 @@ +import React from 'react' + +const ImageList = (props) => { + const images = props.images.map((image) => { + return {image.description} + }) + + return
{images}
+} + +export default ImageList \ No newline at end of file