projectshft · j-emitch · Mar 22, 2025 · Mar 22, 2025 · Mar 24, 2025 · Mar 24, 2025
diff --git a/app/components/CityWeather.js b/app/components/CityWeather.js
@@ -0,0 +1,35 @@
+import { Sparklines, SparklinesLine, SparklinesReferenceLine } from "react-sparklines";
+import "bootstrap/dist/css/bootstrap.min.css";
+
+const CityWeather = ({ city }) => {
+  return (
+    <tr>
+      <td>
+        <h5 className="align-middle text-center">{city.name}</h5>
+      </td>
+      <td >
+        <Sparklines data={city.temp}>
+          <SparklinesLine color="orange" />
+          <SparklinesReferenceLine type="mean" />
+        </Sparklines>
+        <p className="text-center">{city.avgTemp} &deg;F</p>
+      </td>
+      <td>
+        <Sparklines data={city.pressure}>
+          <SparklinesLine color="green" />
+          <SparklinesReferenceLine type="mean" />
+        </Sparklines>
+        <p className="text-center">{city.avgPressure} hPa</p>
+      </td>
+      <td>
+        <Sparklines data={city.humidity}>
+          <SparklinesLine color="gray" />
+          <SparklinesReferenceLine type="mean" />
+        </Sparklines>
+        <p className="text-center">{city.avgHumidity} %</p>
+      </td>
+    </tr>
+  );
+};
+
+export default CityWeather;
diff --git a/app/layout.js b/app/layout.js
@@ -1,17 +1,15 @@
-import './globals.css'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+'use client';
+import { Inter } from 'next/font/google';
+import { Provider } from 'react-redux';
+import store from './store/configureStore';
+const inter = Inter({ subsets: ['latin'] });
 
 export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  )
-}
+	return (
+		<html lang='en'>
+			<body className={inter.className}>
+				<Provider store={store}>{children}</Provider>
+			</body>
+		</html>
+	);
+}
diff --git a/app/page.js b/app/page.js
@@ -1,95 +1,62 @@
-import Image from 'next/image'
-import styles from './page.module.css'
+"use client";
+import { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { addCity } from "./store/slices/cities";
+import CityWeather from "./components/CityWeather";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 export default function Home() {
-  return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>app/page.js</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
+  const cities = useSelector((state) => state.cities.cities);
+  const dispatch = useDispatch();
+  const [newCity, setNewCity] = useState("");
 
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
+const handleAddCity = () => {
+  if (!cities.some((city) => city.name.toLowerCase() === newCity.toLowerCase())) {
+    dispatch(addCity(newCity));
+  }
+  setNewCity("");
+};
+
+  return (
+    <div className="container mt-5">
+      <h1 className="text-center mb-4">Weather Forecast</h1>
+      <div className="input-group mb-3">
+        <input
+          type="text"
+          value={newCity}
+          onChange={(e) => setNewCity(e.target.value)}
+          placeholder="Add a city"
+          className="form-control"
         />
+        <button onClick={handleAddCity} className="btn btn-primary">
+          Submit
+        </button>
       </div>
-
-      <div className={styles.grid}>
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p>Find in-depth information about Next.js features and API.</p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Learn <span>-&gt;</span>
-          </h2>
-          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p>Explore the Next.js 13 playground.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
+      <div>
+        <table className="table">
+          <thead>
+            <tr>
+              <th className="text-center col-1" scope="col">
+                City
+              </th>
+              <th className="text-center col-3" scope="col">
+                Temp
+              </th>
+              <th className="text-center col-3" scope="col">
+                Pressure
+              </th>
+              <th className="text-center col-3" scope="col">
+                Humidity
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {cities.map((city, index) => (
+              <CityWeather key={index} city={city} />
+            ))}
+          </tbody>
+        </table>
       </div>
-    </main>
-  )
+    </div>
+  );
 }
diff --git a/app/store/configureStore.js b/app/store/configureStore.js
@@ -0,0 +1,8 @@
+import { configureStore } from "@reduxjs/toolkit";
+import rootReducer from "./rootReducer";
+
+const store = configureStore({
+  reducer: rootReducer,
+});
+
+export default store;
diff --git a/app/store/rootReducer.js b/app/store/rootReducer.js
@@ -0,0 +1,8 @@
+import { combineReducers } from "redux";
+import citiesReducer from "./slices/cities";
+
+const rootReducer = combineReducers({
+  cities: citiesReducer,
+});
+
+export default rootReducer;
diff --git a/app/store/slices/cities.js b/app/store/slices/cities.js
@@ -0,0 +1,67 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+
+const apiKey = "";
+
+export const addCity = createAsyncThunk(
+  "city/fetchCityWeather",
+  async (cityName) => {
+    const response = await fetch(
+      `https://api.openweathermap.org/data/2.5/forecast?q=${cityName}&appid=${apiKey}&units=imperial`
+    );
+    const data = await response.json();
+
+    const avgTemp =
+      Math.round(data.list.reduce(
+        (acc, threeHour) => acc + threeHour.main.temp,
+        0
+    ) / data.list.length);
+
+    const avgHumidity =
+      Math.round(data.list.reduce(
+        (acc, threeHour) => acc + threeHour.main.humidity,
+        0
+    ) / data.list.length);
+
+    const avgPressure =
+      Math.round(data.list.reduce(
+        (acc, threeHour) => acc + threeHour.main.pressure,
+        0
+      ) / data.list.length);
+
+    return {
+      name: data.city.name,
+      temp: data.list.map((threeHour) => threeHour.main.temp),
+      pressure: data.list.map((threeHour) => threeHour.main.pressure),
+      humidity: data.list.map((threeHour) => threeHour.main.humidity),
+      avgTemp: avgTemp,
+      avgHumidity: avgHumidity,
+      avgPressure: avgPressure,
+    };
+  }
+);
+
+const citySlice = createSlice({
+  name: "city",
+  initialState: {
+    cities: [],
+    status: "idle",
+    error: null,
+  },
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(addCity.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(addCity.fulfilled, (state, action) => {
+        state.status = "fulfilled";
+        state.cities.push(action.payload);
+      })
+      .addCase(addCity.rejected, (state, action) => {
+        state.status = "rejected";
+        state.error = action.error.message;
+      });
+  },
+});
+
+export default citySlice.reducer;