Add services to omnibox according to settings (#89)

wachunei · Oct 2, 2020 · be26123 · be26123
1 parent 43d44a7
commit be26123
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 46 deletions.
diff --git a/src/js/omnibox.js b/src/js/omnibox.js
@@ -2,83 +2,96 @@ import browser from "webextension-polyfill";
 import Fuse from "fuse.js";
 import { isFirefox } from "./utils";
 
-function omnibox(services, { getState, dispatch }) {
-  const servicesList = Object.entries(services)
-    .filter(([, service]) => service.display)
+const strings = {
+  goTo: "Ir a",
+  openOptions: "Presiona enter para iniciar sesión en directUC",
+  typeToSearch: "Escribe para buscar un servicio",
+  notFound: "No encontramos servicios 😕",
+};
+
+const fuseOptions = {
+  // isCaseSensitive: false,
+  // includeScore: true,
+  // shouldSort: true,
+  // includeMatches: true,
+  // findAllMatches: true,
+  // minMatchCharLength: 1,
+  // location: 0,
+  threshold: 0.3,
+  distance: 10,
+  // useExtendedSearch: false,
+  // ignoreLocation: false,
+  // ignoreFieldNorm: true,
+  keys: ["omnibox", "name", "display"],
+  sortFn: (a, b) =>
+    // eslint-disable-next-line no-nested-ternary
+    a.score === b.score ? (a.idx < b.idx ? -1 : 1) : a.score < b.score ? 1 : -1,
+};
+
+const getServicesList = (services, servicesOptions) =>
+  Object.entries(services)
+    .filter(
+      ([key, service]) =>
+        service.display && servicesOptions[key] && servicesOptions[key].display
+    )
     .map(([key, service]) => ({
       id: key,
       ...service,
     }));
 
-  const resultToSuggestion = ({ item: service }) => ({
-    content: service.name || service.display,
-    description: isFirefox
-      ? `directUC - ${service.name || service.display} - Ir a ${service.name}`
-      : `<match>${service.name || service.display}</match> <dim>Ir a ${
-          service.name
-        }</dim>`,
-  });
+const resultToSuggestion = ({ item: service }) => ({
+  content: service.name || service.display,
+  description: isFirefox
+    ? `directUC - ${service.name || service.display} - ${strings.goTo} ${
+        service.name
+      }`
+    : `<match>${service.name || service.display}</match> <dim>${strings.goTo} ${
+        service.name
+      }</dim>`,
+});
 
-  const resultToDefaultSuggestion = (result) => {
-    const { content, ...suggestion } = resultToSuggestion(result);
-    return suggestion;
-  };
+const resultToDefaultSuggestion = (result) => {
+  const { content, ...suggestion } = resultToSuggestion(result);
+  return suggestion;
+};
 
+function omnibox(services, { getState, dispatch }) {
   let latestSuggestion = null;
-
-  const fuseOptions = {
-    // isCaseSensitive: false,
-    // includeScore: true,
-    // shouldSort: true,
-    // includeMatches: true,
-    // findAllMatches: true,
-    // minMatchCharLength: 1,
-    // location: 0,
-    threshold: 0.3,
-    distance: 10,
-    // useExtendedSearch: false,
-    // ignoreLocation: false,
-    // ignoreFieldNorm: true,
-    keys: ["omnibox", "name", "display"],
-    sortFn: (a, b) =>
-      // eslint-disable-next-line no-nested-ternary
-      a.score === b.score
-        ? a.idx < b.idx
-          ? -1
-          : 1
-        : a.score < b.score
-        ? 1
-        : -1,
-  };
-
-  const servicesFuse = new Fuse(servicesList, fuseOptions);
+  let servicesFuse = null;
 
   browser.omnibox.onInputStarted.addListener(() => {
     const {
       user: { username },
+      services: servicesOptions,
     } = getState();
     if (!username) {
       latestSuggestion = null;
       browser.omnibox.setDefaultSuggestion({
-        description: "Presiona enter para iniciar sesión en directUC",
+        description: strings.openOptions,
       });
     }
+
+    servicesFuse = new Fuse(
+      getServicesList(services, servicesOptions),
+      fuseOptions
+    );
   });
 
   browser.omnibox.onInputChanged.addListener((text, suggest) => {
     const {
       user: { username },
     } = getState();
 
-    if (!username) {
+    if (!username || !servicesFuse) {
       return;
     }
 
     if (text.length === 0) {
       latestSuggestion = null;
       browser.omnibox.setDefaultSuggestion({
-        description: "Escribe para buscar un servicio",
+        description: strings.typeToSearch,
       });
+      return;
     }
 
     const fuseResults = servicesFuse.search(text);
@@ -91,7 +104,12 @@ function omnibox(services, { getState, dispatch }) {
       if (results.length > 0) {
         suggest(results.map(resultToSuggestion));
       }
+      return;
     }
+
+    browser.omnibox.setDefaultSuggestion({
+      description: strings.notFound,
+    });
   });
 
   browser.omnibox.onInputEntered.addListener((text, disposition) => {

diff --git a/src/js/ui/components/Section.jsx b/src/js/ui/components/Section.jsx
@@ -4,6 +4,11 @@ const Section = styled.div`
   padding: 15px 20px;
   background-color: ${({ theme, ghost }) => !ghost && theme.sectionBackground};
   margin-bottom: 15px;
+
+  p {
+    margin-top: 0;
+    margin-bottom: 15px;
+  }
 `;
 
 export default Section;
diff --git a/src/js/ui/components/__tests__/__snapshots__/Section.test.jsx.snap b/src/js/ui/components/__tests__/__snapshots__/Section.test.jsx.snap
@@ -7,6 +7,11 @@ exports[`Section Component should match snapshot 1`] = `
   margin-bottom: 15px;
 }
 
+.c0 p {
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
 <div
   className="c0"
 />
@@ -19,6 +24,11 @@ exports[`Section Component should match snapshot with darkTheme 1`] = `
   margin-bottom: 15px;
 }
 
+.c0 p {
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
 <div
   className="c0"
 />
@@ -30,6 +40,11 @@ exports[`Section Component should match snapshot with ghost 1`] = `
   margin-bottom: 15px;
 }
 
+.c0 p {
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
 <div
   className="c0"
 />
@@ -42,6 +57,11 @@ exports[`Section Component should match snapshot with lightTheme 1`] = `
   margin-bottom: 15px;
 }
 
+.c0 p {
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
 <div
   className="c0"
 />

diff --git a/src/js/ui/containers/OptionsPage/Services/Service.jsx b/src/js/ui/containers/OptionsPage/Services/Service.jsx
@@ -106,7 +106,7 @@ const ServiceContainer = forwardRef(function ServiceContainerComponent(
           checked={userOptions.display}
           onChange={handleOptionChange}
         >
-          Mostrar Botón
+          Activar
         </Checkbox>
       </FormControl>
 

diff --git a/src/js/ui/containers/OptionsPage/Services/index.jsx b/src/js/ui/containers/OptionsPage/Services/index.jsx
@@ -90,6 +90,10 @@ function Services() {
   return (
     <Section onDragOver={handleDragOver}>
       <Title>Servicios</Title>
+      <p>
+        Los servicios activos aparecerán como botón y en los resultados de la
+        omnibox. Arrastra los servicios para reordernarlos.
+      </p>
       {currentOrder.map((key) => {
         const service = services[key];
         return (