From 89a8621de166f4fb182a2eab9b8d882ee3fe1082 Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Wed, 16 Sep 2020 12:32:09 +0100
Subject: [PATCH] bug fixes and favourite button

---
 src/App.jsx                           |  3 +++
 src/components/widgets/Background.jsx |  6 +++++
 src/components/widgets/Favourite.jsx  | 35 +++++++++++++++++++++++++++
 src/components/widgets/Search.jsx     |  2 +-
 src/scss/modules/_credit.scss         | 10 ++++++--
 5 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 src/components/widgets/Favourite.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 217f09d8..bdf3ffae 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import Greeting from './components/widgets/Greeting';
 import Quote from './components/widgets/Quote';
 import Search from './components/widgets/Search';
 import Maximise from './components/widgets/Maximise';
+import Favourite from './components/widgets/Favourite';
 
 import Navbar from './components/Navbar';
 
@@ -68,12 +69,14 @@ export default class App extends React.PureComponent {
           <Quote language={language.toasts}/>
           <div className='credits' id='credits'>
             <h1 id='photographer'>{language.credit}</h1>
+            <span id='credit' style={{'display': 'none'}}></span>
             <div id='backgroundCredits' className='tooltip'>
               <RoomIcon className='locationicon'/>
               <span className='tooltiptext' id='location'/>
             </div>
           </div>
           <Maximise/>
+          <Favourite/>
           <React.Suspense fallback={renderLoader()}>
             <Modal id={'modal'} onRequestClose={() => this.setState({ settingsModal: false })} isOpen={this.state.settingsModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
               <Settings
diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx
index 574ff56d..ac2a6816 100644
--- a/src/components/widgets/Background.jsx
+++ b/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
diff --git a/src/components/widgets/Favourite.jsx b/src/components/widgets/Favourite.jsx
new file mode 100644
index 00000000..38b48f14
--- /dev/null
+++ b/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>
+  }
+}
\ No newline at end of file
diff --git a/src/components/widgets/Search.jsx b/src/components/widgets/Search.jsx
index 07f687b0..b062981f 100644
--- a/src/components/widgets/Search.jsx
+++ b/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 (
diff --git a/src/scss/modules/_credit.scss b/src/scss/modules/_credit.scss
index 2a9ba056..c6cd468f 100644
--- a/src/scss/modules/_credit.scss
+++ b/src/scss/modules/_credit.scss
@@ -15,6 +15,12 @@
   right: 25px;
 }
 
+.favourite {
+  position: absolute;
+  bottom: 10px;
+  right: 50px;
+}
+
 #photographer {
   position: absolute;
   bottom: 10px;
@@ -22,12 +28,12 @@
   width: 1000px;
 }
 
-.locationicon, #viewButton {
+.locationicon, #viewButton, #favouriteButton {
   width: auto;
   cursor: pointer;
 }
 
-.navbar-container > svg, #backgroundCredits > svg, #viewButton > svg  {
+.navbar-container > svg, #backgroundCredits > svg, #viewButton > svg, #favouriteButton > svg  {
   font-size: calc(10px + 1.5vmin) !important;
   position: absolute;
   bottom: 2px;