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

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

package.json

@@ -25,7 +25,8 @@
     "react-dom": "17.0.2",
     "react-modal": "3.12.1",
     "react-sortable-hoc": "2.0.0",
-    "react-toastify": "7.0.3"
+    "react-toastify": "7.0.3",
+    "weather-icons-react": "^1.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.13.14",

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import Switch from '../Switch';
+import Checkbox from '../Checkbox';
+
+export default function QuickLinks() {
+  const language = window.language.modals.main.settings.sections.quicklinks;
+
+  return (
+    <>
+      <h2>{language.title}</h2>
+      <Switch name='quicklinksenabled' text={window.language.modals.main.settings.enabled} />
+      <Checkbox name='quicklinksnewtab' text='Open in new tab' />
+      <Checkbox name='quicklinkstooltip' text='Tooltip' />
+      <Checkbox name='quicklinksnewtab' text='Chrome Apps' />
+    </>
+  );
+}

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

@@ -88,6 +88,7 @@ export default class TimeSettings extends React.PureComponent {
     switch (this.state.dateType) {
       case 'short': dateSettings = shortSettings; break;
       case 'long': dateSettings = longSettings; break;
+      default: break;
     }
 
     return (

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

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import Switch from '../Switch';
+import Radio from '../Radio';
+
+export default class TimeSettings extends React.PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      location: localStorage.getItem('location') || 'London'
+    };
+    this.language = window.language.modals.main.settings;
+  }
+
+  getLocation() {
+    if (window.navigator.geolocation) {
+      window.navigator.geolocation.getCurrentPosition(console.log, console.log);
+    }
+  }
+
+  componentDidUpdate() {
+    localStorage.setItem('location', this.state.location);
+  }
+
+  render() {
+    const language = window.language.modals.main.settings.sections.weather;
+
+    const tempFormat = [
+      {
+        'name': 'Celsius',
+        'value': 'celsius'
+      },
+      {
+        'name': 'Fahrenheit',
+        'value': 'fahrenheit'
+      },
+      {
+        'name': 'Kelvin',
+        'value': 'kelvin'
+      }
+    ];
+      
+    return (
+      <>
+        <h2>{language.title}</h2>
+        <Switch name='weatherEnabled' text={this.language.enabled} />
+        <Radio name='tempformat' title='Temperature Format' options={tempFormat} />
+        <ul>
+          <p>Location <span className='modalLink' onClick={() => this.getLocation()}>Auto</span></p>
+          <input type='text' value={this.state.location} onChange={(e) => this.setState({ location: e.target.value })}></input>
+        </ul>
+      </>
+    );
+  }
+}

src/components/modals/main/tabs/Settings.jsx

@@ -12,6 +12,8 @@ import Advanced from '../settings/sections/Advanced';
 import Changelog from '../settings/sections/Changelog';
 import Order from '../settings/sections/Order';
 import Experimental from '../settings/sections/Experimental';
+import QuickLinks from '../settings/sections/QuickLinks';
+import Weather from '../settings/sections/Weather';
 
 import Tabs from './backend/Tabs';
 
