feat: change background/quote interval, use api to get temperature format

src/components/modals/main/settings/sections/Quote.jsx

@@ -31,6 +31,22 @@ export default class QuoteSettings extends React.PureComponent {
           <Text title={quote.custom_author} name='customQuoteAuthor' category='quote' element='.quotediv'/>
         </>
       );
+    } else {
+      // api
+      customSettings = (
+        <>
+        <br/><br/>
+        <Dropdown label='Change every' name='quotechange'>
+          <option value='refresh'>New Tab</option>
+          <option value='60000'>Minute</option>
+          <option value='1800000'>Half Hour</option>
+          <option value='3600000'>Hour</option>
+          <option value='86400000'>Day</option>
+          <option value='604800000'>Week</option>
+          <option value='2628000000'>Month</option>
+        </Dropdown>
+        </>
+      );
     }
 
     return (

src/components/modals/main/settings/sections/background/Background.jsx

@@ -128,6 +128,16 @@ export default class BackgroundSettings extends React.PureComponent {
           <option value='normal'>{background.source.quality.normal}</option>
           <option value='datasaver'>{background.source.quality.datasaver}</option>
         </Dropdown>
+        <br/><br/>
+        <Dropdown label='Change every' name='backgroundchange'>
+          <option value='refresh'>New Tab</option>
+          <option value='60000'>Minute</option>
+          <option value='1800000'>Half Hour</option>
+          <option value='3600000'>Hour</option>
+          <option value='86400000'>Day</option>
+          <option value='604800000'>Week</option>
+          <option value='2628000000'>Month</option>
+        </Dropdown>
       </>
     );
 

src/components/widgets/background/Background.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 
 import EventBus from '../../../modules/helpers/eventbus';
+import Interval from '../../../modules/helpers/interval';
 
 import PhotoInformation from './PhotoInformation';
 
@@ -181,7 +182,7 @@ export default class Background extends React.PureComponent {
           photographerURL = data.photographer_page;
         }
 
-        this.setState({
+        const object = {
           url: data.file,
           type: 'api',
           currentAPI: backgroundAPI,
@@ -194,7 +195,10 @@ export default class Background extends React.PureComponent {
             photographerURL: photographerURL,
             photoURL: photoURL
           }
-        });
+        }
+        this.setState(object);
+
+        localStorage.setItem('currentBackground', JSON.stringify(object));
       break;
 
       case 'colour':
@@ -336,7 +340,24 @@ export default class Background extends React.PureComponent {
       }
     });
 
-    this.getBackground();
+    const interval = localStorage.getItem('backgroundchange');
+    if (interval && interval !== 'refresh') {
+      Interval(() => {
+        try {
+          document.getElementById('backgroundImage').classList.remove('fade-in');
+          document.getElementsByClassName('photoInformation')[0].classList.remove('fade-in');
+        } catch (e) {
+          // Disregard exception
+        }
+        this.getBackground();
+      }, Number(interval), 'background');
+
+      try {
+        this.setState(JSON.parse(localStorage.getItem('currentBackground')));
+      } catch (e) { this.setBackground(); }
+    } else {
+      this.getBackground();
+    }
   }
 
   // only set once we've got the info

src/components/widgets/quote/Quote.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import EventBus from '../../../modules/helpers/eventbus';
+import Interval from '../../../modules/helpers/interval';
 
 import FileCopy from '@material-ui/icons/FilterNone';
 import TwitterIcon from '@material-ui/icons/Twitter';
@@ -141,12 +142,15 @@ export default class Quote extends React.PureComponent {
             return this.doOffline();
           }
 
-          this.setState({
+          const object = {
             quote: '"' + data.quote + '"',
             author: data.author,
             authorlink: this.getAuthorLink(data.author),
             quoteLanguage: quotelanguage
-          });
+          }
+
+          this.setState(object);
+          localStorage.setItem('currentQuote', JSON.stringify(object));
         } catch (e) {
           // ..and if that fails we load one locally
           this.doOffline();
@@ -219,9 +223,24 @@ export default class Quote extends React.PureComponent {
       }
     });
 
