App.js 2.75 KB
// import axios from 'axios';
import React from 'react'


function getData() {
  return new Promise(function (resolve, reject) {
    navigator.geolocation.getCurrentPosition(function (position) {
      let lat = position.coords.latitude;
      let lon = position.coords.longitude;
      resolve({ lat, lon });

    })
  })
}


class App extends React.Component {
  // constructor(props) {
  //   super(props);
  // this.findWeather = this.findWeather.bind(this);
  state = {
    id: "",
  }
  // }

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  }


  findWeather = () => {
    var weatherData = -1;
    this.setState({
      id: "검색한 값: " + this.state.id,
    })
    getData() // 위치 정보 가져옴
      .then(function (object) {
        console.log(object.lat, object.lon);
        return { latitude: object.lat, longitude: object.lon };
      })  // 밑으로 위도, 경도 객체 넘김
      .then(function (result) {
        fetch("http://localhost:3001/weather", { // 위도, 경도 정보를 바탕으로 날씨정보 가져옴
          method: "post",
          headers: {
            "content-type": "application/json",
          },
          body: JSON.stringify({ lat: result.latitude, lon: result.longitude }),
        })  // '날씨' 만 가져와 아래로 넘김
          .then((res) => res.json())
          .then((json) => {
            console.log("클라이언트가 받은 값(날씨)은 : ", json);
            weatherData = json;
            return weatherData;
          })
          .then((data) => {
            console.log("넘어온 데이터는 : ", data);
            if (data === 0) { // 맑을 경우 디비 호출
              fetch(`http://localhost:3001/database0`, { 
                method: "post",
                headers: {
                  "content-type": "application/json",
                },
                body: JSON.stringify(),
              })
                .then((res) => res.json())
                .then((json) => {
                  console.log(json);
                })
            }
            else { // 비/눈이 올 경우 디비 호출
              fetch(`http://localhost:3001/database1`, {
                method: "post",
                headers: {
                  "content-type": "application/json",
                },
                body: JSON.stringify(),
              })
                .then((res) => res.json())
                .then((json) => {
                  console.log(json);
                })
            }

          })
      })


  }

  render() {
    return (
      <div>
        <input onChange={this.handleChange} name="id" />
        <button onClick={this.findWeather}>Run</button>
        <h1>{this.state.id}</h1>
      </div>
    )
  }
}
export default App;