Merge pull request #578 from liyasthomas/refactor/lint

Refactor/lint

assets/css/styles.scss

@@ -22,13 +22,11 @@ $responsiveWidth: 768px;
 ::-webkit-scrollbar {
   width: 4px;
   height: 4px;
-  border-radius: 4px;
+  background-color: var(--bg-dark-color);
-  background-color: var(--bg-light-color);
 }
 
 ::-webkit-scrollbar-thumb {
   background-color: var(--fg-light-color);
-  border-radius: 8px;
 
   &:hover {
     background-color: var(--fg-color);
@@ -62,7 +60,6 @@ body {
   scroll-behavior: smooth;
 }
 
-// Make theme transition smoother.
 body.afterLoad {
   transition: background-color 0.2s ease-in-out;
 }
@@ -76,6 +73,10 @@ a {
   color: inherit;
   text-decoration: none;
   transition: all 0.2s ease-in-out;
+
+  &.link {
+    color: var(--ac-color);
+  }
 }
 
 header,
@@ -146,7 +147,8 @@ footer {
   z-index: 1;
   height: 100vh;
   padding: 0 8px;
-  background-color: var(--bg-light-color);
+  background-color: var(--bg-dark-color);
+  transition: all 0.2s ease-in-out;
 }
 
 .main {
@@ -186,7 +188,6 @@ nav.primary-nav {
     color: var(--fg-light-color);
     fill: var(--fg-light-color);
     margin: 8px 0;
-    transition: all 0.2s ease-in-out;
 
     &:hover {
       color: var(--fg-color);
@@ -422,7 +423,6 @@ button {
     color: var(--act-color);
     fill: var(--act-color);
     box-shadow: inset 0 0 0 2px var(--fg-color);
-    transition: all 0.2s ease-in-out;
   }
 
   &.icon {
@@ -437,7 +437,6 @@ button {
       color: var(--fg-color);
       fill: var(--fg-color);
       box-shadow: none;
-      transition: all 0.2s ease-in-out;
     }
   }
 
@@ -472,7 +471,6 @@ button {
 fieldset {
   margin: 16px 0;
   border-radius: 16px;
-  transition: all 0.2s ease-in-out;
   background-color: var(--bg-dark-color);
 }
 
@@ -565,7 +563,6 @@ code {
   &:not([readonly]):not(.ace_editor):active,
   &:not([readonly]):not(.ace_editor):focus {
     box-shadow: inset 0 0 0 2px var(--fg-light-color);
-    transition: all 0.2s ease-in-out;
   }
 }
 
@@ -576,7 +573,6 @@ code {
   &:active,
   &:focus {
     box-shadow: inset 0 0 0 2px var(--fg-light-color);
-    transition: all 0.2s ease-in-out;
   }
 }
 
@@ -884,18 +880,19 @@ input[type="radio"]:checked + label + .tab {
     padding: 0;
     width: 100%;
     background-color: var(--bg-color);
-    transition: all 0.2s ease-in-out;
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.45);
   }
 
   nav.primary-nav {
     flex-flow: row nowrap;
     overflow: auto;
-    justify-content: space-around;
+    justify-content: space-between;
+    background-color: var(--bg-dark-color);
 
     a {
       background-color: transparent;
       margin: 8px;
+      flex: 1;
 
       &.nuxt-link-exact-active {
         background-color: transparent;

components/settings/swatch.vue

@@ -20,6 +20,7 @@
   border-radius: 100%;
   border: 3px solid var(--bg-dark-color);
   cursor: pointer;
+  transition: all 0.2s ease-in-out;
 
   &.fg {
     color: var(--act-color);

functions/headers.js

@@ -121,4 +121,4 @@ export const commonHeaders = [
   "X-Requested-With",
   "X-Robots-Tag",
   "X-UA-Compatible"
-]
+];

functions/network.js

@@ -1,16 +1,17 @@
 import AxiosStrategy from "./strategies/AxiosStrategy";
 import ExtensionStrategy from "./strategies/ExtensionStrategy";
 import FirefoxStrategy from "./strategies/FirefoxStrategy";
-import ChromeStrategy, { hasChromeExtensionInstalled } from "./strategies/ChromeStrategy";
+import ChromeStrategy, {
+  hasChromeExtensionInstalled
+} from "./strategies/ChromeStrategy";
 
-const isExtensionsAllowed = ({ state }) => {
+const isExtensionsAllowed = ({ state }) =>
-  return typeof state.postwoman.settings.EXTENSIONS_ENABLED === 'undefined'
+  typeof state.postwoman.settings.EXTENSIONS_ENABLED === "undefined" ||
-    || state.postwoman.settings.EXTENSIONS_ENABLED;
+  state.postwoman.settings.EXTENSIONS_ENABLED;
-}
 
 const runAppropriateStrategy = (req, store) => {
   if (isExtensionsAllowed(store)) {
-    if (typeof window.__POSTWOMAN_EXTENSION_HOOK__ !== 'undefined') {
+    if (typeof window.__POSTWOMAN_EXTENSION_HOOK__ !== "undefined") {
       return ExtensionStrategy(req, store);
     }
 
@@ -19,7 +20,7 @@ const runAppropriateStrategy = (req, store) => {
     // Chrome Provides a chrome object for scripts to access
     // Check its availability to say whether you are in Google Chrome
     if (window.chrome && hasChromeExtensionInstalled()) {
-        return ChromeStrategy(req, store);
+      return ChromeStrategy(req, store);
     }
     // The firefox plugin injects a function to send requests through it
     // If that is available, then we can use the FirefoxStrategy
@@ -29,10 +30,11 @@ const runAppropriateStrategy = (req, store) => {
   }
 
   return AxiosStrategy(req, store);
-}
+};
 
 const sendNetworkRequest = (req, store) =>
-  runAppropriateStrategy(req, store)
+  runAppropriateStrategy(req, store).finally(() =>
-    .finally(() => window.$nuxt.$loading.finish());
+    window.$nuxt.$loading.finish()
+  );
 
 export { sendNetworkRequest };

functions/strategies/ChromeStrategy.js

@@ -3,47 +3,54 @@ const EXTENSION_ID = "amknoiejhlmhancpahfcfcfhllgkpbld";
 // Check if the Chrome Extension is present
 // The Chrome extension injects an empty span to help detection.
 // Also check for the presence of window.chrome object to confirm smooth operations
-export const hasChromeExtensionInstalled = () => {
+export const hasChromeExtensionInstalled = () =>
-  return document.getElementById("chromePWExtensionDetect") !== null;
+  document.getElementById("chromePWExtensionDetect") !== null;
-}
 
-const chromeWithoutProxy = (req, _store) => new Promise((resolve, reject) => {
+const chromeWithoutProxy = (req, _store) =>
-  chrome.runtime.sendMessage(
+  new Promise((resolve, reject) => {
-    EXTENSION_ID, {
+    chrome.runtime.sendMessage(
-      messageType: "send-req",
+      EXTENSION_ID,
-      data: {
+      {
-        config: req
+        messageType: "send-req",
-      }
+        data: {
-    }, (message) => {
+          config: req
-      if (message.data.error) {
+        }
-        reject(message.data.error);
+      },
-      } else {
+      ({ data }) => {
-        resolve(message.data.response);
+        if (data.error) {
-      }
+          reject(data.error);
-    }
+        } else {
-  );
+          resolve(data.response);
-});
-
-const chromeWithProxy = (req, { state }) => new Promise((resolve, reject) => {
-  chrome.runtime.sendMessage(
-    EXTENSION_ID, {
-      messageType: "send-req",
-      data: {
-        config: {
-          method: "post",
-          url: state.postwoman.settings.PROXY_URL || "https://postwoman.apollotv.xyz/",
-          data: req
         }
       }
-    }, (message) => {
+    );
-      if (message.data.error) {
+  });
-        reject(error);
+
-      } else {
+const chromeWithProxy = (req, { state }) =>
-        resolve(message.data.response.data);
+  new Promise((resolve, reject) => {
+    chrome.runtime.sendMessage(
+      EXTENSION_ID,
+      {
+        messageType: "send-req",
+        data: {
+          config: {
+            method: "post",
+            url:
+              state.postwoman.settings.PROXY_URL ||
+              "https://postwoman.apollotv.xyz/",
+            data: req
+          }
+        }
+      },
+      ({ data }) => {
+        if (data.error) {
+          reject(error);
+        } else {
+          resolve(data.response.data);
+        }
       }
-    }
+    );
-  )
+  });
-});
 
 const chromeStrategy = (req, store) => {
   if (store.state.postwoman.settings.PROXY_ENABLED) {
@@ -51,6 +58,6 @@ const chromeStrategy = (req, store) => {
   } else {
     return chromeWithoutProxy(req, store);
   }
-}
+};
 
 export default chromeStrategy;

functions/strategies/ExtensionStrategy.js

@@ -1,7 +1,8 @@
 const extensionWithProxy = async (req, { state }) => {
   const { data } = await window.__POSTWOMAN_EXTENSION_HOOK__.sendRequest({
     method: "post",
-    url: state.postwoman.settings.PROXY_URL || "https://postwoman.apollotv.xyz/",
+    url:
+      state.postwoman.settings.PROXY_URL || "https://postwoman.apollotv.xyz/",
     data: req
   });
   return data;

layouts/default.vue

@@ -408,7 +408,7 @@
             <div class="flex-wrap">
               <span v-if="version.name" class="mono">
                 <a
-                  class="link"
+                  class="footer-link"
                   :href="
                     'https://github.com/liyasthomas/postwoman/releases/tag/' +
                       version.name
@@ -420,7 +420,7 @@
                   {{ version.name }}
                 </a>
                 <a
-                  class="link hide-on-small-screen"
+                  class="footer-link hide-on-small-screen"
                   href="https://www.netlify.com"
                   target="_blank"
                   rel="noopener"
@@ -660,7 +660,7 @@
 </template>
 
 <style scoped lang="scss">
-.link {
+.footer-link {
   margin: 8px 16px;
 }
 </style>
@@ -715,7 +715,7 @@ export default {
           .then(() => {})
           .catch(console.error);
       } else {
-      	// fallback
+        // fallback
       }
     }
   },

pages/settings.vue

@@ -206,7 +206,12 @@
             {{ $t("postwoman_official_proxy_hosting") }}
             <br />
             {{ $t("read_the") }}
-            <a href="https://apollotv.xyz/legal" target="_blank" rel="noopener">
+            <a
+              class="link"
+              href="https://apollotv.xyz/legal"
+              target="_blank"
+              rel="noopener"
+            >
               {{ $t("apollotv_privacy_policy") }} </a
             >.
           </p>

store/postwoman.js

@@ -57,11 +57,11 @@ export const SETTINGS_KEYS = [
    * e.g. 'auth'
    */
   "URL_EXCLUDES",
-  
+
   /**
    * A boolean value indicating whether to use the browser extensions
    * to run the requests
-  */
+   */
   "EXTENSIONS_ENABLED"
 ];
 
@@ -118,7 +118,9 @@ export const mutations = {
 
   addNewCollection({ collections }, collection) {
     const { name } = collection;
-    const duplicateCollection = collections.some(item => item.name.toLowerCase() === name.toLowerCase());
+    const duplicateCollection = collections.some(
+      item => item.name.toLowerCase() === name.toLowerCase()
+    );
     if (duplicateCollection) {
       this.$toast.info("Duplicate collection");
       return;
@@ -137,9 +139,10 @@ export const mutations = {
   },
 
   editCollection({ collections }, payload) {
-    const { collection, collectionIndex } = payload;
+    const { collection: { name }, collectionIndex } = payload;
-    const { name } = collection;
+    const duplicateCollection = collections.some(
-    const duplicateCollection = collections.some(item => item.name.toLowerCase() === name.toLowerCase());
+      item => item.name.toLowerCase() === name.toLowerCase()
+    );
     if (duplicateCollection) {
       this.$toast.info("Duplicate collection");
       return;