From b2872a0e2b05cee6f0f946022b742974e3e0fd9a Mon Sep 17 00:00:00 2001 From: Mustafa Ahmadi <118629586+MustafaAhmadi1994@users.noreply.github.com> Date: Mon, 15 Jan 2024 16:42:58 +0330 Subject: [PATCH] Update currentLocation.js Rewrote currentLocaion.js using function components --- src/currentLocation.js | 272 +++++++++++++++++++---------------------- 1 file changed, 125 insertions(+), 147 deletions(-) diff --git a/src/currentLocation.js b/src/currentLocation.js index 08bb195a0..913917757 100644 --- a/src/currentLocation.js +++ b/src/currentLocation.js @@ -41,33 +41,29 @@ const defaults = { size: 112, animate: true, }; -class Weather extends React.Component { - state = { - lat: undefined, - lon: undefined, - errorMessage: undefined, - temperatureC: undefined, - temperatureF: undefined, - city: undefined, - country: undefined, - humidity: undefined, - description: undefined, - icon: "CLEAR_DAY", - sunrise: undefined, - sunset: undefined, - errorMsg: undefined, - }; - componentDidMount() { +export default function Weather() { + const [lat, setLat] = useState(undefined); + const [lon, setLon] = useState(undefined); +// const [errorMessage, setErrorMessage] = useState(undefined); + const [temperatureC, setTemperatureC] = useState(undefined); + const [temperatureF, setTemperatureF] = useState(undefined); + const [city, setCity] = useState(undefined); + const [country, setCountry] = useState(undefined); + const [humidity, setHumidity] = useState(undefined); + const [description, setDescription] = useState(undefined); + const [icon, setIcon] = useState("CLEAR_DAY"); +// const [sunrise, setSunrise] = useState(undefined); +// const [sunset, setSunset] = useState(undefined); + + useEffect(() => { if (navigator.geolocation) { - this.getPosition() - //If user allow location service then will fetch data & send it to get-weather function. + getPosition() .then((position) => { - this.getWeather(position.coords.latitude, position.coords.longitude); + getWeather(position.coords.latitude, position.coords.longitude); }) .catch((err) => { - //If user denied location service then standard location weather will le shown on basis of latitude & latitude. - this.getWeather(28.67, 77.22); + getWeather(28.67, 77.22); // Default location alert( "You have disabled location service. Allow 'This APP' to access your location. Your current location will be used for calculating Real time weather." ); @@ -76,136 +72,118 @@ class Weather extends React.Component { alert("Geolocation not available"); } - this.timerID = setInterval( - () => this.getWeather(this.state.lat, this.state.lon), - 600000 - ); - } - - componentWillUnmount() { - clearInterval(this.timerID); - } - - // tick = () => { - // this.getPosition() - // .then((position) => { - // this.getWeather(position.coords.latitude, position.coords.longitude) - // }) - // .catch((err) => { - // this.setState({ errorMessage: err.message }); - // }); - // } - - getPosition = (options) => { - return new Promise(function (resolve, reject) { + const timerID = setInterval(() => getWeather(lat, lon), 600000); + + return () => clearInterval(timerID); + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const getPosition = (options) => + new Promise(function (resolve, reject) { navigator.geolocation.getCurrentPosition(resolve, reject, options); }); - }; - getWeather = async (lat, lon) => { - const api_call = await fetch( - `${apiKeys.base}weather?lat=${lat}&lon=${lon}&units=metric&APPID=${apiKeys.key}` - ); - const data = await api_call.json(); - this.setState({ - lat: lat, - lon: lon, - city: data.name, - temperatureC: Math.round(data.main.temp), - temperatureF: Math.round(data.main.temp * 1.8 + 32), - humidity: data.main.humidity, - main: data.weather[0].main, - country: data.sys.country, - // sunrise: this.getTimeFromUnixTimeStamp(data.sys.sunrise), - - // sunset: this.getTimeFromUnixTimeStamp(data.sys.sunset), - }); - switch (this.state.main) { - case "Haze": - this.setState({ icon: "CLEAR_DAY" }); - break; - case "Clouds": - this.setState({ icon: "CLOUDY" }); - break; - case "Rain": - this.setState({ icon: "RAIN" }); - break; - case "Snow": - this.setState({ icon: "SNOW" }); - break; - case "Dust": - this.setState({ icon: "WIND" }); - break; - case "Drizzle": - this.setState({ icon: "SLEET" }); - break; - case "Fog": - this.setState({ icon: "FOG" }); - break; - case "Smoke": - this.setState({ icon: "FOG" }); - break; - case "Tornado": - this.setState({ icon: "WIND" }); - break; - default: - this.setState({ icon: "CLEAR_DAY" }); + + const getWeather = async (lat, lon) => { + try { + const api_call = await fetch( + `${apiKeys.base}weather?lat=${lat}&lon=${lon}&units=metric&APPID=${apiKeys.key}` + ); + const data = await api_call.json(); + setLat(lat); + setLon(lon); + setCity(data.name); + setTemperatureC(Math.round(data.main.temp)); + setTemperatureF(Math.round(data.main.temp * 1.8 + 32)); + setHumidity(data.main.humidity); + setDescription(data.weather[0].main); + setCountry(data.sys.country); + + switch (data.weather[0].main) { + case "Haze": + setIcon("CLEAR_DAY"); + break; + case "Clouds": + setIcon("CLOUDY"); + break; + case "Rain": + setIcon("RAIN"); + break; + case "Snow": + setIcon("SNOW"); + break; + case "Dust": + setIcon("WIND"); + break; + case "Drizzle": + setIcon("SLEET"); + break; + case "Fog": + case "Smoke": + setIcon("FOG"); + break; + case "Tornado": + setIcon("WIND"); + break; + default: + setIcon("CLEAR_DAY"); + } + } catch (error) { + console.error(error.message); // Handle error } }; - render() { - if (this.state.temperatureC) { - return ( - -
-
-

{this.state.city}

-

{this.state.country}

-
-
- {" "} - -

{this.state.main}

-
-
-
-
-
- -
-
{dateBuilder(new Date())}
-
-
-

- {this.state.temperatureC}°C -

- {/* / - {this.state.temperatureF} °F */} -
+ return temperatureC ? ( + <> +
+
+

{city}

+

{country}

+
+ +
+ +

{description}

+
+ +
+
+
+ +
+
+ +
{dateBuilder(new Date())}
- - - ); - } else { - return ( - - -

- Detecting your location -

-

- Your current location wil be displayed on the App

& used - for calculating Real time weather. -

- - ); - } - } -} -export default Weather; +
+

+ {temperatureC}°C +

+ / + {temperatureF} °F +
+
+
+ + + + ) : ( + <> + +

+ Detecting your location +

+

+ Your current location wil be displayed on the App

& used for + calculating Real time weather. +

+ + ); +}