feat: improved weather widget, fix marketplace and date widget etc

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/widgets/time/Date.jsx

@@ -12,7 +12,7 @@ export default class DateWidget extends React.PureComponent {
 
   getDate() {
     const date = new Date();
-    const type = localStorage.getItem('type');
+    const type = localStorage.getItem('dateType');
 
     if (type === 'short') {
       const dateDay = date.getDate();
@@ -33,8 +33,7 @@ export default class DateWidget extends React.PureComponent {
           year = dateDay;
           break;
         // DMY
-        default:
-          break;
+        default: break;
       }
 
       let format;
@@ -50,6 +49,8 @@ export default class DateWidget extends React.PureComponent {
           break;
         case 'slashes':
           format = `${day}/${month}/${year}`;
+          break;
+        default: break;
       }
 
       this.setState({

src/components/widgets/weather/Weather.jsx

@@ -1,33 +1,64 @@
 import React from 'react';
 import WeatherIcon from './WeatherIcon';
 
+import { WiHumidity, WiWindy } from 'weather-icons-react';
+
 import './weather.scss';
 
 export default class Weather extends React.PureComponent {
   constructor() {
     super();
     this.state = {
+      location: localStorage.getItem('location') || 'London',
       icon: '',
+      temp_text: '',
       weather: {
         title: '',
         temp: '',
         temp_min: '',
         temp_max: '',
-        humidity: ''  
+        humidity: '',
+        windspeed: '',
+        pressure: ''
       }
     };
   }
 
   async getWeather() {
-    const data = await (await fetch (window.constants.WEATHER_URL + '?city=London')).json();
+    const data = await (await fetch (window.constants.WEATHER_URL + `?city=${this.state.location}`)).json();
+
+    let temp = data.main.temp;
+    let temp_min = data.main.temp_max 
+    let temp_max = data.main.temp_max;
+    let temp_text = 'K';
+
+    switch (localStorage.getItem('tempformat')) {
+      case 'celsius':
+        temp = temp - 273.15;
+        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;
+        temp_min = ((temp_min - 273.15) * 1.8) + 32;
+        temp_max = ((temp_max - 273.15) * 1.8) + 32;
+        temp_text = '°F';
+        break;
+      default: break;
+    }
+
     this.setState({
       icon: data.weather[0].icon,
+      temp_text: temp_text,
       weather: {
         title: data.weather[0].main,
-        temp: Math.round(data.main.temp - 273.15),
-        temp_min: Math.round(data.main.temp_min - 273.15),
-        temp_max: Math.round(data.main.temp_max - 273.15),
-        humidity: data.main.humidity
+        temp: Math.round(temp),
+        temp_min: Math.round(temp_min),
+        temp_max: Math.round(temp_max),
+        humidity: data.main.humidity,
+        windspeed: data.wind.speed,
+        pressure: data.main.pressure
       }
     });
   }
@@ -40,11 +71,17 @@ export default class Weather extends React.PureComponent {
     return (
       <div className='weather'>
         <WeatherIcon name={this.state.icon}/>
-        <span>{this.state.weather.temp}&deg;C</span>
-        <br />
-        <span className='minmax'>{this.state.weather.temp_min}&deg;C, {this.state.weather.temp_max}&deg;C</span>
-        <br />
-        <span className='loc'>London</span>
+        <span>{this.state.weather.temp + this.state.temp_text}</span>
+        <br/>
+        <span className='minmax'>{this.state.weather.temp_min + this.state.temp_text} {this.state.weather.temp_max + this.state.temp_text}</span>
+        <br/>
+        <span className='loc'><WiHumidity/>{this.state.weather.humidity}%</span>
+        <br/>
+        <span className='loc'><WiWindy/>{this.state.weather.windspeed}<span className='minmax'> m/s</span></span>
+        <br/>
+        <span className='loc'>{this.state.weather.pressure}<span className='minmax'> hPa</span></span>
+        <br/>
+        <span className='loc'>{this.state.location}</span>
         {/*<span>{this.state.weather.title}</span>*/}
       </div>
     );

src/components/widgets/weather/weather.scss

@@ -9,9 +9,7 @@
 
   svg {
     filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
-
     font-size: 0.8em;
-
   }
 
   .loc {