From afb0f5c061fbc7a1a5c7a421f3bade62c33b3695 Mon Sep 17 00:00:00 2001
From: edenbun <contact@edenbun.com>
Date: Thu, 27 Aug 2020 19:25:50 +0100
Subject: [PATCH 1/2] Refactor the Background component during offline mode

---
 src/components/widgets/Background.jsx | 30 +++++++++++++--------------
 src/modules/offlineImages.json        | 20 ++++++++++++++++++
 2 files changed, 34 insertions(+), 16 deletions(-)
 create mode 100644 src/modules/offlineImages.json

diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx
index 77902fa5..25ae5b32 100644
--- a/src/components/widgets/Background.jsx
+++ b/src/components/widgets/Background.jsx
@@ -3,24 +3,22 @@ import supportsWebP from 'supports-webp';
 import * as Constants from '../../modules/constants';
 
 export default class Background extends React.PureComponent {
-  doOffline() {
-    const photo = Math.floor(Math.random() * (Constants.OFFLINE_IMAGES - 1 + 1)) + 1; // There are 20 images in the offline-images folder
-    document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon
+  doOffline() { // Handles setting the background if the user is offline
+    const offlineImages = require('../../modules/offlineImages.json');
+    const photographers = Object.keys(offlineImages); // Get all photographers from the keys in offlineImages.json
+    const photographer = photographers[Math.floor(Math.random() * photographers.length)]; // Select a random photographer from the keys
+    const randomImage = offlineImages[photographer].photo[
+      Math.floor(Math.random() * offlineImages[photographer].photo.length)
+    ] // Select a random image
 
-    let photographer; // Photographer credit
-    if ([2, 3, 9, 11, 13, 14, 15].includes(photo)) photographer = 'Pixabay';  // As there are a lot of Pixabay photos, we shorten the code a bit here
-    else switch (photo) {
-      case 1: photographer = 'Tirachard Kumtanom'; break;
-      case 4: photographer = 'Sohail Na'; break;
-      case 7: photographer = 'Miriam Espacio'; break;
-      case 10: photographer = 'NO NAME'; break;
-      case 20: photographer = 'Fabian Wiktor'; break;
-      default: photographer = 'Unknown'; break;
-    }
+    document.querySelector('#backgroundImage').setAttribute(
+      'style', `background-image: url(../offline-images/${randomImage}.jpeg); -webkit-filter:blur(${localStorage.getItem('blur')}px);` 
+    ); // Set background and blur
+    
+    const creditElem = document.getElementById('photographer');
+    creditElem.append(` ${photographer} (Pexels)`); // Set the credit
 
-    document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(../offline-images/${photo}.jpeg)`); // Set background and blur etc
-    let credit = document.getElementById('photographer');
-    credit.innerText = `${credit.innerText} ${photographer} (Pexels)`; // Set the credit
+    document.querySelector('#backgroundCredits').style.display = 'none'; // Hide the location icon
   }
 
   async setBackground() {
diff --git a/src/modules/offlineImages.json b/src/modules/offlineImages.json
new file mode 100644
index 00000000..2fd7e390
--- /dev/null
+++ b/src/modules/offlineImages.json
@@ -0,0 +1,20 @@
+{
+    "Tirachard Kumtanom" : {
+        "photo": [1]
+    },
+    "Sohail Na": {
+        "photo": [4]
+    },
+    "Miriam Espacio": {
+        "photo": [7]
+    },
+    "Fabian Wiktor": {
+        "photo": [20]
+    },
+    "Pixabay": {
+        "photo": [2, 3, 9, 11, 13, 14, 15]
+    },
+    "Unknown" : {
+        "photo": [5, 6, 8, 10, 12, 16, 17, 18, 19]
+    }
+}
\ No newline at end of file

From 8f3fa2f8980b26fbed3cdb3a4f8c7d3683f7bca3 Mon Sep 17 00:00:00 2001
From: edenbun <contact@edenbun.com>
Date: Thu, 27 Aug 2020 19:39:57 +0100
Subject: [PATCH 2/2] Switch stray getElementById to querySelector

---
 src/components/widgets/Background.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx
index 25ae5b32..00ce0788 100644
--- a/src/components/widgets/Background.jsx
+++ b/src/components/widgets/Background.jsx
@@ -15,7 +15,7 @@ export default class Background extends React.PureComponent {
       'style', `background-image: url(../offline-images/${randomImage}.jpeg); -webkit-filter:blur(${localStorage.getItem('blur')}px);` 
     ); // Set background and blur
     
-    const creditElem = document.getElementById('photographer');
+    const creditElem = document.querySelector('#photographer');
     creditElem.append(` ${photographer} (Pexels)`); // Set the credit
 
     document.querySelector('#backgroundCredits').style.display = 'none'; // Hide the location icon