Merge branch 'main' of https://github.com/mue/mue

package.json

@@ -18,8 +18,8 @@
     "@fontsource/lexend-deca": "5.0.12",
     "@fontsource/montserrat": "5.0.17",
     "@muetab/react-sortable-hoc": "^2.0.1",
-    "@mui/material": "5.15.18",
-    "@sentry/react": "^8.4.0",
+    "@mui/material": "5.15.19",
+    "@sentry/react": "^8.5.0",
     "embla-carousel-autoplay": "8.1.3",
     "embla-carousel-react": "8.1.3",
     "fast-blurhash": "^1.1.2",
@@ -44,11 +44,11 @@
     "eslint-config-react-app": "^7.0.1",
     "husky": "^9.0.11",
     "prettier": "^3.2.5",
-    "sass": "^1.77.2",
+    "sass": "^1.77.4",
     "stylelint": "^16.6.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-scss": "^6.3.0",
-    "vite": "5.2.11",
+    "vite": "5.2.12",
     "vite-plugin-progress": "^0.0.7"
   },
   "scripts": {

src/App.jsx

@@ -1,56 +1,75 @@
-import variables from 'config/variables';
-import { PureComponent } from 'react';
+import { useEffect, useState } from 'react';
 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 EventBus from 'utils/eventbus';
+import variables from 'config/variables';
 
-export default class App extends PureComponent {
-  componentDidMount() {
-    // 4.0 -> 5.0 (the key below is only on 5.0)
-    // now featuring 5.0 -> 5.1
-    // the firstRun check was moved here because the old function was useless
-    if (!localStorage.getItem('firstRun') || !localStorage.getItem('stats')) {
+const useAppSetup = () => {
+  useEffect(() => {
+    const firstRun = localStorage.getItem('firstRun');
+    const stats = localStorage.getItem('stats');
+
+    if (!firstRun || !stats) {
       moveSettings();
       window.location.reload();
     }
 
     loadSettings();
 
-    EventBus.on('refresh', (data) => {
+    const refreshHandler = (data) => {
       if (data === 'other') {
         loadSettings(true);
       }
-    });
+    };
+
+    EventBus.on('refresh', refreshHandler);
 
     variables.stats.tabLoad();
-  }
 
-  componentWillUnmount() {
-    EventBus.off('refresh');
-  }
+    return () => {
+      EventBus.off('refresh', refreshHandler);
+    };
+  }, []);
+};
 
-  render() {
-    return (
-      <>
-        {localStorage.getItem('background') === 'true' && <Background />}
-        <ToastContainer
-          position="top-center"
-          autoClose={localStorage.getItem('toastDisplayTime') || 2500}
-          newestOnTop={true}
-          closeOnClick
-          pauseOnFocusLoss
-        />
-        <div id="center">
-          <Widgets />
-          <Modals />
-        </div>
-      </>
-    );
-  }
-}
+const App = () => {
+  const [toastDisplayTime, setToastDisplayTime] = useState(2500);
+  const [showBackground, setShowBackground] = useState(false);
+
+  useEffect(() => {
+    const storedToastDisplayTime = localStorage.getItem('toastDisplayTime');
+    const storedBackground = localStorage.getItem('background');
+
+    if (storedToastDisplayTime) {
+      setToastDisplayTime(parseInt(storedToastDisplayTime, 10));
+    }
+
+    if (storedBackground === 'true') {
+      setShowBackground(true);
+    }
+  }, []);
+
+  useAppSetup();
+
+  return (
+    <>
+      {showBackground && <Background />}
+      <ToastContainer
+        position="top-center"
+        autoClose={toastDisplayTime}
+        newestOnTop={true}
+        closeOnClick
+        pauseOnFocusLoss
+      />
+      <div id="center">
+        <Widgets />
+        <Modals />
+      </div>
+    </>
+  );
+};
+
+export default App;

src/components/Elements/AddModal/AddModal.jsx

@@ -4,6 +4,7 @@ import { useState, memo } from 'react';
 import { TextareaAutosize } from '@mui/material';
 import { MdAddLink, MdClose } from 'react-icons/md';
 import { Tooltip } from 'components/Elements';
+import { Button } from 'components/Elements';
 
 function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, editLink }) {
   const [name, setName] = useState(edit ? editData.name : '');
@@ -51,26 +52,9 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
           {iconError} {urlError}
         </span>
         {edit ? (
-          <button
-            style={{
-              height: '16px',
-              fontSize: '15px',
-            }}
-            onClick={() => editLink(editData, name, url, icon)}
-          >
-            <MdAddLink /> {variables.getMessage('modals.main.settings.sections.quicklinks.edit')}
-          </button>
+          <Button type="settings" onClick={() => editLink(editData, name, url, icon)} icon={<MdAddLink />} label={variables.getMessage('modals.main.settings.sections.quicklinks.edit')} />
         ) : (
-          <button
-            style={{
-              height: '16px',
-              fontSize: '15px',
-            }}
-            className="btn-settings"
-            onClick={() => addLink(name, url, icon)}
-          >
-            <MdAddLink /> {variables.getMessage('widgets.quicklinks.add')}
-          </button>
+          <Button type="settings" onClick={() => addLink(name, url, icon)} icon={<MdAddLink />} label={variables.getMessage('widgets.quicklinks.add')} />
         )}
       </div>
     </div>

src/components/Elements/MainModal/backend/Tabs.jsx

@@ -1,5 +1,5 @@
 import variables from 'config/variables';
-import { PureComponent } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   MdSettings,
   MdOutlineShoppingBasket,
@@ -11,111 +11,99 @@ import Tab from './Tab';
 import { Button } from 'components/Elements';
 import ErrorBoundary from '../../../../features/misc/modals/ErrorBoundary';
 
-class Tabs extends PureComponent {
-  constructor(props) {
-    super(props);
+const Tabs = (props) => {
+  const [currentTab, setCurrentTab] = useState(props.children[0].props.label);
+  const [currentName, setCurrentName] = useState(props.children[0].props.name);
 
-    this.state = {
-      currentTab: this.props.children[0].props.label,
-      currentName: this.props.children[0].props.name,
-    };
-  }
-
-  onClick = (tab, name) => {
-    if (name !== this.state.currentName) {
+  const onClick = (tab, name) => {
+    if (name !== currentName) {
       variables.stats.postEvent('tab', `Opened ${name}`);
     }
 
-    this.setState({
-      currentTab: tab,
-      currentName: name,
-    });
+    setCurrentTab(tab);
+    setCurrentName(name);
   };
 
-  hideReminder() {
+  const hideReminder = () => {
     localStorage.setItem('showReminder', false);
     document.querySelector('.reminder-info').style.display = 'none';
-  }
+  };
 
-  render() {
-    const navbarButtons = [
-      {
-        tab: 'settings',
-        icon: <MdSettings />,
-      },
-      {
-        tab: 'addons',
-        icon: <MdOutlineExtension />,
-      },
-      {
-        tab: 'marketplace',
-        icon: <MdOutlineShoppingBasket />,
-      },
-    ];
+  const navbarButtons = [
+    {
+      tab: 'settings',
+      icon: <MdSettings />,
+    },
+    {
+      tab: 'addons',
+      icon: <MdOutlineExtension />,
+    },
+    {
+      tab: 'marketplace',
+      icon: <MdOutlineShoppingBasket />,
+    },
+  ];
 
-    const reminderInfo = (
-      <div
-        className="reminder-info"
-        style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
-      >
-        <div className="shareHeader">
-          <span className="title">
-            {variables.getMessage('modals.main.settings.reminder.title')}
-          </span>
-          <span className="closeModal" onClick={() => this.hideReminder()}>
-            <MdClose />
-          </span>
-        </div>
-        <span className="subtitle">
-          {variables.getMessage('modals.main.settings.reminder.message')}
+  const reminderInfo = (
+    <div
+      className="reminder-info"
+      style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
+    >
+      <div className="shareHeader">
+        <span className="title">{variables.getMessage('modals.main.settings.reminder.title')}</span>
+        <span className="closeModal" onClick={hideReminder}>
+          <MdClose />
         </span>
-        <button onClick={() => window.location.reload()}>
-          <MdRefresh />
-          {variables.getMessage('modals.main.error_boundary.refresh')}
-        </button>
       </div>
-    );
+      <span className="subtitle">
+        {variables.getMessage('modals.main.settings.reminder.message')}
+      </span>
+      <button onClick={() => window.location.reload()}>
+        <MdRefresh />
+        {variables.getMessage('modals.main.error_boundary.refresh')}
+      </button>
+    </div>
+  );
 
-    return (
-      <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
-        <div className="modalSidebar">
-          {this.props.children.map((tab, index) => (
-            <Tab
-              currentTab={this.state.currentTab}
-              key={index}
-              label={tab.props.label}
-              onClick={(nextTab) => this.onClick(nextTab, tab.props.name)}
-              navbarTab={this.props.navbar || false}
+  return (
+    <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
+      <div className="modalSidebar">
+        {props.children.map((tab, index) => (
+          <Tab
+            currentTab={currentTab}
+            key={index}
+            label={tab.props.label}
+            onClick={(nextTab) => onClick(nextTab, tab.props.name)}
+            navbarTab={props.navbar || false}
+          />
+        ))}
+        {reminderInfo}
+      </div>
+      <div className="modalTabContent">
+        <div className="modalNavbar">
+          {navbarButtons.map(({ tab, icon }, index) => (
+            <Button
+              type="navigation"
+              onClick={() => props.changeTab(tab)}
+              icon={icon}
+              label={variables.getMessage(`modals.main.navbar.${tab}`)}
+              active={props.current === tab}
+              key={`${tab}-${index}`}
             />
           ))}
-          {reminderInfo}
         </div>
-        <div className="modalTabContent">
-          <div className="modalNavbar">
-            {navbarButtons.map(({ tab, icon }, index) => (
-              <Button
-                type="navigation"
-                onClick={() => this.props.changeTab(tab)}
-                icon={icon}
-                label={variables.getMessage(`modals.main.navbar.${tab}`)}
-                active={this.props.current === tab}
-                key={`${tab}-${index}`}
-              />
-            ))}
-          </div>
-          {this.props.children.map((tab, index) => {
-            if (tab.props.label !== this.state.currentTab) {
-              return undefined;
-            }
+        {props.children.map((tab, index) => {
+          if (tab.props.label !== currentTab) {
+            return undefined;
+          }
 
-            return (
-              <ErrorBoundary key={`error-boundary-${index}`}>{tab.props.children}</ErrorBoundary>
-            );
-          })}
-        </div>
+          return (
+            <ErrorBoundary key={`error-boundary-${index}`}>{tab.props.children}</ErrorBoundary>
+          );
+        })}
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default Tabs;

src/components/Elements/ShareModal/ShareModal.jsx

@@ -31,7 +31,7 @@ function ShareModal({ modalClose, data }) {
 
   const copyLink = () => {
     navigator.clipboard.writeText(data.url);
-    toast(variables.getMessage('modals.share.copy_link'));
+    toast(data.startsWith('"') ? variables.getMessage('toasts.quote') : variables.getMessage('toasts.link_copied'));
   };
 
   return (
@@ -73,9 +73,9 @@ function ShareModal({ modalClose, data }) {
             window
               .open(
                 'mailto:email@example.com?subject=Check%20out%20this%20%on%20%Mue!&body=' +
-                  data.data.name +
+                  data.name +
                   'on Mue: ' +
-                  data,
+                  data.url,
                 '_blank',
               )
               .focus()

src/features/misc/sections/Overview.jsx

@@ -1,9 +1,9 @@
-import variables from 'config/variables';
-import { PureComponent } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { MdOutlineDragIndicator } from 'react-icons/md';
 import { sortableContainer, sortableElement } from '@muetab/react-sortable-hoc';
 import { toast } from 'react-toastify';
 
+import variables from 'config/variables';
 import Greeting from './overview_skeletons/Greeting';
 import Clock from './overview_skeletons/Clock';
 import Quote from './overview_skeletons/Quote';
@@ -30,53 +30,40 @@ const SortableItem = sortableElement(({ value }) => (
 ));
 
 const SortableContainer = sortableContainer(({ children }) => (
-  <ul className="sortablecontainer">{children}</ul>
+  <ul className="sortableContainer">{children}</ul>
 ));
 
-class Overview extends PureComponent {
-  constructor() {
-    super();
-    this.state = {
-      items: JSON.parse(localStorage.getItem('order')),
-      news: {
-        title: '',
-        date: '',
-        description: '',
-        link: '',
-        linkText: '',
-      },
-      newsDone: false,
-    };
-  }
+const Overview = () => {
+  const [items, setItems] = useState(() => JSON.parse(localStorage.getItem('order')) || ['greeting', 'time', 'quicklinks', 'quote', 'date', 'message']);
+  const [news, setNews] = useState({
+    title: '',
+    date: '',
+    description: '',
+    link: '',
+    linkText: '',
+  });
+  const [newsDone, setNewsDone] = useState(false);
+  const [loading, setLoading] = useState(true);
 
-  arrayMove(array, oldIndex, newIndex) {
+  const arrayMove = (array, oldIndex, newIndex) => {
     const result = Array.from(array);
     const [removed] = result.splice(oldIndex, 1);
     result.splice(newIndex, 0, removed);
-
     return result;
-  }
-
-  onSortEnd = ({ oldIndex, newIndex }) => {
-    this.setState({
-      items: this.arrayMove(this.state.items, oldIndex, newIndex),
-    });
   };
 
-  reset = () => {
-    localStorage.setItem(
-      'order',
-      JSON.stringify(['greeting', 'time', 'quicklinks', 'quote', 'date', 'message']),
-    );
-
-    this.setState({
-      items: JSON.parse(localStorage.getItem('order')),
-    });
+  const onSortEnd = ({ oldIndex, newIndex }) => {
+    setItems((prevItems) => arrayMove(prevItems, oldIndex, newIndex));
+  };
 
+  const reset = () => {
+    const defaultOrder = ['greeting', 'time', 'quicklinks', 'quote', 'date', 'message'];
+    localStorage.setItem('order', JSON.stringify(defaultOrder));
+    setItems(defaultOrder);
     toast(variables.getMessage('toasts.reset'));
   };
 
-  enabled = (setting) => {
+  const enabled = (setting) => {
     switch (setting) {
       case 'quicklinks':
         return localStorage.getItem('quicklinksenabled') === 'true';
@@ -85,7 +72,7 @@ class Overview extends PureComponent {
     }
   };
 
-  getTab = (value) => {
+  const getTab = (value) => {
     switch (value) {
       case 'greeting':
         return <Greeting />;
@@ -104,94 +91,81 @@ class Overview extends PureComponent {
     }
   };
 
-  async getNews() {
-    const data = await (await fetch(variables.constants.API_URL + '/news')).json();
-    data.date = new window.Date(data.date).toLocaleDateString(
-      variables.languagecode.replace('_', '-'),
-      {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-      },
-    );
+  const getNews = useCallback(async () => {
+    try {
+      const response = await fetch(`${variables.constants.API_URL}/news`);
+      const data = await response.json();
+      data.date = new window.Date(data.date).toLocaleDateString(
+        variables.languagecode.replace('_', '-'),
+        {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+        }
+      );
+      setNews(data);
+      setNewsDone(true);
+    } catch (error) {
+      console.error('Failed to fetch news:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
 
-    this.setState({
-      news: data,
-      newsDone: true,
-    });
-  }
+  useEffect(() => {
+    getNews();
+  }, [getNews]);
 
-  componentDidUpdate() {
-    localStorage.setItem('order', JSON.stringify(this.state.items));
+  useEffect(() => {
+    localStorage.setItem('order', JSON.stringify(items));
     variables.stats.postEvent('setting', 'Widget order');
     EventBus.emit('refresh', 'widgets');
-  }
+  }, [items]);
 
-  componentDidMount() {
-    this.getNews();
-  }
-
-  render() {
-    return (
-      <>
-        <span className="mainTitle">
-          {variables.getMessage('modals.main.marketplace.product.overview')}
-        </span>
-        {/*<span className="title">{variables.getMessage('modals.main.marketplace.product.overview')}</span>
-        <span className="link" onClick={this.reset}>
-          {variables.getMessage('modals.main.settings.buttons.reset')}
-    </span>*/}
-        <div className="overviewGrid">
-          <div>
-            <span className="title">{variables.getMessage('modals.welcome.buttons.preview')}</span>
-            <div className="tabPreview">
-              <div className="previewItem" style={{ maxWidth: '50%' }}>
-                {this.state.items.map((value, index) => {
-                  if (!this.enabled(value)) {
-                    return null;
-                  }
-
-                  return (
-                    <div className="previewItem" key={`item-${value}`} index={index}>
-                      {' '}
-                      {this.getTab(value)}
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-            {/*<div className="overviewNews">
-              <span className="title">{this.state.news.title}</span>
-              <span className="subtitle">{this.state.news.date}</span>
-              <span className="content">{this.state.news.description}</span>
-              <a className="link" href={this.state.news.link}>
-                {this.state.news.linkText}
-              </a>
-              </div>*/}
-          </div>
-          <div>
-            <span className="title">
-              {variables.getMessage('modals.main.settings.sections.order.title')}
-            </span>
-            <SortableContainer
-              onSortEnd={this.onSortEnd}
-              lockAxis="y"
-              lockToContainerEdges
-              disableAutoscroll
-            >
-              {this.state.items.map((value, index) => {
-                if (!this.enabled(value)) {
+  return (
+    <>
+      <span className="mainTitle">
+        {variables.getMessage('modals.main.marketplace.product.overview')}
+      </span>
+      <div className="overviewGrid">
+        <div>
+          <span className="title">{variables.getMessage('modals.welcome.buttons.preview')}</span>
+          <div className="tabPreview">
+            <div className="previewItem" style={{ maxWidth: '50%' }}>
+              {items.map((value, index) => {
+                if (!enabled(value)) {
                   return null;
                 }
-
-                return <SortableItem key={`item-${value}`} index={index} value={value} />;
+                return (
+                  <div className="previewItem" key={`item-${value}`} index={index}>
+                    {getTab(value)}
+                  </div>
+                );
               })}
-            </SortableContainer>
+            </div>
           </div>
         </div>
-      </>
-    );
-  }
-}
+        <div>
+          <span className="title">
+            {variables.getMessage('modals.main.settings.sections.order.title')}
+          </span>
+          <SortableContainer
+            onSortEnd={onSortEnd}
+            lockAxis="y"
+            lockToContainerEdges
+            disableAutoscroll
+          >
+            {items.map((value, index) => {
+              if (!enabled(value)) {
+                return null;
+              }
+              return <SortableItem key={`item-${value}`} index={index} value={value} />;
+            })}
+          </SortableContainer>
+        </div>
+      </div>
+    </>
+  );
+};
 
 export { Overview as default, Overview };

src/features/stats/api/stats.js

@@ -8,10 +8,11 @@ export default class Stats {
     newAchievement.forEach((achievement) => {
       if (achievement) {
         const { name } = getLocalisedAchievementData(achievement.id);
-        toast.success(
+        toast.info(
           `🏆 ${variables.getMessage('modals.main.settings.sections.stats.achievement_unlocked', { name: name })}`,
           {
             icon: false,
+            closeButton: false
           },
         );
       }

src/features/stats/options/StatsOptions.jsx

@@ -1,6 +1,5 @@
 /* eslint-disable array-callback-return */
-import variables from 'config/variables';
-import { PureComponent } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { MdShowChart, MdRestartAlt, MdDownload, MdAccessTime, MdLock } from 'react-icons/md';
 import { FaTrophy } from 'react-icons/fa';
 import { toast } from 'react-toastify';
@@ -11,202 +10,183 @@ import { Header, CustomActions } from 'components/Layout/Settings';
 import { ClearModal } from './ClearModal';
 
 import { saveFile } from 'utils/saveFile';
+import variables from 'config/variables';
 import {
   getLocalisedAchievementData,
-  achievements,
+  achievements as initialAchievements,
   checkAchievements,
 } from 'features/stats/api/achievements';
 
-class Stats extends PureComponent {
-  constructor() {
-    super();
-    this.state = {
-      stats: JSON.parse(localStorage.getItem('statsData')) || {},
-      achievements,
-      clearmodal: false,
-    };
-  }
+const Stats = () => {
+  const [stats, setStats] = useState(() => JSON.parse(localStorage.getItem('statsData')) || {});
+  const [achievements, setAchievements] = useState(initialAchievements);
+  const [clearmodal, setClearmodal] = useState(false);
 
-  updateAchievements() {
-    const achieved = checkAchievements(this.state.stats);
-    this.setState({
-      achievements: achieved,
-    });
-  }
+  const updateAchievements = useCallback(() => {
+    const achieved = checkAchievements(stats);
+    setAchievements(achieved);
+  }, [stats]);
 
-  getUnlockedCount() {
-    let count = 0;
-    this.state.achievements.forEach((achievement) => {
-      if (achievement.achieved) {
-        count++;
-      }
-    });
-    return count;
-  }
+  useEffect(() => {
+    updateAchievements();
+  }, [stats, updateAchievements]);
 
-  resetStats() {
-    localStorage.setItem('statsData', JSON.stringify({}));
-    localStorage.setItem('achievements', JSON.stringify(achievements));
-    this.setState({
-      stats: {},
-      achievements,
-      clearmodal: false,
-    });
+  const getUnlockedCount = useMemo(() => {
+    return achievements.filter(achievement => achievement.achieved).length;
+  }, [achievements]);
+
+  const resetStats = () => {
+    const emptyStats = {};
+    localStorage.setItem('statsData', JSON.stringify(emptyStats));
+    localStorage.setItem('achievements', JSON.stringify(initialAchievements));
+    setStats(emptyStats);
+    setClearmodal(false);
     toast(variables.getMessage('toasts.stats_reset'));
-    this.updateAchievements();
-    this.forceUpdate();
-  }
+    updateAchievements(); // Call updateAchievements to refresh achievements after reset
+  };
 
-  downloadStats() {
-    let date = new Date();
-    // Format the date as YYYY-MM-DD_HH-MM-SS
-    let formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}_${date.getHours().toString().padStart(2, '0')}-${date.getMinutes().toString().padStart(2, '0')}-${date.getSeconds().toString().padStart(2, '0')}`;
-    let filename = `mue_stats_${formattedDate}.json`;
-    saveFile(JSON.stringify(this.state.stats, null, 2), filename);
-  }
+  const downloadStats = () => {
+    const date = new Date();
+    const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}_${date.getHours().toString().padStart(2, '0')}-${date.getMinutes().toString().padStart(2, '0')}-${date.getSeconds().toString().padStart(2, '0')}`;
+    const filename = `mue_stats_${formattedDate}.json`;
+    saveFile(JSON.stringify(stats, null, 2), filename);
+  };
 
-  componentDidMount() {
-    this.updateAchievements();
-    this.forceUpdate();
-  }
-
-  render() {
-    const achievementElement = (key, id, achieved, timestamp) => {
-      const { name, description } = getLocalisedAchievementData(id);
-
-      return (
-        <div className="achievement" key={key}>
-          {achieved ? <FaTrophy className="trophy" /> : <MdLock className="trophyLocked" />}
-          <div className={'achievementContent' + (achieved ? ' achieved' : '')}>
-            {achieved ? (
-              timestamp !== undefined ? (
-                <span className="timestamp">
-                  <MdAccessTime /> {new Date(timestamp).toLocaleDateString()}
-                </span>
-              ) : null
-            ) : null}
-            <span className="achievementTitle">{name}</span>
-            <span className="subtitle">{achieved ? description : '?????'}</span>
-          </div>
-        </div>
-      );
-    };
-
-    const statsElement = (title, value) => {
-      return (
-        <div>
-          <span className="subtitle">{title}</span>
-          <span>{value}</span>
-        </div>
-      );
-    };
-
-    const STATS_SECTION = 'modals.main.settings.sections.stats';
+  const AchievementElement = ({ key, id, achieved, timestamp }) => {
+    const { name, description } = getLocalisedAchievementData(id);
 
     return (
-      <>
-        <Header title={variables.getMessage(`${STATS_SECTION}.title`)} report={false}>
-          <CustomActions>
-            <Button
-              type="settings"
-              onClick={() => this.downloadStats()}
-              icon={<MdDownload />}
-              label={variables.getMessage('widgets.background.download')}
-            />
-            <Button
-              type="settings"
-              onClick={() => this.setState({ clearmodal: true })}
-              icon={<MdRestartAlt />}
-              label={variables.getMessage('modals.main.settings.buttons.reset')}
-            />
-          </CustomActions>
-        </Header>
-        <Modal
-          closeTimeoutMS={100}
-          onRequestClose={() => this.setState({ clearmodal: false })}
-          isOpen={this.state.clearmodal}
-          className="Modal ClearModal mainModal"
-          overlayClassName="Overlay resetoverlay"
-          ariaHideApp={false}
-        >
-          <ClearModal
-            modalClose={() => this.setState({ clearmodal: false })}
-            resetStats={() => this.resetStats()}
-          />
-        </Modal>
-        <div className="stats">
-          <div className="statSection rightPanel">
-            <div className="statIcon">
-              <MdShowChart />
-            </div>
-            <div className="statGrid">
-              {statsElement(
-                variables.getMessage(`${STATS_SECTION}.sections.tabs_opened`),
-                this.state.stats['tabs-opened'] || 0,
-              )}
-              {statsElement(
-                variables.getMessage(`${STATS_SECTION}.sections.backgrounds_favourited`),
-                this.state.stats['background-favourite'] || 0,
-              )}
-              {statsElement(
-                variables.getMessage(`${STATS_SECTION}.sections.backgrounds_downloaded`),
-                this.state.stats.feature ? this.state.stats.feature['background-download'] || 0 : 0,
-              )}
-              {statsElement(
-                variables.getMessage(`${STATS_SECTION}.sections.quotes_favourited`),
-                this.state.stats.feature ? this.state.stats.feature['quoted-favourite'] || 0 : 0,
-              )}
-              {statsElement(
-                variables.getMessage(`${STATS_SECTION}.sections.quicklinks_added`),
-                this.state.stats.feature ? this.state.stats.feature['quicklink-add'] || 0 : 0,
-              )}
-              {statsElement(
-                variables.getMessage(`${STATS_SECTION}.sections.settings_changed`),
-                this.state.stats.setting ? Object.keys(this.state.stats.setting).length : 0,
-              )}
-              {statsElement(
-                variables.getMessage(`${STATS_SECTION}.sections.addons_installed`),
-                this.state.stats.marketplace && this.state.stats.marketplace['install']
-                  ? this.state.stats.marketplace['install'].length
-                  : 0,
-              )}
-            </div>
-          </div>
-          <div className="statSection leftPanel">
-            <span className="title">{variables.getMessage(`${STATS_SECTION}.achievements`)}</span>
-            <br />
-            <span className="subtitle">
-              {variables.getMessage(`${STATS_SECTION}.unlocked`, {
-                count: this.getUnlockedCount() + '/' + this.state.achievements.length,
-              })}
+      <div className="achievement" key={key}>
+        {achieved ? <FaTrophy className="trophy" /> : <MdLock className="trophyLocked" />}
+        <div className={'achievementContent' + (achieved ? ' achieved' : '')}>
+          {achieved && timestamp && (
+            <span className="timestamp">
+              <MdAccessTime /> {new Date(timestamp).toLocaleDateString()}
             </span>
+          )}
+          <span className="achievementTitle">{name}</span>
+          <span className="subtitle">{achieved ? description : '?????'}</span>
+        </div>
+      </div>
+    );
+  };
+
+  const StatsElement = ({ title, value }) => (
+    <div>
+      <span className="subtitle">{title}</span>
+      <span>{value}</span>
+    </div>
+  );
+
+  const STATS_SECTION = 'modals.main.settings.sections.stats';
+
+  return (
+    <>
+      <Header title={variables.getMessage(`${STATS_SECTION}.title`)} report={false}>
+        <CustomActions>
+          <Button
+            type="settings"
+            onClick={downloadStats}
+            icon={<MdDownload />}
+            label={variables.getMessage('widgets.background.download')}
+          />
+          <Button
+            type="settings"
+            onClick={() => setClearmodal(true)}
+            icon={<MdRestartAlt />}
+            label={variables.getMessage('modals.main.settings.buttons.reset')}
+          />
+        </CustomActions>
+      </Header>
+      <Modal
+        closeTimeoutMS={100}
+        onRequestClose={() => setClearmodal(false)}
+        isOpen={clearmodal}
+        className="Modal ClearModal mainModal"
+        overlayClassName="Overlay resetoverlay"
+        ariaHideApp={false}
+      >
+        <ClearModal
+          modalClose={() => setClearmodal(false)}
+          resetStats={resetStats}
+        />
+      </Modal>
+      <div className="stats">
+        <div className="statSection rightPanel">
+          <div className="statIcon">
+            <MdShowChart />
           </div>
-          <div className="achievements">
-            <div className="achievementsGrid">
-              {this.state.achievements.map((achievement, index) => {
-                if (achievement.achieved) {
-                  return achievementElement(
-                    index,
-                    achievement.id,
-                    achievement.achieved,
-                    achievement.timestamp,
-                  );
-                }
-              })}
-            </div>
-            <span className="title">{variables.getMessage(`${STATS_SECTION}.locked`)}</span>
-            <div className="achievementsGrid preferencesInactive">
-              {this.state.achievements.map((achievement, index) => {
-                if (!achievement.achieved) {
-                  return achievementElement(index, achievement.id, achievement.achieved);
-                }
-              })}
-            </div>
+          <div className="statGrid">
+            <StatsElement
+              title={variables.getMessage(`${STATS_SECTION}.sections.tabs_opened`)}
+              value={stats['tabs-opened'] || 0}
+            />
+            <StatsElement
+              title={variables.getMessage(`${STATS_SECTION}.sections.backgrounds_favourited`)}
+              value={stats['background-favourite'] || 0}
+            />
+            <StatsElement
+              title={variables.getMessage(`${STATS_SECTION}.sections.backgrounds_downloaded`)}
+              value={stats.feature ? stats.feature['background-download'] || 0 : 0}
+            />
+            <StatsElement
+              title={variables.getMessage(`${STATS_SECTION}.sections.quotes_favourited`)}
+              value={stats.feature ? stats.feature['quoted-favourite'] || 0 : 0}
+            />
+            <StatsElement
+              title={variables.getMessage(`${STATS_SECTION}.sections.quicklinks_added`)}
+              value={stats.feature ? stats.feature['quicklink-add'] || 0 : 0}
+            />
+            <StatsElement
+              title={variables.getMessage(`${STATS_SECTION}.sections.settings_changed`)}
+              value={stats.setting ? Object.keys(stats.setting).length : 0}
+            />
+            <StatsElement
+              title={variables.getMessage(`${STATS_SECTION}.sections.addons_installed`)}
+              value={stats.marketplace?.install?.length || 0}
+            />
           </div>
         </div>
-      </>
-    );
-  }
-}
+        <div className="statSection leftPanel">
+          <span className="title">{variables.getMessage(`${STATS_SECTION}.achievements`)}</span>
+          <br />
+          <span className="subtitle">
+            {variables.getMessage(`${STATS_SECTION}.unlocked`, { count: `${getUnlockedCount}/${achievements.length}` })}
+          </span>
+        </div>
+        <div className="achievements">
+          <div className="achievementsGrid">
+            {achievements.map((achievement, index) => {
+              if (achievement.achieved) {
+                return (
+                  <AchievementElement
+                    key={index}
+                    id={achievement.id}
+                    achieved={achievement.achieved}
+                    timestamp={achievement.timestamp}
+                  />
+                );
+              }
+            })}
+          </div>
+          <span className="title">{variables.getMessage(`${STATS_SECTION}.locked`)}</span>
+          <div className="achievementsGrid preferencesInactive">
+            {achievements.map((achievement, index) => {
+              if (!achievement.achieved) {
+                return (
+                  <AchievementElement
+                    key={index}
+                    id={achievement.id}
+                    achieved={achievement.achieved}
+                  />
+                );
+              }
+            })}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
 
 export { Stats as default, Stats };

src/features/weather/options/WeatherOptions.jsx

@@ -1,224 +1,202 @@
-import variables from 'config/variables';
-import { PureComponent } from 'react';
-
+import { useCallback } from 'react';
 import { MdAutoAwesome } from 'react-icons/md';
-
 import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
+import { useLocalStorageState } from 'utils/useLocalStorageState';
 import { Radio, Dropdown, Checkbox } from 'components/Form/Settings';
 import { TextField } from '@mui/material';
+import variables from 'config/variables';
 
-class WeatherOptions extends PureComponent {
-  constructor() {
-    super();
-    this.state = {
-      location: localStorage.getItem('location') || '',
-      windSpeed: localStorage.getItem('windspeed') !== 'true',
-    };
-  }
+const useWeatherSettings = () => {
+  const [location, setLocation] = useLocalStorageState('location', '');
+  const [windSpeed, setWindSpeed] = useLocalStorageState('windspeed', 'true');
 
-  componentDidUpdate() {
-    localStorage.setItem('location', this.state.location);
-  }
-
-  showReminder() {
+  const showReminder = useCallback(() => {
     document.querySelector('.reminder-info').style.display = 'flex';
     localStorage.setItem('showReminder', true);
-  }
+  }, []);
 
-  changeLocation(e) {
+  const changeLocation = (e) => {
     localStorage.removeItem('currentWeather');
-    this.setState({
-      location: e.target.value,
-    });
+    setLocation(e.target.value);
+    showReminder();
+  };
 
-    this.showReminder();
-  }
+  const getAutoLocation = useCallback(() => {
+    setLocation(variables.getMessage('modals.main.loading'));
 
-  render() {
-    const weatherType = localStorage.getItem('weatherType');
-    const WEATHER_SECTION = 'modals.main.settings.sections.weather';
+    navigator.geolocation.getCurrentPosition(
+      async (position) => {
+        const data = await (
+          await fetch(
+            `${variables.constants.API_URL}/gps?latitude=${position.coords.latitude}&longitude=${position.coords.longitude}`
+          )
+        ).json();
+        setLocation(data[0].name);
+        showReminder();
+      },
+      (error) => {
+        console.error(error);
+      },
+      {
+        enableHighAccuracy: true,
+      }
+    );
+  }, [setLocation, showReminder]);
 
-    const WidgetType = () => {
-      return (
-        <Row>
-          <Content title={variables.getMessage(`${WEATHER_SECTION}.widget_type`)} />
-          <Action>
-            <Dropdown
-              label={variables.getMessage('modals.main.settings.sections.time.type')}
-              name="weatherType"
-              category="weather"
-              onChange={() => this.forceUpdate()}
-              items={[
-                { value: '1', text: variables.getMessage(`${WEATHER_SECTION}.options.basic`) },
-                {
-                  value: '2',
-                  text: variables.getMessage(`${WEATHER_SECTION}.options.standard`),
-                },
-                {
-                  value: '3',
-                  text: variables.getMessage(`${WEATHER_SECTION}.options.expanded`),
-                },
-                { value: '4', text: variables.getMessage(`${WEATHER_SECTION}.options.custom`) },
-              ]}
-            />
-          </Action>
-        </Row>
-      );
-    };
+  return {
+    location,
+    windSpeed: windSpeed !== 'true',
+    setWindSpeed,
+    changeLocation,
+    getAutoLocation,
+  };
+};
 
-    const LocationSetting = () => {
-      const getAuto = () => {
-        this.setState({
-          location: variables.getMessage('modals.main.loading'),
-        });
+const WeatherOptions = () => {
+  const { location, windSpeed, setWindSpeed, changeLocation, getAutoLocation } = useWeatherSettings();
+  const weatherType = localStorage.getItem('weatherType');
+  const WEATHER_SECTION = 'modals.main.settings.sections.weather';
 
-        navigator.geolocation.getCurrentPosition(
-          async (position) => {
-            const data = await (
-              await fetch(
-                `${variables.constants.API_URL}/gps?latitude=${position.coords.latitude}&longitude=${position.coords.longitude}`,
-              )
-            ).json();
-            this.setState({
-              location: data[0].name,
-            });
+  const WidgetType = () => (
+    <Row>
+      <Content title={variables.getMessage(`${WEATHER_SECTION}.widget_type`)} />
+      <Action>
+        <Dropdown
+          label={variables.getMessage('modals.main.settings.sections.time.type')}
+          name="weatherType"
+          category="weather"
+          onChange={() => this.forceUpdate()}
+          items={[
+            { value: '1', text: variables.getMessage(`${WEATHER_SECTION}.options.basic`) },
+            { value: '2', text: variables.getMessage(`${WEATHER_SECTION}.options.standard`) },
+            { value: '3', text: variables.getMessage(`${WEATHER_SECTION}.options.expanded`) },
+            { value: '4', text: variables.getMessage(`${WEATHER_SECTION}.options.custom`) },
+          ]}
+        />
+      </Action>
+    </Row>
+  );
 
-            this.showReminder();
-          },
-          (error) => {
-            // firefox requires this 2nd function
-            console.error(error);
-          },
-          {
-            enableHighAccuracy: true,
-          },
-        );
-      };
-      return (
-        <Row>
-          <Content title={variables.getMessage(`${WEATHER_SECTION}.location`)} />
-          <Action>
-            <TextField
-              label={variables.getMessage(`${WEATHER_SECTION}.location`)}
-              value={this.state.location}
-              onChange={(e) => this.changeLocation(e)}
-              placeholder="London"
-              varient="outlined"
-              InputLabelProps={{ shrink: true }}
-            />
-            <span className="link" onClick={getAuto}>
-              <MdAutoAwesome />
-              {variables.getMessage(`${WEATHER_SECTION}.auto`)}
-            </span>
-          </Action>
-        </Row>
-      );
-    };
+  const LocationSetting = () => (
+    <Row>
+      <Content title={variables.getMessage(`${WEATHER_SECTION}.location`)} />
+      <Action>
+        <TextField
+          label={variables.getMessage(`${WEATHER_SECTION}.location`)}
+          value={location}
+          onChange={changeLocation}
+          placeholder="London"
+          variant="outlined"
+          InputLabelProps={{ shrink: true }}
+        />
+        <span className="link" onClick={getAutoLocation}>
+          <MdAutoAwesome />
+          {variables.getMessage(`${WEATHER_SECTION}.auto`)}
+        </span>
+      </Action>
+    </Row>
+  );
 
-    const TemperatureFormat = () => {
-      return (
-        <Row final={weatherType !== '4'}>
-          <Content title={variables.getMessage(`${WEATHER_SECTION}.temp_format.title`)} />
-          <Action>
-            <Radio
-              name="tempformat"
-              options={[
-                {
-                  name: variables.getMessage(`${WEATHER_SECTION}.temp_format.celsius`) + ' (°C)',
-                  value: 'celsius',
-                },
-                {
-                  name: variables.getMessage(`${WEATHER_SECTION}.temp_format.fahrenheit`) + ' (°F)',
-                  value: 'fahrenheit',
-                },
-                {
-                  name: variables.getMessage(`${WEATHER_SECTION}.temp_format.kelvin`) + ' (K)',
-                  value: 'kelvin',
-                },
-              ]}
-              category="weather"
-            />
-          </Action>
-        </Row>
-      );
-    };
+  const TemperatureFormat = () => (
+    <Row final={weatherType !== '4'}>
+      <Content title={variables.getMessage(`${WEATHER_SECTION}.temp_format.title`)} />
+      <Action>
+        <Radio
+          name="tempformat"
+          options={[
+            {
+              name: `${variables.getMessage(`${WEATHER_SECTION}.temp_format.celsius`)} (°C)`,
+              value: 'celsius',
+            },
+            {
+              name: `${variables.getMessage(`${WEATHER_SECTION}.temp_format.fahrenheit`)} (°F)`,
+              value: 'fahrenheit',
+            },
+            {
+              name: `${variables.getMessage(`${WEATHER_SECTION}.temp_format.kelvin`)} (K)`,
+              value: 'kelvin',
+            },
+          ]}
+          category="weather"
+        />
+      </Action>
+    </Row>
+  );
 
-    const CustomOptions = () => {
-      const weatherOptions = [
-        {
-          name: 'weatherdescription',
-          textKey: `${WEATHER_SECTION}.extra_info.show_description`,
-        },
-        {
-          name: 'cloudiness',
-          textKey: `${WEATHER_SECTION}.extra_info.cloudiness`,
-        },
-        { name: 'humidity', textKey: `${WEATHER_SECTION}.extra_info.humidity` },
-        {
-          name: 'visibility',
-          textKey: `${WEATHER_SECTION}.extra_info.visibility`,
-        },
-        {
-          name: 'windspeed',
-          textKey: `${WEATHER_SECTION}.extra_info.wind_speed`,
-          onChange: () =>
-            this.setState({ windSpeed: localStorage.getItem('windspeed') !== 'true' }),
-        },
-        {
-          name: 'windDirection',
-          textKey: `${WEATHER_SECTION}.extra_info.wind_direction`,
-          disabled: this.state.windSpeed,
-        },
-        {
-          name: 'atmosphericpressure',
-          textKey: `${WEATHER_SECTION}.extra_info.atmospheric_pressure`,
-        },
-      ];
-
-      return (
-        <Row final={true}>
-          <Content title={variables.getMessage(`${WEATHER_SECTION}.custom_settings`)} />
-          <Action>
-            {weatherOptions.map((item) => (
-              <Checkbox
-                key={item.name}
-                name={item.name}
-                text={variables.getMessage(item.textKey)}
-                category="weather"
-                onChange={item.onChange}
-                disabled={item.disabled}
-              />
-            ))}
-          </Action>
-        </Row>
-      );
-    };
+  const CustomOptions = () => {
+    const weatherOptions = [
+      {
+        name: 'weatherdescription',
+        textKey: `${WEATHER_SECTION}.extra_info.show_description`,
+      },
+      {
+        name: 'cloudiness',
+        textKey: `${WEATHER_SECTION}.extra_info.cloudiness`,
+      },
+      { name: 'humidity', textKey: `${WEATHER_SECTION}.extra_info.humidity` },
+      {
+        name: 'visibility',
+        textKey: `${WEATHER_SECTION}.extra_info.visibility`,
+      },
+      {
+        name: 'windspeed',
+        textKey: `${WEATHER_SECTION}.extra_info.wind_speed`,
+        onChange: () => setWindSpeed(localStorage.getItem('windspeed') !== 'true'),
+      },
+      {
+        name: 'windDirection',
+        textKey: `${WEATHER_SECTION}.extra_info.wind_direction`,
+        disabled: windSpeed,
+      },
+      {
+        name: 'atmosphericpressure',
+        textKey: `${WEATHER_SECTION}.extra_info.atmospheric_pressure`,
+      },
+    ];
 
     return (
-      <>
-        <Header
-          title={variables.getMessage(`${WEATHER_SECTION}.title`)}
-          setting="weatherEnabled"
-          category="widgets"
-          zoomSetting="zoomWeather"
-          zoomCategory="weather"
-          visibilityToggle={true}
-        />
-        <PreferencesWrapper
-          setting="weatherEnabled"
-          zoomSetting="zoomWeather"
-          zoomCategory="weather"
-          visibilityToggle={true}
-        >
-          <WidgetType />
-          {/* https://stackoverflow.com/a/65328486 when using inputs it may defocus so we do the {} instead of <> */}
-          {LocationSetting()}
-          <TemperatureFormat />
-          {weatherType === '4' && <CustomOptions />}
-        </PreferencesWrapper>
-      </>
+      <Row final={true}>
+        <Content title={variables.getMessage(`${WEATHER_SECTION}.custom_settings`)} />
+        <Action>
+          {weatherOptions.map((item) => (
+            <Checkbox
+              key={item.name}
+              name={item.name}
+              text={variables.getMessage(item.textKey)}
+              category="weather"
+              onChange={item.onChange}
+              disabled={item.disabled}
+            />
+          ))}
+        </Action>
+      </Row>
     );
-  }
-}
+  };
+
+  return (
+    <>
+      <Header
+        title={variables.getMessage(`${WEATHER_SECTION}.title`)}
+        setting="weatherEnabled"
+        category="widgets"
+        zoomSetting="zoomWeather"
+        zoomCategory="weather"
+        visibilityToggle={true}
+      />
+      <PreferencesWrapper
+        setting="weatherEnabled"
+        zoomSetting="zoomWeather"
+        zoomCategory="weather"
+        visibilityToggle={true}
+      >
+        <WidgetType />
+         {/* https://stackoverflow.com/a/65328486 when using inputs it may defocus so we do the {} instead of <> */}
+        {LocationSetting()}
+        <TemperatureFormat />
+        {weatherType === '4' && <CustomOptions />}
+      </PreferencesWrapper>
+    </>
+  );
+};
 
 export { WeatherOptions as default, WeatherOptions };

src/scss/_toast.scss

@@ -32,10 +32,10 @@
   @extend %basic;
 }
 
-.Toastify__toast--success {
+.Toastify__toast--info {
   @extend %basic;
 }
 
-.Toastify__progress-bar--success {
+.Toastify__progress-bar--info {
   background-color: gold !important;
 }

src/utils/useLocalStorageState.js

@@ -0,0 +1,11 @@
+import { useState, useEffect } from 'react';
+
+export const useLocalStorageState = (key, initialValue) => {
+  const [state, setState] = useState(() => localStorage.getItem(key) || initialValue);
+
+  useEffect(() => {
+    localStorage.setItem(key, state);
+  }, [key, state]);
+
+  return [state, setState];
+};