Client side filtering of collection

[sungwoncho]

I would like to know if there is any problem with the way I am implementing the client side search.

I have a component in which users can use search input to filter the documents to be displayed. The component receives an array of documents from a container.

container

export const composer = ({context}, onData) => {
  const {Meteor, Collections} = context();

  if (Meteor.subscribe('foos').ready()) {
    let foos = Collections.Foos.find({some: condition}).fetch();

    onData(null, {foos});
  }
};

To implement the search, I made my component stateful:

class MyComponent extends React.Component {
  ...
  render() {
    <ul>
          {
            foos.filter(foo => {
              let searchRegex = new RegExp(_.escapeRegExp(this.state.searchTerm), 'i');
              return searchRegex.test(foo.name);
            }).map(foo => {
              return <li>{foo.name}</li>;
            })
          }
      </ul>
  }
}

Is filtering the documents a job of the container? I could delegate the job to the container by LocalState but I feel uneasy because LocalState is shared across the whole app, but in this case I don't need my state app-wide.

[tomitrescak]

@sungwoncho I do this quite often so here is my share of ideas ;)

Yes, this looks like a perfect job for the container. All you need to do is to pass down to component a callback function like "onSearch(searchString)" that will execute back on the container, filtering your data and re-rendering your component. I am not sure I am explaining myself, please let me know.

[tomitrescak]

Just to give better example here here is the code for filtering container which I use very often:

// this function is part of your component actions
export default {
  ...
  filter(data, string) {
     if (!string) return data;

     // perform filtering of data
     return data.filter(...); 
  }
}

// this is your container
// this looks a bit cut throat but isolates the need for using local state and maintains everything inside the module

export const composer = ({context, filter}, onData) => {
  const {Meteor, Collections} = context();

  if (Meteor.subscribe('foos').ready()) {
    let foos = Collections.Foos.find({some: condition}).fetch();

    function getData(searchText)  {
      return {
        foos: filter(context, foos, searchText),
        onSearch(text) { 
           onData(null, getData(text)); // this will filter data and re-draw the component
        } 
      }
    }

    onData(null, getData());
  }
};

export const depsMapper = (context, actions) => ({
  filter: actions.mycomponent.filter,
  context: () => context
});

This way your component stays nice and stateless having several easy to test methods.

[norain2050]

@tomitrescak I`m sorry,i dont understand the code,below:

  onSearch(text) { 
           onData(null, getData(text)); // this will filter data and re-draw the component
        } 

Can the onData function be used directly by the component ?

[achtan]

use onSearch in your component as an event handler for search action.

<input onChange={onSearch}/>