Getting Started

npm install --save react-search-and-filter

Place <SearchMaster /> in your desired component (for example App.js) and start by giving it the required props.

url

The base URL to the api that performs the search.
Example:

url = 'https://data.usajobs.gov/api/Search'

headers

The headers to send with all ajax search requests.
Example:

headers = { 'Authorization-Key': 'seCrEtDOfjd94fkdseCrEt/GXseCrEt='}

params

The parameters to send with all ajax search requests.

Example:

params = { 'ResultsPerPage': 50 }

queryKeyword

Each api may look for a different property in parameters to extract the search term to perform query

Example:

queryKeyword='Keyword'

searchResultsPath

This is the path from the JSON response of the api to the array of results that you are interested in.

Example:

searchResultsPath = 'data.SearchResult.SearchResultItems'

sortCategories

Within the results array, there may be proprieties by which you would want to sort your results. sortCategories pairs what the users sees on the screen with the relative path to the result property that will used for sorting.

Example:

sortCategories = {
     "Position": "MatchedObjectDescriptor.PositionTitle" ,
     "Location": "MatchedObjectDescriptor.PositionLocationDisplay",
};

searchFilters

The the api you are searching against accepts search filters, you can provide an array of object with the format described below to pass on the keywords with a true or false flag with the ajax request.
The name property will be the name of the checkbox that the users sees and the keyword property is what the api would receive with the true or false flag.
Top level filters accept an array of children with the same format.

Example:

searchFilters = [
  {
    'name': 'USA Jobs',
    'keyword': '',
    'children': [
      {
        'name': 'Relocation',
        'keyword': 'RelocationIndicator'
      },
      {
        'name': "Most Recent",
        'keyword' : "ExcludeJOAOpenFor30Days"
      },
    ]
  },
  {
    'name': 'Full Time',
    'keyword': 'fullTime',
    'children': []
  },
  {
    'name': 'Part Time',
    'keyword': 'partTime'
  }
];

resultComponent

The module passes on the path that you provided to the results(searchResultsPath) to the resultComponent that you create. So you have access to all properties of the results object and can define how a single result should be displayed. The module will take care of the rest and maps your component to all other results.

Example:
App.js

resultComponent={<ResultCard />}

result-card.js

import React, { Component } from 'react';

class ResultCard extends Component {
  render() {
    return (
      <ul>
        <li>
          Job ID:
          {this.props.result.MatchedObjectId}
        </li>
        <li>
          Title:
          {this.props.result.MatchedObjectDescriptor.PositionTitle}
        </li>
      </ul>
    );
  }
}

export default ResultCard;