changes made for netlify

.gitignore

@@ -22,3 +22,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Local Netlify folder
+.netlify

package.json

@@ -6,6 +6,7 @@
     "axios": "^1.3.4",
     "bootstrap": "^5.2.3",
     "eslint-plugin-react": "^7.30.1",
+    "install": "^0.13.0",
     "react": "^18.0.0",
     "react-bootstrap": "^2.7.2",
     "react-dom": "^18.0.0",
@@ -36,5 +37,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "https://api.harvardartmuseums.org/d6&size=100&page=10"
-}
+  "proxy": "https://api.harvardartmuseums.org/object?apikey=ea65da40-779b-43c2-87a7-1bbc03fef7d6&size=100&page=10"
+}

src/App.js

@@ -6,11 +6,8 @@ import GalleryIndex from './components/gallery/GalleryIndex'
 import GallerySingle from './components/gallery/GallerySingle'
 import PageNavBar from './components/common/PageNavBar'
 
-
 const App = () => {
 
-
-
   return (
 
     <div className='site-wrapper'>

src/components/gallery/GalleryIndex.js

@@ -1,6 +1,7 @@
 import axios from 'axios'
 import { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
+import placeholder from '../../images/placeholder.png'
 
 
 import Error from '../common/Error'
@@ -18,14 +19,12 @@ const GalleryIndex = () => {
   const [art, setArt] = useState([])
   const [error, setError] = useState('')
 
-
-
   useEffect(() => {
     const getArt = async () => {
       try {
         const { data } = await axios.get(`https://api.harvardartmuseums.org/object?apikey=${process.env.REACT_APP_API_KEY}&size=100&page=10`)
         setArt(data.records)
-        //console.log(data.records)
+        console.log(data.records)
       } catch (err) {
         //console.log(err)
         setError(err.message)
@@ -43,16 +42,19 @@ const GalleryIndex = () => {
             <h1 id='title' className='display-4 mt-4 mb-5 text-center'>Gallery</h1>
           </Col>
           {art.length > 0 ?
-            art.filter(art => art.people && art.images && art.images[0] && art.images[0].baseimageurl).map(art => {
-              const { id, people: [{ name }], images: [{ baseimageurl }] } = art
+            art.filter(art => {
+              //console.log(art.people && art.images && art.images[0] && art.images[0].baseimageurl)
+              return art.people
+            }).map(art => {
+              const { id, people, images } = art
               //console.log(id, name, baseimageurl)
               return (
                 <Col key={id} lg="4" md="6" sm="12" className='art'>
                   <Link to={`/gallery/${id}`}>
                     <Card>
-                      <div className="card-image" style={{ backgroundImage: `url('${baseimageurl}')` }}></div>
+                      <div className="card-image" style={{ backgroundImage: `url('${images[0] && images[0].baseimageurl ? images[0].baseimageurl : placeholder}')` }}></div>
                       <Card.Body>
-                        <Card.Text>{name}</Card.Text>
+                        <Card.Text>{people[0].name}</Card.Text>
                       </Card.Body>
                     </Card>
                   </Link>

src/components/gallery/GallerySingle.js

@@ -1,6 +1,7 @@
 import axios from 'axios'
 import { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
+import placeholder from '../../images/placeholder.png'
 
 
 // Bootstrap
@@ -42,7 +43,7 @@ const GallerySingle = () => {
           {art &&
             <>
               <Col>
-                <img className='singleImage' src={art.images[0].baseimageurl} alt={art.people[0].name} />
+                <img className='singleImage' src={art.images[0] && art.images[0].baseimageurl ? art.images[0].baseimageurl : placeholder} alt={art.people[0].name} />
               </Col>
               <Col md="6" className='singleText mt-3 col-md-6'>
                 <h4 className='display-6'>{art.people[0].name}, </h4>