This repository was archived by the owner on Nov 19, 2023. It is now read-only.
ES6 Convertion #11
Description
App component is currently bloated and using old JS syntax
Steps:
- Convert functions to arrow functions
- Use Object destruction for props
- Event handlers affecting a single state in one line code, such as the input
- Not needed variable declaration removal, conditional ternary on return JSX
Solution:
APP COMPONENT
const App = () => {
const [data, setData] = useState(null);
const [place, setPlace] = useState(null);
const [search, setSearch] = useState("");
const [location, setLocation] = useState("");
const [isLoading, setIsLoading] = useState(false);
const geoHandler = async () => {
setSearch("");
setIsLoading(true);
await navigator.geolocation.getCurrentPosition((position) => {
const crd = position.coords;
const latitude = crd.latitude;
const longitude = crd.longitude;
setLocation(`${latitude},${longitude}`);
});
};
const fetchData = useCallback(async (search, location) => {
const options = {
method: "GET",
headers: {
"X-RapidAPI-Key": "0173291af0msh62b3ca25953f210p13d732jsn66b4d9f97708",
"X-RapidAPI-Host": "weatherapi-com.p.rapidapi.com",
},
};
const url = `https://weatherapi-com.p.rapidapi.com/current.json?q=${
search || location
}`;
const response = await fetch(url, options);
const responseData = await response.json();
return responseData;
}, []);
useEffect(() => {
fetchData(search, location).then((responseData) => {
setPlace(responseData.location);
setData(responseData.current);
setIsLoading(false);
});
}, [location, search, fetchData]);
return (
<>
<div className="container">
<h1>WEATHER APPLICATION</h1>
<div className="search-sec">
<input
type="text"
value={search}
placeholder="Search by City..."
onChange={(e) => setSearch(e.target.value)}
/>
</div>
<div>
<p>or</p>
</div>
<div>
<button onClick={geoHandler}>Find me!</button>
</div>
<br />
<br />
{isLoading && <LoadingIndicator />}
{data ? <Weather place={place} data={data} /> : <p>no data found 😬</p>}
</div>
<span className="credit">Ranvir@zetabug/github</span>
</>
);
};
export default App;
WEATHER COMPONENT
const Weather = ({ place, data }) => {
return (
<div className="output-sec">
<div className="location">
{place.name}, {place.region}
</div>
<img src={data.condition.icon} alt="" />
<div className="sky-status">{data.condition.text}</div>
<div className="temp">Temperature : {data.temp_c}°C</div>
<div className="humidity">Humidity : {data.humidity}</div>
</div>
);
};
If interested, review and merge PR
Thank you =)