+
Weather App
diff --git a/src/components/SearchBox.jsx b/src/components/SearchBox.jsx
index 3328043..1ba40d1 100644
--- a/src/components/SearchBox.jsx
+++ b/src/components/SearchBox.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
import { IoSearch } from "react-icons/io5";
export default function SearchBox({ value, onChange, onSubmit }) {
diff --git a/src/components/WeatherDashboard.jsx b/src/components/WeatherDashboard.jsx
index 25ce4c2..febcf73 100644
--- a/src/components/WeatherDashboard.jsx
+++ b/src/components/WeatherDashboard.jsx
@@ -5,7 +5,7 @@ function WeatherDashboard() {
const cities = useSelector((state) => state.weather.cities);
return (
- {console.log(cities)}
+ {/* {console.log(cities)} */}
{cities.map((city, index) => (
))}
diff --git a/src/components/WeatherForecast.jsx b/src/components/WeatherForecast.jsx
index 536d9f2..cc2c793 100644
--- a/src/components/WeatherForecast.jsx
+++ b/src/components/WeatherForecast.jsx
@@ -7,10 +7,14 @@ function WeatherForecast() {
const { name } = useParams();
const cities = useSelector((state) => state.weather.cities);
- const cityData = cities.find((city) => city.name === name);
+ const cityData = cities.find((city) => city.name === name); // Adjusted to use object access for normalized state
if (!cityData) {
- return No forecast available for {name}.
;
+ return (
+
+ No forecast available for {name}.
+
+ );
}
const { forecast } = cityData.weather;
@@ -21,32 +25,40 @@ function WeatherForecast() {
{forecast.forecastday.map((day, index) => (
-
- {format(parseISO(day.date), "EEEE, MMM d")}
-
-
-
{day.day.condition.text}
-
- -
- Max Temp: {day.day.maxtemp_c}°C
-
- -
- Min Temp: {day.day.mintemp_c}°C
-
- -
- Chance of Rain: {day.day.daily_chance_of_rain}%
-
- -
- Wind Speed: {day.day.maxwind_kph} kph
-
-
+
+
+ {format(parseISO(day.date), "EEEE, MMM d")}
+
+
+
{day.day.condition.text}
+
+
+
Max Temp.
+
{day.day.maxtemp_c}°C
+
+
+
Min Temp.
+
{day.day.mintemp_c}°C
+
+
+
Rain
+
+ {day.day.daily_chance_of_rain}%
+
+
+
+
Wind
+
{day.day.maxwind_kph} kph
+
+
+
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index adb7369..0174add 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -106,9 +106,7 @@ export default function HomePage() {
-
-
);
diff --git a/src/store/index.js b/src/store/index.js
index 2e4ddc7..a3daf1d 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -5,6 +5,9 @@ import weatherReducer from './weatherSlice'
export const store = configureStore({
reducer: {
weather: weatherReducer,
- }
+ },
+ middleware: (getDefaultMiddleware) => getDefaultMiddleware({
+ serializableCheck: false
+ })
})
diff --git a/src/store/weatherSlice.js b/src/store/weatherSlice.js
index 4a965ed..0bd5314 100644
--- a/src/store/weatherSlice.js
+++ b/src/store/weatherSlice.js
@@ -2,6 +2,7 @@
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';
+
const CITIES_STORAGE_KEY = 'weatherCities';
function saveCitiesToLocalStorage(cities) {
@@ -13,14 +14,14 @@ function loadCitiesFromLocalStorage() {
return citiesData ? JSON.parse(citiesData) : [];
}
-const API_KEY = '03fc9f292e854987998173950241104'
+const API_KEY = import.meta.env.VITE_REACT_APP_WEATHERAPI_API_KEY;
// Async thunk to fetch weather data for a city
export const fetchWeatherDataForCity = createAsyncThunk(
'weather/fetchWeatherDataForCity',
- async (city, { rejectWithValue }) => {
+ async (location, { rejectWithValue }) => {
try {
- const weatherResponse = await axios.get(`https://api.weatherapi.com/v1/forecast.json?key=${API_KEY}&q=${city}&days=7&aqi=no&alerts=no`);
+ const weatherResponse = await axios.get(`https://api.weatherapi.com/v1/forecast.json?key=${API_KEY}&q=${location}&days=7&aqi=no&alerts=no`);
const country = weatherResponse.data.location.country
@@ -41,7 +42,6 @@ export const fetchWeatherDataForCity = createAsyncThunk(
const initialState = {
cities: loadCitiesFromLocalStorage(),
- forecasts: {},
loading: false,
error: null,
};
@@ -62,21 +62,22 @@ const weatherSlice = createSlice({
state.loading = true;
})
.addCase(fetchWeatherDataForCity.fulfilled, (state, action) => {
- const existingIndex = state.cities.findIndex(city => city.weather.location.name === action.meta.arg);
- if (existingIndex !== -1) {
- state.cities[existingIndex] = {
- name: action.meta.arg,
- weather: action.payload
- };
+ const cityName = action.meta.arg;
+ const cityIndex = state.cities.findIndex(city => city.name.toLowerCase() === cityName);
+ const cityData = {
+ name: cityName,
+ weather: action.payload
+ };
+
+ if (cityIndex !== -1) {
+ state.cities[cityIndex] = cityData;
} else {
- state.cities.push({
- name: action.meta.arg,
- weather: action.payload
- });
+ state.cities.push(cityData);
}
saveCitiesToLocalStorage(state.cities);
state.loading = false;
})
+
.addCase(fetchWeatherDataForCity.rejected, (state, action) => {
state.error = action.error.message;
state.loading = false;
diff --git a/src/utils/index.js b/src/utils/index.js
deleted file mode 100644
index e69de29..0000000
diff --git a/tailwind.config.js b/tailwind.config.js
index 89a305e..413609b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,11 @@ export default {
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
+ options: {
+ safelist: [
+ /^Mui/, // Whitelist Material-UI classes
+ ],
+ },
theme: {
extend: {},
},