bug fixes and favourite button

src/components/widgets/Background.jsx

@@ -18,6 +18,7 @@ export default class Background extends React.PureComponent {
 
   setCredit(photographer) {
     document.querySelector('#photographer').append(` ${photographer}`); // Append credit
+    document.getElementById('credit').textContent = photographer;
   }
 
   doOffline() { // Handles setting the background if the user is offline
@@ -41,12 +42,17 @@ export default class Background extends React.PureComponent {
     const photoPack = JSON.parse(localStorage.getItem('photo_packs'));
     const customBackgroundColour = localStorage.getItem('customBackgroundColour');
     const customBackground = localStorage.getItem('customBackground');
+    const favourited = JSON.parse(localStorage.getItem('favourite'));
 
     if (photoPack) {
       const randomPhoto = photoPack[Math.floor(Math.random() * photoPack.length)];
       this.setBackground(randomPhoto.url.default);
     } else if (customBackgroundColour) {
       this.setBackground(null, customBackgroundColour, 'false');
+    } else if (favourited) {
+      this.setBackground(favourited.url, null, 'true');
+      this.setCredit(favourited.credit)
+      document.getElementById('location').textContent = favourited.location;
     } else if (customBackground !== '') { // Local
       this.setBackground(customBackground, null, 'false');
     } else { // Online

src/components/widgets/Favourite.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import StarIcon from '@material-ui/icons/Star';
+import StarIcon2 from '@material-ui/icons/StarBorder';
+
+export default class Favourite extends React.PureComponent {
+    constructor(...args) {
+        super(...args);
+        this.state = {
+            favourited: <StarIcon2 id='favouriteButton' onClick={() => this.favourite()} />
+        };
+    }
+
+  favourite() {
+      if (localStorage.getItem('favourite')) {
+        localStorage.removeItem('favourite');
+        this.setState({ favourited: <StarIcon2 id='favouriteButton' onClick={() => this.favourite()} /> });
+      } else {
+        const url = document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', '');
+        const credit = document.getElementById('credit').textContent;
+        const location = document.getElementById('location').textContent;
+        localStorage.setItem('favourite', JSON.stringify({ url: url, credit: credit, location: location }));
+        this.setState({ favourited: <StarIcon id='favouriteButton' onClick={() => this.favourite()} /> });
+      }
+  }
+
+  componentDidMount() {
+    if (localStorage.getItem('favourite')) this.setState({ favourited: <StarIcon id='favouriteButton' onClick={() => this.favourite()} /> });
+  }
+
+  render() {
+    return <div className='favourite'>
+        {this.state.favourited}
+    </div>
+  }
+}

src/components/widgets/Search.jsx

@@ -24,7 +24,7 @@ export default class Search extends React.PureComponent {
     const searchButton = () => {
       let value = document.getElementById('searchtext').value;
       if (!value) value = 'mue fast';
-      window.location.href = url + '?q=' + value;
+      window.location.href = url + `?${query}=` + value;
     };
 
     return (