-
Notifications
You must be signed in to change notification settings - Fork 387
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
16 changed files
with
1,056 additions
and
1,864 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| node_modules |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import React from "react"; | ||
| import Clock from "react-live-clock"; | ||
|
|
||
| import AnimatedWeatherIcon from "./components/AnimatedWeather"; | ||
| import Forcast from "./Forcast"; | ||
| import loader from "./images/WeatherIcons.gif"; | ||
| import { dateBuilder, getPosition, getWeatherByCoordinate } from "./utils"; | ||
|
|
||
| const ONE_MINUTE_IN_MS = 60 * 1000; | ||
|
|
||
| export class Weather extends React.Component { | ||
| state = { | ||
| coords: { | ||
| latitude: undefined, | ||
| longitude: undefined, | ||
| }, | ||
| errorMessage: undefined, | ||
| temperatureC: undefined, | ||
| temperatureF: undefined, | ||
| city: undefined, | ||
| country: undefined, | ||
| humidity: undefined, | ||
| description: undefined, | ||
| icon: "CLEAR_DAY", | ||
| sunrise: undefined, | ||
| sunset: undefined, | ||
| errorMsg: undefined, | ||
| timerID: undefined, | ||
| }; | ||
|
|
||
| async updateWeather() { | ||
| const weather = await getWeatherByCoordinate(this.state.coords); | ||
| const timerID = setTimeout(this.updateWeather, 10 * ONE_MINUTE_IN_MS); | ||
| return this.setState({ ...this.state, timerID, ...weather }); | ||
| } | ||
|
|
||
| async componentDidMount() { | ||
| if (!navigator.geolocation) { | ||
| return alert("Geolocation not available"); | ||
| } | ||
|
|
||
| let position; | ||
|
|
||
| try { | ||
| position = await getPosition(); | ||
| } catch (err) { | ||
| position = { coords: { latitude: 28.67, longitude: 77.22 } }; | ||
| alert( | ||
| "You have disabled location service. Allow 'This APP' to access your location. " + | ||
| "Your current location will be used for calculating Real time weather." | ||
| ); | ||
| } | ||
|
|
||
| return this.setState((prevState) => ({ ...prevState, coords: position.coords }), this.updateWeather); | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| return clearTimeout(this.state.timerID); | ||
| } | ||
|
|
||
| render() { | ||
| if (!this.state.temperatureC) { | ||
| return ( | ||
| <React.Fragment> | ||
| <img alt="loader" src={loader} style={{ width: "50%", WebkitUserDrag: "none" }} /> | ||
| <h3 style={{ color: "white", fontSize: "22px", fontWeight: "600" }}>Detecting your location</h3> | ||
| <h3 style={{ color: "white", marginTop: "10px" }}> | ||
| Your current location wil be displayed on the App <br></br> & used for calculating Real time weather. | ||
| </h3> | ||
| </React.Fragment> | ||
| ); | ||
| } | ||
| return ( | ||
| <React.Fragment> | ||
| <div className="city"> | ||
| <div className="title"> | ||
| <h2>{this.state.city}</h2> | ||
| <h3>{this.state.country}</h3> | ||
| </div> | ||
| <AnimatedWeatherIcon className="mb-icon" icon={this.state.icon} title={this.state.main} /> | ||
| <div className="date-time"> | ||
| <div className="dmy"> | ||
| <div id="txt"></div> | ||
| <div className="current-time"> | ||
| <Clock format="HH:mm:ss" interval={1000} ticking={true} /> | ||
| </div> | ||
| <div className="current-date">{dateBuilder(new Date())}</div> | ||
| </div> | ||
| <div className="temperature"> | ||
| <p> | ||
| {this.state.temperatureC}°<span>C</span> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <Forcast icon={this.state.icon} weather={this.state.main} /> | ||
| </React.Fragment> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default Weather; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import React, { useEffect, useState, useCallback } from "react"; | ||
|
|
||
| import AnimatedWeatherIcon from "./components/AnimatedWeather"; | ||
| import { getWeatherByQuery } from "./utils"; | ||
|
|
||
| export const Forcast = (props) => { | ||
| const [query, setQuery] = useState(""); | ||
| const [error, setError] = useState(""); | ||
| const [weather, setWeather] = useState({}); | ||
|
|
||
| const search = useCallback(async (query) => { | ||
| try { | ||
| const weather = await getWeatherByQuery(query); | ||
| setWeather(weather); | ||
| setQuery(""); | ||
| } catch (err) { | ||
| console.log("error", err); | ||
| setWeather({}); | ||
| setQuery(""); | ||
| setError({ message: "Not Found", query }); | ||
| } | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| search("Delhi"); | ||
| }, [search]); | ||
|
|
||
| return ( | ||
| <div className="forecast"> | ||
| <AnimatedWeatherIcon className="forecast-icon" icon={props.icon} /> | ||
| <div className="today-weather"> | ||
| <h3>{props.weather}</h3> | ||
| <form onSubmit={(e) => e.preventDefault() || search(query)} className="search-box"> | ||
| <input | ||
| type="text" | ||
| className="search-bar" | ||
| placeholder="Search any city" | ||
| onChange={(e) => setQuery(e.target.value)} | ||
| value={query} | ||
| /> | ||
| <button type="submit">Search</button> | ||
| </form> | ||
| <ul> | ||
| {weather.main ? ( | ||
| <React.Fragment> | ||
| <li className="cityHead"> | ||
| <p> | ||
| {weather.city}, {weather.country} | ||
| </p> | ||
| <img | ||
| alt={`weather icon ${weather.icon}`} | ||
| className="temp" | ||
| src={`https://openweathermap.org/img/wn/${weather.icon}.png`} | ||
| /> | ||
| </li> | ||
| <li> | ||
| <span>Temperature </span> | ||
| <span className="temp"> | ||
| {weather.temperatureC}°c ({weather.main}) | ||
| </span> | ||
| </li> | ||
| <li> | ||
| Humidity <span className="temp">{Math.round(weather.humidity)}%</span> | ||
| </li> | ||
| <li> | ||
| Visibility <span className="temp">{Math.round(weather.visibility)} mi</span> | ||
| </li> | ||
| <li> | ||
| Wind Speed <span className="temp">{Math.round(weather.speed)} Km/h</span> | ||
| </li> | ||
| </React.Fragment> | ||
| ) : ( | ||
| <li> | ||
| {error.query} {error.message} | ||
| </li> | ||
| )} | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Forcast; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import React from "react"; | ||
| import ReactAnimatedWeather from "react-animated-weather"; | ||
|
|
||
| export const AnimatedWeatherIcon = ({ icon, title, className }) => ( | ||
| <div className={className}> | ||
| <ReactAnimatedWeather icon={icon} color="white" size={112} animate={true} /> | ||
| {title && <p>{title}</p>} | ||
| </div> | ||
| ); | ||
|
|
||
| export default AnimatedWeatherIcon; |
Oops, something went wrong.