chore: Change dev and social sites config and option from string to list of strings

src/components/Options.tsx

@@ -16,7 +16,7 @@ interface State {
   loading: boolean;
   loggingStyle: string;
   loggingType: string;
-  socialMediaSites: string;
+  socialMediaSites: string[];
   theme: string;
   trackSocialMedia: boolean;
   whitelist: string;
@@ -62,7 +62,7 @@ export default function Options(): JSX.Element {
       hostname: items.hostname as string,
       loggingStyle: items.loggingStyle as string,
       loggingType: items.loggingType as string,
-      socialMediaSites: items.socialMediaSites as string,
+      socialMediaSites: items.socialMediaSites as string[],
       theme: items.theme as string,
       trackSocialMedia: items.trackSocialMedia as boolean,
       whitelist: items.whitelist as string,
@@ -336,14 +336,14 @@ export default function Options(): JSX.Element {
                       </div>
                       <div className="modal-body">
                         <SitesList
-                          handleChange={(sites: string) =>
+                          handleChange={(sites: string) => {
                             setState({
                               ...state,
-                              socialMediaSites: sites,
-                            })
-                          }
+                              socialMediaSites: sites.split('\n'),
+                            });
+                          }}
                           label="Social"
-                          sites={state.socialMediaSites}
+                          sites={state.socialMediaSites.join('\n')}
                           helpText="Sites that you don't want to show in your reports."
                           rows={5}
                         />

src/config/config.test.ts

@@ -34,16 +34,18 @@ describe('wakatime config', () => {
         },
         "currentUserApiEndPoint": "/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/",
+        "devSites": [
+          "codepen.io",
+          "codewars.com",
+          "dev.to",
+          "github.com",
+          "hackerrank.com",
+          "leetcode.com",
+          "developer.mozilla.org",
+          "stackoverflow.com",
+          "udemy.com",
+          "w3schools.com",
+        ],
         "heartbeatApiEndPoint": "/users/current/heartbeats",
         "hostname": "",
         "loggingEnabled": true,
@@ -51,16 +53,18 @@ describe('wakatime config', () => {
         "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/",
+        "socialMediaSites": [
+          "facebook.com",
+          "instagram.com",
+          "linkedin.com",
+          "pinterest.com",
+          "reddit.com",
+          "snapchat.com",
+          "tiktok.com",
+          "twitter.com",
+          "whatsapp.com",
+          "youtube.com",
+        ],
         "states": [
           "allGood",
           "notLogging",

src/config/config.ts

@@ -66,7 +66,7 @@ export interface Config {
    */
   detectionIntervalInSeconds: number;
 
-  devSites: string;
+  devSites: string[];
   /**
    * Url to which to send the heartbeat
    */
@@ -87,7 +87,7 @@ export interface Config {
    * Extension name
    */
   name: string;
-  socialMediaSites: string;
+  socialMediaSites: string[];
   states: ApiStates[];
   /**
    * Get stats from the wakatime api
@@ -132,8 +132,18 @@ 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/',
+  devSites: [
+    'codepen.io',
+    'codewars.com',
+    'dev.to',
+    'github.com',
+    'hackerrank.com',
+    'leetcode.com',
+    'developer.mozilla.org',
+    'stackoverflow.com',
+    'udemy.com',
+    'w3schools.com',
+  ],
 
   heartbeatApiEndPoint: process.env.HEARTBEAT_API_URL ?? '/users/current/heartbeats',
 
@@ -149,7 +159,18 @@ 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/`,
+  socialMediaSites: [
+    'facebook.com',
+    'instagram.com',
+    'linkedin.com',
+    'pinterest.com',
+    'reddit.com',
+    'snapchat.com',
+    'tiktok.com',
+    'twitter.com',
+    'whatsapp.com',
+    'youtube.com',
+  ],
 
   states: ['allGood', 'notLogging', 'notSignedIn', 'blacklisted', 'whitelisted'],
 

src/core/WakaTimeCore.ts

@@ -12,7 +12,7 @@ import { IS_FIREFOX, generateProjectFromDevSites } from '../utils';
 import { getApiKey } from '../utils/apiKey';
 import changeExtensionState from '../utils/changeExtensionState';
 import contains from '../utils/contains';
-import getDomainFromUrl from '../utils/getDomainFromUrl';
+import getDomainFromUrl, { getDomainFromUrlWithoutProtocol } from '../utils/getDomainFromUrl';
 
 class WakaTimeCore {
   tabsWithDevtoolsOpen: Tabs.Tab[];
@@ -149,8 +149,9 @@ class WakaTimeCore {
         url = document.URL;
       }
 
+      const hostname = getDomainFromUrlWithoutProtocol(url).replace('www.', '');
       if (!items.trackSocialMedia) {
-        if (contains(url, items.socialMediaSites as string)) {
+        if ((items.socialMediaSites as string[]).includes(hostname)) {
           return changeExtensionState('blacklisted');
         }
       }

src/utils/getDomainFromUrl.ts

@@ -6,3 +6,12 @@ export default function getDomainFromUrl(url: string): string {
 
   return parts[0] + '//' + parts[2];
 }
+
+/**
+ * Returns domain from given URL.
+ */
+export function getDomainFromUrlWithoutProtocol(url: string): string {
+  const parts = url.split('/');
+
+  return parts[2];
+}