From cb6ec8b3dd5be034b2b4d220d7ba289f0cc041e4 Mon Sep 17 00:00:00 2001 From: Iniyal Palanisamy <123928113+IniyalPalanisamy@users.noreply.github.com> Date: Fri, 18 Oct 2024 22:14:39 +0530 Subject: [PATCH] Update App.jsx --- src/App.jsx | 206 +++++++++++++++++++++------------------------------- 1 file changed, 81 insertions(+), 125 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index d1d9fbb..499cdd5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,136 +1,92 @@ -import React, { useEffect } from "react" -import "./App.css" -import { useStateContext } from "./Context" -import { BackgroundLayout, WeatherCard, MiniCard } from "./Components" -import SearchBar from "./Components/SearchBar" -import Settings from "./Components/Setting" -import logo from "./assets/icons/logo.png" -import PullToRefreshComponent from "./Components/PullToRefreshComponent" -import { Routes, Route } from "react-router-dom" -import NotFound from "./Components/404" -import CityCard from "./Components/CityCards" -import LocationCard from "./Components/LocationCard" +import React, { useEffect, useCallback } from "react"; +import "./App.css"; +import { useStateContext } from "./Context"; +import { BackgroundLayout, WeatherCard, MiniCard } from "./Components"; +import SearchBar from "./Components/SearchBar"; +import Settings from "./Components/Setting"; +import logo from "./assets/icons/logo.png"; +import PullToRefreshComponent from "./Components/PullToRefreshComponent"; +import { Routes, Route } from "react-router-dom"; +import NotFound from "./Components/404"; +import CityCard from "./Components/CityCards"; +import LocationCard from "./Components/LocationCard"; -const cities = ["Delhi", "Jaipur", "Kolkata"] +const defaultCities = ["Delhi", "Jaipur", "Kolkata"]; function App() { - const { - weather, - thisLocation, - values, - place, - setPlace, - fetchWeather, - fetchWeatherByCoords, - } = useStateContext() - const [unit, setUnit] = React.useState("C") - const [currentLocs, setCurrentLocs] = React.useState(() => { - const storedArray = localStorage.getItem("currentLocs") - return storedArray ? JSON.parse(storedArray) : cities - }) + const { + weather, + thisLocation, + values, + place, + setPlace, + fetchWeather, + fetchWeatherByCoords, + } = useStateContext(); - useEffect(() => { - if (currentLocs) { - localStorage.setItem("currentLocs", JSON.stringify(currentLocs)) - } - }, [currentLocs]) - const convertTemperature = (temp) => { - return unit === "C" ? temp : Math.round(temp * 1.8) + 32 - } + const [unit, setUnit] = React.useState("C"); + const [currentLocations, setCurrentLocations] = React.useState(() => { + const storedArray = localStorage.getItem("currentLocs"); + return storedArray ? JSON.parse(storedArray) : defaultCities; + }); - const handleRefresh = async () => { - console.log("Refreshing weather data...") - await fetchWeather() - } + useEffect(() => { + localStorage.setItem("currentLocs", JSON.stringify(currentLocations)); + }, [currentLocations]); - const handleCityClick = async (city) => { - setPlace(city) - await fetchWeather() - } + const convertTemperature = (temp) => { + return unit === "C" ? temp : Math.round(temp * 1.8) + 32; + }; - const handleLocationClick = async () => { - if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition( - async (position) => { - const { latitude, longitude } = position.coords - await fetchWeatherByCoords(latitude, longitude) - }, - (error) => { - console.error("Error getting location:", error) - } - ) - } else { - console.error("Geolocation is not supported by this browser.") - } - } + const handleRefresh = async () => { + console.log("Refreshing weather data..."); + await fetchWeather(); + }; - return ( -
- + const handleCityClick = useCallback(async (city) => { + setPlace(city); + await fetchWeather(); + }, [fetchWeather, setPlace]); - + const handleLocationClick = useCallback(async () => { + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition( + async (position) => { + const { latitude, longitude } = position.coords; + await fetchWeatherByCoords(latitude, longitude); + }, + (error) => { + console.error("Error getting location:", error); + alert("Unable to retrieve your location. Please check your browser settings."); + } + ); + } else { + alert("Geolocation is not supported by this browser."); + } + }, [fetchWeatherByCoords]); - - - -
- - {currentLocs.map((city) => ( - handleCityClick(city)} - /> - ))} -
-
- -
- {values?.slice(1, 7).map((curr) => ( - - ))} -
-
- - } - /> - } /> - - -
- ) -} + return ( +
+ + + + + + + +