npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@marklogic-community/grove-search-redux

v1.0.0

Published

Redux module to power MarkLogic search UIs

Downloads

7

Readme

MarkLogic Search Implemented in Redux

This is a Redux implementation of search. It forms part of the MarkLogic Grove project. It works well for search against MarkLogic, but any backend search system could be used, so long as a middle-tier marshalled the response into the shape specified by the Grove Core API. See the Grove React-Redux Template for an example of using this library in practice.

Install

npm install @marklogic-community/grove-search-redux --save

Use

Simple Use

In many cases, you will consume this library as part of a Grove Template, such as the Grove React-Redux Template. The ui library in those templates, in turn, consume this library via the grove-core-react-redux-containers library, which connects together React components with Redux modules like this one.

But the actions and selectors exposed by this library should also be passed along via grove-core-react-redux-containers's <SearchContainer>.

TODO: link to information in grove-cli about search filters.

Actions

  • runSearch(query). Runs a search based on the passed query. The query will most often be obtained by calling selectors.getStagedQuery(state).
  • setQueryText(queryText). This sets a queryText filter in the staged search query.
  • addFilter(constraintName, constraintType, values, optional). This will by default append filter values with the given constraintName and a mode of 'and' in the staged search query. You can alternatively append to filter values with a mode of 'or' by passing {boolean: 'or'} as part of the optional argument. Note that values can be a single value or an array of values.
  • replaceFilter(constraintName, constraintType, values, optional): This will by default add or replace filter values with the given constraintName and a mode of 'and' in the staged search query. You can alternatively replace those with a mode of 'or' by passing {boolean: 'or'} as part of the optional argument. Note that values can be a single value or an array of values.
  • removeFilter(constraintName, values, optional). This will by default remove filter values with the given constraintName and a mode of 'and' in the staged search query. You can alternatively remove filter values with a mode of 'or' by passing {boolean: 'or'} as part of the optional argument. Note that values can be a single value or an array of values.
  • clearFilter(constraintName). This clears all filters for a given constraintName in the staged search query.
  • changePage(pageNumber). Changes the page in the staged search query.

Selectors

  • Selectors getting information about the staged search:
    • getStagedQuery(state). Returns the currently staged query, as serialized in this Redux module and POSTed to a Grove middle-tier.
    • stagedFilters(state). Returns all currently staged filters, as serialized in this Redux module and POSTed to a Grove middle-tier.
    • TODO: more, see src/reducers/stagedSearch.js
  • Selectors getting information about the executed search:
    • getPage(state). Returns the page of the executed search query.
    • getPageLength(state). Returns the page length of the executed search query.
    • TODO: more, see src/reducers/executedSearch.js

Advanced Use Cases

The provided selectors only know about their slice of state, so your consuming code needs to wrap them to provide their particular slice of state. For example:

import {
  actions as searchActions,
  selectors as searchSelectors
} from 'grove-search-redux';

const bindSelector = (selector, mountPoint) => {
  return (state, ...args) => {
    return selector(state[mountPoint], ...args)
  }
}
const bindSelectors = (selectors, mountPoint) => {
  return Object.keys(selectors).reduce((bound, key) => {
    bound[key] = bindSelector(selectors[key], mountPoint)
    return bound
  }, {})
}

const boundSearchSelectors = bindSelectors(searchSelectors, 'search');

A version of the bindSelectors() function is available as an export from the grove-core-react-redux-containers library, in case you are already using it.

Also, you will need to provide a searchQuery to the runSearch action. This is done for you already if you are using the default ML-Treehouse React components. In other cases, this can be done with something like:

import { searchActions } from 'grove-search-redux';

// Using `wrappedSearchSelectors` from the code above
// `state` imported most likely using the React-Redux Provider
searchActions.runSearch(wrappedSearchSelectors.getStagedQuery(state));

'Ducks' architecture

This roughly follows the architecture laid out in the re-ducks proposal:

Specifically, the actionCreators and selectors are the primary external UI. State and reducers should be an implementation detail.

Contributing

You will need to install the devDependencies:

npm install

Building

This project uses Webpack for building.

npm run build

Testing

This project uses Jest for testing.

npm test

Or, if you want it to watch for file changes and automatically re-run the tests:

npm run test:watch

Linting

This project uses the Javascript Standard Style. It will be checked automatically when you run tests, but you will have a greatly improved experience if you install an ESLint checker in your text editor, so linting errors are highlighted immediately.