start refactor

src/components/Options.tsx

@@ -2,31 +2,24 @@ import React, { useEffect, useRef, useState } from 'react';
 import config, { SuccessOrFailType } from '../config/config';
 import { IS_CHROME } from '../utils';
 import apiKeyInvalid from '../utils/apiKey';
+import { getSettings, saveSettings, Settings } from '../utils/settings';
 import { logUserIn } from '../utils/user';
 import SitesList from './SitesList';
 
-interface State {
+interface State extends Settings {
   alertText: string;
   alertType: SuccessOrFailType;
-  apiKey: string;
-  apiUrl: string;
-  blacklist: string;
-  hostname: string;
   loading: boolean;
-  loggingStyle: string;
-  loggingType: string;
-  socialMediaSites: string[];
-  theme: string;
-  trackSocialMedia: boolean;
-  whitelist: string;
 }
+
 export default function Options(): JSX.Element {
   const [state, setState] = useState<State>({
     alertText: config.alert.success.text,
     alertType: config.alert.success.type,
+    allowList: [],
     apiKey: '',
     apiUrl: config.apiUrl,
-    blacklist: '',
+    denyList: [],
     hostname: '',
     loading: false,
     loggingStyle: config.loggingStyle,
@@ -34,45 +27,15 @@ export default function Options(): JSX.Element {
     socialMediaSites: config.socialMediaSites,
     theme: config.theme,
     trackSocialMedia: config.trackSocialMedia,
-    whitelist: '',
   });
 
   const loggingStyleRef = useRef(null);
 
   const restoreSettings = async (): Promise<void> => {
-    const items = await browser.storage.sync.get({
-      apiKey: config.apiKey,
-      apiUrl: config.apiUrl,
-      blacklist: '',
-      hostname: config.hostname,
-      loggingStyle: config.loggingStyle,
-      loggingType: config.loggingType,
-      socialMediaSites: config.socialMediaSites,
-      theme: config.theme,
-      trackSocialMedia: true,
-      whitelist: '',
-    });
-
-    // Handle prod accounts with old social media stored as string
-    if (typeof items.socialMediaSites === 'string') {
-      await browser.storage.sync.set({
-        socialMediaSites: items.socialMediaSites.split('\n'),
-      });
-      items.socialMediaSites = items.socialMediaSites.split('\n');
-    }
-
+    const settings = await getSettings();
     setState({
       ...state,
-      apiKey: items.apiKey as string,
-      apiUrl: items.apiUrl as string,
-      blacklist: items.blacklist as string,
-      hostname: items.hostname 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,
+      ...settings,
     });
   };
 
@@ -83,68 +46,60 @@ export default function Options(): JSX.Element {
   const handleSubmit = async () => {
     if (state.loading) return;
     setState({ ...state, loading: true });
-
-    const apiKey = state.apiKey;
-    const theme = state.theme;
-    const hostname = state.hostname;
-    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();
-    let apiUrl = state.apiUrl;
-
-    if (apiUrl.endsWith('/')) {
-      apiUrl = apiUrl.slice(0, -1);
+    if (state.apiUrl.endsWith('/')) {
+      state.apiUrl = state.apiUrl.slice(0, -1);
     }
-
-    // Sync options with google storage.
-    await browser.storage.sync.set({
-      apiKey,
-      apiUrl,
-      blacklist,
-      hostname,
-      loggingStyle,
-      loggingType,
-      socialMediaSites,
-      theme,
-      trackSocialMedia,
-      whitelist,
-    });
-
-    // Set state to be newly entered values.
-    setState({
-      ...state,
-      apiKey,
-      apiUrl,
-      blacklist,
-      hostname,
-      loggingStyle,
-      loggingType,
-      socialMediaSites,
-      theme,
-      trackSocialMedia,
-      whitelist,
+    await saveSettings({
+      allowList: state.allowList,
+      apiKey: state.apiKey,
+      apiUrl: state.apiUrl,
+      denyList: state.denyList,
+      hostname: state.hostname,
+      loggingStyle: state.loggingStyle,
+      loggingType: state.loggingType,
+      socialMediaSites: state.socialMediaSites,
+      theme: state.theme,
+      trackSocialMedia: state.trackSocialMedia,
     });
+    setState(state);
     await logUserIn(state.apiKey);
     if (IS_CHROME) {
       window.close();
     }
   };
 
-  const updateBlacklistState = (sites: string) => {
+  const updateDenyListState = (sites: string) => {
     setState({
       ...state,
-      blacklist: sites,
+      denyList: sites.trim().split('\n'),
     });
   };
 
-  const updateWhitelistState = (sites: string) => {
+  const updateAllowListState = (sites: string) => {
     setState({
       ...state,
-      whitelist: sites,
+      allowList: sites.trim().split('\n'),
+    });
+  };
+
+  const updateLoggingStyle = (style: string) => {
+    setState({
+      ...state,
+      loggingStyle: style === 'allow' ? 'allow' : 'deny',
+    });
+  };
+
+  const updateLoggingType = (type: string) => {
+    setState({
+      ...state,
+      loggingType: type === 'url' ? 'url' : 'domain',
+    });
+  };
+
+  const updateTheme = (theme: string) => {
+    setState({
+      ...state,
+      theme: theme === 'light' ? 'light' : 'dark',
     });
   };
 
@@ -153,24 +108,25 @@ export default function Options(): JSX.Element {
   };
 
   const loggingStyle = function () {
-    if (state.loggingStyle == 'blacklist') {
+    // TODO: rewrite SitesList to be structured inputs instead of textarea
+
+    if (state.loggingStyle == 'deny') {
       return (
         <SitesList
-          handleChange={updateBlacklistState}
-          label="Blacklist"
-          sites={state.blacklist}
+          handleChange={updateDenyListState}
+          label="Exclude"
+          sites={state.denyList.join('\n')}
           helpText="Sites that you don't want to show in your reports."
         />
       );
     }
-
     return (
       <SitesList
-        handleChange={updateWhitelistState}
-        label="Whitelist"
-        sites={state.whitelist}
+        handleChange={updateAllowListState}
+        label="Include"
+        sites={state.allowList.join('\n')}
         placeholder="http://google.com&#10;http://myproject.com/MyProject"
-        helpText="Sites that you want to show in your reports. You can assign URL to project by adding @@YourProject at the end of line."
+        helpText="Only track these sites. You can assign URL to project by adding @@YourProject at the end of line."
       />
     );
   };
@@ -206,10 +162,10 @@ export default function Options(): JSX.Element {
                 ref={loggingStyleRef}
                 className="form-control"
                 value={state.loggingStyle}
-                onChange={(e) => setState({ ...state, loggingStyle: e.target.value })}
+                onChange={(e) => updateLoggingStyle(e.target.value)}
               >
-                <option value="blacklist">All except blacklisted sites</option>
-                <option value="whitelist">Only whitelisted sites</option>
+                <option value="denyList">All except excluded sites</option>
+                <option value="allowList">Only allowed sites</option>
               </select>
             </div>
 
@@ -223,7 +179,7 @@ export default function Options(): JSX.Element {
                 id="loggingType"
                 className="form-control"
                 value={state.loggingType}
-                onChange={(e) => setState({ ...state, loggingType: e.target.value })}
+                onChange={(e) => updateLoggingType(e.target.value)}
               >
                 <option value="domain">Only the domain</option>
                 <option value="url">Entire URL</option>
@@ -238,7 +194,7 @@ export default function Options(): JSX.Element {
                 id="selectTheme"
                 className="form-control"
                 value={state.theme}
-                onChange={(e) => setState({ ...state, theme: e.target.value })}
+                onChange={(e) => updateTheme(e.target.value)}
               >
                 <option value="light">Light</option>
                 <option value="dark">Dark</option>