feat: finish weather, add week number back, improve widget order and quick links

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

@@ -3,7 +3,6 @@ import React from 'react';
 import DragHandleIcon from '@material-ui/icons/DragIndicator';
 
 import { sortableContainer, sortableElement } from 'react-sortable-hoc';
-import arrayMove from 'array-move';
 import { toast } from 'react-toastify';
 
 const SortableItem = sortableElement(({value}) => (
@@ -26,9 +25,29 @@ export default class OrderSettings extends React.PureComponent {
     this.language = window.language.modals.main.settings;
   }
 
+  // based on https://stackoverflow.com/a/48301905
+  arrayMove(array, oldIndex, newIndex) {
+    if (oldIndex === newIndex) {
+      return array;
+    }
+  
+    const newArray = [...array];
+  
+    const target = newArray[oldIndex];
+    const inc = newIndex < oldIndex ? -1 : 1;
+  
+    for (let i = oldIndex; i !== newIndex; i += inc) {
+      newArray[i] = newArray[i + inc];
+    }
+  
+    newArray[newIndex] = target;
+  
+    return newArray;
+  }
+
   onSortEnd = ({oldIndex, newIndex}) => {
     this.setState(({items}) => ({
-      items: arrayMove(items, oldIndex, newIndex)
+      items: this.arrayMove(items, oldIndex, newIndex)
     }));
   }
 

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

@@ -12,7 +12,6 @@ export default function QuickLinks() {
       <Switch name='quicklinksenabled' text={window.language.modals.main.settings.enabled} />
       <Checkbox name='quicklinksnewtab' text={language.open_new} />
       <Checkbox name='quicklinkstooltip' text={language.tooltip} />
-      <Checkbox name='quicklinksnewtab' text={language.chrome_apps} />
     </>
   );
 }

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

@@ -109,6 +109,7 @@ export default class TimeSettings extends React.PureComponent {
           <option value='short'>{time.date.type.short}</option>
         </Dropdown>
         <br/>
+        <Checkbox name='weeknumber' text={time.date.week_number}/>
         {dateSettings}
       </>
     );

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

@@ -13,12 +13,6 @@ export default class TimeSettings extends React.PureComponent {
     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);
   }
@@ -46,7 +40,7 @@ export default class TimeSettings extends React.PureComponent {
         <h2>{language.title}</h2>
         <Switch name='weatherEnabled' text={this.language.enabled} />
         <ul>
-          <p>{language.location} <span className='modalLink' onClick={() => this.getLocation()}>{language.auto}</span></p>
+          <p>{language.location}</p>
           <input type='text' value={this.state.location} onChange={(e) => this.setState({ location: e.target.value })}></input>
         </ul>
         <br/>

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -14,6 +14,7 @@ export default class QuickLinks extends React.PureComponent {
       url: '',
       showAddLink: 'hidden'
     };
+    this.language = window.language.widgets.quicklinks;
   }
 
   updateLink(type, value) {
@@ -71,22 +72,36 @@ export default class QuickLinks extends React.PureComponent {
       rel ='noopener noreferrer';
     }
 
+    const tooltipEnabled = localStorage.getItem('quicklinkstooltip');
+
+    const quickLink = (item) => {
+      const link = (
+        <a key={item.name} 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>
+      );
+
+      if (tooltipEnabled === 'true') {
+        return <Tooltip title={item.name} key={item.name}>{link}</Tooltip>;
+      } else {
+        return link;
+      }
+    }
+
     return (
       <div className='quicklinks-container'>
         {this.state.items.map((item) => (
-          <Tooltip title={item.name} key={item.name}>
-            <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>
+          quickLink(item)
         ))}
         <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)} />
+            <h4>{this.language.new}</h4>
+            <TextareaAutosize rowsMax={1} placeholder={this.language.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)} />
+            <TextareaAutosize rowsMax={10} placeholder={this.language.url} value={this.state.url} onChange={(e) => this.updateLink('url', e.target.value)} />
             <br/>
-            <button className='pinNote' onClick={this.addLink}>Add</button>
+            <button className='pinNote' onClick={this.addLink}>{this.language.add}</button>
           </div>
         </span>
       </div>

src/components/widgets/time/Date.jsx

@@ -6,12 +6,35 @@ export default class DateWidget extends React.PureComponent {
   constructor() {
     super();
     this.state = {
-      date: ''
+      date: '',
+      weekNumber: ''
     };
   }
 
+  getWeekNumber(date) {
+    const dateToday = new Date(date.valueOf());
+    const dayNumber = (dateToday.getDay() + 6) % 7;
+
+    dateToday.setDate(dateToday.getDate() - dayNumber + 3);
+    const firstThursday = dateToday.valueOf();
+    dateToday.setMonth(0, 1);
+
+    if (dateToday.getDay() !== 4) {
+      dateToday.setMonth(0, 1 + ((4 - dateToday.getDay()) + 7) % 7);
+    }
+
+    this.setState({
+      weekNumber: `${window.language.widgets.date.week} ${1 + Math.ceil((firstThursday - dateToday) / 604800000)}`
+    });
+  }
+
   getDate() {
     const date = new Date();
+
+    if (localStorage.getItem('weeknumber') === 'true') {
+      this.getWeekNumber(date);
+    }
+
     const type = localStorage.getItem('dateType');
 
     if (type === 'short') {
@@ -77,6 +100,6 @@ export default class DateWidget extends React.PureComponent {
   }
 
   render() {
-    return <span style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold' }}>{this.state.date}</span>;
+    return <span style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold' }}>{this.state.date} <br/> {this.state.weekNumber}</span>;
   }
 }

src/components/widgets/weather/Weather.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import WeatherIcon from './WeatherIcon';
 
+import WeatherIcon from './WeatherIcon';
 import { WiHumidity, WiWindy } from 'weather-icons-react';
 
 import './weather.scss';
@@ -71,13 +71,27 @@ export default class Weather extends React.PureComponent {
     const checkValue = (setting) => {
       return (localStorage.getItem(setting) === 'true');
     };
+
+    const minmax = () => {
+      const mintemp = (localStorage.getItem('mintemp') === 'true');
+      const maxtemp = (localStorage.getItem('maxtemp') === 'true');
+    
+      if (!mintemp && !maxtemp) {
+        return null;
+      } else if (mintemp && !maxtemp) {
+        return <><br/>{this.state.weather.temp_min + this.state.temp_text}</>;
+      } else if (maxtemp && !mintemp) {
+        return <><br/>{this.state.weather.temp_max + this.state.temp_text}</>;
+      } else {
+        return <><br/>{this.state.weather.temp_min + this.state.temp_text} {this.state.weather.temp_max + this.state.temp_text}</>;
+      }
+    };
   
     return (
       <div className='weather'>
         <WeatherIcon name={this.state.icon}/>
         <span>{this.state.weather.temp + this.state.temp_text}</span>
-        <br/>
-        <span className='minmax'>{checkValue('mintemp') ? this.state.weather.temp_min + this.state.temp_text : null} {checkValue('maxtemp') ? this.state.weather.temp_max + this.state.temp_text : null}</span>
+        <span className='minmax'>{minmax()}</span>
         {checkValue('humidity') ? <span className='loc'><br/><WiHumidity/>{this.state.weather.humidity}%</span> : null}
         {checkValue('windspeed') ? <span className='loc'><br/><WiWindy/>{this.state.weather.windspeed}<span className='minmax'> m/s</span></span> : null}
         {checkValue('atmosphericpressure') ? <span className='loc'><br/>{this.state.weather.pressure}<span className='minmax'> hPa</span></span> : null}