callstack-search-shared

Shared codebase for callstack Github repo search code challenge.

Installation

$ yarn add callstack-search-shared
 
$ import {
    configureStore,
    withSearch,
    Colors,
    Constants,
    applySort,
    updatePaginationData,
  } from 'callstack-search-shared';

Usage Instruction

The package exports several helper functions and constants which mainly deal with app state management. Below are all exported functions an data:

configureStore (function)

The configureStore function is used to create the redux store. It accepts two arguments: customeReducers (JSON) and an onComplete (Func) callBack that will be called with the created store objected as argument.

Colors (constant)

The Colors constant contains helper colors apps can use to maintain similar look and feel. The exported colors include primary, primaryDark, etc

withSearch (function)

The withSearch function is a function that returns a Higher Order component. It handles the entire search logic and ensures that search works uniformly in both mobile and web. It expects an Input component as an argument and returns an HOC with a custom onTextChange prop that can be used to send in changed data back to the wrapped component to perform search. Data input is debounced and will only trigger an API call if user hasn't entered any data after 500ms.

Constants (constant)

The Constants export provides all cross platform data. Currently, the only exported data filterTypes shown below:

export const filterTypes = [
  {
    title: 'Starsgazers',
    iconColor: Colors.green,
    iconName: 'star',
    key: 'stargazers_count',
  },
  {
    title: 'Date',
    iconColor: Colors.teal,
    iconName: 'date-range',
    key: 'created_at',
  },
  {
    title: 'Owner\'s Name',
    iconColor: Colors.indigo,
    iconName: 'contacts',
    key: 'owner.login',
  },
  {
    title: 'Repository Name',
    iconColor: Colors.green,
    iconName: 'format-list-bulleted',
    key: 'name',
  },
  {
    title: 'Repository ID',
    iconColor: Colors.teal,
    iconName: 'attach-file',
    key: 'id',
  },
];

The filterTypes export shoule be used to render filter options on both platforms. It also comes with key fields to be used to run the filter logic (also in-package)

Actions

applySort (function)

The applySort is an action creator used to filter search results. Each platform don't need to bother about how the filter logic works, all they need to do is pass in the required arguments and all data will be sorted. The arguments applySort expects are:

sortKey: This is gotten from the filterTypes constant export.

order: This can either be asc or desc (optional)

updatePaginationData

The updatePaginationData is an action creator used to paginate data. It does this by accepting two arguments:

itemsPerPage: This is the number of items to display per page (defaults to 10)

currentPage: This is the current page to return data for (optional)

All above functions and constants update data in store.

Data Usage Instruction

The following are available reducer data in store:

Search

This defaults to:

const initialState = {
  store: {},
  data: [],
  paginatedData: [],
  searchTerm: '',
  searchInProgress: false,
  sortKey: 'stargazers_count',
  sortOrder: 'desc',
  itemsPerPage: 10,
  currentPage: 1,
};

store: contains all search data and history. To be used to return previously searched data if user already performed query.

data: contain un-paginated data.

paginatedData: contains paginated data. (This should be used in the render method of the component displaying search results. Every sort, filter or pagination action updates this reducer data)

searchTerm: persisted for apps to always remember user's last search term.

searchInProgress: can be used display search in progress for all apps during search.

sortKey: used for sorting.

This README is non-exhaustive and the code base is quite simple enough to go through to understand in details....