-    // don't bother with the checks if we're loading for the first time
+    const interval = localStorage.getItem('quotechange');
-    this.setZoom();
+    if (interval && interval !== 'refresh') {
-    this.getQuote();
+      Interval(() => {
+        this.setZoom();
+        this.getQuote();
+      }, Number(interval), 'quote');
+
+      try {
+        this.setState(JSON.parse(localStorage.getItem('currentQuote')));
+      } catch (e) {
+        this.setZoom();
+        this.getQuote();
+      }
+    } else {
+      // don't bother with the checks if we're loading for the first time
+      this.setZoom();
+      this.getQuote();
+    }
   }
 
   componentWillUnmount() {

src/components/widgets/weather/Weather.jsx

@@ -61,8 +61,10 @@ export default class Weather extends React.PureComponent {
       }
     };
 
+    const tempFormat = localStorage.getItem('tempformat');
+
     if (!this.state.weather.temp) {
-      data = await (await fetch (window.constants.WEATHER_URL + `/current?city=${this.state.location}&lang=${localStorage.getItem('language')}`)).json();
+      data = await (await fetch(window.constants.WEATHER_URL + `/current?city=${this.state.location}&lang=${localStorage.getItem('language')}&format=${tempFormat}`)).json();
     }
 
     if (data.cod === '404') {
@@ -71,37 +73,27 @@ export default class Weather extends React.PureComponent {
       });
     }
 
-    let temp = data.main.temp;
+    let tempText;
-    let temp_min = data.main.temp_min; 
+    switch (tempFormat) {
-    let temp_max = data.main.temp_max;
-    let temp_text = 'K';
-
-    switch (localStorage.getItem('tempformat')) {
       case 'celsius':
-        temp = temp - 273.15;
+        tempText = '°C';
-        temp_min = temp_min - 273.15;
-        temp_max = temp_max - 273.15;
-        temp_text = '°C';
         break;
       case 'fahrenheit':
-        temp = ((temp - 273.15) * 1.8) + 32;
+        tempText = '°F';
-        temp_min = ((temp_min - 273.15) * 1.8) + 32;
-        temp_max = ((temp_max - 273.15) * 1.8) + 32;
-        temp_text = '°F';
         break;
-      // kelvin
       default:
+        tempText = 'K';
         break;
     }
 
     this.setState({
       icon: data.weather[0].icon,
-      temp_text: temp_text,
+      temp_text: tempText,
       weather: {
-        temp: Math.round(temp),
+        temp: Math.round(data.main.temp),
         description: data.weather[0].description,
-        temp_min: Math.round(temp_min),
+        temp_min: Math.round(data.main.temp_min),
-        temp_max: Math.round(temp_max),
+        temp_max: Math.round(data.main.temp_max),
         humidity: data.main.humidity,
         wind_speed: data.wind.speed,
         wind_degrees: data.wind.deg,

src/modules/helpers/interval.js

@@ -0,0 +1,27 @@
+// based on https://stackoverflow.com/a/47009962
+export default function Interval(callback, interval, name) {
+  const key = name + 'interval';
+  const timeInMs = localStorage.getItem(key);
+
+  const now = Date.now();
+
+  const executeCallback = () => {
+    localStorage.setItem(key, Date.now());
+    callback();
+  }
+
+  if (timeInMs) {
+    const delta = now - parseInt(timeInMs);
+    if (delta > interval) {
+      setInterval(executeCallback, interval);
+    } else {
+      setTimeout(() => {
+        setInterval(executeCallback, interval);
+        executeCallback();
+      }, interval - delta);
+    }
+  } else {
+    setInterval(executeCallback, interval);
+  }
+  localStorage.setItem(key, now);
+}