refactor: mostly finish settings transition

src/App.jsx

@@ -11,6 +11,7 @@ import Preview from 'features/helpers/preview/Preview';
 import Welcome from 'features/welcome/Welcome';
 
 import BackgroundDefaults from 'features/background/options/default';
+import defaults from 'config/default';
 
 const useAppSetup = () => {
   useEffect(() => {
@@ -37,7 +38,7 @@ const App = () => {
   const [showBackground, setShowBackground] = useState(false);
 
   useEffect(() => {
-    const storedToastDisplayTime = localStorage.getItem('toastDisplayTime');
+    const storedToastDisplayTime = localStorage.getItem('toastDisplayTime') || defaults.toastDisplayTime;
     const storedBackground = localStorage.getItem('background') || BackgroundDefaults.background;
 
     if (storedToastDisplayTime) {

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/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],

src/utils/data/default_settings.json

@@ -1,274 +0,0 @@
-[
-  {
-    "name": "time",
-    "value": true
-  },
-  {
-    "name": "greeting",
-    "value": true
-  },
-  {
-    "name": "background",
-    "value": true
-  },
-  {
-    "name": "quote",
-    "value": true
-  },
-  {
-    "name": "searchBar",
-    "value": true
-  },
-  {
-    "name": "blur",
-    "value": 0
-  },
-  {
-    "name": "brightness",
-    "value": 90
-  },
-  {
-    "name": "zero",
-    "value": true
-  },
-  {
-    "name": "events",
-    "value": true
-  },
-  {
-    "name": "customBackground",
-    "value": ""
-  },
-  {
-    "name": "greetingName",
-    "value": ""
-  },
-  {
-    "name": "defaultGreetingMessage",
-    "value": true
-  },
-  {
-    "name": "backgroundAPI",
-    "value": "mue"
-  },
-  {
-    "name": "copyButton",
-    "value": false
-  },
-  {
-    "name": "installed",
-    "value": "[]"
-  },
-  {
-    "name": "searchEngine",
-    "value": "duckduckgo"
-  },
-  {
-    "name": "refresh",
-    "value": true
-  },
-  {
-    "name": "view",
-    "value": true
-  },
-  {
-    "name": "favouriteEnabled",
-    "value": true
-  },
-  {
-    "name": "quoteShareButton",
-    "value": false
-  },
-  {
-    "name": "favouriteQuoteEnabled",
-    "value": false
-  },
-  {
-    "name": "showWelcome",
-    "value": true
-  },
-  {
-    "name": "quoteLanguage",
-    "value": "en"
-  },
-  {
-    "name": "date",
-    "value": "false"
-  },
-  {
-    "name": "timeType",
-    "value": "digital"
-  },
-  {
-    "name": "dateFormat",
-    "value": "DMY"
-  },
-  {
-    "name": "shortFormat",
-    "value": "dots"
-  },
-  {
-    "name": "toastDisplayTime",
-    "value": 2500
-  },
-  {
-    "name": "fontstyle",
-    "value": "normal"
-  },
-  {
-    "name": "fontweight",
-    "value": 400
-  },
-  {
-    "name": "order",
-    "value": "[\"greeting\", \"time\", \"quicklinks\", \"quote\", \"date\", \"message\"]"
-  },
-  {
-    "name": "theme",
-    "value": "auto"
-  },
-  {
-    "name": "backgroundType",
-    "value": "api"
-  },
-  {
-    "name": "timeformat",
-    "value": "twentyfourhour"
-  },
-  {
-    "name": "experimental",
-    "value": false
-  },
-  {
-    "name": "debugtimeout",
-    "value": 0
-  },
-  {
-    "name": "quicklinks",
-    "value": "[]"
-  },
-  {
-    "name": "quicklinksenabled",
-    "value": false
-  },
-  {
-    "name": "weatherEnabled",
-    "value": false
-  },
-  {
-    "name": "weatherType",
-    "value": 2
-  },
-  {
-    "name": "tempformat",
-    "value": "celsius"
-  },
-  {
-    "name": "authorImg",
-    "value": true
-  },
-  {
-    "name": "authorLink",
-    "value": true
-  },
-  {
-    "name": "bgtransition",
-    "value": true
-  },
-  {
-    "name": "backgroundVideoLoop",
-    "value": true
-  },
-  {
-    "name": "backgroundVideoMute",
-    "value": true
-  },
-  {
-    "name": "quicklinkstooltip",
-    "value": true
-  },
-  {
-    "name": "notesEnabled",
-    "value": true
-  },
-  {
-    "name": "showlocation",
-    "value": true
-  },
-  {
-    "name": "minuteHand",
-    "value": true
-  },
-  {
-    "name": "hourHand",
-    "value": true
-  },
-  {
-    "name": "datezero",
-    "value": true
-  },
-  {
-    "name": "quoteType",
-    "value": "api"
-  },
-  {
-    "name": "backgroundFilter",
-    "value": "none"
-  },
-  {
-    "name": "apiQuality",
-    "value": "high"
-  },
-  {
-    "name": "photoInformation",
-    "value": true
-  },
-  {
-    "name": "backgroundFilterAmount",
-    "value": 0
-  },
-  {
-    "name": "stats",
-    "value": false
-  },
-  {
-    "name": "statsData",
-    "value": "{}"
-  },
-  {
-    "name": "offlineMode",
-    "value": false
-  },
-  {
-    "name": "animations",
-    "value": true
-  },
-  {
-    "name": "textBorder",
-    "value": "new"
-  },
-  {
-    "name": "widgetStyle",
-    "value": "new"
-  },
-  {
-    "name": "backgroundExclude",
-    "value": "[]"
-  },
-  {
-    "name": "photoMap",
-    "value": true
-  },
-  {
-    "name": "appsEnabled",
-    "value": false
-  },
-  {
-    "name": "applinks",
-    "value": "[]"
-  },
-  {
-    "name": "customEvents",
-    "value": "[{\"id\":\"widgets.greeting.christmas\",\"name\":\"Merry Christmas\",\"month\":12,\"date\":25},{\"id\":\"widgets.greeting.newyear\",\"name\":\"Happy New Year\",\"month\":1,\"date\":1},{\"id\":\"widgets.greeting.halloween\",\"name\":\"Happy Halloween\",\"month\":10,\"date\":31}]"
-  }
-]

src/utils/data/other_contributors.json

@@ -1,6 +0,0 @@
-[
-  {
-    "login": "FuryingFox",
-    "avatar_url": "https://avatars.githubusercontent.com/u/28787893?v=4"
-  }
-]

src/utils/settings/default.js

@@ -1,4 +1,3 @@
-import defaultSettings from 'utils/data/default_settings.json';
 import languages from 'i18n/languages.json';
 import variables from 'config/variables';
 
@@ -8,7 +7,6 @@ import variables from 'config/variables';
  */
 export function setDefaultSettings(reset) {
   localStorage.clear();
-  defaultSettings.forEach((element) => localStorage.setItem(element.name, element.value));
 
   // Languages
   const languageCodes = languages.map(({ value }) => value);

src/utils/settings/load.js

@@ -105,15 +105,6 @@ export function loadSettings(hotreload) {
     );
   }
 
-  // If the extension got updated and the new app links default settings
-  // were not set, set them
-  if (localStorage.getItem('applinks') === null) {
-    localStorage.setItem('applinks', JSON.stringify([]));
-  }
-  if (localStorage.getItem('appsEnabled') === null) {
-    localStorage.setItem('showWelcome', false);
-  }
-
   // everything below this shouldn't run on a hot reload event
   if (hotreload === true) {
     return;