refactor: keep implementing default options, change some components to functional

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

src/App.jsx

@@ -3,7 +3,7 @@ import { ToastContainer } from 'react-toastify';
 import Background from 'features/background/Background';
 import Widgets from 'features/misc/views/Widgets';
 import Modals from 'features/misc/modals/Modals';
-import { loadSettings, moveSettings } from 'utils/settings';
+import { loadSettings } from 'utils/settings';
 import EventBus from 'utils/eventbus';
 import variables from 'config/variables';
 import Preview from 'features/helpers/preview/Preview';
@@ -12,14 +12,6 @@ import Welcome from 'features/welcome/Welcome';
 
 const useAppSetup = () => {
   useEffect(() => {
-    const firstRun = localStorage.getItem('firstRun');
-    const stats = localStorage.getItem('stats');
-
-    if (!firstRun || !stats) {
-      moveSettings();
-      window.location.reload();
-    }
-
     loadSettings();
 
     const refreshHandler = (data) => {
@@ -57,7 +49,7 @@ const App = () => {
 
   useAppSetup();
 
-  if (localStorage.getItem('showWelcome') === 'true') {
+  if (localStorage.getItem('showWelcome') !== 'false') {
     return <Welcome />;
   }
 

src/config/default.js

@@ -1,9 +1,10 @@
 const DefaultOptions = {
   installed: [],
+  language: 'en_GB',
   toastDisplayTime: 2500,
   fontstyle: 'normal',
   fontweight: 400,
-  order: '["greeting", "time", "quicklinks", "quote", "date", "message"]',
+  order: ["greeting", "time", "quicklinks", "quote", "date", "message"],
   theme: 'auto',
   experimental: false,
   debugtimeout: 0,

src/features/background/Background.jsx

@@ -157,7 +157,7 @@ export default class Background extends PureComponent {
   // Main background getting function
   async getBackground() {
     let offline = localStorage.getItem('offlineMode') === 'true';
-    if (localStorage.getItem('showWelcome') === 'true') {
+    if (localStorage.getItem('showWelcome') !== 'false') {
       offline = true;
     }
 

src/features/background/options/BackgroundOptions.jsx

@@ -13,14 +13,16 @@ import CustomSettings from './Custom';
 import values from 'utils/data/slider_values.json';
 import { APIQualityOptions, backgroundImageEffects, getBackgroundOptionItems } from './optionTypes';
 
+import defaults from './default';
+
 class BackgroundOptions extends PureComponent {
   constructor() {
     super();
     this.state = {
-      backgroundType: localStorage.getItem('backgroundType') || 'api',
+      backgroundType: localStorage.getItem('backgroundType') || defaults.backgroundType,
       backgroundFilter: localStorage.getItem('backgroundFilter') || 'none',
       backgroundCategories: [variables.getMessage('modals.main.loading')],
-      backgroundAPI: localStorage.getItem('backgroundAPI') || 'mue',
+      backgroundAPI: localStorage.getItem('backgroundAPI') || defaults.backgroundAPI,
       marketplaceEnabled: localStorage.getItem('photo_packs'),
       effects: false,
       backgroundSettingsSection: false,

src/features/background/options/Colour.jsx

@@ -4,12 +4,13 @@ import ColorPicker from 'react-best-gradient-color-picker';
 import { toast } from 'react-toastify';
 import { Row, Content, Action } from 'components/Layout/Settings/Item';
 import { MdRefresh } from 'react-icons/md';
+import defaults from './default';
 
 import '../scss/_colourpicker.scss';
 
 const ColourOptions = () => {
   const [colour, setColour] = useState(
-    localStorage.getItem('customBackgroundColour') || 'rgba(0, 0, 0, 0)',
+    localStorage.getItem('customBackgroundColour') || defaults.customBackgroundColour,
   );
 
   const changeColour = (output) => {

src/features/greeting/Greeting.jsx

@@ -3,6 +3,7 @@ import { PureComponent, createRef } from 'react';
 
 import { nth, convertTimezone } from 'utils/date';
 import EventBus from 'utils/eventbus';
+import defaults from './options/default';
 
 import './greeting.scss';
 
@@ -34,7 +35,7 @@ export default class Greeting extends PureComponent {
     const date = time.getDate();
 
     // Parse the customEvents from localStorage
-    const customEvents = JSON.parse(localStorage.getItem('customEvents') || '[]');
+    const customEvents = JSON.parse(localStorage.getItem('customEvents') || defaults.customEvents);
 
     const event = customEvents.find((e) => e.month - 1 === month && e.date === date);
     if (event) {
@@ -137,7 +138,7 @@ export default class Greeting extends PureComponent {
 
         this.greeting.current.style.display = 'block';
         this.greeting.current.style.fontSize = `${
-          1.6 * Number((localStorage.getItem('zoomGreeting') || 100) / 100)
+          1.6 * Number((localStorage.getItem('zoomGreeting') || defaults.zoomGreeting) / 100)
         }em`;
       }
     });
@@ -145,7 +146,7 @@ export default class Greeting extends PureComponent {
     // this comment can apply to all widget zoom features apart from the general one in the Accessibility section
     // in a nutshell: 1.6 is the current font size, and we do "localstorage || 100" so we don't have to try that 4.0 -> 5.0 thing again
     this.greeting.current.style.fontSize = `${
-      1.6 * Number((localStorage.getItem('zoomGreeting') || 100) / 100)
+      1.6 * Number((localStorage.getItem('zoomGreeting') || defaults.zoomGreeting) / 100)
     }em`;
 
     this.getGreeting(0);

src/features/greeting/options/GreetingOptions.jsx

@@ -14,18 +14,19 @@ import { TextareaAutosize } from '@mui/material';
 import { Button } from 'components/Elements';
 import { toast } from 'react-toastify';
 
+import defaults from './default';
 import defaultEvents from '../events.json';
 
 import { MdEventNote, MdAdd, MdCancel, MdRefresh } from 'react-icons/md';
 
 const GreetingOptions = () => {
   const [customEvents, setCustomEvents] = useState(
-    JSON.parse(localStorage.getItem('customEvents')) || [],
+    JSON.parse(localStorage.getItem('customEvents')) || defaultEvents
   );
   const [events, setEvents] = useState(false);
 
   const [birthday, setBirthday] = useState(
-    new Date(localStorage.getItem('birthday')) || new Date(),
+    new Date(localStorage.getItem('birthday')) || defaults.birthday
   );
 
   const [enableBirthday, setEnableBirthday] = useState(
@@ -97,7 +98,7 @@ const GreetingOptions = () => {
     });
 
     // Update the event in localStorage
-    const customEvents = JSON.parse(localStorage.getItem('customEvents') || '[]');
+    const customEvents = JSON.parse(localStorage.getItem('customEvents') || defaults.customEvents);
     customEvents[index] = updatedEvent;
     localStorage.setItem('customEvents', JSON.stringify(customEvents));
   };

src/features/message/Message.jsx

@@ -1,10 +1,11 @@
 import { useState, useEffect, useRef } from 'react';
 import EventBus from 'utils/eventbus';
+import defaults from './options/default';
 import './message.scss';
 
 const Message = () => {
   const calculateFontSize = () => {
-    const zoomMessage = localStorage.getItem('zoomMessage') || 100;
+    const zoomMessage = localStorage.getItem('zoomMessage') || defaults.zoomMessage;
     return `${1 * Number((zoomMessage || 100) / 100)}em`;
   };
 
@@ -22,7 +23,7 @@ const Message = () => {
       }
     };
 
-    const messages = JSON.parse(localStorage.getItem('messages')) || [];
+    const messages = JSON.parse(localStorage.getItem('messages')) || defaults.messages;
     if (messages.length > 0) {
       setMessageText(messages[Math.floor(Math.random() * messages.length)]);
       setDisplay('block');

src/features/misc/modals/Modals.jsx

@@ -24,7 +24,7 @@ export default class Modals extends PureComponent {
 
   componentDidMount() {
     if (
-      localStorage.getItem('showWelcome') === 'true' &&
+      localStorage.getItem('showWelcome') !== 'false' &&
       window.location.search !== '?nointro=true'
     ) {
       this.setState({
@@ -34,7 +34,7 @@ export default class Modals extends PureComponent {
     }
 
     if (window.location.search === '?nointro=true') {
-      if (localStorage.getItem('showWelcome') === 'true') {
+      if (localStorage.getItem('showWelcome') !== 'false') {
         localStorage.setItem('showWelcome', false);
         EventBus.emit('refresh', 'widgets');
         EventBus.emit('refresh', 'backgroundwelcome');

src/features/misc/views/Widgets.jsx

@@ -10,6 +10,7 @@ import Message from '../../message/Message';
 import { WidgetsLayout } from 'components/Layout';
 
 import EventBus from 'utils/eventbus';
+import defaults from 'config/default';
 
 // weather is lazy loaded due to the size of the weather icons module
 // since we're using react-icons this might not be accurate,
@@ -22,7 +23,7 @@ export default class Widgets extends PureComponent {
   constructor() {
     super();
     this.state = {
-      order: JSON.parse(localStorage.getItem('order')),
+      order: JSON.parse(localStorage.getItem('order')) || defaults.order,
       welcome: localStorage.getItem('showWelcome'),
     };
     // widgets we can re-order
@@ -45,7 +46,7 @@ export default class Widgets extends PureComponent {
       switch (data) {
         case 'widgets':
           return this.setState({
-            order: JSON.parse(localStorage.getItem('order')),
+            order: JSON.parse(localStorage.getItem('order')) || defaults.order,
           });
         case 'widgetsWelcome':
           this.setState({

src/features/navbar/Navbar.jsx

@@ -5,6 +5,7 @@ import { MdSettings } from 'react-icons/md';
 
 import { Notes, Todo, Apps, Refresh, Maximise } from './components';
 import { Tooltip } from 'components/Elements';
+import defaults from './options/default';
 
 import EventBus from 'utils/eventbus';
 
@@ -18,14 +19,14 @@ class Navbar extends PureComponent {
       classList: localStorage.getItem('widgetStyle') === 'legacy' ? 'navbar old' : 'navbar new',
       refreshText: '',
       refreshEnabled: localStorage.getItem('refresh'),
-      refreshOption: localStorage.getItem('refreshOption') || '',
+      refreshOption: localStorage.getItem('refreshOption') || defaults.refreshOption,
       appsOpen: false,
     };
   }
 
   setZoom() {
     this.setState({
-      zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + 'rem',
+      zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || defaults.zoomNavbar) / 100) * 1.2) + 'rem',
     });
   }
 

src/features/navbar/components/Apps.jsx

@@ -6,6 +6,7 @@ import { MdPlaylistRemove, MdOutlineApps } from 'react-icons/md';
 import { Tooltip } from 'components/Elements';
 
 import { shift, useFloating } from '@floating-ui/react-dom';
+import defaults from '../options/default';
 import EventBus from 'utils/eventbus';
 
 class Apps extends PureComponent {
@@ -21,7 +22,7 @@ class Apps extends PureComponent {
 
   setZoom() {
     this.setState({
-      zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + 'rem',
+      zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || defaults.zoomNavbar) / 100) * 1.2) + 'rem',
     });
   }
 

src/features/navbar/components/Notes.jsx

@@ -9,12 +9,13 @@ import { Tooltip } from 'components/Elements';
 
 import { saveFile } from 'utils/saveFile';
 import EventBus from 'utils/eventbus';
+import defaults from '../options/default';
 
 class Notes extends PureComponent {
   constructor() {
     super();
     this.state = {
-      notes: localStorage.getItem('notes') || '',
+      notes: localStorage.getItem('notes') || defaults.notes,
       visibility: localStorage.getItem('notesPinned') === 'true' ? 'visible' : 'hidden',
       showNotes: localStorage.getItem('notesPinned') === 'true' ? true : false,
     };
@@ -22,7 +23,7 @@ class Notes extends PureComponent {
 
   setZoom() {
     this.setState({
-      zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + 'rem',
+      zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || defaults.zoomNavbar) / 100) * 1.2) + 'rem',
     });
   }
 

src/features/navbar/components/Todo.jsx

@@ -16,6 +16,7 @@ import Checkbox from '@mui/material/Checkbox';
 import { shift, useFloating } from '@floating-ui/react-dom';
 import { sortableContainer, sortableElement, sortableHandle } from '@muetab/react-sortable-hoc';
 import EventBus from 'utils/eventbus';
+import defaults from '../options/default';
 
 const SortableItem = sortableElement(({ value }) => <div>{value}</div>);
 const SortableContainer = sortableContainer(({ children }) => <div>{children}</div>);
@@ -25,7 +26,7 @@ class Todo extends PureComponent {
   constructor() {
     super();
     this.state = {
-      todo: JSON.parse(localStorage.getItem('todo')) || [],
+      todo: JSON.parse(localStorage.getItem('todo')) || defaults.todo,
       visibility: localStorage.getItem('todoPinned') === 'true' ? 'visible' : 'hidden',
       marginLeft: localStorage.getItem('refresh') === 'false' ? '-200px' : '-130px',
       showTodo: localStorage.getItem('todoPinned') === 'true',
@@ -34,7 +35,7 @@ class Todo extends PureComponent {
 
   setZoom() {
     this.setState({
-      zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + 'rem',
+      zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || defaults.zoomNavbar) / 100) * 1.2) + 'rem',
     });
   }
 

src/features/quicklinks/QuickLinks.jsx

@@ -2,6 +2,7 @@ import { PureComponent, createRef } from 'react';
 import { Tooltip } from 'components/Elements';
 
 import EventBus from 'utils/eventbus';
+import defaults from './options/default';
 
 import './quicklinks.scss';
 
@@ -16,7 +17,7 @@ class QuickLinks extends PureComponent {
 
   // widget zoom
   setZoom(element) {
-    const zoom = localStorage.getItem('zoomQuicklinks') || 100;
+    const zoom = localStorage.getItem('zoomQuicklinks') || defaults.zoomQuicklinks;
     for (const link of element.getElementsByTagName('span')) {
       link.style.fontSize = `${14 * Number(zoom / 100)}px`;
     }
@@ -62,7 +63,8 @@ class QuickLinks extends PureComponent {
     const tooltipEnabled = localStorage.getItem('quicklinkstooltip');
 
     const quickLink = (item) => {
-      if (localStorage.getItem('quickLinksStyle') === 'text') {
+      const quicklinksStyle = localStorage.getItem('quickLinksStyle');
+      if (quicklinksStyle === 'text') {
         return (
           <a
             className="quicklinkstext"
@@ -81,7 +83,7 @@ class QuickLinks extends PureComponent {
         item.icon ||
         'https://icon.horse/icon/ ' + item.url.replace('https://', '').replace('http://', '');
 
-      if (localStorage.getItem('quickLinksStyle') === 'metro') {
+      if (quicklinksStyle === 'metro') {
         return (
           <a
             className="quickLinksMetro"

src/features/quote/Quote.jsx

@@ -19,6 +19,7 @@ import { ShareModal } from 'components/Elements';
 import offline_quotes from './offline_quotes.json';
 
 import EventBus from 'utils/eventbus';
+import defaults from './options/default';
 
 import './quote.scss';
 
@@ -76,7 +77,7 @@ class Quote extends PureComponent {
       share: localStorage.getItem('quoteShareButton') === 'false' ? null : this.buttons.share,
       copy: localStorage.getItem('copyButton') === 'false' ? null : this.buttons.copy,
       quoteLanguage: '',
-      type: localStorage.getItem('quoteType') || 'api',
+      type: localStorage.getItem('quoteType') || defaults.quoteType,
       shareModal: false,
     };
     this.quote = createRef();
@@ -354,7 +355,7 @@ class Quote extends PureComponent {
   }
 
   setZoom() {
-    const zoomQuote = Number((localStorage.getItem('zoomQuote') || 100) / 100);
+    const zoomQuote = Number((localStorage.getItem('zoomQuote') || defaults.zoomQuote) / 100);
     this.quote.current.style.fontSize = `${0.8 * zoomQuote}em`;
     this.quoteauthor.current.style.fontSize = `${0.9 * zoomQuote}em`;
   }

src/features/quote/options/QuoteOptions.jsx

@@ -16,12 +16,13 @@ import { Button } from 'components/Elements';
 
 import { toast } from 'react-toastify';
 import EventBus from 'utils/eventbus';
+import defaults from './default';
 
 class QuoteOptions extends PureComponent {
   constructor() {
     super();
     this.state = {
-      quoteType: localStorage.getItem('quoteType') || 'api',
+      quoteType: localStorage.getItem('quoteType') || defaults.quoteType,
       customQuote: this.getCustom(),
       sourceSection: false,
     };

src/features/search/options/SearchOptions.jsx

@@ -9,13 +9,14 @@ import { Dropdown, Checkbox } from 'components/Form/Settings';
 import EventBus from 'utils/eventbus';
 
 import searchEngines from '../search_engines.json';
+import defaults from './default';
 
 class SearchOptions extends PureComponent {
   constructor() {
     super();
     this.state = {
       customEnabled: false,
-      customValue: localStorage.getItem('customSearchEngine') || '',
+      customValue: localStorage.getItem('customSearchEngine') || defaults.customSearchEngine,
     };
   }
 

src/features/time/Clock.jsx

@@ -4,8 +4,10 @@ import { convertTimezone } from 'utils/date';
 import { AnalogClock } from './components/AnalogClock';
 import { VerticalClock } from './components/VerticalClock';
 import EventBus from 'utils/eventbus';
+import defaults from './options/default';
 
 import './clock.scss';
+
 export default class Clock extends PureComponent {
   constructor() {
     super();
@@ -132,14 +134,14 @@ export default class Clock extends PureComponent {
 
         element.style.display = 'block';
         element.style.fontSize = `${
-          4 * Number((localStorage.getItem('zoomClock') || 100) / 100)
+          4 * Number((localStorage.getItem('zoomClock') || defaults.zoomClock) / 100)
         }em`;
       }
     });
 
     if (localStorage.getItem('timeType') !== 'analogue') {
       document.querySelector('.clock-container').style.fontSize = `${
-        4 * Number((localStorage.getItem('zoomClock') || 100) / 100)
+        4 * Number((localStorage.getItem('zoomClock') || defaults.zoomClock) / 100)
       }em`;
     }
 

src/features/time/Date.jsx

@@ -1,26 +1,22 @@
 import variables from 'config/variables';
-import { PureComponent, createRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 
 import { nth, convertTimezone } from 'utils/date';
 import EventBus from 'utils/eventbus';
+import defaults from './options/default';
 
 import './date.scss';
 
-export default class DateWidget extends PureComponent {
-  constructor() {
-    super();
-    this.state = {
-      date: '',
-      weekNumber: null,
-    };
-    this.date = createRef();
-  }
+const DateWidget = () => {
+  const [date, setDate] = useState('');
+  const [weekNumber, setWeekNumber] = useState(null);
+  const dateRef = useRef();
 
   /**
    * Get the week number of the year for the given date.
    * @param {Date} date
    */
-  getWeekNumber(date) {
+  const getWeekNumber = useCallback((date) => {
     const dateToday = new Date(date.valueOf());
     const dayNumber = (dateToday.getDay() + 6) % 7;
 
@@ -32,32 +28,30 @@ export default class DateWidget extends PureComponent {
       dateToday.setMonth(0, 1 + ((4 - dateToday.getDay() + 7) % 7));
     }
 
-    this.setState({
-      weekNumber: `${variables.getMessage('widgets.date.week')} ${
+    setWeekNumber(
+      `${variables.getMessage('widgets.date.week')} ${
         1 + Math.ceil((firstThursday - dateToday) / 604800000)
       }`,
-    });
-  }
+    );
+  }, []);
 
-  getDate() {
-    let date = new Date();
+  const getDate = useCallback(() => {
+    let currentDate = new Date();
     const timezone = localStorage.getItem('timezone');
     if (timezone && timezone !== 'auto') {
-      date = convertTimezone(date, timezone);
+      currentDate = convertTimezone(currentDate, timezone);
     }
 
     if (localStorage.getItem('weeknumber') === 'true') {
-      this.getWeekNumber(date);
-    } else if (this.state.weekNumber !== null) {
-      this.setState({
-        weekNumber: null,
-      });
+      getWeekNumber(currentDate);
+    } else if (weekNumber !== null) {
+      setWeekNumber(null);
     }
 
     if (localStorage.getItem('dateType') === 'short') {
-      const dateDay = date.getDate();
-      const dateMonth = date.getMonth() + 1;
-      const dateYear = date.getFullYear();
+      const dateDay = currentDate.getDate();
+      const dateMonth = currentDate.getMonth() + 1;
+      const dateYear = currentDate.getFullYear();
 
       const zero = localStorage.getItem('datezero') === 'true';
 
@@ -97,22 +91,22 @@ export default class DateWidget extends PureComponent {
           break;
       }
 
-      this.setState({
-        date: format,
-      });
+      setDate(format);
     } else {
       // Long date
       const lang = variables.languagecode.split('_')[0];
 
       const datenth =
-        localStorage.getItem('datenth') === 'true' ? nth(date.getDate()) : date.getDate();
+        localStorage.getItem('datenth') === 'true'
+          ? nth(currentDate.getDate())
+          : currentDate.getDate();
 
       const dateDay =
         localStorage.getItem('dayofweek') === 'true'
-          ? date.toLocaleDateString(lang, { weekday: 'long' })
+          ? currentDate.toLocaleDateString(lang, { weekday: 'long' })
           : '';
-      const dateMonth = date.toLocaleDateString(lang, { month: 'long' });
-      const dateYear = date.getFullYear();
+      const dateMonth = currentDate.toLocaleDateString(lang, { month: 'long' });
+      const dateYear = currentDate.getFullYear();
 
       let day = dateDay + ' ' + datenth;
       let month = dateMonth;
@@ -131,44 +125,42 @@ export default class DateWidget extends PureComponent {
           break;
       }
 
-      this.setState({
-        date: `${day} ${month} ${year}`,
-      });
+      setDate(`${day} ${month} ${year}`);
     }
-  }
+  }, [getWeekNumber, weekNumber]);
 
-  componentDidMount() {
-    EventBus.on('refresh', (data) => {
+  useEffect(() => {
+    const handleRefresh = (data) => {
       if (data === 'date' || data === 'timezone') {
         if (localStorage.getItem('date') === 'false') {
-          return (this.date.current.style.display = 'none');
+          dateRef.current.style.display = 'none';
+          return;
         }
 
-        this.date.current.style.display = 'block';
-        this.date.current.style.fontSize = `${Number(
-          (localStorage.getItem('zoomDate') || 100) / 100,
+        dateRef.current.style.display = 'block';
+        dateRef.current.style.fontSize = `${Number(
+          (localStorage.getItem('zoomDate') || defaults.zoomDate) / 100,
         )}em`;
-        this.getDate();
+        getDate();
       }
-    });
+    };
 
-    this.date.current.style.fontSize = `${Number(
-      (localStorage.getItem('zoomDate') || 100) / 100,
-    )}em`;
-    this.getDate();
-  }
+    EventBus.on('refresh', handleRefresh);
 
-  componentWillUnmount() {
-    EventBus.off('refresh');
-  }
+    dateRef.current.style.fontSize = `${Number((localStorage.getItem('zoomDate') || defaults.zoomDate) / 100)}em`;
+    getDate();
 
-  render() {
-    return (
-      <span className="date" ref={this.date}>
-        {this.state.date}
-        <br />
-        {this.state.weekNumber}
-      </span>
-    );
-  }
-}
+    return () => {
+      EventBus.off('refresh', handleRefresh);
+    };
+  }, [getDate]);
+
+  return (
+    <div className="flex flex-col" ref={dateRef}>
+      <span className="date">{date}</span>
+      <span className="date">{weekNumber}</span>
+    </div>
+  );
+};
+
+export { DateWidget as default, DateWidget };

src/features/time/components/AnalogClock.jsx

@@ -1,4 +1,5 @@
 import { Suspense, lazy } from 'react';
+import defaults from '../options/default';
 
 const Analog = lazy(() => import('react-clock'));
 
@@ -13,7 +14,7 @@ function AnalogClock({ time }) {
         <Analog
           className="analogclock clock-container"
           value={time}
-          size={1.5 * Number(localStorage.getItem('zoomClock') || 100)}
+          size={1.5 * Number(localStorage.getItem('zoomClock') || defaults.zoomClock)}
           renderMinuteMarks={enabled('minuteMarks')}
           renderHourMarks={enabled('hourMarks')}
           renderSecondHand={enabled('secondHand')}

src/features/time/components/VerticalClock.jsx

@@ -1,7 +1,9 @@
+import defaults from '../options/default';
+
 function VerticalClock({ finalHour, finalMinute, finalSeconds }) {
-  const hourColour = localStorage.getItem('hourColour') || '#fff';
-  const minuteColour = localStorage.getItem('minuteColour') || '#fff';
-  const secondColour = localStorage.getItem('secondColour') || '#fff';
+  const hourColour = localStorage.getItem('hourColour') || defaults.time.hourColour;
+  const minuteColour = localStorage.getItem('minuteColour') || defaults.time.minuteColour;
+  const secondColour = localStorage.getItem('secondColour') || defaults.time.secondColour;
 
   return (
     <span className="vertical-clock clock-container">

src/features/time/options/DateOptions.jsx

@@ -6,8 +6,10 @@ import { Checkbox, Dropdown } from 'components/Form/Settings';
 
 import { Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
 
+import defaults from './default';
+
 function DateOptions() {
-  const [dateType, setDateType] = useState(localStorage.getItem('dateType') || 'long');
+  const [dateType, setDateType] = useState(localStorage.getItem('dateType') || defaults.date.dateType);
   const dateFormats = ['DMY', 'MDY', 'YMD'];
 
   const longSettings = (

src/features/time/options/TimeOptions.jsx

@@ -6,14 +6,16 @@ import { Checkbox, Dropdown, Radio } from 'components/Form/Settings';
 
 import { MdRefresh } from 'react-icons/md';
 
+import defaults from './default';
+
 const TimeOptions = () => {
-  const [timeType, setTimeType] = useState(localStorage.getItem('timeType') || 'digital');
-  const [hourColour, setHourColour] = useState(localStorage.getItem('hourColour') || '#ffffff');
+  const [timeType, setTimeType] = useState(localStorage.getItem('timeType') || defaults.time.timeType);
+  const [hourColour, setHourColour] = useState(localStorage.getItem('hourColour') || defaults.time.hourColour);
   const [minuteColour, setMinuteColour] = useState(
-    localStorage.getItem('minuteColour') || '#ffffff',
+    localStorage.getItem('minuteColour') || defaults.time.minuteColour,
   );
   const [secondColour, setSecondColour] = useState(
-    localStorage.getItem('secondColour') || '#ffffff',
+    localStorage.getItem('secondColour') || defaults.time.secondColour,
   );
   const TIME_SECTION = 'modals.main.settings.sections.time';
 

src/features/weather/Weather.jsx

@@ -1,95 +1,95 @@
+import { useState, useEffect, useCallback } from 'react';
 import variables from 'config/variables';
-import { PureComponent } from 'react';
 
 import WeatherIcon from './components/WeatherIcon';
 import Expanded from './components/Expanded';
 import WeatherSkeleton from './components/WeatherSkeleton';
 
 import EventBus from 'utils/eventbus';
-
 import { getWeather } from './api/getWeather.js';
+import defaults from './options/default';
 
 import './weather.scss';
 
-class WeatherWidget extends PureComponent {
-  constructor() {
-    super();
-    this.state = {
-      location: localStorage.getItem('location') || 'London',
-      done: false,
-    };
-  }
+const WeatherWidget = () => {
+  const [location, setLocation] = useState(localStorage.getItem('location') || defaults.location);
+  const [done, setDone] = useState(false);
+  const [weatherData, setWeatherData] = useState(null);
 
-  async componentDidMount() {
-    EventBus.on('refresh', async (data) => {
-      if (data === 'weather') {
-        const weatherData = await getWeather(this.state.location, this.state.done);
-        this.setState(weatherData);
+  const fetchWeatherData = useCallback(async () => {
+    const data = await getWeather(location, done);
+    if (data) {
+      setWeatherData(data);
+      setDone(data.done || false);
 
-        const zoomWeather = `${Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`;
-        document.querySelector('.weather').style.fontSize = zoomWeather;
+      const zoomWeather = `${Number((localStorage.getItem('zoomWeather') || defaults.zoomWeather) / 100)}em`;
+      const weatherElement = document.querySelector('.weather');
+      if (weatherElement) {
+        weatherElement.style.fontSize = zoomWeather;
       }
-    });
+    }
+  }, [location, done]);
 
-    const weatherData = await getWeather(this.state.location, this.state.done);
-    this.setState(weatherData);
+  useEffect(() => {
+    const refreshListener = async (data) => {
+      if (data === 'weather') {
+        await fetchWeatherData();
+      }
+    };
 
-    const zoomWeather = `${Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`;
-    document.querySelector('.weather').style.fontSize = zoomWeather;
+    EventBus.on('refresh', refreshListener);
+    fetchWeatherData();
+
+    return () => {
+      EventBus.off('refresh', refreshListener);
+    };
+  }, [fetchWeatherData]);
+
+  const weatherType = localStorage.getItem('weatherType') || defaults.weatherType;
+
+  if (!done) {
+    return <WeatherSkeleton weatherType={weatherType} />;
   }
 
-  componentWillUnmount() {
-    EventBus.off('refresh');
-  }
-
-  render() {
-    const weatherType = localStorage.getItem('weatherType') || 1;
-
-    if (this.state.done === false) {
-      return <WeatherSkeleton weatherType={weatherType} />;
-    }
-
-    if (!this.state.weather) {
-      return (
-        <div className="weather">
-          <span className="loc">{this.state.location}</span>
-        </div>
-      );
-    }
-
+  if (!weatherData) {
     return (
       <div className="weather">
-        {/*{this.state.done === false ? <h1>cheese</h1> : <h1>loading finished</h1>}*/}
-        <div className="weatherCore">
-          <div className="iconAndTemps">
-            <div className="weathericon">
-              <WeatherIcon name={this.state.icon} />
-              <span>{`${this.state.weather.temp}${this.state.temp_text}`}</span>
-            </div>
-            {weatherType >= 2 && (
-              <span className="minmax">
-                <span className="subtitle">{`${this.state.weather.temp_min}${this.state.temp_text}`}</span>
-                <span className="subtitle">{`${this.state.weather.temp_max}${this.state.temp_text}`}</span>
-              </span>
-            )}
-          </div>
-          {weatherType >= 2 && (
-            <div className="extra-info">
-              <span>
-                {variables.getMessage('widgets.weather.feels_like', {
-                  amount: `${this.state.weather.feels_like}${this.state.temp_text}`,
-                })}
-              </span>
-              <span className="loc">{this.state.location}</span>
-            </div>
-          )}
-        </div>
-        {weatherType >= 3 && (
-          <Expanded weatherType={weatherType} state={this.state} variables={variables} />
-        )}
+        <span className="loc">{location}</span>
       </div>
     );
   }
-}
+
+  return (
+    <div className="weather">
+      <div className="weatherCore">
+        <div className="iconAndTemps">
+          <div className="weathericon">
+            <WeatherIcon name={weatherData.icon} />
+            <span>{`${weatherData.weather.temp}${weatherData.temp_text}`}</span>
+          </div>
+          {weatherType >= 2 && (
+            <span className="minmax">
+              <span className="subtitle">{`${weatherData.weather.temp_min}${weatherData.temp_text}`}</span>
+              <span className="subtitle">{`${weatherData.weather.temp_max}${weatherData.temp_text}`}</span>
+            </span>
+          )}
+        </div>
+        {weatherType >= 2 && (
+          <div className="extra-info">
+            <span>
+              {variables.getMessage('widgets.weather.feels_like', {
+                amount: `${weatherData.weather.feels_like}${weatherData.temp_text}`,
+              })}
+            </span>
+            <span className="loc">{location}</span>
+          </div>
+        )}
+      </div>
+      {weatherType >= 3 && (
+        <Expanded weatherType={weatherType} state={weatherData} variables={variables} />
+      )}
+    </div>
+  );
+};
 
 export { WeatherWidget as default, WeatherWidget };

src/features/weather/options/default.js

@@ -1,7 +1,7 @@
 const DefaultOptions = {
   weather: false,
   windspeed: true,
-  weatherType: 2,
+  weatherType: 1,
   tempformat: 'celsius',
   weatherdescription: false,
   cloudiness: false,
@@ -10,6 +10,7 @@ const DefaultOptions = {
   windDirection: false,
   atmosphericpressure: false,
   zoomWeather: 100,
+  location: 'London'
 };
 
 export default DefaultOptions;

src/index.jsx

@@ -4,7 +4,9 @@ import * as Sentry from '@sentry/react';
 
 import App from './App';
 import ErrorBoundary from './ErrorBoundary';
-import variables from './config/variables';
+
+import variables from 'config/variables';
+import defaults from 'config/default';
 
 import './scss/index.scss';
 // the toast css is based on default so we need to import it
@@ -12,7 +14,7 @@ import 'react-toastify/dist/ReactToastify.min.css';
 
 import { initTranslations } from 'lib/translations';
 
-const languagecode = localStorage.getItem('language') || 'en_GB';
+const languagecode = localStorage.getItem('language') || defaults.language;
 variables.language = initTranslations(languagecode);
 variables.languagecode = languagecode;
 document.documentElement.lang = languagecode.replace('_', '-');

src/utils/marketplace/uninstall.js

@@ -1,5 +1,8 @@
 import EventBus from 'utils/eventbus';
 
+import BackgroundOptions from 'features/background/options/default';
+import QuoteOptions from 'features/quote/options/default';
+
 // todo: relocate this function
 function showReminder() {
   document.querySelector('.reminder-info').style.display = 'flex';
@@ -33,7 +36,7 @@ export function uninstall(type, name) {
       });
       localStorage.setItem('quote_packs', JSON.stringify(installedContents));
       if (installedContents.length === 0) {
-        localStorage.setItem('quoteType', localStorage.getItem('oldQuoteType') || 'api');
+        localStorage.setItem('quoteType', localStorage.getItem('oldQuoteType') || QuoteOptions.quoteType);
         localStorage.removeItem('oldQuoteType');
         localStorage.removeItem('quote_packs');
       }
@@ -54,7 +57,7 @@ export function uninstall(type, name) {
       });
       localStorage.setItem('photo_packs', JSON.stringify(installedContents));
       if (installedContents.length === 0) {
-        localStorage.setItem('backgroundType', localStorage.getItem('oldBackgroundType') || 'api');
+        localStorage.setItem('backgroundType', localStorage.getItem('oldBackgroundType') || BackgroundOptions.backgroundType);
         localStorage.removeItem('oldBackgroundType');
         localStorage.removeItem('photo_packs');
       }

src/utils/settings/index.js

@@ -2,6 +2,5 @@ import { setDefaultSettings } from './default';
 import { exportSettings } from './export';
 import { importSettings } from './import';
 import { loadSettings } from './load';
-import { moveSettings } from './move';
 
-export { setDefaultSettings, exportSettings, importSettings, loadSettings, moveSettings };
+export { setDefaultSettings, exportSettings, importSettings, loadSettings };

src/utils/settings/move.js

@@ -1,25 +0,0 @@
-import { setDefaultSettings } from './default';
-
-/**
- * Saves all of the current settings, resets them, sets the defaults and then overrides
- * the new settings with the old saved messages where they exist.
- * @returns the result of the setDefaultSettings() function.
- */
-export function moveSettings() {
-  const currentSettings = Object.keys(localStorage);
-  if (currentSettings.length === 0) {
-    return this.setDefaultSettings();
-  }
-
-  const settings = {};
-  currentSettings.forEach((key) => {
-    settings[key] = localStorage.getItem(key);
-  });
-
-  localStorage.clear();
-  setDefaultSettings();
-
-  Object.keys(settings).forEach((key) => {
-    localStorage.setItem(key, settings[key]);
-  });
-}