Progress, crediting Pexels etc

src/components/Background.jsx

@@ -11,9 +11,94 @@ export default class Background extends React.Component {
       document.getElementById('photographer').innerText = `Photo by ${data.photographer}`;
       document.getElementById('location').innerText = `${data.location}`;   
     } catch (e) { // ..and if that fails we load one locally
+      let photographer;
+      const photo = Math.floor(Math.random() * (20 - 1 + 1)) + 1; // There are 20 images in the offline-images folder
       document.getElementById('backgroundCredits').style.display = 'none';
-      document.getElementById('photographer').innerText = 'Photo from Pexels';
-      document.getElementById('root').style.backgroundImage = `url(../offline-images/${Math.floor(Math.random() * (20 - 1 + 1)) + 1})`; // There are 20 images in the offline-images folder
+      // eslint-disable-next-line default-case
+      switch (photo) { // Select photographer based on image file number
+        case 1: {
+          photographer = 'Tirachard Kumtanom (Pexels)';
+          break;
+        }
+        case 2: {
+          photographer = 'Pixabay (Pexels)';
+          break;
+        }
+        case 3: {
+          photographer = 'Pixabay (Pexels)';
+          break;
+        }
+        case 4: {
+          photographer = 'Sohail Na (Pexels)';
+          break;
+        }
+        case 5: {
+          photographer = 'Unknown (Pexels)';
+          break;
+        }
+        case 6: {
+          photographer = 'Unknown (Pexels)';
+          break;
+        }
+        case 7: {
+          photographer = 'Miriam Espacio (Pexels)';
+          break;
+        }
+        case 8: {
+          photographer = 'Unknown (Pexels)';
+          break;
+        }
+        case 9: {
+          photographer = 'Pixabay (Pexels)';
+          break;
+        }
+        case 10: {
+          photographer = 'NO NAME (Pexels)';
+          break;
+        }
+        case 11: {
+          photographer = 'Pixabay (Pexels)';
+          break;
+        }
+        case 12: {
+          photographer = 'Unknown (Pexels)';
+          break;
+        }
+        case 13: {
+          photographer = 'Pixabay (Pexels)';
+          break;
+        }
+        case 14: {
+          photographer = 'Pixabay (Pexels)';
+          break;
+        }
+        case 15: {
+          photographer = 'Pixabay (Pexels)';
+          break;
+        }
+        case 16: {
+          photographer = 'Unknown (Pexels)';
+          break;
+        }
+        case 17: {
+          photographer = 'Unknown (Pexels)';
+          break;
+        }
+        case 18: {
+          photographer = 'Unknown (Pexels)';
+          break;
+        }
+        case 19: {
+          photographer = 'Unknown (Pexels)';
+          break;
+        }
+        case 20: {
+          photographer = 'Fabian Wiktor (Pexels)';
+          break;
+        }
+      }
+      document.getElementById('photographer').innerText = `Photo by ${photographer}`;
+      document.getElementById('root').style.backgroundImage = `url(../offline-images/${photo}.jpeg)`;
     }
   }
 

src/components/Credit.jsx

@@ -3,7 +3,7 @@
 import RoomIcon from '@material-ui/icons/Room';
 import React from 'react';
 
-export default class Search extends React.Component {
+export default class Credit extends React.Component {
   render() {
     return (
       <div className='credits'>

src/components/Greeting.jsx

@@ -23,9 +23,10 @@ export default class Greeting extends React.Component {
     if (t.getMonth() === 0 && t.getDate() === 1) g = 'Happy new year'; // If the date is January 1st, set it to new year
     else if (t.getMonth() === 11 && t.getDate() === 25) g = 'Merry Christmas'; // If it's December 25th, set it to xmas
     else if (t.getMonth() === 9 && t.getDate() === 31) g = 'Happy Halloween'; // If it's October 31st, set it to halloween
+
     this.setState({ 
       greeting: g 
-    }); // Set the state to the time string
+    }); // Set the state to the greeting string
   }
 
   componentDidMount() {

src/components/Quote.jsx

@@ -1,6 +1,6 @@
 //* Imports
 import React from 'react';
-import quotes from '../quotes.json';
+import Quotes from '@muetab/quotes';
 
 export default class Quote extends React.Component {
   constructor(...args) {
@@ -15,9 +15,12 @@ export default class Quote extends React.Component {
     try { // First we try and get a quote from the API...
       let data = await fetch('https://api.muetab.xyz/getQuote');
       data = await data.json();
-      this.setState({ quote: data.quote, author: data.author });
+      this.setState({ 
+        quote: data.quote, 
+        author: data.author 
+      });
     } catch (e) { // ..and if that fails we load one locally
-      const quote = quotes[Math.floor(Math.random() * quotes.length)]; // Get a random quote from quotes.json
+      const quote = Quotes.random(); // Get a random quote from our local package
       this.setState({ 
         quote: quote.quote, 
         author: quote.author