refactor: mostly finish settings transition

src/features/background/components/ExcludeModal.jsx

@@ -4,10 +4,11 @@ import EventBus from 'utils/eventbus';
 import { Tooltip, Button } from 'components/Elements';
 
 import { MdClose, MdDone } from 'react-icons/md';
+import defaults from '../options/default';
 
 function ExcludeModal({ modalClose, info }) {
   const excludeImage = async () => {
-    let backgroundExclude = JSON.parse(localStorage.getItem('backgroundExclude'));
+    let backgroundExclude = JSON.parse(localStorage.getItem('backgroundExclude')) || defaults.backgroundExclude;
     backgroundExclude.push(info.pun);
     backgroundExclude = JSON.stringify(backgroundExclude);
     localStorage.setItem('backgroundExclude', backgroundExclude);

src/features/background/components/Favourite.jsx

@@ -2,6 +2,8 @@ import variables from 'config/variables';
 import { useState } from 'react';
 import { MdStar, MdStarBorder } from 'react-icons/md';
 
+import defaults from '../options/default';
+
 function Favourite({ credit, offline, pun, tooltipText }) {
   const [favourited, setFavourited] = useState(
     localStorage.getItem('favourite') ? (
@@ -23,7 +25,7 @@ function Favourite({ credit, offline, pun, tooltipText }) {
       tooltipText(variables.getMessage('widgets.quote.favourite'));
       variables.stats.postEvent('feature', 'Background favourite');
     } else {
-      const type = localStorage.getItem('backgroundType');
+      const type = localStorage.getItem('backgroundType') || defaults.backgroundType;
 
       switch (type) {
         case 'colour':

src/features/background/options/Custom.jsx

@@ -18,6 +18,7 @@ import { Tooltip, Button } from 'components/Elements';
 import Modal from 'react-modal';
 
 import CustomURLModal from './CustomURLModal';
+import defaults from './default';
 
 export default class CustomSettings extends PureComponent {
   getMessage = (text, obj) => variables.getMessage(text, obj || {});
@@ -106,7 +107,8 @@ export default class CustomSettings extends PureComponent {
     try {
       data = JSON.parse(localStorage.getItem('customBackground'));
     } catch (e) {
-      data = [localStorage.getItem('customBackground')];
+      const custom = localStorage.getItem('customBackground');
+      data = custom ? [custom] : defaults.customBackground
     }
 
     return data;

src/features/background/options/default.js

@@ -15,7 +15,8 @@ const DefaultOptions = {
   customBackgroundColour: 'rgba(0, 0, 0, 0)',
   customBackground: [],
   backgroundVideoLoop: true,
-  backgroundVideoMute: true
+  backgroundVideoMute: true,
+  backgroundExclude: []
 };
 
 export default DefaultOptions;

src/features/misc/sections/About.jsx

@@ -6,7 +6,6 @@ import { SiGithubsponsors, SiOpencollective, SiX } from 'react-icons/si';
 import { BiDonateHeart } from 'react-icons/bi';
 
 import { Tooltip, Button } from 'components/Elements';
-import other_contributors from 'utils/data/other_contributors.json';
 
 class About extends PureComponent {
   constructor() {
@@ -14,7 +13,6 @@ class About extends PureComponent {
     this.state = {
       contributors: [],
       sponsors: [],
-      other_contributors: [],
       photographers: [],
       curators: [],
       update: variables.getMessage('modals.main.settings.sections.about.version.checking_update'),
@@ -106,7 +104,6 @@ class About extends PureComponent {
       contributors: contributors.filter((contributor) => !contributor.login.includes('bot')),
       sponsors,
       update,
-      other_contributors,
       photographers,
       curators,
       loading: null,
@@ -301,16 +298,6 @@ class About extends PureComponent {
                 </a>
               </Tooltip>
             ))}
-            {
-              // for those who contributed without opening a pull request
-              this.state.other_contributors.map(({ login, avatar_url }) => (
-                <Tooltip title={login} key={login}>
-                  <a href={'https://github.com/' + login} target="_blank" rel="noopener noreferrer">
-                    <img draggable={false} src={avatar_url + '&s=128'} alt={login}></img>
-                  </a>
-                </Tooltip>
-              ))
-            }
           </div>
         </div>
 

src/features/misc/sections/overview_skeletons/Clock.jsx

@@ -2,7 +2,8 @@ import { Suspense, lazy, memo } from 'react';
 const Analog = lazy(() => import('react-clock'));
 
 function ClockSkeleton() {
-  if (localStorage.getItem('timeType') === 'analogue') {
+  const timeType = localStorage.getItem('timeType');
+  if (timeType === 'analogue') {
     return (
       <Suspense fallback={<></>}>
         <div className="clockBackground">
@@ -14,9 +15,9 @@ function ClockSkeleton() {
         </div>
       </Suspense>
     );
-  } else if (localStorage.getItem('timeType') === 'percentageComplete') {
+  } else if (timeType === 'percentageComplete') {
     return <span className="vertical-clock clock-container clockSkeleton">68%</span>;
-  } else if (localStorage.getItem('timeType') === 'verticalClock') {
+  } else if (timeType === 'verticalClock') {
     return (
       <span className="vertical-clock clock-container" style={{ fontSize: '30px' }}>
         <div className="hour">10</div>

src/features/navbar/Navbar.jsx

@@ -18,7 +18,7 @@ class Navbar extends PureComponent {
     this.state = {
       classList: localStorage.getItem('widgetStyle') === 'legacy' ? 'navbar old' : 'navbar new',
       refreshText: '',
-      refreshEnabled: localStorage.getItem('refresh'),
+      refreshEnabled: localStorage.getItem('refresh') || defaults.refresh,
       refreshOption: localStorage.getItem('refreshOption') || defaults.refreshOption,
       appsOpen: false,
     };
@@ -32,7 +32,7 @@ class Navbar extends PureComponent {
 
   updateRefreshText() {
     let refreshText;
-    switch (localStorage.getItem('refreshOption')) {
+    switch (this.state.refreshOption) {
       case 'background':
         refreshText = variables.getMessage('modals.main.settings.sections.background.title');
         break;

src/features/navbar/components/Apps.jsx

@@ -13,7 +13,7 @@ class Apps extends PureComponent {
   constructor() {
     super();
     this.state = {
-      apps: JSON.parse(localStorage.getItem('applinks')),
+      apps: JSON.parse(localStorage.getItem('applinks')) || defaults.applinks,
       visibility: localStorage.getItem('appsPinned') === 'true' ? 'visible' : 'hidden',
       marginLeft: localStorage.getItem('refresh') === 'false' ? '-200px' : '-130px',
       showApps: localStorage.getItem('appsPinned') === 'true',
@@ -51,7 +51,7 @@ class Apps extends PureComponent {
 
   hideApps() {
     this.setState({
-      showApps: localStorage.getItem('AppsPinned') === 'true',
+      showApps: localStorage.getItem('appsPinned') === 'true',
     });
   }
 

src/features/navbar/components/Maximise.jsx

@@ -1,16 +1,16 @@
 import variables from 'config/variables';
 import { useState } from 'react';
-
 import { MdCropFree } from 'react-icons/md';
-
 import { Tooltip } from 'components/Elements';
 
+import defaults from '../options/default';
+
 function Maximise(props) {
   const [hidden, setHidden] = useState(false);
 
   const setAttribute = (blur, brightness, filter) => {
     // don't attempt to modify the background if it isn't an image
-    const backgroundType = localStorage.getItem('backgroundType');
+    const backgroundType = localStorage.getItem('backgroundType') || defaults.backgroundType;
     if (
       backgroundType === 'colour' ||
       backgroundType === 'random_colour' ||
@@ -23,7 +23,7 @@ function Maximise(props) {
 
     let backgroundFilter;
     if (filter === true) {
-      const filterData = localStorage.getItem('backgroundFilter');
+      const filterData = localStorage.getItem('backgroundFilter') || defaults.backgroundFilter;
       if (filterData !== 'none') {
         backgroundFilter = filterData;
       }
@@ -51,7 +51,11 @@ function Maximise(props) {
       setAttribute(0, 100);
       variables.stats.postEvent('feature', 'Background maximise');
     } else {
-      setAttribute(localStorage.getItem('blur'), localStorage.getItem('brightness'), true);
+      setAttribute(
+        localStorage.getItem('blur') || defaults.blur,
+        localStorage.getItem('brightness') || defaults.brightness,
+        true,
+      );
       variables.stats.postEvent('feature', 'Background unmaximise');
     }
   };

src/features/navbar/options/NavbarOptions.jsx

@@ -11,12 +11,13 @@ import { Row, Content, Action } from 'components/Layout/Settings/Item';
 import { Header } from 'components/Layout/Settings';
 
 import AppsOptions from './AppsOptions';
+import defaults from './default';
 
 function NavbarOptions() {
   const [showRefreshOptions, setShowRefreshOptions] = useState(
     localStorage.getItem('refresh') === 'true',
   );
-  const [appsEnabled, setAppsEnabled] = useState(localStorage.getItem('appsEnabled') === 'true' || false);
+  const [appsEnabled, setAppsEnabled] = useState(localStorage.getItem('appsEnabled') === 'true' || defaults.appsEnabled);
 
   const NAVBAR_SECTION = 'modals.main.settings.sections.appearance.navbar';
 

src/features/search/Search.jsx

@@ -12,6 +12,7 @@ import EventBus from 'utils/eventbus';
 
 import './search.scss';
 
+import defaults from './options/default';
 import searchEngines from './search_engines.json';
 
 function Search() {
@@ -53,7 +54,7 @@ function Search() {
     let _url;
     let _query = 'q';
 
-    const setting = localStorage.getItem('searchEngine');
+    const setting = localStorage.getItem('searchEngine') || defaults.searchEngine;
     const info = searchEngines.find((i) => i.settingsName === setting);
 
     if (info !== undefined) {
@@ -64,7 +65,7 @@ function Search() {
     }
 
     if (setting === 'custom') {
-      const custom = localStorage.getItem('customSearchEngine');
+      const custom = localStorage.getItem('customSearchEngine') || defaults.customSearchEngine;
       if (custom !== null) {
         _url = custom;
       }

src/features/stats/achievements.json

@@ -0,0 +1,86 @@
+[
+  {
+    "id": "10tabs",
+    "condition": {
+      "type": "tabsOpened",
+      "amount": 3
+    }
+  },
+  {
+    "id": "thankyou",
+    "condition": {
+      "type": "tabsOpened",
+      "amount": 39
+    }
+  },
+  {
+    "id": "seasoning",
+    "condition": {
+      "type": "tabsOpened",
+      "amount": 100
+    }
+  },
+  {
+    "id": "mrworldwide",
+    "condition": {
+      "type": "tabsOpened",
+      "amount": 305
+    }
+  },
+  {
+    "id": "tabaholic",
+    "condition": {
+      "type": "tabsOpened",
+      "amount": 500
+    }
+  },
+  {
+    "id": "727",
+    "condition": {
+      "type": "tabsOpened",
+      "amount": 727
+    }
+  },
+  {
+    "id": "808s",
+    "condition": {
+      "type": "tabsOpened",
+      "amount": 808
+    }
+  },
+  {
+    "id": "1337",
+    "condition": {
+      "type": "tabsOpened",
+      "amount": 1337
+    }
+  },
+  {
+    "id": "averagelinuxuser",
+    "condition": {
+      "type": "addonInstall",
+      "amount": 1
+    }
+  },
+  {
+    "id": "fullyriced",
+    "condition": {
+      "type": "addonInstall",
+      "amount": 5
+    }
+  },
+  {
+    "id": "21addons",
+    "condition": {
+      "type": "addonInstall",
+      "amount": 21
+    }
+  },
+  {
+    "id": "overload",
+    "condition": {
+      "type": "addonInstall",
+      "amount": 50
+    }
+  }
+]

src/features/stats/api/achievements/index.js

@@ -14,7 +14,7 @@ import tr_TR from 'i18n/locales/achievements/tr_TR.json';
 import bn from 'i18n/locales/achievements/bn.json';
 import pt_BR from 'i18n/locales/achievements/pt_BR.json';
 
-import achievements from 'utils/data/achievements.json';
+import achievements from '../../achievements.json';
 
 import { checkAchievements, newAchievements } from './condition';
 

src/features/weather/api/getWeather.js

@@ -68,10 +68,12 @@ export const getWeather = async (location, done) => {
       },
       done: true,
     };
+
     localStorage.setItem(
       'currentWeather',
       JSON.stringify({ data: cacheable, cachedAt: Date.now() }),
     );
+
     return cacheable;
   } catch (error) {
     console.error('Fetch Error: ', error);

src/features/welcome/components/Sections/ImportSettings.jsx

@@ -3,7 +3,6 @@ import { FileUpload } from 'components/Form/Settings';
 import { MdCloudUpload } from 'react-icons/md';
 import { importSettings as importSettingsFunction } from 'utils/settings';
 import { Header, Content } from '../Layout';
-import default_settings from 'utils/data/default_settings.json';
 
 function ImportSettings(props) {
   const importSettings = (e) => {
@@ -23,13 +22,6 @@ function ImportSettings(props) {
         return;
       }
 
-      const defaultSetting = default_settings.find((i) => i.name === setting);
-      if (defaultSetting !== undefined) {
-        if (data[setting] === String(defaultSetting.value)) {
-          return;
-        }
-      }
-
       settings.push({
         name: setting,
         value: data[setting],