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

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

src/components/widgets/Widgets.jsx

@@ -4,10 +4,9 @@ import Clock from './time/Clock';
 import Greeting from './greeting/Greeting';
 import Quote from './quote/Quote';
 import Search from './search/Search';
-import Maximise from './background/Maximise';
-import Favourite from './background/Favourite';
 import Date from './time/Date';
 import QuickLinks from './quicklinks/QuickLinks';
+import Weather from './weather/Weather';
 
 export default class Widgets extends React.PureComponent {
   constructor() {
@@ -65,6 +64,7 @@ export default class Widgets extends React.PureComponent {
           e.preventDefault();
           e.stopPropagation();
           break;
+        default: break;
       }
     };
   }
@@ -86,6 +86,7 @@ export default class Widgets extends React.PureComponent {
       <div id='widgets'>
         {this.enabled('searchBar') ? <Search/> : null}
         {elements}
+        {this.enabled('weatherEnabled') ? <Weather/> : null}
       </div>
     );
   }

src/components/widgets/background/Background.jsx

@@ -24,11 +24,13 @@ export default class Background extends React.PureComponent {
   gradientStyleBuilder(gradientSettings) {
     const { type, angle, gradient } = gradientSettings;
     let style = `background: ${gradient[0].colour};`;
+
     if (gradient.length > 1) {
       // Note: Append the gradient for additional browser support.
       const stepStyles = gradient.map(g => ` ${g.colour} ${g.stop}%`).join();
       style += ` background: ${type}-gradient(${(type === 'linear' ? (`${angle}deg,`) : '')}${stepStyles})`;
     }
+
     this.setState({
       style: style
     });
@@ -132,7 +134,7 @@ export default class Background extends React.PureComponent {
 
       case 'colour':
         // background colour
-        const customBackgroundColour = localStorage.getItem('customBackgroundColour');
+        const customBackgroundColour = localStorage.getItem('customBackgroundColour') || {"angle":"180","gradient":[{"colour":"#ffb032","stop":0}],"type":"linear"};
         let gradientSettings = '';
         try {
           gradientSettings = JSON.parse(customBackgroundColour);

src/components/widgets/background/Maximise.jsx

@@ -21,7 +21,7 @@ export default class View extends React.PureComponent {
 
   viewStuff() {
     // elements to hide
-    const elements = ['.searchBar', '.clock', '.greeting', '.quotediv', 'time'];
+    const elements = ['.searchBar', '.clock', '.greeting', '.quotediv', 'time', '.quicklinks-container', '.weather'];
 
     elements.forEach((element) => {
       try {

src/components/widgets/background/scss/_photoinformation.scss

@@ -29,7 +29,7 @@
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   color: var(--modal-text);
   position: fixed;
-  bottom: 3.25rem;
+  bottom: 2.9rem;  
   left: 0.7em;
   padding: 1rem;
   border-radius: 24px 24px 24px 0;

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Tooltip from '@material-ui/core/Tooltip';
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 
-import './scss/index.scss';
+import './quicklinks.scss';
 
 export default class QuickLinks extends React.PureComponent {
   constructor() {
@@ -11,7 +11,8 @@ export default class QuickLinks extends React.PureComponent {
     this.state = {
       items: JSON.parse(localStorage.getItem('quicklinks')),
       name: '',
-      url: ''
+      url: '',
+      showAddLink: 'hidden'
     };
   }
 
@@ -21,6 +22,18 @@ export default class QuickLinks extends React.PureComponent {
     });
   }
 
+  deleteLink(name, event) {
+    event.preventDefault();
+
+    let data = JSON.parse(localStorage.getItem('quicklinks'));
+    data = data.filter((i) => i.name !== name);
+
+    localStorage.setItem('quicklinks', JSON.stringify(data));
+    this.setState({
+      items: data
+    });
+  }
+
   addLink = () => {
     let data = JSON.parse(localStorage.getItem('quicklinks'));
     data.push({
@@ -31,33 +44,51 @@ export default class QuickLinks extends React.PureComponent {
     localStorage.setItem('quicklinks', JSON.stringify(data));
 
     this.setState({
-      items: JSON.parse(localStorage.getItem('quicklinks')),
+      items: data,
       name: '',
       url: ''
     });
+
+    this.toggleAdd();
+  }
+
+  toggleAdd = () => {
+    if (this.state.showAddLink === 'hidden') {
+      this.setState({
+        showAddLink: 'visible'
+      });
+    } else {
+      this.setState({
+        showAddLink: 'hidden'
+      });
+    }
   }
 
   render() {
+    let target, rel = null;
+    if (localStorage.getItem('quicklinksnewtab') === 'true') {
+      target ='_blank';
+      rel ='noopener noreferrer';
+    }
+
     return (
       <div className='quicklinks-container'>
         {this.state.items.map((item) => (
           <Tooltip title={item.name} key={item.name}>
-            <a href={item.url}><img src={'https://s2.googleusercontent.com/s2/favicons?sz=64&domain_url=' + item.url} alt={item.name}/></a>
+            <a onContextMenu={(e) => this.deleteLink(item.name, e)} href={item.url} target={target} rel={rel}><img src={'https://icons.duckduckgo.com/ip2/' + item.url.replace('https://', '').replace('http://', '') + '.ico'} alt={item.name}/></a>
           </Tooltip>
         ))}
-        <div className='quicklinks'>
-          <button>+</button>
-          <span className='quicklinkscontainer'>
-            <div className='topbarquicklinks'>
-              <h4>New Link</h4>
-              <TextareaAutosize rowsMax={1} placeholder='Name' value={this.state.name} onChange={(e) => this.updateLink('name', e.target.value)} />
-              <br/>
-              <TextareaAutosize rowsMax={10} placeholder='URL' value={this.state.url} onChange={(e) => this.updateLink('url', e.target.value)} />
-              <br/>
-              <button className='pinNote' onClick={this.addLink}>Add</button>
-            </div>
-          </span>
-        </div>
+        <button className='quicklinks' onClick={this.toggleAdd}>+</button>
+        <span className='quicklinkscontainer' style={{'visibility': this.state.showAddLink}}>
+          <div className='topbarquicklinks'>
+            <h4>New Link</h4>
+            <TextareaAutosize rowsMax={1} placeholder='Name' value={this.state.name} onChange={(e) => this.updateLink('name', e.target.value)} />
+            <br/>
+            <TextareaAutosize rowsMax={10} placeholder='URL' value={this.state.url} onChange={(e) => this.updateLink('url', e.target.value)} />
+            <br/>
+            <button className='pinNote' onClick={this.addLink}>Add</button>
+          </div>
+        </span>
       </div>
     );
   }

src/components/widgets/quicklinks/quicklinks.scss

@@ -9,13 +9,12 @@
 
 .quicklinkscontainer {
   padding: 15px;
-  visibility: hidden;
   background-color: var(--background);
   color: var(--modal-text);
   text-align: center;
   border-radius: 12px;
   position: absolute;
-  top: 80%;
+  top: 56%;
   margin-left: -140px;
   margin-top: 5px;
 
@@ -29,10 +28,6 @@
   }
 }
 
-.quicklinks:hover .quicklinkscontainer {
-  visibility: visible;
-}
-
 textarea {
   border: none;
   width: 200px;
@@ -62,27 +57,31 @@ textarea {
   color: white;
 }
 
-.quicklinks > button {
+.quicklinks {
   border: none;
   color: #fff;
   font-size: 22px;
   background: none;
+  cursor: pointer;
 }
 
-.quicklinks-container > a, .quicklinks-container > .quicklinks > button {
+.quicklinks-container>a,
+.quicklinks-container>.quicklinks>button {
   display: inline;
 }
 
-.quicklinks-container { 
+.quicklinks-container {
   img {
     height: 32px;
     width: auto;
     transition: transform .2s;
+
     &:hover {
       transform: scale(1.1);
     }
   }
+
   a {
     margin: 5px;
   }
-}
+}

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;
+  }
+}