Fix: Modal buttons

Co-authored-by: David Ralph <me@davidcralph.co.uk>

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

@@ -0,0 +1,50 @@
+import { achievements } from './index';
+
+export function checkAchievements(stats) {
+  achievements.forEach((achievement) => {
+    switch (achievement.condition.type) {
+      case 'tabsOpened':
+        if (stats['tabs-opened'] >= achievement.condition.amount) {
+          achievement.achieved = true;
+        }
+        break;
+      case 'addonInstall':
+        if (stats.marketplace) {
+          if (stats.marketplace['install'] >= achievement.condition.amount) {
+            achievement.achieved = true;
+          }
+        }
+        break;
+      default:
+        break;
+    }
+  });
+
+  return achievements;
+}
+
+export function newAchievements(stats) {
+  // calculate new achievements
+  const oldAchievements = JSON.parse(localStorage.getItem('achievements')) || [];
+  const checkedAchievements = checkAchievements(stats);
+  const newAchievements = [];
+
+  checkedAchievements.forEach((achievement) => {
+    if (achievement.achieved && !oldAchievements.includes(achievement.id)) {
+      newAchievements.push(achievement);
+    }
+  });
+
+  // add timestamp to new achievements
+  newAchievements.forEach((achievement) => {
+    achievement.timestamp = Date.now();
+  });
+
+  // save new achievements to local storage
+  localStorage.setItem(
+    'achievements',
+    JSON.stringify([...oldAchievements, ...newAchievements.map((achievement) => achievement.id)]),
+  );
+
+  return newAchievements;
+}

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

@@ -0,0 +1,48 @@
+import variables from 'config/variables';
+
+import de_DE from 'i18n/locales/achievements/de_DE.json';
+import en_GB from 'i18n/locales/achievements/en_GB.json';
+import en_US from 'i18n/locales/achievements/en_US.json';
+import es from 'i18n/locales/achievements/es.json';
+import fr from 'i18n/locales/achievements/fr.json';
+import nl from 'i18n/locales/achievements/nl.json';
+import no from 'i18n/locales/achievements/no.json';
+import ru from 'i18n/locales/achievements/ru.json';
+import zh_CN from 'i18n/locales/achievements/zh_CN.json';
+import id_ID from 'i18n/locales/achievements/id_ID.json';
+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 { checkAchievements, newAchievements } from './condition';
+
+const translations = {
+  de_DE,
+  en_GB,
+  en_US,
+  es,
+  fr,
+  nl,
+  no,
+  ru,
+  zh_CN,
+  id_ID,
+  tr_TR,
+  bn,
+  pt_BR,
+};
+
+// todo: clean this up and condition.js too
+function getLocalisedAchievementData(id) {
+  const localised = translations[variables.languagecode][id] ||
+    translations.en_GB[id] || { name: id, description: '' };
+
+  return {
+    name: localised.name,
+    description: localised.description,
+  };
+}
+
+export { achievements, checkAchievements, newAchievements, getLocalisedAchievementData };

src/features/stats/api/stats.js

@@ -0,0 +1,55 @@
+import { newAchievements, getLocalisedAchievementData } from './achievements';
+import { toast } from 'react-toastify';
+
+export default class Stats {
+  static async achievementTrigger(stats) {
+    const newAchievement = newAchievements(stats);
+    newAchievement.forEach((achievement) => {
+      if (achievement) {
+        const { name } = getLocalisedAchievementData(achievement.id);
+        toast.success(`Achievement Unlocked: ${name}`);
+      }
+    });
+  }
+
+  /**
+   * It takes two arguments, a type and a name, and then it increments the value of the name in the type
+   * object in localStorage
+   * @param type - The type of event you want to track. This can be anything you want, but I recommend
+   * using something like "click" or "hover"
+   * @param name - The name of the event.
+   */
+  static async postEvent(type, name) {
+    const value = name.toLowerCase().replaceAll(' ', '-');
+
+    const data = JSON.parse(localStorage.getItem('statsData'));
+    // tl;dr this creates the objects if they don't exist
+    // this really needs a cleanup at some point
+    if (!data[type] || !data[type][value]) {
+      if (!data[type]) {
+        data[type] = {};
+      }
+
+      if (!data[type][value]) {
+        data[type][value] = 1;
+      }
+    } else {
+      data[type][value] = data[type][value] + 1;
+    }
+    localStorage.setItem('statsData', JSON.stringify(data));
+    this.achievementTrigger(data);
+  }
+
+  /**
+   * It increments the value of the key 'tabs-opened' in the object stored in localStorage by 1.
+   */
+  static async tabLoad() {
+    const data = JSON.parse(localStorage.getItem('statsData'));
+    data['tabs-opened'] = data['tabs-opened'] + 1 || 1;
+    localStorage.setItem('statsData', JSON.stringify(data));
+    this.achievementTrigger(data);
+    /*toast.success(`Achievement Unlocked: Test`, {
+      icon: '🚀',
+    });*/
+  }
+}

