RTK-Weather

app/components/ChartsRow.jsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { Sparklines,SparklinesLine,SparklinesReferenceLine } from "react-sparklines"
+
+//Here I will be using the React-SparkLines package to create the 5day forecast
+
+function Card ({ title, unit, data }) {
+  const avg = data.length ? (data.reduce((a,b )=> a+b, 0)/data.length).toFixed(1): '-'
+  return (
+    <section>
+      <div>
+        <strong> {title}</strong> <span>({unit})</span>
+      </div>
+
+      {data.length ? (
+        <Sparklines data={data} margin={6}>
+
+          <SparklinesLine />
+          <SparklinesReferenceLine type="avg" />
+
+        </Sparklines>
+      ): (
+        <div>No Data</div>
+      )}
+      <div>avg: {avg} {unit} </div>
+    </section>
+  )
+}
+
+export default function ChartsRow({temps = [], pressures = [], humidities = []}){
+  return (
+    <div>
+      <Card title="Temperature" unit="F" data={temps} />
+      <Card title="Pressure" unit="hPa" data= {pressures}/>
+      <Card title="HUmidity" unit="%" data= {humidities}/>
+    </div>
+  )
+}

app/components/SearchBar.jsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { useState } from "react"
+
+export default function SearchBar ({disabled=false, onSearch,placeholder="type a city"}){
+  const [cityName,changeCityName] = useState('')
+
+  function handleSubmit(e){
+    e.preventDefault()
+    const cleaned = cityName.trim()
+    if(!cleaned) return
+    onSearch(cleaned)
+  }
+  return(
+    <form onSubmit={handleSubmit}>
+      <input
+      value={cityName}
+      onChange={(e)=> changeCityName(e.target.value)}
+      placeholder={placeholder}
+      />
+      <button disabled={disabled || !cityName.trim()}>
+        { disabled ? 'Loading...' : 'Search' }
+      </button>
+    </form>  
+  )
+}

app/globals.css

@@ -1,107 +1,10 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
+html{
+  background-color:rgb(97, 95, 95);
+  display: flex;
+  justify-content: center;
+
 }
 
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}
+h1{
+  color: black;
+}

app/layout.js

@@ -1,17 +1,19 @@
-import './globals.css'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
+'use client'
 
-export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+import './globals.css'
+import { Provider } from 'react-redux'
+import { store } from './store/configureStore'
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body>
+        <Provider store={store}>
+
+          {children}
+
+        </Provider>
+      </body>
     </html>
   )
 }

app/lib/openWeather.js

@@ -0,0 +1,22 @@
+import axios from "axios";
+
+export async function fetchForecast(city){
+  const apiKey = process.env.NEXT_PUBLIC_OPENWEATHER_API_KEY
+
+  //axios lets me pass params as an object
+  const res = await axios.get('https://api.openweathermap.org/data/2.5/forecast',{params:{ q: city, units:'imperial', appid: apiKey }
+  })
+  //returns json as (.data)
+  return res.data
+}
+
+//now time to pick what I need from the API 
+
+export function forecastData (raw){
+  return {
+    city: `${raw?.city?.name ?? ''}${raw?.city?.country ? `, ${raw.city.country}` : ''}`,
+    temps: raw?.list?.map(i => i.main.temp) ?? [],
+    pressures: raw?.list?.map(i => i.main.pressure) ?? [],
+    humidities: raw?.list?.map(i => i.main.humidity) ?? []
+  }
+}

app/page.js

@@ -1,95 +1,43 @@
-import Image from 'next/image'
-import styles from './page.module.css'
+'use client';
 
-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>
+import { useDispatch, useSelector } from 'react-redux';
+import { fetchForecastByCity, clearError } from './store/slices/weatherSlice';
+import ChartsRow from './components/ChartsRow';
+import SearchBar from './components/SearchBar';
 
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
+export default function Home() {
+  const dispatch = useDispatch();
+  const weather = useSelector(state => state.weather);
 
-      <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>
+
+  function handleSearch(cleanCity) {
+    dispatch(clearError());                 
+    dispatch(fetchForecastByCity(cleanCity)); 
+  }
+  return (
+    <main>
+      <h1>Weather Charts</h1>
 
-        <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>
+      <SearchBar
+        disabled={weather?.status === 'loading'}
+        onSearch={handleSearch}
+        placeholder="City or City,CC (e.g., Paris,FR)"
+      />
 
-        <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>
+      {weather?.status === 'idle' && <p>Type a city and search.</p>}
 
-        <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>
+      {weather?.status === 'failed' && <p>{weather.error}</p>}
+      {weather?.status === 'succeeded' && (
+        <>
+          <h2>{weather.city}</h2>
+          <ChartsRow
+            temps={weather.series.temps}
+            pressures={weather.series.pressures}
+            humidities={weather.series.humidities}
+          />
+        </>
+      )}
     </main>
-  )
-}
+  );
+
+}