fix everything

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

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);
         }
 

src/modules/merge.js

@@ -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;
-};

src/scss/index.scss

@@ -91,4 +91,9 @@ body {
 
 #searchEngine {
     width: 130px;
+}
+
+.creditlink {
+    text-decoration: none;
+    color: white;
 }