src/features/stats/index.jsx

@@ -0,0 +1 @@
+export * from './options';

src/features/stats/options/ClearModal.jsx

@@ -0,0 +1,47 @@
+import { memo } from 'react';
+import variables from 'config/variables';
+import { MdClose, MdRestartAlt } from 'react-icons/md';
+import { Tooltip, Button } from 'components/Elements';
+
+function ClearModal({ modalClose, resetStats }) {
+  return (
+    <div className="smallModal">
+      <div className="shareHeader">
+        <span className="title">
+          {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.title')}
+        </span>
+        <Tooltip
+          title={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
+        >
+          <div className="close" onClick={modalClose}>
+            <MdClose />
+          </div>
+        </Tooltip>
+      </div>
+      <span className="title">
+        {variables.getMessage('modals.main.settings.sections.stats.clear_modal.question')}
+      </span>
+      <span className="subtitle">
+        {variables.getMessage('modals.main.settings.sections.stats.clear_modal.information')}
+      </span>
+      <div className="resetFooter">
+        <Button
+          type="secondary"
+          onClick={modalClose}
+          icon={<MdClose />}
+          label={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
+        />
+        <Button
+          type="settings"
+          onClick={() => resetStats()}
+          icon={<MdRestartAlt />}
+          label={variables.getMessage('modals.main.settings.buttons.reset')}
+        />
+      </div>
+    </div>
+  );
+}
+
+const MemoizedClearModal = memo(ClearModal);
+
+export { MemoizedClearModal as default, MemoizedClearModal as ClearModal };

src/features/stats/options/StatsOptions.jsx

@@ -0,0 +1,210 @@
+/* eslint-disable array-callback-return */
+import variables from 'config/variables';
+import { PureComponent } from 'react';
+import { MdShowChart, MdRestartAlt, MdDownload, MdAccessTime, MdLock } from 'react-icons/md';
+import { FaTrophy } from 'react-icons/fa';
+import { toast } from 'react-toastify';
+import Modal from 'react-modal';
+
+import { Button } from 'components/Elements';
+import { Header, CustomActions } from 'components/Layout/Settings';
+import { ClearModal } from './ClearModal';
+
+import { saveFile } from 'utils/saveFile';
+import {
+  getLocalisedAchievementData,
+  achievements,
+  checkAchievements,
+} from 'features/stats/api/achievements';
+
+class Stats extends PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      stats: JSON.parse(localStorage.getItem('statsData')) || {},
+      achievements,
+      clearmodal: false,
+    };
+  }
+
+  updateAchievements() {
+    const achieved = checkAchievements(this.state.stats);
+    this.setState({
+      achievements: achieved,
+    });
+  }
+
+  getUnlockedCount() {
+    let count = 0;
+    this.state.achievements.forEach((achievement) => {
+      if (achievement.achieved) {
+        count++;
+      }
+    });
+    return count;
+  }
+
+  resetStats() {
+    localStorage.setItem('statsData', JSON.stringify({}));
+    localStorage.setItem('achievements', JSON.stringify(achievements));
+    this.setState({
+      stats: {},
+      achievements,
+      clearmodal: false,
+    });
+    toast(variables.getMessage('toasts.stats_reset'));
+    this.updateAchievements();
+    this.forceUpdate();
+  }
+
+  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);
+  }
+
+  componentDidMount() {
+    this.updateAchievements();
+    this.forceUpdate();
+  }
+
+  render() {
+    const achievementElement = (key, id, achieved, timestamp) => {
+      const { name, description } = getLocalisedAchievementData(id);
+      console.log(timestamp);
+
+      return (
+        <div className="achievement" key={key}>
+          {achieved ? <FaTrophy className="trophy" /> : <MdLock className="trophyLocked" />}
+          <div className={'achievementContent' + (achieved ? ' achieved' : '')}>
+            {achieved ? (
+              <span className="timestamp">
+                <MdAccessTime /> {new Date(timestamp).toLocaleDateString()}
+              </span>
+            ) : 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';
+
+    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'] : 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,
+              })}
+            </span>
+          </div>
+          <div className="achievements">
+            <div className="achievementsGrid">
+              {this.state.achievements.map((achievement, index) => {
+                console.log(achievement);
+                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>
+        </div>
+      </>
+    );
+  }
+}
+
+export { Stats as default, Stats };

src/features/stats/options/index.jsx

@@ -0,0 +1 @@
+export * from './StatsOptions';