TodosPage.ts

export class TodosPageComponent extends React.PureComponent {
  state: { todos: Todo[]; filter: string } = { todos: [], filter: '' };
  
  constructor(props) {
    super(props);
  }

  add = (text: string) => todosService.add(text);

  toggleTodo = (id: ID) => todosService.complete(id);

  deleteTodo = (id: ID) => todosService.delete(id);

  changeFilter = ({ target: { value } }) => {
    todosService.updateFilter(value);
  };

  componentDidMount() {
    todosQuery.selectVisibleTodos$
      .pipe(untilDestroyed(this))
      .subscribe(todos => this.setState({ todos }));

    todosQuery.selectVisibilityFilter$
      .pipe(untilDestroyed(this))
      .subscribe(filter => this.setState({ filter }));
  }

  render() {
    return (
      <div>
        <AddTodo add={this.add} />
        <TodoList
          todos={this.state.todos}
          onToggle={this.toggleTodo}
          onDelete={this.deleteTodo}
        />
        <Filters onChange={this.changeFilter} active={this.state.filter} />
      </div>
    );
  }
}