refactor: overview & stats to functional components

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 };