Merge pull request #163 from wakatime/sebas-social-media-toggle

chore: add social media toggle to track or not social sites
2023-02-08 00:27:16 -05:00
parent b6a10665d7 4023044286
commit 78e298c4e4
6 changed files with 127 additions and 1 deletions
--- a/assets/less/app.less
+++ b/assets/less/app.less
@@ -36,3 +36,13 @@ div#status {
    .box-shadow(inset 0 -2px 0 @brand-danger);
  }
 }
+
+.space-between {
+  display: flex;
+  justify-content: space-between;
+}
+
+.align-items-center {
+  display: flex;
+  align-items: center;
+}
--- a/src/components/Options.tsx
+++ b/src/components/Options.tsx
@@ -14,7 +14,9 @@ interface State {
  loading: boolean;
  loggingStyle: string;
  loggingType: string;
+  socialMediaSites: string;
  theme: string;
+  trackSocialMedia: boolean;
  whitelist: string;
 }
 export default function Options(): JSX.Element {
@@ -27,7 +29,9 @@ export default function Options(): JSX.Element {
    loading: false,
    loggingStyle: config.loggingStyle,
    loggingType: config.loggingType,
+    socialMediaSites: config.socialMediaSites,
    theme: config.theme,
+    trackSocialMedia: config.trackSocialMedia,
    whitelist: '',
  });

@@ -39,7 +43,9 @@ export default function Options(): JSX.Element {
      blacklist: '',
      loggingStyle: config.loggingStyle,
      loggingType: config.loggingType,
+      socialMediaSites: config.socialMediaSites,
      theme: config.theme,
+      trackSocialMedia: true,
      whitelist: '',
    });
    setState({
@@ -48,7 +54,9 @@ export default function Options(): JSX.Element {
      blacklist: items.blacklist as string,
      loggingStyle: items.loggingStyle as string,
      loggingType: items.loggingType as string,
+      socialMediaSites: items.socialMediaSites as string,
      theme: items.theme as string,
+      trackSocialMedia: items.trackSocialMedia as boolean,
      whitelist: items.whitelist as string,
    });
  };
@@ -73,6 +81,8 @@ export default function Options(): JSX.Element {
    const theme = state.theme;
    const loggingType = state.loggingType;
    const loggingStyle = state.loggingStyle;
+    const trackSocialMedia = state.trackSocialMedia;
+    const socialMediaSites = state.socialMediaSites;
    // Trimming blacklist and whitelist removes blank lines and spaces.
    const blacklist = state.blacklist.trim();
    const whitelist = state.whitelist.trim();
@@ -83,7 +93,9 @@ export default function Options(): JSX.Element {
      blacklist,
      loggingStyle,
      loggingType,
+      socialMediaSites,
      theme,
+      trackSocialMedia,
      whitelist,
    });

@@ -95,7 +107,9 @@ export default function Options(): JSX.Element {
      displayAlert: true,
      loggingStyle,
      loggingType,
+      socialMediaSites,
      theme,
+      trackSocialMedia,
      whitelist,
    });
    await logUserIn(state.apiKey);
