How to implement search logic in javascript/react native/redux

Question

I want to implement search logic that will be in some method, and then I would pass it to the TextInput props 'onChangeText'. I guess that I should iterate through array 'popularMovies' and find if my input value match the specific title. The problem is that I am not sure how that should look. Thank you in advance!

import React, { Component } from 'react';
import { FlatList, View, StatusBar, TextInput } from 'react-native';
import { bindActionCreators } from 'redux';
import type { Dispatch as ReduxDispatch } from 'redux';
import { connect } from 'react-redux';

import { fetchPopularMovies } from '../../actions/PopularMovieActions';
import addToFavourite from '../../actions/FavouriteMovieActions';
import MovieCard from '../../components/movieCard/MovieCard';

type Props = {
  fetchPopularMovies: Function,
  popularMovies: Object,
  navigation: Object,
}

class ListOfPopularContainer extends Component<Props> {
  state = {
    refreshing: false,
    text: '',
  }

  componentDidMount() {
    this.props.fetchPopularMovies();
  }

  search(text) {
    this.setState({ text });
    // SEARCH LOGIC SHOULD GO HERE
  }

  onRefresh() {
    this.setState({ refreshing: true });
    this.props.fetchPopularMovies();
    this.setState({ refreshing: false });
  }

  render() {
    const { popularMovies, navigation } = this.props;
    return (
      <View>
        <TextInput
          placeholder="Search movie"
          onChangeText={ (text) => this.search(text) }
          value={this.state.text}
        />
        <StatusBar
          translucent
          backgroundColor="transparent"
          barStyle="light-content"
        />
        <FlatList
          onRefresh={() => this.onRefresh()}
          refreshing={this.state.refreshing}
          data={popularMovies}
          keyExtractor={item => item.title}
          renderItem={({ item }) => (
            <MovieCard
              addToFavourite={() => this.props.addToFavourite(item)}
              navigation={navigation}
              card={item}
            />
          )}
        />
      </View>
    );
  }
}

const mapStateToProps = state => ({
  popularMovies: state.popularMovies.popularMovies,
});
const mapDispatchToProps = (dispatch: ReduxDispatch): Function => (
  bindActionCreators({ fetchPopularMovies, addToFavourite }, dispatch)
);

export default connect(mapStateToProps, mapDispatchToProps)(ListOfPopularContainer);

Answer 1

I'm unsure what you're asking, your setup is correct and this looks good. Do you want to know how to filter through your popular movies? This would be one way of implementing it with vanilla JS.

search(text) {
    this.setState({ text });
    // SEARCH LOGIC SHOULD GO HERE
    let searchedMovies = this.state.popularMovies.filter(ele => 
      ele.title.includes(text))
    this.setState({searchedMovies})
}

Answer 2

you should check out lodash. two functions in particular:

Includes

https://lodash.com/docs/4.17.10#includes

this function checks if one string is included in another string.

import { includes } from 'lodash';
search(text) {
    var searchResults = [];
    var { popularMovies } = this.props;
    for (var i = popularMovies.length -1; i >= 0; i--) {
        includes(popularMovies[i], text) && searchResults.push(popularMovies[i])
    }
    return searchResults;
}

debounce

https://lodash.com/docs/4.17.10#debounce

this function throttles a function so as the user is typing it will regularly search at the phrase at reasonable intervals

debounce(search(text))