feat: stats tab (WIP)

src/components/modals/main/settings/sections/Stats.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import Switch from '../Switch';
+
+import EventBus from '../../../../../modules/helpers/eventbus';
+
+export default class Stats extends React.PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      stats: JSON.parse(localStorage.getItem('statsData')) || {}
+    };
+  }
+
+  componentDidMount() { 
+    EventBus.on('refresh', (data) => { 
+      if (data === 'stats') {
+        if (localStorage.getItem('stats') === 'false') {
+          localStorage.setItem('statsData', JSON.stringify({}));
+          return this.setState({
+            stats: JSON.parse(localStorage.getItem('statsData')) || {}
+          });
+        }
+        this.forceUpdate();
+      }
+    })
+  }
+
+  render() {
+    if (localStorage.getItem('stats') === 'false') {
+        return (
+          <>
+            <h2>Notice</h2>
+            <p>You need to enable usage data in order to use this feature</p>
+            <Switch name='stats' text='Usage Stats' category='stats'/>
+          </>
+        );
+    }
+
+    return (
+      <>
+        <h2>Stats</h2>
+        <p>Tabs opened: {this.state.stats['tabs-opened'] || 0}</p>
+        <p>Backgrounds favourited: {this.state.stats.feature ? this.state.stats.feature['background-favourite'] || 0 : 0}</p>
+        <p>Backgrounds downloaded: {this.state.stats.feature ? this.state.stats.feature['background-download'] || 0 : 0}</p>
+        <p>Quotes favourited: {this.state.stats.feature ? this.state.stats.feature['quoted-favourite'] || 0 : 0}</p>
+        <p>Settings changed: {this.state.stats.setting ? Object.keys(this.state.stats.setting).length : 0}</p>
+        <Switch name='stats' text='Usage Stats' category='stats'/>
+        <p>Turning this off will clear your statistics locally, but will not delete the anonymous data posted to umami.</p>
+      </>
+    );
+  }
+}

src/components/modals/main/tabs/Settings.jsx

@@ -12,6 +12,7 @@ import Order from '../settings/sections/Order';
 import Experimental from '../settings/sections/Experimental';
 import QuickLinks from '../settings/sections/QuickLinks';
 import Weather from '../settings/sections/Weather';
+import Stats from '../settings/sections/Stats';
 
 import Tabs from './backend/Tabs';
 
@@ -37,6 +38,7 @@ export default function Settings() {
         <div label={sections.order.title} name='order'><Order/></div>
         <div label={sections.language.title} name='language'><Language/></div>
         <div label={sections.advanced.title} name='advanced'><Advanced/></div>
+        <div label='Stats' name='stats'><Stats/></div>
         <div label={sections.experimental.title} name='experimental'><Experimental/></div>
         <div label={sections.changelog} name='changelog'><Changelog/></div>
         <div label={sections.about.title} name='about'><About/></div>

src/components/modals/main/tabs/backend/Tabs.jsx

@@ -15,7 +15,7 @@ export default class Tabs extends React.PureComponent {
 
   onClick = (tab, name) => {
     if (name !== this.state.currentName) {
-      window.stats.postEvent('tab', `Changed ${this.state.currentName} to ${name}`);
+      window.stats.postEvent('tab', `Opened ${name}`);
     }
 
     this.setState({