1
\$\begingroup\$

I would like to make this function more efficient. Currently, its performance is lacking.

From my understanding, for large list that is being kept locally - I may might be better doing display:none on the hidden ones rather than removing them from the DOM. This could dramatically cut down on interactions.

I also need to add new "entries" to the list of "movies", but need to refrain from storing the results of the filtering operation to state as this will slow it down again.

For a working codesandbox, see here.

const andFilter = (x, filters) => {
    // if we have no filters, we just return everything
    if (filters.length == 0) {
      return x.movies;
    }

    const wheres = filters.map(g => where({
      genres: pipe(pluck('name'), contains(g))
    }));

    return pipe(
      prop('movies'),
      filter(
        allPass(wheres)
      )
    )(x);
}


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedFilters: {},
      movies:x.movies
    };
  }

  handleChange = genre => {
    const { selectedFilters } = this.state;
    selectedFilters[genre] = !selectedFilters[genre];
    this.setState({
      selectedFilters: {
        ...reject(v => !v, selectedFilters),
      },
    });
  };
  addNew = () =>{
      this.setState({movies:this.state.movies.concat([newObject])});
    }

  uniqueGenres(movies) {
    return pipe(pluck('genres'), flatten, pluck('name'), uniq)(movies);
  }

  render() {
    const { selectedFilters } = this.state;
    console.log(selectedFilters);

    const filteredResults = andFilter(x, Object.keys(selectedFilters));

    return (
      <div>
        <br/>
        Add<br/>
        <CreateNew
          onChange={this.addNew}
        />
        Filters:<br />
        {this.uniqueGenres(filteredResults).map(e => (
          <Filter1
            key={e}
            genre={e}
            isActive={!!selectedFilters[e]}
            onChange={this.handleChange}
          />
        ))}
        <br />
        <h3>
          {filteredResults.map(movies => (
            <Results key={movies.id} result={movies} />
          ))}
        </h3>
      </div>
    );
  }
}
class CreateNew extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      value:'',
      genres:''
    };
  }
  render() {
const { value, genres } = this.props;
    return (
      <div>
        Add a new movie
        <input type="text" value={value} />
        <br/>
        Add genres
        <input type="text" value={genres} />
        <br/>
      </div>
    );
  }
}
class Results extends React.Component {
  render() {
    const { result } = this.props;

    return (
      <div>
        <li>
          {result.name}
        </li>
        <il>
          {result.genres.map(e => <span key={e.id}> {e.name} </span>)}
        </il>
      </div>
    );
  }
}

class Filter1 extends React.Component {
  handleClick = () => {
    this.props.onChange(this.props.genre);
  };

  render() {
    const { genre, isActive } = this.props;

    return (
      <button onClick={this.handleClick}>
        {genre}
        {' '}
        <strong>{isActive ? 'Active' : 'Inactive'}</strong>
      </button>
    );
  }
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.