@@ -234,6 +248,68 @@ export default function Options(): JSX.Element {
              </div>
            </div>

+            <div className="form-group row">
+              <div className="col-lg-10 col-lg-offset-2 space-between align-items-center">
+                <div
+                  onClick={() => setState({ ...state, trackSocialMedia: !state.trackSocialMedia })}
+                >
+                  <input type="checkbox" checked={state.trackSocialMedia} />
+                  <span>Track social media sites</span>
+                </div>
+                <button
+                  type="button"
+                  className="btn btn-primary btn-sm"
+                  data-toggle="modal"
+                  data-target="#socialSitesModal"
+                >
+                  Sites
+                </button>
+                <div
+                  className="modal fade"
+                  id="socialSitesModal"
+                  role="dialog"
+                  aria-labelledby="socialSitesModalLabel"
+                >
+                  <div className="modal-dialog" role="document">
+                    <div className="modal-content">
+                      <div className="modal-header">
+                        <button
+                          type="button"
+                          className="close"
+                          data-dismiss="modal"
+                          aria-label="Close"
+                        >
+                          <span aria-hidden="true">&times;</span>
+                        </button>
+                        <h4 className="modal-title" id="socialSitesModalLabel">
+                          Social Media Sites
+                        </h4>
+                      </div>
+                      <div className="modal-body">
+                        <SitesList
+                          handleChange={(sites: string) =>
+                            setState({
+                              ...state,
+                              socialMediaSites: sites,
+                            })
+                          }
+                          label="Social"
+                          sites={state.socialMediaSites}
+                          helpText="Sites that you don't want to show in your reports."
+                          rows={5}
+                        />
+                      </div>
+                      <div className="modal-footer">
+                        <button type="button" className="btn btn-primary" data-dismiss="modal">
+                          Close
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
            <div className="form-group">
              <div className="col-lg-10 col-lg-offset-2">
                <button
--- a/src/components/SitesList.tsx
+++ b/src/components/SitesList.tsx
@@ -5,6 +5,7 @@ type Props = {
  helpText: string;
  label: string;
  placeholder?: string;
+  rows?: number;
  sites: string;
 };

@@ -12,6 +13,7 @@ export default function SitesList({
  handleChange,
  label,
  placeholder,
+  rows,
  sites,
  helpText,
 }: Props): JSX.Element {
@@ -28,7 +30,7 @@ export default function SitesList({
      <div className="col-lg-10">
        <textarea
          className="form-control"
-          rows={3}
+          rows={rows ?? 3}
          onChange={textareaChange}
          placeholder={placeholder ?? 'http://google.com'}
          value={sites}
--- a/src/config/config.test.ts
+++ b/src/config/config.test.ts
@@ -33,12 +33,32 @@ describe('wakatime config', () => {
        },
        "currentUserApiUrl": "https://wakatime.com/api/v1/users/current",
        "detectionIntervalInSeconds": 60,
+        "devSites": "https://codepen.io/
+      https://www.codewars.com/
+      https://dev.to/
+      https://github.com/
+      https://www.hackerrank.com/
+      https://leetcode.com/
+      https://developer.mozilla.org/en-US/
+      https://stackoverflow.com/
+      https://www.udemy.com/
+      https://www.w3schools.com/",
        "heartbeatApiUrl": "https://wakatime.com/api/v1/users/current/heartbeats",
        "loggingEnabled": true,
        "loggingStyle": "blacklist",
        "loggingType": "domain",
        "logoutUserUrl": "https://wakatime.com/logout",
        "name": "WakaTime",
+        "socialMediaSites": "https://www.facebook.com/
+      https://www.instagram.com/
+      https://www.linkedin.com/
+      https://www.pinterest.com/
+      https://www.reddit.com/
+      https://www.snapchat.com/
+      https://www.tiktok.com/
+      https://twitter.com/
+      https://www.whatsapp.com/
+      https://www.youtube.com/",
        "states": [
          "allGood",
          "notLogging",
@@ -55,6 +75,7 @@ describe('wakatime config', () => {
          "notSignedIn": "Not signed In",
          "whitelisted": "This URL is not on your whitelist",
        },
+        "trackSocialMedia": true,
        "version": "test-version",
      }
    `);
--- a/src/config/config.ts
+++ b/src/config/config.ts
@@ -64,6 +64,8 @@ export interface Config {
   * no activity in the browser for x second
   */
  detectionIntervalInSeconds: number;
+
+  devSites: string;
  /**
   * Url to which to send the heartbeat
   */
@@ -82,6 +84,7 @@ export interface Config {
   * Extension name
   */
  name: string;
+  socialMediaSites: string;
  states: ApiStates[];
  /**
   * Get stats from the wakatime api
@@ -92,6 +95,7 @@ export interface Config {
   */
  theme: 'light';
  tooltips: Tooltips;
+  trackSocialMedia: boolean;
  /**
   * Version of the extension
   */
@@ -124,6 +128,9 @@ const config: Config = {

  detectionIntervalInSeconds: 60,

+  devSites:
+    'https://codepen.io/\nhttps://www.codewars.com/\nhttps://dev.to/\nhttps://github.com/\nhttps://www.hackerrank.com/\nhttps://leetcode.com/\nhttps://developer.mozilla.org/en-US/\nhttps://stackoverflow.com/\nhttps://www.udemy.com/\nhttps://www.w3schools.com/',
+
  heartbeatApiUrl:
    process.env.HEART_BEAT_API_URL ?? 'https://wakatime.com/api/v1/users/current/heartbeats',

@@ -137,6 +144,8 @@ const config: Config = {

  name: 'WakaTime',

+  socialMediaSites: `https://www.facebook.com/\nhttps://www.instagram.com/\nhttps://www.linkedin.com/\nhttps://www.pinterest.com/\nhttps://www.reddit.com/\nhttps://www.snapchat.com/\nhttps://www.tiktok.com/\nhttps://twitter.com/\nhttps://www.whatsapp.com/\nhttps://www.youtube.com/`,
+
  states: ['allGood', 'notLogging', 'notSignedIn', 'blacklisted', 'whitelisted'],

  summariesApiUrl:
@@ -151,6 +160,7 @@ const config: Config = {
    notSignedIn: 'Not signed In',
    whitelisted: 'This URL is not on your whitelist',
  },
+  trackSocialMedia: true,

  version: browser.runtime.getManifest().version,
 };
--- a/src/core/WakaTimeCore.ts
+++ b/src/core/WakaTimeCore.ts
@@ -68,6 +68,8 @@ class WakaTimeCore {
      blacklist: '',
      loggingEnabled: config.loggingEnabled,
      loggingStyle: config.loggingStyle,
+      socialMediaSites: config.socialMediaSites,
+      trackSocialMedia: config.trackSocialMedia,
      whitelist: '',
    });
    if (items.loggingEnabled === true) {
@@ -82,6 +84,11 @@ class WakaTimeCore {

        const currentActiveTab = tabs[0];

+        if (!items.trackSocialMedia) {
+          if (contains(currentActiveTab.url as string, items.socialMediaSites as string)) {
+            return changeExtensionState('blacklisted');
+          }
+        }
        if (items.loggingStyle == 'blacklist') {
          if (!contains(currentActiveTab.url as string, items.blacklist as string)) {
            await this.sendHeartbeat(