chore: add social media toggle to track or not social sites

assets/less/app.less

@@ -36,3 +36,8 @@ div#status {
     .box-shadow(inset 0 -2px 0 @brand-danger);
   }
 }
+
+.space-between {
+  display: flex;
+  justify-content: space-between;
+}

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">
+                <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"
+                  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

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}

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",
       }
     `);

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

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(