feat: Ability to change packages per page

maticzav · Sep 16, 2018 · 8d1be3a · 8d1be3a
1 parent 2c29005
commit 8d1be3a
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,6 @@
 [![CircleCI](https://circleci.com/gh/maticzav/emma-cli.svg?style=shield)](https://circleci.com/gh/maticzav/emma-cli)
 [![npm version](https://badge.fury.io/js/emma-cli.svg)](https://badge.fury.io/js/emma-cli)
 ![npm](https://img.shields.io/npm/dt/emma-cli.svg)
-[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/xojs/xo)
 [![Backers on Open Collective](https://opencollective.com/emma-cli/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/emma-cli/sponsors/badge.svg)](#sponsors)
 
 > Install the package you are looking for.
@@ -54,11 +53,12 @@ Picked:
 Usage
 $ emma
 
-Example
-$ emma -D
-
 Options
 --dev -D Add to dev dependencies.
+--limit -L Number of packages shown, defaults to 5.
+
+Example
+$ emma -D
 
 Run without package-name to enter live search.
 Use keyboard to search through package library.

diff --git a/src/emma.js b/src/emma.js
@@ -16,8 +16,6 @@ import {
 import { getSearch } from './libs/algoliaSearch';
 import { getSuggestions } from './libs/npm-suggestions';
 
-// Emma ----------------------------------------------------------------------
-
 // Progress
 
 const PROGRESS_NOT_LOADED = 0;
@@ -353,14 +351,15 @@ class Emma extends Component {
 
   async fetchSearch() {
     const { query } = this.state;
+    const { limit, dev } = this.props;
 
     this.setState({
       focused: FOCUSED_SEARCH,
       loadingSearch: PROGRESS_LOADING
     });
 
     try {
-      const hits = await getSearch(query);
+      const hits = await getSearch(query, limit);
       const cells = hitsToCells(hits);
 
       if (this.state.query === query) {
@@ -397,7 +396,7 @@ class Emma extends Component {
 
   async fetchSuggestions() {
     const { selectedPackages } = this.state;
-    const { dev: isDev } = this.props;
+    const { dev: isDev, limit } = this.props;
 
     this.setState({
       focused: FOCUSED_SUGGESTIONS,
@@ -407,6 +406,7 @@ class Emma extends Component {
     try {
       const hits = await getSuggestions(
         selectedPackages.map(selectedPackage => selectedPackage.name),
+        limit,
         isDev
       );
       const cells = hitsToCells(hits);

diff --git a/src/index.js b/src/index.js
@@ -15,28 +15,34 @@ updateNotifier({ pkg }).notify();
 
 const cli = meow(
   `
-   Usage
-     $ emma
+  Usage
+    $ emma
 
-   Example
-     $ emma -D
+  Options
+    --dev -D      Add to dev dependencies.
+    --limit -L      Number of packages shown, defaults to 5.
 
-   Options
-     --dev -D      Add to dev dependencies.
+  Example
+    $ emma -D
 
-   Run without package-name to enter live search.
-   Use keyboard to search through package library.
-   Use up/down to select packages.
-   Use enter to select a package.
-   Use tab to move between search/suggestions.
-   When query is empty use backspace to remove packages.
-   Click space to trigger the install.   
+  Run without package-name to enter live search.
+  Use keyboard to search through package library.
+  Use up/down to select packages.
+  Use enter to select a package.
+  Use tab to move between search/suggestions.
+  When query is empty use backspace to remove packages.
+  Click space to trigger the install.   
 `,
   {
     flags: {
       dev: {
         type: 'boolean',
         alias: 'D'
+      },
+      limit: {
+        type: 'string',
+        alias: 'L',
+        default: '5'
       }
     }
   }
@@ -55,10 +61,10 @@ const main = () => {
     process.exit();
   };
 
-  const { dev } = cli.flags;
+  const { dev, limit } = cli.flags;
 
   // Uses `h` instead of JSX to avoid transpiling this file
-  unmount = render(h(emma, { dev, onError, onExit }));
+  unmount = render(h(emma, { dev, limit, onError, onExit }));
 };
 
 main();
diff --git a/src/libs/algoliaSearch.js b/src/libs/algoliaSearch.js
@@ -10,7 +10,7 @@ const client = algoliasearch(algolia.appId, algolia.apiKey).initIndex(
   algolia.indexName
 );
 
-export const getSearch = async query => {
+export const getSearch = async (query, limit) => {
   const res = await client.search({
     query,
     attributesToRetrieve: [
@@ -21,7 +21,7 @@ export const getSearch = async query => {
       'humanDownloadsLast30Days'
     ],
     offset: 0,
-    length: 5
+    length: limit
   });
 
   const hits = res.hits;

diff --git a/src/libs/npm-suggestions.js b/src/libs/npm-suggestions.js
@@ -13,10 +13,15 @@ const client = new ApolloClient({
 });
 
 export const suggestionsQuery = gql`
-  query Suggestions($dependencies: [String!]!, $devDependencies: [String!]!) {
+  query Suggestions(
+    $dependencies: [String!]!
+    $devDependencies: [String!]!
+    $limit: Int
+  ) {
     suggestions(
       dependencies: $dependencies
       devDependencies: $devDependencies
+      limit: $limit
     ) {
       suggestions {
         name
@@ -33,10 +38,15 @@ export const suggestionsQuery = gql`
 `;
 
 export const devSuggestionsQuery = gql`
-  query Suggestions($dependencies: [String!]!, $devDependencies: [String!]!) {
+  query Suggestions(
+    $dependencies: [String!]!
+    $devDependencies: [String!]!
+    $limit: Int
+  ) {
     suggestions(
       dependencies: $dependencies
       devDependencies: $devDependencies
+      limit: $limit
     ) {
       devSuggestions {
         name
@@ -52,12 +62,13 @@ export const devSuggestionsQuery = gql`
   }
 `;
 
-export async function getSuggestions(dependencies, dev) {
+export async function getSuggestions(dependencies, limit, dev) {
   const res = await client.query({
     query: dev ? devSuggestionsQuery : suggestionsQuery,
     variables: {
       dependencies: dev ? [] : dependencies,
-      devDependencies: dev ? dependencies : []
+      devDependencies: dev ? dependencies : [],
+      limit
     }
   });