Remove heavy setResults callback, and use css magic instead.

Gabriel Gavilan · Gabriel Gavilan · commit 7f3ad0a58598 · 2020-11-30T23:02:25.000+01:00
diff --git a/packages/preview/src/components/pages/search/index.tsx b/packages/preview/src/components/pages/search/index.tsx
@@ -7,13 +7,7 @@ import SearchIconSet from "./search-iconset";
 export default function SearchPageComponent() {
   const allIcons = ALL_ICONS;
 
-  const { query, results, setResults } = React.useContext(Context);
-
-  const getTotal = (results: object) => {
-    return results ? 
-      Object.values(results).reduce((p: number, c: number) => p + c, 0) :
-      0
-  }
+  const { query } = React.useContext(Context);
 
   if (query.length > 2) {
     const hightlightPattern = new RegExp(`(${query})`, "i");
@@ -28,12 +22,11 @@ export default function SearchPageComponent() {
               key={icon.id}
               icon={icon}
               query={query}
-              setResults={setResults}
               highlightPattern={hightlightPattern}
             />
           ))}
         </div>
-        {getTotal(results) === 0 && <h3>No icons found</h3>}
+         <h3 className="no-results"/>
       </>
     );
   }
diff --git a/packages/preview/src/components/pages/search/search-iconset.tsx b/packages/preview/src/components/pages/search/search-iconset.tsx
@@ -5,7 +5,7 @@ import { getIcons } from "@utils/getIcons";
 
 import SearchPageIconLoading from "./loading";
 
-export default function SearchIconSet({ icon, query, setResults, highlightPattern }) {
+export default function SearchIconSet({ icon, query, highlightPattern }) {
   const IconSet = loadable.lib(() => getIcons(icon.id));
 
   return (
@@ -23,14 +23,6 @@ export default function SearchIconSet({ icon, query, setResults, highlightPatter
                 highlightPattern={highlightPattern}
               />
             ))}
-            {setResults(prevResults => {
-              return prevResults.hasOwnProperty(icon.id) ?
-                prevResults :
-                {
-                    ...prevResults,
-                  [icon.id]: found.length
-                }
-            })}
           </>
         )
       }}
diff --git a/packages/preview/src/styles/_components.scss b/packages/preview/src/styles/_components.scss
@@ -237,3 +237,7 @@ a {
     display: none;
   }
 }
+
+.icons:empty + .no-results:after {
+  content: "No icons found";
+}

Original file line number	Diff line number	Diff line change
`@@ -237,3 +237,7 @@ a {`
`237`	`237`	`display: none;`
`238`	`238`	`}`
`239`	`239`	`}`
	`240`	`+`
	`241`	`+.icons:empty + .no-results:after {`
	`242`	`+ content: "No icons found";`
	`243`	`+}`