@@ -25,6 +27,8 @@ export default function Settings() {
         <div label={language.greeting.title}><Greeting/></div>
         <div label={language.background.title}><Background/></div>
         <div label={language.search.title}><Search/></div>
+        <div label={language.quicklinks.title}><QuickLinks/></div>
+        <div label={language.weather.title}><Weather/></div>
         <div label={language.appearance.title}><Appearance/></div>
         <div label={language.order.title}><Order/></div>
         <div label={language.language.title}><Language/></div>

src/components/modals/main/tabs/backend/Tab.jsx

@@ -7,16 +7,19 @@ import Marketplace from '@material-ui/icons/ShoppingBasket';
 
 // Settings
 import Time from '@material-ui/icons/AccessAlarm';
-import Greeting from '@material-ui/icons/EmojiPeople';
+import Greeting from '@material-ui/icons/EmojiPeopleOutlined';
-import Quote from '@material-ui/icons/FormatQuote';
+import Quote from '@material-ui/icons/FormatQuoteOutlined';
-import Background from '@material-ui/icons/Photo';
+import Background from '@material-ui/icons/PhotoOutlined';
 import Search from '@material-ui/icons/Search';
-import Appearance from '@material-ui/icons/FormatPaint';
+import Appearance from '@material-ui/icons/FormatPaintOutlined';
 import Language from '@material-ui/icons/Translate';
-import Changelog from '@material-ui/icons/NewReleasesRounded';
+import Changelog from '@material-ui/icons/NewReleasesOutlined';
-import About from '@material-ui/icons/Info';
+import About from '@material-ui/icons/InfoOutlined';
-import Experimental from '@material-ui/icons/BugReport';
+import Experimental from '@material-ui/icons/BugReportOutlined';
 import Order from '@material-ui/icons/List';
+import Weather from '@material-ui/icons/CloudOutlined';
+import Advanced from '@material-ui/icons/SettingsOutlined';
+import QuickLinks from '@material-ui/icons/Link';
 
 // Store
 import Added from '@material-ui/icons/AddCircle';
@@ -50,10 +53,12 @@ export default function Tab(props) {
     case language.quote.title: icon = <Quote/>; break;
     case language.background.title: icon = <Background/>; break;
     case language.search.title: icon = <Search/>; break;
+    case language.weather.title: icon = <Weather/>; break;
+    case language.quicklinks.title: icon = <QuickLinks/>; break;
     case language.appearance.title: icon = <Appearance/>; break;
     case language.order.title: icon = <Order/>; break;
     case language.language.title: icon = <Language/>; divider = true; break;
-    case language.advanced.title: icon = <Settings/>; break;
+    case language.advanced.title: icon = <Advanced/>; break;
     case language.experimental.title: icon = <Experimental/>; divider = true; break;
     case language.changelog: icon = <Changelog/>; break;
     case language.about.title: icon = <About/>; break;

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 className='quicklinks' onClick={this.toggleAdd}>+</button>
-          <button>+</button>
+        <span className='quicklinkscontainer' style={{'visibility': this.state.showAddLink}}>
-          <span className='quicklinkscontainer'>
+          <div className='topbarquicklinks'>
-            <div className='topbarquicklinks'>
+            <h4>New Link</h4>
-              <h4>New Link</h4>
+            <TextareaAutosize rowsMax={1} placeholder='Name' value={this.state.name} onChange={(e) => this.updateLink('name', e.target.value)} />
-              <TextareaAutosize rowsMax={1} placeholder='Name' value={this.state.name} onChange={(e) => this.updateLink('name', e.target.value)} />
+            <br/>
-              <br/>
+            <TextareaAutosize rowsMax={10} placeholder='URL' value={this.state.url} onChange={(e) => this.updateLink('url', e.target.value)} />
-              <TextareaAutosize rowsMax={10} placeholder='URL' value={this.state.url} onChange={(e) => this.updateLink('url', e.target.value)} />
+            <br/>
-              <br/>
+            <button className='pinNote' onClick={this.addLink}>Add</button>
-              <button className='pinNote' onClick={this.addLink}>Add</button>
+          </div>
-            </div>
+        </span>
-          </span>
-        </div>
       </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;
+  }
+}

src/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import App from './App';
+import * as Constants from './modules/constants';
 
 import './scss/index.scss';
 // the toast css is based on default so we need to import it
@@ -23,7 +24,6 @@ if (window.languagecode !== 'en_GB' || window.languagecode !== 'en_US') {
 }
 
 // window.constants
-import * as Constants from './modules/constants';
 window.constants = Constants;
 
 ReactDOM.render(

src/modules/constants.js

@@ -1,6 +1,7 @@
 export const API_URL = 'https://api.muetab.com';
 export const UNSPLASH_URL = 'https://unsplash.muetab.com';
 export const MARKETPLACE_URL = 'https://marketplace.muetab.com';
+export const WEATHER_URL = 'https://mueweather.ohlookitsderpy.workers.dev';
 export const WEBSITE_URL = 'https://muetab.com';
 export const SPONSORS_URL = 'https://sponsors.muetab.com';
 export const GITHUB_URL = 'https://api.github.com';

src/modules/default_settings.json

@@ -125,7 +125,7 @@
   },
   {
     "name": "order",
-    "value": "[\"greeting\", \"time\", \"quote\", \"date\"]"
+    "value": "[\"greeting\", \"time\", \"quicklinks\", \"quote\", \"date\"]"
   },
   {
     "name": "theme",
@@ -146,5 +146,17 @@
   {
     "name": "debugtimeout",
     "value": 0
+  },
+  {
+    "name": "quicklinks",
+    "value": "[]"
+  },
+  {
+    "name": "quicklinksenabled",
+    "value": false
+  },
+  {
+    "name": "weatherEnabled",
+    "value": false
   }
 ]

src/modules/helpers/experimental.js

@@ -20,6 +20,7 @@ export default function ExperimentalInit() {
             debugger;
           }
           break;
+        default: break;
       }
     };
   }

src/translations/en_GB.json

@@ -142,6 +142,12 @@
             "custom": "Custom Search URL",
             "voice_search": "Voice Search"
           },
+          "weather": {
+            "title": "Weather"
+          },
+          "quicklinks": {
+            "title": "Quick Links"
+          },
           "appearance": {
             "title": "Appearance",
             "theme": {