From d2ce84cac4632fcc7157dceb7ff3ba042f199d91 Mon Sep 17 00:00:00 2001
From: David Ralph <davetheprogrammer2@gmail.com>
Date: Sun, 4 Oct 2020 17:21:15 +0100
Subject: [PATCH] fix everything

---
 package.json                          |  3 ++-
 src/App.jsx                           |  2 +-
 src/components/widgets/Background.jsx | 13 +++++++------
 src/modules/merge.js                  | 17 -----------------
 src/scss/index.scss                   |  5 +++++
 5 files changed, 15 insertions(+), 25 deletions(-)
 delete mode 100644 src/modules/merge.js

diff --git a/package.json b/package.json
index 20016efb..61f2c455 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,8 @@
     "react-dom": "^16.13.1",
     "react-modal": "^3.11.2",
     "react-toastify": "^6.0.8",
-    "supports-webp": "^2.0.1"
+    "supports-webp": "^2.0.1",
+    "lodash.merge": "4.6.2"
   },
   "devDependencies": {
     "react-scripts": "3.4.3",
diff --git a/src/App.jsx b/src/App.jsx
index 5df2c224..68a29987 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -13,7 +13,7 @@ import Navbar from './components/Navbar';
 import SettingsFunctions from './modules/settingsFunctions';
 import { ToastContainer } from 'react-toastify';
 import Modal from 'react-modal';
-import { merge } from './modules/merge';
+import merge from 'lodash.merge';
 import RoomIcon from '@material-ui/icons/Room';
 
 // Modals are lazy loaded as a user won't use them every time they open a tab
diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx
index e903cc12..786ba226 100644
--- a/src/components/widgets/Background.jsx
+++ b/src/components/widgets/Background.jsx
@@ -14,9 +14,10 @@ export default class Background extends React.PureComponent {
     if (credit === 'false') document.querySelector('#credits').style.display = 'none'; // Hide the credit
   }
 
-  setCredit(photographer) {
-    document.querySelector('#photographer').append(` ${photographer}`); // Append credit
-    document.getElementById('credit').textContent = photographer;
+  setCredit(photographer, unsplash, url) {
+    let credit = photographer;
+    if (unsplash) credit = `<a href='${url}' class='creditlink'>${photographer}</a> on <a href='https://unsplash.com/?utm_source=mue&utm_medium=referral' class='creditlink'>Unsplash</a>`;
+    document.querySelector('#photographer').insertAdjacentHTML("beforeend", ` ${credit}`); // Append credit
   }
 
   doOffline() { // Handles setting the background if the user is offline
@@ -72,10 +73,10 @@ export default class Background extends React.PureComponent {
 
         const data = await (await fetch(requestURL)).json(); // Fetch JSON data from requestURL
 
-        if (data.statusCode === 429) {
-          this.doOffline(); // If we hit the rate limit, fallback to local images
-        } else { // Otherwise, set the background and credit from remote data
+        if (data.statusCode === 429) this.doOffline(); // If we hit the rate limit, fallback to local images
+        else { // Otherwise, set the background and credit from remote data
           this.setBackground(data.file);
+          if (localStorage.getItem('backgroundAPI') === 'unsplash') return this.setCredit(data.photographer, 'unsplash', data.photographer_page);
           this.setCredit(data.photographer);
         }
 
diff --git a/src/modules/merge.js b/src/modules/merge.js
deleted file mode 100644
index 82626757..00000000
--- a/src/modules/merge.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Merges 2 objects into a huge one
- * @template T The original object
- * @template U The object that is returned
- * @param {...T} items The objects to merge
- * @returns {U} The merged object
- */
-export const merge = (...items) => {
-  const obj = {};
-  for (let i = 0; i < items.length; i++) {
-    for (const k in items[i]) {
-      if (!obj.hasOwnProperty(k)) obj[k] = items[i][k];
-    }
-  }
-
-  return obj;
-};
\ No newline at end of file
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 4614e6b8..f5591191 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -91,4 +91,9 @@ body {
 
 #searchEngine {
     width: 130px;
+}
+
+.creditlink {
+    text-decoration: none;
+    color: white;
 }
\ No newline at end of file