diff --git a/src/chrome/PluginInstaller.tsx b/src/chrome/PluginInstaller.tsx
index b0909fa4a..82534f4e8 100644
--- a/src/chrome/PluginInstaller.tsx
+++ b/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 (
{restartRequired && (
@@ -102,3 +122,64 @@ export default function(props: {onHide: () => any}) {
);
}
+
+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: {h.name}},
+ version: {
+ value: {h.version},
+ align: 'flex-end' as 'flex-end',
+ },
+ description: {
+ value: (
+
+ {h.description}
+
+
+
+
+
+ ),
+ },
+ install: {
+ value: Install,
+ align: 'center' as 'center',
+ },
+ },
+ }),
+ [],
+ );
+
+ const [searchResults, setSearchResults] = useState([]);
+
+ useEffect(() => {
+ (async () => {
+ const {hits} = await index.search({
+ query,
+ filters: 'keywords:flipper-plugin',
+ hitsPerPage: 20,
+ });
+
+ setSearchResults(hits);
+ setQuery(query);
+ })();
+ }, [query]);
+
+ return List(searchResults.map(createRow));
+}