NPM search

Summary: Using yarn's algolia index to search NPM packages with the tag `flipper-plugin`.

Reviewed By: jknoxville

Differential Revision: D17394823

fbshipit-source-id: d7c88ddf5d4ce017f2672755436ef3ae7ed4e7f0

src/chrome/PluginInstaller.tsx

@@ -15,10 +15,25 @@ import {
   Button,
   colors,
   Spacer,
+  TableRows_immutable,
+  FlexRow,
+  Glyph,
+  Link,
+  Text,
 } from 'flipper';
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useState, useMemo, useEffect} from 'react';
 import {remote} from 'electron';
 import {List} from 'immutable';
+import algoliasearch from 'algoliasearch';
+
+const ALGOLIA_APPLICATION_ID = 'OFCNCOG2CU';
+const ALGOLIA_API_KEY = 'f54e21fa3a2a0160595bb058179bfb1e';
+
+type PluginDefinition = {
+  name: string;
+  version: string;
+  description: string;
+};
 
 const Container = styled(FlexColumn)({
   width: 600,
@@ -26,6 +41,12 @@ const Container = styled(FlexColumn)({
   background: colors.white,
 });
 
+const EllipsisText = styled(Text)({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
 const columnSizes = {
   name: '25%',
   version: '10%',
@@ -58,15 +79,14 @@ const RestartBar = styled(FlexColumn)({
 });
 
 export default function(props: {onHide: () => any}) {
-  const [restartRequired] = useState(false);
+  const [restartRequired, setRestartRequired] = useState(false);
   const [query, setQuery] = useState('');
+  const rows = useNPMSearch(setRestartRequired, query, setQuery);
   const restartApp = useCallback(() => {
     remote.app.relaunch();
     remote.app.exit();
   }, []);
 
-  const rows = List();
-
   return (
     <Container>
       {restartRequired && (
@@ -102,3 +122,64 @@ export default function(props: {onHide: () => any}) {
     </Container>
   );
 }
+
+const TableButton = styled(Button)({
+  marginTop: 2,
+});
+
+function useNPMSearch(
+  setRestartRequired: (restart: boolean) => void,
+  query: string,
+  setQuery: (query: string) => void,
+): TableRows_immutable {
+  const index = useMemo(() => {
+    const client = algoliasearch(ALGOLIA_APPLICATION_ID, ALGOLIA_API_KEY);
+    return client.initIndex('npm-search');
+  }, []);
+
+  const createRow = useCallback(
+    (h: PluginDefinition) => ({
+      key: h.name,
+      columns: {
+        name: {value: <EllipsisText bold>{h.name}</EllipsisText>},
+        version: {
+          value: <EllipsisText>{h.version}</EllipsisText>,
+          align: 'flex-end' as 'flex-end',
+        },
+        description: {
+          value: (
+            <FlexRow grow>
+              <EllipsisText>{h.description}</EllipsisText>
+              <Spacer />
+              <Link href={`https://yarnpkg.com/en/package/${h.name}`}>
+                <Glyph color={colors.light20} name="info-circle" size={16} />
+              </Link>
+            </FlexRow>
+          ),
+        },
+        install: {
+          value: <TableButton>Install</TableButton>,
+          align: 'center' as 'center',
+        },
+      },
+    }),
+    [],
+  );
+
+  const [searchResults, setSearchResults] = useState<PluginDefinition[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      const {hits} = await index.search({
+        query,
+        filters: 'keywords:flipper-plugin',
+        hitsPerPage: 20,
+      });
+
+      setSearchResults(hits);
+      setQuery(query);
+    })();
+  }, [query]);
+
+  return List(searchResults.map(createRow));
+}