chore(homepage): make sure sandbox count is updated (codesandbox#1173)

* chore(home): remove algolia instantiation

not used, so not necessary :)

* chore(homepage): make sure sandbox count is updatedDid a change in the (otherwise unused) search function. It was "promisifying", but the default client & index.search are already returning promisesAlso changed to make sure the lite version for `algoliasearch` is used

Author: Haroenv

packages/homepage/src/screens/home/NPMFeature/SandboxCount.js

@@ -0,0 +1,32 @@
+import React, { Fragment, Component } from 'react';
+import { search } from '../../../utils/algolia';
+
+class SandboxCount extends Component {
+  state = {
+    sandboxes: undefined,
+  };
+  static defaultProps = {
+    fallback: 800000,
+  };
+
+  componentDidMount() {
+    search({
+      attributesToRetrieve: [],
+      attributesToHighlight: [],
+      hitsPerPage: 1,
+    }).then(({ nbHits }) =>
+      this.setState({
+        sandboxes: nbHits,
+      })
+    );
+  }
+
+  render() {
+    const { fallback } = this.props;
+    const { sandboxes } = this.state;
+    const number = sandboxes || fallback;
+    return <Fragment>{number.toLocaleString('en-US')}</Fragment>;
+  }
+}
+
+export default SandboxCount;

packages/homepage/src/screens/home/NPMFeature/SearchInput/index.js

@@ -1,13 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import algoliasearch from 'algoliasearch';
-import {
-  ALGOLIA_API_KEY,
-  ALGOLIA_APPLICATION_ID,
-  ALGOLIA_DEFAULT_INDEX,
-} from 'common/utils/config';
-
 import Input from './Input';
 import Hit from './Hit';
 
@@ -31,27 +24,18 @@ export default class SearchInput extends React.PureComponent {
   };
 
   componentDidMount() {
-    this.client = algoliasearch(ALGOLIA_APPLICATION_ID, ALGOLIA_API_KEY);
-    this.index = this.client.initIndex(ALGOLIA_DEFAULT_INDEX);
-
     this.searchQuery('');
   }
 
   searchQuery = (query: string) => {
-    searchFacets('npm_dependencies.dependency', query).then(res => {
-      const { facetHits } = res;
-
-      facetHits.sort((a, b) => {
-        if (a.value === query) {
-          return -1;
-        } else if (b.value === query) {
-          return 1;
-        }
-
-        return 0;
+    searchFacets({
+      facet: 'npm_dependencies.dependency',
+      query,
+      hitsPerPage: 3,
+    }).then(({ facetHits }) => {
+      this.setState({
+        hits: facetHits,
       });
-
-      this.setState({ hits: facetHits.slice(0, 3) });
     });
   };
 
@@ -63,7 +47,9 @@ export default class SearchInput extends React.PureComponent {
           <div>Dependency</div>
           <div>Sandbox Count</div>
         </Legend>
-        {this.state.hits.map((hit, i) => <Hit key={i} hit={hit} />)}
+        {this.state.hits.map((hit, i) => (
+          <Hit key={i} hit={hit} />
+        ))}
         <a
           href="https://www.algolia.com/?utm_source=algoliaclient&utm_medium=website&utm_content=codesandbox.io&utm_campaign=poweredby"
           target="_blank"

packages/homepage/src/screens/home/NPMFeature/index.js

@@ -10,6 +10,7 @@ import SearchIcon from 'react-icons/lib/md/search';
 import NPMIcon from './NPMIcon';
 import SearchInput from './SearchInput';
 import EmbedAnimation from './EmbedAnimation';
+import SandboxCount from './SandboxCount';
 import EmbedIcon from './EmbedIcon';
 
 import media from '../../../utils/media';
@@ -146,7 +147,7 @@ export default () => (
                 Want to know how a library works? You can easily browse through
                 the{' '}
                 <Link href="https://codesandbox.io/search" target="_blank">
-                  80,000+ created sandboxes
+                  <SandboxCount />+ created sandboxes
                 </Link>{' '}
                 on CodeSandbox. We want this to be a platform where everyone can
                 easily learn and share.

packages/homepage/src/utils/algolia.js

@@ -1,4 +1,4 @@
-import algoliasearch from 'algoliasearch';
+import algoliasearch from 'algoliasearch/lite';
 import {
   ALGOLIA_API_KEY,
   ALGOLIA_APPLICATION_ID,
@@ -8,19 +8,41 @@ import {
 const client = algoliasearch(ALGOLIA_APPLICATION_ID, ALGOLIA_API_KEY);
 const index = client.initIndex(ALGOLIA_DEFAULT_INDEX);
 
-export function searchFacets(facet, query) {
-  return index.searchForFacetValues({ facetName: facet, facetQuery: query });
+export function searchFacets({
+  facet,
+  query,
+  hitsPerPage,
+}: {
+  facet: string,
+  query: string,
+  hitsPerPage?: number,
+}) {
+  return index.searchForFacetValues({
+    facetName: facet,
+    facetQuery: query,
+    maxFacetHits: hitsPerPage,
+    typoTolerance: 'strict',
+  });
 }
 
-export function search(query: string, filter: Object) {
-  return new Promise((resolve, reject) => {
-    index.search({ facetFilters: filter, query }, (err, res) => {
-      if (err) {
-        reject(err);
-        return;
-      }
-
-      resolve(res);
-    });
+export function search({
+  query,
+  attributesToRetrieve,
+  attributesToHighlight,
+  hitsPerPage,
+  searchParameters,
+}: {
+  query?: string,
+  attributesToRetrieve?: string[],
+  attributesToHighlight?: string[],
+  hitsPerPage?: number,
+  searchParameters: Object,
+}) {
+  return index.search({
+    query,
+    attributesToRetrieve,
+    attributesToHighlight,
+    hitsPerPage,
+    ...searchParameters,
   });
 }