53 lines
1.7 KiB
JavaScript
53 lines
1.7 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { Spinner, Row, Col, Image } from "react-bootstrap";
|
|
|
|
//https://www.flickr.com/services/api/misc.urls.html
|
|
|
|
//Photo function that handles the content of Photography
|
|
function Photos() {
|
|
const [isLoading, setLoading] = useState(true);
|
|
const [photoData, setPhotoData] = useState([]);
|
|
const [photoLinks, setPhotoLinks] = useState([]);
|
|
|
|
//Create const that gets Flickr Api data and build image links from data
|
|
const createFlickrLinks = async () => {
|
|
try {
|
|
const response = await fetch("https://express-api-neinhills.onrender.com/flickr");
|
|
console.log(response);
|
|
const json = await response.json();
|
|
console.log(json);
|
|
const flickrLink = await json.photos.photo.map(photo => "https://live.staticflickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + ".jpg");
|
|
setPhotoData(flickrLink);
|
|
} catch (error) {
|
|
console.error(error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
createFlickrLinks();
|
|
}, []);
|
|
|
|
//Return data to display on the website, also takes data from flickrLink to display on the website
|
|
return (
|
|
<div className="content fadeSlideIn">
|
|
{
|
|
isLoading ?
|
|
<><Row className="justify-content-md-center">
|
|
<Col md="auto">
|
|
<Spinner animation="border" />
|
|
</Col>
|
|
</Row></> :
|
|
<><Row className="justify-content-md-center">
|
|
<Col md="auto">
|
|
{
|
|
photoData.map((url, key) => <Image key={key} className="p-2" src={url} thumbnail />)
|
|
}
|
|
</Col>
|
|
</Row></>
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
export default Photos |