feat: finish quick links, start weather widget, bug fixes etc

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

src/components/widgets/weather/Weather.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import WeatherIcon from './WeatherIcon';
+
+import './weather.scss';
+
+export default class Weather extends React.PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      icon: '',
+      weather: {
+        title: '',
+        temp: '',
+        temp_min: '',
+        temp_max: '',
+        humidity: ''  
+      }
+    };
+  }
+
+  async getWeather() {
+    const data = await (await fetch (window.constants.WEATHER_URL + '?city=London')).json();
+    this.setState({
+      icon: data.weather[0].icon,
+      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
+      }
+    });
+  }
+  
+  componentDidMount() {
+    this.getWeather();
+  }
+
+  render() {
+    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.title}</span>*/}
+      </div>
+    );
+  }
+}

src/components/widgets/weather/WeatherIcon.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { WiDaySunny, WiNightClear, WiDayCloudy, WiNightCloudy, WiCloud, WiCloudy, WiDayShowers, WiNightShowers, WiRain, WiThunderstorm, WiSnow, WiFog } from 'weather-icons-react';
+
+import './weather.scss';
+
+export default function WeatherIcon(props) {
+  let icon;
+
+  // props.name is the openweathermap icon name, see https://openweathermap.org/weather-conditions
+  switch (props.name) {
+    case '01d': icon = <WiDaySunny/>; break;
+    case '01n': icon = <WiNightClear/>; break;
+    case '02d': icon = <WiDayCloudy/>; break;
+    case '02n': icon = <WiNightCloudy/>; break;
+    case '03d': case '03n': icon = <WiCloud/>; break;
+    case '04d': case '04n': icon = <WiCloudy/>; break;
+    case '09d': icon = <WiDayShowers/>; break;
+    case '09n': icon = <WiNightShowers/>; break;
+    case '10d': case '10n': icon = <WiRain/>; break;
+    case '11d': case '11n': icon = <WiThunderstorm/>; break;
+    case '13d': case '13n': icon = <WiSnow/>; break;
+    case '50d': case '50n': icon = <WiFog/>; break;
+    default: icon = null; break;
+  }
+
+  return icon;
+}

src/components/widgets/weather/weather.scss

@@ -0,0 +1,26 @@
+.weather {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+
+  span {
+    text-shadow: 0 0 10px rgb(0 0 0 / 50%);
+  }
+
+  svg {
+    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
+
+    font-size: 0.8em;
+
+  }
+
+  .loc {
+    font-size: 0.7em;
+    margin: 0;
+    padding: 0;
+  }
+
+  .minmax {
+    font-size: 0.5em;
+  }
+}