Upload files to "src"

src/Photos.jsx

@@ -0,0 +1,53 @@
+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

src/Videos.jsx

@@ -0,0 +1,73 @@
+import React, { useState, useEffect }  from "react";
+import { Spinner, Row, Col, Button } from "react-bootstrap";
+
+//Videos function that handles the content of Videos
+function Videos() {
+  const [isLoading, setLoading] = useState(true);
+  const [videos, setVideos] = useState([]);
+  const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
+
+  //Create const that gets YouTube Api data and build video links from data
+  const getYTVideoLink = async () => {
+    try {
+      const response = await fetch("https://express-api-neinhills.onrender.com/youtube");
+      const json = await response.json();
+      const videoLinks = await json.items.map(item => "https://www.youtube.com/embed/" + item.id.videoId);
+      const videoiframe = await videoLinks.map(link => <iframe className="video" width="560" height="315" src={ link } title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>);
+      setVideos(videoiframe);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  //Handle the state of currentVideoIndex to get the previous video
+  const handlePrevClick = () => {
+    if (currentVideoIndex > 0) {
+      setCurrentVideoIndex(currentVideoIndex - 1);
+    }
+  };
+  
+  //Handle the state of currentVideoIndex to get the next video
+  const handleNextClick = () => {
+    if (currentVideoIndex < videos.length - 1) {
+      setCurrentVideoIndex(currentVideoIndex + 1);
+    }
+  };
+
+  useEffect(() => {
+    getYTVideoLink();
+  }, []);
+
+  //Return data to display on the website, also takes data from vidoes 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">
+              { videos[currentVideoIndex] }
+            </Col>
+          </Row>
+          <Row className="justify-content-md-center">
+            <Col md="auto">
+              <Button variant="primary" size="lg" onClick={handlePrevClick}>Prev</Button>{" "}
+              <Button variant="primary" size="lg" onClick={handleNextClick}>Next</Button>
+            </Col>
+          </Row>
+          <Row className="justify-content-md-center">
+              <Col md="auto">
+                <div>Watch all videos on my <a href="https://www.youtube.com/@therearenohills3171" target="_blank">YouTube Channel</a></div>
+              </Col>
+            </Row></>
+      }
+    </div>
+  );
+}
+export default Videos