Pesquisa CEP React

index.html

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

pesquisa-cep-react.markdown

Pesquisa CEP React

A Pen by Carolina on CodePen.

License.

script.babel

class CEPSearchForm extends React.Component {
  constructor(props) {
    super(props);
  }

  handleSubmit(e) {
    e.preventDefault();
    const cep = this.props.cep;
    this.props.setErrorMessage("");
    if (cep.length != 8) {
      this.props.setErrorMessage("Digite um CEP válido");
      return false;
    }
    this.props.requestCEPInfo(cep);
  }

  render() {
    return (
      <div id="cep-search-form">
        <form>
          <input
            type="number"
            placeholder="Digite CEP..."
            value={this.props.cep}
            onChange={this.props.handleCepValueChange}
          />
          <button
            style={{ marginLeft: "5px" }}
            onClick={this.handleSubmit.bind(this)}
          >
            Buscar
          </button>
        </form>
      </div>
    );
  }
}

class CEPSearchResultTable extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    console.log();
    if (!this.props.show) {
      return null;
    }
    return (
      <div id="search-container-result">
        <table>
          <thead>
            <tr>
              <th>Logradouro</th>
              <th>Bairro</th>
              <th>Cidade</th>
              <th>UF</th>
              <th>DDD</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{this.props.result.logradouro}</td>
              <td>{this.props.result.bairro}</td>
              <td>{this.props.result.localidade}</td>
              <td>{this.props.result.uf}</td>
              <td>{this.props.result.ddd}</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

class Dialog extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div id="generic-dialog" style={{ backgroundColor: this.props.bgcolor }}>
        {this.props.message}
      </div>
    );
  }
}

class ErrorDialog extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <Dialog bgcolor="red" message={this.props.message} />;
  }
}

class SuccessDialog extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <Dialog bgcolor="green" message="CEP encontrado" />;
  }
}

class CEPSearchContainer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      cep: "",
      isLoaded: false,
      result: {},
      error: ""
    };

    this.handleCepValueChange = this.handleCepValueChange.bind(this);
    this.setErrorMessage = this.setErrorMessage.bind(this);
    this.requestCEPInfo = this.requestCEPInfo.bind(this);
  }

  handleCepValueChange(e) {
    this.setState({ cep: e.target.value });
  }
  
  setErrorMessage(message) {
    this.setState({error: message});
  }

  requestCEPInfo(cep) {
    fetch(`https://viacep.com.br/ws/${cep}/json/`)
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            result
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      );
  }

  render() {
    let dialog, showResult;
    
    if (this.state.isLoaded) {
      dialog = <ErrorDialog message="CEP incorreto" />;
      if (!this.state.result.erro) {
        showResult = true
        dialog = <SuccessDialog />;
      }
    }
    
    if (this.state.error != "") {
      dialog = <ErrorDialog message={this.state.error} />;
    }

    return (
      <div>
        {dialog}
        <div id="search-container">
          <CEPSearchForm
            cep={this.state.cep}
            handleCepValueChange={this.handleCepValueChange}
            setErrorMessage={this.setErrorMessage}
            requestCEPInfo={this.requestCEPInfo}
          />
          <CEPSearchResultTable
            result={this.state.result}
            show={showResult}
          />
        </div>
      </div>
    );
  }
}

ReactDOM.render(<CEPSearchContainer />, document.getElementById("container"));

scripts

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

style.css

body {
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 14px;
}

input[type="number"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
}

#search-container {
  padding: 5px;
  background-color: #161D36;
}

button {
  background-color: #4C63B5;
  border: none;
  color: white;
  padding: 10px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

button:hover {
  background-color: #5C78DB;
  color: white;
}

button {
  transition-duration: 0.4s;
}

input {
  padding: 8px;
}

#search-container-result {
  border-top: 1px white solid;
  padding: 10px; 
  margin-top: 5px;
  color: white;
}

#search-container-result > table {
  cell-padding: 2px; 
  width: 100%;
}

#search-container-result > table > thead {
  text-align: left;
}

#cep-search-form {
  padding: 10px;
}

#generic-dialog {
  margin-bottom: 5px;
  padding: 10px;
  color: white;
  opacity: 0.8;
}