/* @flow */
import React, { PureComponent } from 'react';

import type { Actions, Stream, Topic } from '../types';
import connectWithActions from '../connectWithActions';
import { Screen } from '../common';
import { topicNarrow } from '../utils/narrow';
import { getTopicsInScreen } from '../selectors';
import { getStreamEditInitialValues } from '../subscriptions/subscriptionSelectors';
import TopicList from './TopicList';

type Props = {
  actions: Actions,
  stream: Stream,
  topics: Topic[],
};

class TopicListScreen extends PureComponent<Props> {
  props: Props;

  componentDidMount() {
    const { actions, stream } = this.props;
    actions.fetchTopics(stream.stream_id);
  }

  handlePress = (streamObj: string, topic: string) => {
    const { actions, stream } = this.props;
    actions.doNarrow(topicNarrow(stream.name, topic));
  };

  render() {
    const { topics } = this.props;

    return (
      <Screen title="Topics" padding>
        <TopicList topics={topics} onPress={this.handlePress} />
      </Screen>
    );
  }
}

export default connectWithActions(state => ({
  stream: getStreamEditInitialValues(state),
  topics: getTopicsInScreen(state),
}))(TopicListScreen);

@@ -496,16 +496,53 @@
 %5B%5D,%0A%7D;%0A%0A
+type State = %7B%0A  filter: string,%0A%7D;%0A%0A
 class To
@@ -582,16 +582,23 @@
 nt%3CProps
+, State
 %3E %7B%0A  pr
@@ -610,16 +610,57 @@
 Props;%0A%0A
+  state: State = %7B%0A    filter: '',%0A  %7D;%0A%0A
   compon
@@ -934,104 +934,385 @@
 %0A%0A  
-render() %7B%0A    const %7B topics %7D = this.props;%0A%0A    return (%0A      %3CScreen title=%22Topics%22 padding
+handleFilterChange = (filter: string) =%3E this.setState(%7B filter %7D);%0A%0A  render() %7B%0A    const %7B topics %7D = this.props;%0A    const %7B filter %7D = this.state;%0A    const filteredTopics =%0A      topics && topics.filter(topic =%3E topic.name.toLowerCase().includes(filter.toLowerCase()));%0A%0A    return (%0A      %3CScreen title=%22Topics%22 padding search searchBarOnChange=%7Bthis.handleFilterChange%7D
 %3E%0A  
@@ -1336,17 +1336,25 @@
 topics=%7B
-t
+filteredT
 opics%7D o

Add search to Topic List screen