Skip to content

feat: persist last searched city in localStorage #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
venisha-kalola merged 1 commit into from
Oct 13, 2025
Merged

feat: persist last searched city in localStorage #30

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 50 additions & 23 deletions src/pages/Weather.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,16 @@
* - [ ] Animate background transitions
* - [ ] Add geolocation: auto-detect user city (with permission)
*/

import { useEffect, useState } from 'react';
import Loading from '../components/Loading.jsx';
import ErrorMessage from '../components/ErrorMessage.jsx';
import Card from '../components/Card.jsx';
import { getWeatherData, clearWeatherCache, getCacheStats } from '../services/weather.js';

export default function Weather() {
const [city, setCity] = useState('London');
const [city, setCity] = useState(() => {
return localStorage.getItem('lastCity') || 'London';
});
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
Expand All @@ -36,21 +37,31 @@ export default function Weather() {
useEffect(() => {
fetchWeather(city);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
}, []);

async function fetchWeather(c) {
try {
setLoading(true);
setError(null);
const json = await getWeatherData(c); // Using the service instead of direct fetch

const json = await getWeatherData(c);// Using the service instead of direct fetch
setData(json);

// Save the searched city to localStorage
localStorage.setItem('lastCity', c);
} catch (e) {
setError(e);
} finally {
setLoading(false);
}
}

const handleSubmit = (e) => {
e.preventDefault();
if (!city.trim()) return;
fetchWeather(city);
};

// Helper function to clear cache and refetch (for testing)
const handleClearCache = () => {
clearWeatherCache();
Expand All @@ -65,34 +76,37 @@ export default function Weather() {
};

const current = data?.current_condition?.[0];
const forecast = data?.weather?.slice(0,3) || [];
const forecast = data?.weather?.slice(0, 3) || [];

// Helper to convert °C to °F
const displayTemp = (c) => unit === 'C' ? c : Math.round((c * 9/5) + 32);
const displayTemp = (c) => (unit === 'C' ? c : Math.round((c * 9) / 5 + 32));

return (
<div className="dashboard-page">
<div className="dashboard-header">
<h1>🌤️ Weather Dashboard</h1>
<form onSubmit={(e) => {e.preventDefault(); fetchWeather(city)}}>
<input
type="text"
value={city}
<form onSubmit={handleSubmit}>
<input
type="text"
value={city}
onChange={(e) => setCity(e.target.value)}
placeholder="Enter city name..."
placeholder="Enter city name..."
/>
<button type="submit">Get Weather</button>
</form>

{/* Development tools - you can remove these later */}
<div style={{marginTop: '10px', display: 'flex', gap: '10px'}}>
<button onClick={handleClearCache} style={{fontSize: '12px'}}>
<div style={{ marginTop: '10px', display: 'flex', gap: '10px' }}>
<button onClick={handleClearCache} style={{ fontSize: '12px' }}>
Clear Cache
</button>
<button onClick={handleShowCacheStats} style={{fontSize: '12px'}}>
<button onClick={handleShowCacheStats} style={{ fontSize: '12px' }}>
Cache Stats
</button>
<button onClick={() => setUnit(unit === 'C' ? 'F' : 'C')} style={{fontSize: '12px'}}>
<button
onClick={() => setUnit(unit === 'C' ? 'F' : 'C')}
style={{ fontSize: '12px' }}
>
Switch to °{unit === 'C' ? 'F' : 'C'}
</button>
</div>
Expand All @@ -106,21 +120,34 @@ export default function Weather() {
{/* Current Weather */}
<Card title="Current Weather" size="large">
<h2>{data.nearest_area?.[0]?.areaName?.[0]?.value || city}</h2>
<p><strong>Temperature:</strong> {displayTemp(Number(current.temp_C))}°{unit}</p>
<p><strong>Humidity:</strong> {current.humidity}%</p>
<p><strong>Desc:</strong> {current.weatherDesc?.[0]?.value}</p>
<p>
<strong>Temperature:</strong> {displayTemp(Number(current.temp_C))}°{unit}
</p>
<p>
<strong>Humidity:</strong> {current.humidity}%
</p>
<p>
<strong>Desc:</strong> {current.weatherDesc?.[0]?.value}
</p>
</Card>

{/* 3-Day Forecast */}
{forecast.map((day, i) => (
<Card key={i} title={i === 0 ? 'Today' : `Day ${i+1}`}>
<p><strong>Avg Temp:</strong> {displayTemp(Number(day.avgtempC))}°{unit}</p>
<p><strong>Sunrise:</strong> {day.astronomy?.[0]?.sunrise}</p>
<p><strong>Sunset:</strong> {day.astronomy?.[0]?.sunset}</p>
<Card key={i} title={i === 0 ? 'Today' : `Day ${i + 1}`}>
<p>
<strong>Avg Temp:</strong> {displayTemp(Number(day.avgtempC))}°{unit}
</p>
<p>
<strong>Sunrise:</strong> {day.astronomy?.[0]?.sunrise}
</p>
<p>
<strong>Sunset:</strong> {day.astronomy?.[0]?.sunset}
</p>
</Card>
))}
</div>
)}
</div>
);
}

Loading