From d329f52e8a99a34587ab065f0b7474896c788ca5 Mon Sep 17 00:00:00 2001
From: Andy Wu <awpats12@gmail.com>
Date: Sun, 28 Aug 2022 18:15:03 -0400
Subject: [PATCH] MVP done - release 1.0

---
 app/frontend/src/App.js           | 9 +++++----
 app/frontend/src/styles/style.css | 7 ++++++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/frontend/src/App.js b/app/frontend/src/App.js
index 8b25cdd..c542fca 100644
--- a/app/frontend/src/App.js
+++ b/app/frontend/src/App.js
@@ -73,7 +73,7 @@ function DogQueryForm({queryOptions}) {
 
   const breedOptions = queryOptionsToHTML(queryOptions);
   // Config number of images to pull from API
-  const imageCount = 25;
+  const imageCount = 27;
 
   // TODO: Find way to stop user from spamming fetches
   function handleSubmit(e) {
@@ -135,14 +135,15 @@ function RandomDogImage() {
   function fetchImage() {
     fetch('http://localhost:3011/dog/get-random')
     .then(response => response.json())
-    .then(data => setImageLink(data['message']));
+    .then(data => setImageLink(data['message']))
+    .catch(error => setImageLink(''));
   };
 
   return (
     <div className='random-image-container'>
       <h1> Random Dog Image </h1>
       <p> <button className='fetch' onClick={fetchImage}>Fetch</button> a new image </p>
-      {imageLink && <img className='dog-image' src={imageLink} alt='Dog' />}
+      {imageLink && <img className='random-dog-image' src={imageLink} alt='Dog' />}
     </div>
   );
 }
@@ -164,7 +165,7 @@ function ImageList(props) {
     availableIdx.pop();
 
     const imgSrc = props.images[imageIndex];
-    const img = <img key={`image${i}`} className='dog-image' src={imgSrc} alt='Dog' />;
+    const img = <img key={`image${i}`} className='list-dog-image' src={imgSrc} alt='Dog' />;
     imageList.push(img);
 
   }
diff --git a/app/frontend/src/styles/style.css b/app/frontend/src/styles/style.css
index 81ba2f9..7fcebf7 100644
--- a/app/frontend/src/styles/style.css
+++ b/app/frontend/src/styles/style.css
@@ -4,11 +4,16 @@ body {
     background-color: #121212;
 }
 
-.dog-image {
+.list-dog-image {
     width: 75%;
     height: 75%;
 }
 
+.random-dog-image {
+    max-width: 75vw;
+    max-height: 75vh;
+}
+
 .navbar a:hover {
     background-color: skyblue;
     color: black;