feat(Search): add highlight attr to search api results

topheman · Apr 20, 2018 · c24ee97 · c24ee97
1 parent 0583dce
commit c24ee97
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/src/components/Search.js b/src/components/Search.js
@@ -67,7 +67,13 @@ const styles = theme => ({
     whiteSpace: "nowrap",
     textOverflow: "ellipsis"
   },
-  itemName: {},
+  itemName: {
+    fontWeight: "bold",
+    "& > em": {
+      fontWeight: "normal",
+      fontStyle: "normal"
+    }
+  },
   itemDescription: {},
   itemVersion: {
     textAlign: "right",
@@ -136,15 +142,15 @@ class Search extends Component {
     const { inputValue, items, state } = this.state;
     return (
       <Downshift
-        itemToString={item => (item && item.name) || ""}
+        itemToString={item => (item && item.package && item.package.name) || ""}
         onChange={item => {
           this.setState({
             inputValue: "" // reset the value of the controlled input
           });
           if (this.inputEl) {
             this.inputEl.blur();
           }
-          goToPackage(item.name);
+          goToPackage(item.package.name);
         }}
         render={({
           selectedItem,
@@ -223,7 +229,7 @@ class Search extends Component {
                   {items.map((item, index) => (
                     <li
                       data-testid={`search-result-${index}`}
-                      key={item.name}
+                      key={item.package.name}
                       className={classes.item}
                       {...getItemProps({
                         item,
@@ -237,18 +243,17 @@ class Search extends Component {
                       <Typography
                         variant="subheading"
                         className={`${classes.itemName} ${classes.safeItem}`}
-                      >
-                        {item.name}
-                      </Typography>
+                        dangerouslySetInnerHTML={{ __html: item.highlight }}
+                      />
                       <Typography
                         className={`${classes.itemDescription} ${
                           classes.safeItem
                         }`}
                       >
-                        {item.description}
+                        {item.package.description}
                       </Typography>
                       <Typography className={classes.itemVersion}>
-                        {item.version}
+                        {item.package.version}
                       </Typography>
                     </li>
                   ))}

diff --git a/src/containers/SearchContainer.js b/src/containers/SearchContainer.js
@@ -6,12 +6,7 @@ import { apiNpmRegistry } from "../services/apis";
 import Search from "../components/Search";
 
 const compileSearchPackage = registryClient => value =>
-  registryClient.search(value).then(({ data }) => {
-    if (data && data.objects && data.objects.length > 0) {
-      return data.objects.map(item => item.package);
-    }
-    return [];
-  });
+  registryClient.search(value).then(({ results }) => results);
 
 const compileGoToPackage = history => packageName =>
   history.push(`/package/${packageName}`);

diff --git a/src/services/apis/index.js b/src/services/apis/index.js
@@ -23,7 +23,16 @@ const decorateNpmRegistryApi = ({ client /* , cache, key */ }) => ({
   },
   search: value => {
     const query = `/-/v1/search?text=${encodeURIComponent(value)}`;
-    return client.get(query);
+    return client.get(query).then(({ data }) => {
+      const { objects: results, ...remainingAttributes } = data;
+      return {
+        results: (results || []).map(result => ({
+          ...result,
+          highlight: result.package.name.replace(value, `<em>${value}</em>`)
+        })),
+        ...remainingAttributes
+      };
+    });
   }
 });