PubSub returning false on publish

Question

I'm using PubSub to globalize some states on my React application. I've a "Home" and a "Escolas" Component, "Escolas" is already using PubSub to share his status with a Component called "Filters". Works fine.

But now, my user starts the application on "Home", there, he enter a name on some input and I want to save this value on a topic of PubSub, but when I try to publish, the return is false.

setEscola(collection, e) {
        this.setState({ escola: e });
        var isPublished = PubSub.publish('escola-filtro', collection);
        console.log(isPublished);
}

This is my entire Component:

import React, { Component } from 'react';
import PubSub from 'pubsub-js';
import lupa from '../../img/lupa.png';
import { Link } from 'react-router-dom';
import MenuHome from '../MenuSuperior/MenuHome';
import { listarEscolas } from '../../services/escolas';
import SelectAutocomplete from '../Inputs/SelectAutocomplete';

export default class Home extends Component {

    constructor(props) {
        super(props);
        this.state = {
            escola :  '',
            escolas : []
        }

        this.setEscola = this.setEscola.bind(this);
        this.testeEstado = this.testeEstado.bind(this);
    }

    componentDidMount() {
        listarEscolas().then(
            lista => {
                let escolas = [];
                lista.results.forEach(function(escola) {
                    escolas.push({value : escola.codesc, label : escola.nomesc })
                });
                this.setState({ escolas : escolas });
            }
        )
    }

    componentWillMount() {
        PubSub.clearAllSubscriptions();
    }

    buscarEscolas = (e) => {
        if (e.target.value.length >= 3) {
            let escolas = [];
            listarEscolas(e.target.value).then(
                lista => {
                    lista.results.forEach(function(escola) {
                        escolas.push({value : escola.codesc, label : escola.nomesc });
                    });
                    this.setState({ escolas :  escolas });
                }
            )
        }
    }

    setEscola(collection, e) {
        // this.setState({ escola: e });
        // var isPublished = PubSub.publishSync('escola-filtro', collection);
        // console.log(isPublished);
    }

    testeEstado(event) {
        console.log(event.target.value);
        var isPublished = PubSub.publishSync('filtro', event.target.value);
        console.log(isPublished);
    }

    render() {
        return(
            <div>
                <MenuHome />
                <div className="w-100 mapa-home">
                    <div className="container d-flex justify-content-center">
                        <div className="col-lg-5 text-center position-absolute conteudo">
                            <h2>Aqui você encontra todas as informações sobre sua escola</h2>
                            <div className="form-group mt-4">
                                <input type="text" className="form-control form-control-lg" onChange={this.testeEstado} />
                                <SelectAutocomplete
                                    value={this.state.escola}
                                    collection={this.state.escolas}
                                    className="form-control form-control-lg rounded-pill shadow m-90 d-inline-block"
                                    placeholder="Encontre sua escola pelo nome ou bairro"
                                    onChange={this.setEscola}
                                    onKeyDown={this.buscarEscolas}
                                />
                                <Link className="btn btn-light d-inline-block ml-1" to="/escolas"><img src={lupa} alt="Buscar" /></Link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

}

Answer 1

Try this:

   async function testeEstado(event) {
        console.log(event.target.value);
        var isPublished = await PubSub.publishSync('filtro', event.target.value);
        console.log(isPublished);
    }

The Async Await model should work for what you are trying to test here. I am uncertain if it will solve the issues if they are more underlying though.