Merge pull request #84 from chingu-voyage5/feature-displayWeather-#14…

…-nari Feature display weather #14 nari
chingu-voyage5 · Jul 25, 2018 · 462a714 · 462a714
2 parents 2da352b + bc5436f
commit 462a714
Show file tree

Hide file tree

Showing 6 changed files with 426 additions and 190 deletions.
diff --git a/src/components/App.js b/src/components/App.js
@@ -3,14 +3,14 @@ import "../styles/App.css";
 
 import Time from './Time';
 import Name from './Name';
-import WeatherContainer from "./WeatherContainer";
 import Focus from "./Focus";
 import ToDo from "./ToDo.js";
 import Links from "./Links";
 import Search from "./Search";
 import Quotes from "./Quotes";
 import Settings from "./Settings";
 import WallpaperInfo from "./WallpaperInfo";
+import WeatherContainer from "./WeatherContainer";
 
 class App extends Component {
 	render() {

diff --git a/src/components/MainWeather.js b/src/components/MainWeather.js
@@ -23,15 +23,18 @@ function MainWeather(props) {
               <Fragment>
                 <div className="Weather--Main__Row">
                   <WeatherIcon name="yahoo" iconId={weatherCode || "32"} />
-                  {/* <Temp temp={temperature} /> */}
                   <div className="temp">
                     <span>
                       {unit ? store.convertToC(temperature) : temperature}°
                     </span>
                   </div>
                 </div>
                 <div className="Weather--Main__Row">
-                  <Location currentCity={city} currentCountry={countryCode} />
+                  <div className="location">
+                    <span>
+                      {city}{countryCode}
+                    </span>
+                  </div>
                 </div>
               </Fragment>
             );
@@ -42,22 +45,4 @@ function MainWeather(props) {
   );
 }
 
-// function Temp({ temp }) {
-//   return (
-//     <div className="temp">
-//       <span>{temp}°</span>
-//     </div>
-//   );
-// }
-
-function Location({ currentCity, currentCountry }) {
-  return (
-    <div className="location">
-      <span>
-        {currentCity}, {currentCountry}
-      </span>
-    </div>
-  );
-}
-
 export default MainWeather;
diff --git a/src/components/Weather.js b/src/components/Weather.js
@@ -9,7 +9,6 @@ class Weather extends React.Component {
     super(props);
     this.state = {
       showModal: false,
-      showForm: false,
     };
   }
 
@@ -20,22 +19,15 @@ class Weather extends React.Component {
 	handleCloseModal = () => {
 		this.setState({ showModal: false });
   }; 
-
-  handleLocationForm = () => {
-    this.setState({ showForm: !this.state.showForm })
-  }
 
 	render() {
-    const { showModal, showForm } = this.state;
 
 		return (
 			<div id="Weather">
 				<MainWeather handleOpenModal={this.handleOpenModal} />
 				<WeatherModal
-					isActive={showModal}
-          showForm={showForm}
+					isActive={this.state.showModal}
           handleCloseModal={this.handleCloseModal}
-          handleLocationForm={this.handleLocationForm}
 				/>
 			</div>
 		);

diff --git a/src/components/WeatherContainer.js b/src/components/WeatherContainer.js
@@ -5,86 +5,159 @@ import "../styles/Weather.css";
 
 class WeatherContainer extends React.Component {
 	constructor(props) {
-    super(props);
-    
-    this.state = {
-      location: {},
-      currentWeather: {},
+		super(props);
+
+		this.state = {
+			location: {},
+			currentWeather: {},
       forecastWeather: {},
+      newLocation: {},
+      message: '',
       unit: false,
-      // false: Fahrenheit, true: Celcius
-      handleTempUnit: this.handleTempUnit,
-      convertToC: this.convertToC
-    };
-  }
-
-
-  componentDidMount() {
-    this.getGeoLocation();
-    // console.log(this.state)
+			// 👆 false: Fahrenheit, true: Celsius
+			convertToC: this.convertToC,
+			handleTempUnit: this.handleTempUnit,
+			handleChangeLocation: this.handleChangeLocation,
+      handleSubmitLocation: this.handleSubmitLocation,
+      handleGeoLocation: this.handleGeoLocation
+		};
   }
+
+  convertToC = temp => parseInt((temp - 32) / 1.8);
 
   handleTempUnit = () => {
-    this.setState({
-      unit: !this.state.unit
+    this.setState(prevState => {
+      const newState = {
+        ...prevState,
+        unit: !this.state.unit
+      };
+      this.saveState(newState);
+      return { ...newState };
     });
   };
-
-  convertToC = temp => parseInt((temp - 32) / 1.8); 
-
+
+  handleChangeLocation = e => {
+    this.setState({
+      newLocation: { city: e.target.value } });
+  };
+
+  handleSubmitLocation = e => {
+    e.preventDefault();
+    this.getWeatherByCity(this.state.newLocation.city);
+  };
+
+  handleGeoLocation = () => {
+    console.log('c')
+    this.setState({ message: "Loading..." });
+    this.getGeoLocation();
+  }
+
+	componentDidMount() {
+		// Calls the api every hour
+		this.intervalId = setInterval(() => this.getGeoLocation(), 3600000);
+		this.loadState();
+  }
+
+	loadState = async () => {
+		try {
+			const state = await localStorage.getItem("state");
+			if (state) {
+				const parsedState = JSON.parse(state);
+				const { location, currentWeather, forecastWeather, unit, newLocation } = parsedState;
+
+				this.setState({
+					location,
+					currentWeather,
+					forecastWeather,
+          unit,
+          newLocation
+				});
+			} else {
+				this.getGeoLocation();
+			}
+		} catch (err) {
+			console.log(err);
+		}
+  };
+
+	saveState = state => {
+		localStorage.setItem("state", JSON.stringify(state));
+	};
+
 	getGeoLocation = () => {
-    navigator.geolocation.getCurrentPosition(
-      position => {
-        let { latitude, longitude } = position.coords;
-				this.getWeather(latitude, longitude);
+		navigator.geolocation.getCurrentPosition(
+			position => {
+				let { latitude, longitude } = position.coords;
+        this.getWeatherByGeo(latitude, longitude);
 			},
 			error => console.log(error)
 		);
 	};
+
+	getWeatherByCity = cityName => {
+    const searchText = `select * from weather.forecast where woeid in (select woeid from geo.places(1) where text="(${cityName})")`;
+
+		this.getWeather(searchText);
+  };
 
-	getWeather = (lat, lon) => {
+  getWeatherByGeo = (lat, lon) => {
     const searchText = `select * from weather.forecast where woeid in (SELECT woeid FROM geo.places WHERE text="(${lat},${lon})")`;
-		const endPoint = `https://query.yahooapis.com/v1/public/yql?q=${searchText}&format=json`;
+    this.getWeather(searchText);
+  }
+
+	getWeather = (searchText) => {
+    const endPoint = `https://query.yahooapis.com/v1/public/yql?q=${searchText}&format=json`;
 
 		fetch(endPoint)
-    .then(response => response.json())
-    .then(json => {
-      // console.log(json);
-      let data = json.query.results.channel;
-      let { forecast } = data.item;
-
-      this.setState({
-        location: {
-          city: data.location.city,
-          countryCode: data.title.split(", ").pop()
-        },
-        currentWeather: {
-          weatherCode: data.item.condition.code,
-          temperature: data.item.condition.temp,
-          weather: data.item.condition.text
-        },
-        forecastWeather: {
-          day1: forecast[0],
-          day2: forecast[1],
-          day3: forecast[2],
-          day4: forecast[3],
-          day5: forecast[4]
-        },
+			.then(response => response.json())
+			.then(json => {
+				console.log(json);
+				// date:"23 Jul 2018"
+        let data = json.query.results.channel;
+        let { forecast } = data.item;
+        console.log(data.item.condition.date);
+
+        this.setState({
+          message: '',
+          location: {
+            city: data.location.city,
+            countryCode: `, ${data.title.split(", ").pop()}`
+          },
+          currentWeather: {
+            weatherCode: data.item.condition.code,
+            temperature: data.item.condition.temp,
+            weather: data.item.condition.text
+          },
+          forecastWeather: {
+            day1: forecast[0],
+            day2: forecast[1],
+            day3: forecast[2],
+            day4: forecast[3],
+            day5: forecast[4]
+          }
+        });
+        this.setNewLocation();
+        this.saveState(this.state);
+        console.log(this.state);
+      })
+      .catch(err => {
+        this.setState({ message: 'not found' });
+        console.log(err);
       });
-      // console.log(this.state)
-    });
   };
 
+  setNewLocation = () => {
+    this.setState({ newLocation: {...this.state.location} });
+  }
 
-
 	render() {
-		return ( 
-      <Fragment>
-        <Store.Provider value={this.state}>
-          <Weather />
-        </Store.Provider>
-      </Fragment>
-    );
+		return (
+			<Fragment>
+				<Store.Provider value={this.state}>
+					<Weather />
+				</Store.Provider>
+			</Fragment>
+		);
 	}
 }