From ad518611288293c9f1316c9ee3a8bb0ee0662190 Mon Sep 17 00:00:00 2001
From: chris jedrasik <chris.jed03@gmail.com>
Date: Thu, 15 May 2025 21:56:31 -0400
Subject: [PATCH 1/5] Mock app template and initial app setup

---
 app/globals.css     | 107 ------------------
 app/layout.js       |   3 +-
 app/page.js         | 130 ++++++++--------------
 app/page.module.css | 229 --------------------------------------
 package-lock.json   | 266 ++++++++++++++++++++++++++++++++++++++++++--
 package.json        |   2 +
 6 files changed, 303 insertions(+), 434 deletions(-)
 delete mode 100644 app/page.module.css

diff --git a/app/globals.css b/app/globals.css
index d4f491e..e69de29 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,107 +0,0 @@
-: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;
-  }
-}
-
-* {
-  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;
-  }
-}
diff --git a/app/layout.js b/app/layout.js
index c93f806..4d3079c 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -4,8 +4,7 @@ import { Inter } from 'next/font/google'
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'RTK-Weather App',
 }
 
 export default function RootLayout({ children }) {
diff --git a/app/page.js b/app/page.js
index f049c39..68c852f 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,95 +1,55 @@
-import Image from 'next/image'
-import styles from './page.module.css'
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { Container, Row, Col } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
 
-export default function Home() {
+
+export default function App() {
   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 className='pt-5'>
         <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>
+        <Form className='col-4 pb-5 align-items-center container-lg'>
+          <Form.Control size="lg" type="text" placeholder="Search a city" />
+          <Button className="col-12 d-grid mt-2" variant="primary" size="lg">
+             Search
+           </Button>
+        </Form>
         </div>
-      </div>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </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>
+        <div className='col-6 align-items-center container-lg p-1'>
+          <Container className='bg-primary-subtle border border-primary-subtle rounded-4'>
+            <div className='p-2 text-center'>City Title 1</div>
+            <Row className='d-flex justify-content-center align-items-center'>
+              <Col className='m-3'>Temp.</Col>
+              <Col className='m-3'>Hum.</Col>
+              <Col className='m-3'>Pres.</Col>
+            </Row>
+          </Container>
+        </div>
 
-        <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>
+        <div className='col-6 align-items-center container-lg p-1'>
+        <Container className='bg-primary-subtle border border-primary-subtle rounded-4'>
+          <div className='p-2 text-center'>City Title 2</div>
+          <Row className='d-flex justify-content-center align-items-center'>
+            <Col className='m-3'>Temp.</Col>
+            <Col className='m-3'>Hum.</Col>
+            <Col className='m-3'>Pres.</Col>
+          </Row>
+        </Container>
+      </div>
 
-        <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 className='col-6 align-items-center container-lg p-1'>
+        <Container className='bg-primary-subtle border border-primary-subtle rounded-4'>
+          <div className='p-2 text-center'>City Title 3</div>
+          <Row className='d-flex justify-content-center align-items-center'>
+            <Col className='m-3'>Temp.</Col>
+            <Col className='m-3'>Hum.</Col>
+            <Col className='m-3'>Pres.</Col>
+          </Row>
+        </Container>
       </div>
-    </main>
+    </div>
+  </>    
   )
 }
diff --git a/app/page.module.css b/app/page.module.css
deleted file mode 100644
index 6676d2c..0000000
--- a/app/page.module.css
+++ /dev/null
@@ -1,229 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
-}
-
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
-  width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
-}
-
-.description a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
-}
-
-.code {
-  font-weight: 700;
-  font-family: var(--font-mono);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(25%, auto));
-  max-width: 100%;
-  width: var(--max-width);
-}
-
-.card {
-  padding: 1rem 1.2rem;
-  border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
-}
-
-.card span {
-  display: inline-block;
-  transition: transform 200ms;
-}
-
-.card h2 {
-  font-weight: 600;
-  margin-bottom: 0.7rem;
-}
-
-.card p {
-  margin: 0;
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 30ch;
-}
-
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding: 4rem 0;
-}
-
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-
-.center::before,
-.center::after {
-  content: '';
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-
-.logo {
-  position: relative;
-}
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
-  }
-
-  .card:hover span {
-    transform: translateX(4px);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  .card:hover span {
-    transform: none;
-  }
-}
-
-/* Mobile */
-@media (max-width: 700px) {
-  .content {
-    padding: 4rem;
-  }
-
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
-  }
-
-  .card {
-    padding: 1rem 2.5rem;
-  }
-
-  .card h2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .center {
-    padding: 8rem 0 6rem;
-  }
-
-  .center::before {
-    transform: none;
-    height: 300px;
-  }
-
-  .description {
-    font-size: 0.8rem;
-  }
-
-  .description a {
-    padding: 1rem;
-  }
-
-  .description p,
-  .description div {
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
-  }
-
-  .description p {
-    align-items: center;
-    inset: 0 0 auto;
-    padding: 2rem 1rem 1.4rem;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
-    background-clip: padding-box;
-    backdrop-filter: blur(24px);
-  }
-
-  .description div {
-    align-items: flex-end;
-    pointer-events: none;
-    inset: auto 0 0;
-    padding: 2rem;
-    height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
-    z-index: 1;
-  }
-}
-
-/* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
-  .grid {
-    grid-template-columns: repeat(2, 50%);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
-  }
-
-  .logo {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}
diff --git a/package-lock.json b/package-lock.json
index 90f6bb1..6bf61b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,12 @@
       "name": "parsity_rtk_weather",
       "version": "0.1.0",
       "dependencies": {
+        "bootstrap": "^5.3.6",
         "eslint": "8.50.0",
         "eslint-config-next": "13.5.3",
         "next": "13.5.3",
         "react": "18.2.0",
+        "react-bootstrap": "^2.10.10",
         "react-dom": "18.2.0"
       }
     },
@@ -24,12 +26,10 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.1",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz",
-      "integrity": "sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.1.tgz",
+      "integrity": "sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -296,6 +296,85 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.8",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.8.tgz",
+      "integrity": "sha512-lQDE/c9uTfBSDOjaZUJS8xP2jCKVk4zjQeIlCH90xaLhHDgbpCdns3xvFpJJujfj3nI4Ll9K7A+ONUBDCASOuw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.9.4.tgz",
+      "integrity": "sha512-N4C7haUc3vn4LTwVUPlkJN8Ach/+yIMvRuTVIhjilNHqegY60SGLrzud6errOMNJwSnmYFnt1J0H/k8FE3A4KA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@popperjs/core": "^2.11.8",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.5.0",
+        "@types/warning": "^3.0.3",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.4",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/@restart/hooks": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.5.1.tgz",
+      "integrity": "sha512-EMoH04NHS1pbn07iLTjIjgttuqb7qu4+/EyhAx27MHpoENcB2ZdSsLTNxmKD+WEPnZigo62Qc8zjGnNxoSE/5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/uncontrollable": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.0.tgz",
@@ -314,6 +393,36 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.14",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
+      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.1.4",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.4.tgz",
+      "integrity": "sha512-EB1yiiYdvySuIITtD5lhW4yPyJ31RkJkkDw794LaQYrxCSaQV/47y5o1FMC4zF9ZyjUjzJMZwbovEnT5yHTW6g==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/warning": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "6.7.3",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.7.3.tgz",
@@ -647,6 +756,25 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.6",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.6.tgz",
+      "integrity": "sha512-jX0GAcRzvdwISuvArXn3m7KZscWWFAf1MKBcnzaN02qWMb3jpMoUX4/qgeiGzqyIb4ojulRzs89UCUmGcFSzTA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -732,6 +860,12 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -771,6 +905,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -856,6 +996,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -1809,6 +1959,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
@@ -2628,6 +2787,19 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "license": "MIT",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -2666,6 +2838,37 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.10.10",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.10.tgz",
+      "integrity": "sha512-gMckKUqn8aK/vCnfwoBpBVFUGT9SVQxwsYrp9yDHt0arXMamxALerliKBxr1TPbntirK/HGrUAHYbAeQTa9GHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.9.4",
+        "@types/prop-types": "^15.7.12",
+        "@types/react-transition-group": "^4.4.6",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -2683,6 +2886,28 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+      "license": "MIT"
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz",
@@ -2702,11 +2927,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
-    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz",
@@ -3217,6 +3437,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -3225,6 +3460,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index 6ca0f8f..8e4eed9 100644
--- a/package.json
+++ b/package.json
@@ -9,10 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "bootstrap": "^5.3.6",
     "eslint": "8.50.0",
     "eslint-config-next": "13.5.3",
     "next": "13.5.3",
     "react": "18.2.0",
+    "react-bootstrap": "^2.10.10",
     "react-dom": "18.2.0"
   }
 }

From ee71549228bb92e927e9ca83446778584517c0d5 Mon Sep 17 00:00:00 2001
From: chris jedrasik <chris.jed03@gmail.com>
Date: Sat, 17 May 2025 21:18:58 -0400
Subject: [PATCH 2/5] pure pain, store is setup (i think), my bootstrap is
 styling and have no clue why. Will get the input value and run that to the
 API next

---
 app/globals.css    |  14 ++++++
 app/layout.js      |  28 ++++++------
 app/page.js        | 105 +++++++++++++++++++++++-------------------
 app/store/store.js |   5 ++
 package-lock.json  | 111 ++++++++++++++++++++++++++++++++++++++++++++-
 package.json       |   4 +-
 6 files changed, 204 insertions(+), 63 deletions(-)
 create mode 100644 app/store/store.js

diff --git a/app/globals.css b/app/globals.css
index e69de29..4141fab 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -0,0 +1,14 @@
+.searchContainer {
+  max-width: auto;
+}
+
+.primaryBackground {
+  background-color: lightblue;
+  max-width: 1000px;
+  margin: 0 auto;
+  border-radius: 25px;
+}
+
+.resultDisplayed {
+  max-width: 800px;
+}
diff --git a/app/layout.js b/app/layout.js
index 4d3079c..65750a7 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -1,16 +1,16 @@
-import './globals.css'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export const metadata = {
-  title: 'RTK-Weather App',
-}
+'use client';
+import './globals.css';
+import { Inter } from 'next/font/google';
+import { Provider } from 'react-redux';
+import store from './store/store';
+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>
+	);
+}
\ No newline at end of file
diff --git a/app/page.js b/app/page.js
index 68c852f..3613939 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,55 +1,66 @@
+'use client';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { Container, Row, Col } from 'react-bootstrap';
-import Button from 'react-bootstrap/Button';
-import Form from 'react-bootstrap/Form';
-
+import { useEffect, useState } from 'react';
 
 export default function App() {
-  return (
-    <>
-      <div className='pt-5'>
-        <div>
-        <Form className='col-4 pb-5 align-items-center container-lg'>
-          <Form.Control size="lg" type="text" placeholder="Search a city" />
-          <Button className="col-12 d-grid mt-2" variant="primary" size="lg">
-             Search
-           </Button>
-        </Form>
-        </div>
+  const [inputValue, setInputValue] = useState('');
+  const [error, setError] = useState('');
 
-        <div className='col-6 align-items-center container-lg p-1'>
-          <Container className='bg-primary-subtle border border-primary-subtle rounded-4'>
-            <div className='p-2 text-center'>City Title 1</div>
-            <Row className='d-flex justify-content-center align-items-center'>
-              <Col className='m-3'>Temp.</Col>
-              <Col className='m-3'>Hum.</Col>
-              <Col className='m-3'>Pres.</Col>
-            </Row>
-          </Container>
-        </div>
+  // this detemines what the submit button does and under what conditions
+const handleSearch = (e) => {
 
-        <div className='col-6 align-items-center container-lg p-1'>
-        <Container className='bg-primary-subtle border border-primary-subtle rounded-4'>
-          <div className='p-2 text-center'>City Title 2</div>
-          <Row className='d-flex justify-content-center align-items-center'>
-            <Col className='m-3'>Temp.</Col>
-            <Col className='m-3'>Hum.</Col>
-            <Col className='m-3'>Pres.</Col>
-          </Row>
-        </Container>
-      </div>
+  // this prevents the page from reseting
+  e.preventDefault();
+};
+  const handleChange = (e) => { 
+    setInputValue(e.target.value);
+    console.log(inputValue);
+}
+  return (
+    <>
+      {/* Primary background */}
+      <Container fluid className="primaryBackground min-vh-100 py-5">
+        
+        {/* Search box centered */}
+        <Row className="justify-content-center mb-4">
+          <Col xs={12} md={6} lg={6}>
+            <div className="bg-primary-subtle border border-primary-subtle rounded-4 p-4">
+                <Row className="g-2 align-items-center">
+                  <Col xs={12} md={9}>
+                    <input
+                      size="lg"
+                      type="text"
+                      placeholder="Search a city"
+                      value={inputValue}
+                      onChange={handleChange}
+                    />
+                  </Col>
+                  <Col xs={12} md={3}>
+                    <button className="w-100" variant="primary" size="lg">
+                      Search
+                    </button>
+                  </Col>
+                </Row>
+            </div>
+          </Col>
+        </Row>
 
-      <div className='col-6 align-items-center container-lg p-1'>
-        <Container className='bg-primary-subtle border border-primary-subtle rounded-4'>
-          <div className='p-2 text-center'>City Title 3</div>
-          <Row className='d-flex justify-content-center align-items-center'>
-            <Col className='m-3'>Temp.</Col>
-            <Col className='m-3'>Hum.</Col>
-            <Col className='m-3'>Pres.</Col>
-          </Row>
-        </Container>
-      </div>
-    </div>
-  </>    
-  )
+        {/* Forecast boxes */}
+        <Row className="justify-content-center">
+          <Col md={8}>
+            <Container className="bg-primary-subtle border border-primary-subtle rounded-4 p-3 mb-2">
+              <div className="p-2 text-center">City Title 1</div>
+              <Row className="d-flex justify-content-center align-items-center">
+                <Col className="m-3">Temp.</Col>
+                <Col className="m-3">Hum.</Col>
+                <Col className="m-3">Pres.</Col>
+              </Row>
+            </Container>
+          </Col>
+          {/* Add more forecast boxes as needed */}
+        </Row>
+      </Container>
+    </>
+  );
 }
diff --git a/app/store/store.js b/app/store/store.js
new file mode 100644
index 0000000..24c77ab
--- /dev/null
+++ b/app/store/store.js
@@ -0,0 +1,5 @@
+import { configureStore } from '@reduxjs/toolkit'
+
+export default configureStore({
+  reducer: {},
+});
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 6bf61b1..6bebda6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,13 +8,15 @@
       "name": "parsity_rtk_weather",
       "version": "0.1.0",
       "dependencies": {
+        "@reduxjs/toolkit": "^2.8.2",
         "bootstrap": "^5.3.6",
         "eslint": "8.50.0",
         "eslint-config-next": "13.5.3",
         "next": "13.5.3",
         "react": "18.2.0",
         "react-bootstrap": "^2.10.10",
-        "react-dom": "18.2.0"
+        "react-dom": "18.2.0",
+        "react-redux": "^9.2.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -321,6 +323,32 @@
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.8.2.tgz",
+      "integrity": "sha512-MYlOhQ0sLdw4ud48FoC5w0dH9VfWQjtCjreKwYTT3l+r427qYC5Y8PihNutepr8XrNaBUDQo9khWUwQxZaqt5A==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@restart/hooks": {
       "version": "0.4.16",
       "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
@@ -380,6 +408,18 @@
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.0.tgz",
       "integrity": "sha512-EF3948ckf3f5uPgYbQ6GhyA56Dmv8yg0+ir+BroRjwdxyZJsekhZzawOecC2rOTPCz173t7ZcR1HHZu0dZgOCw=="
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
+      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
@@ -417,6 +457,12 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@types/warning": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
@@ -1909,6 +1955,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2892,6 +2948,29 @@
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
       "license": "MIT"
     },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -2908,6 +2987,21 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz",
@@ -2943,6 +3037,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.6",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.6.tgz",
@@ -3460,6 +3560,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
diff --git a/package.json b/package.json
index 8e4eed9..6af062a 100644
--- a/package.json
+++ b/package.json
@@ -9,12 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.8.2",
     "bootstrap": "^5.3.6",
     "eslint": "8.50.0",
     "eslint-config-next": "13.5.3",
     "next": "13.5.3",
     "react": "18.2.0",
     "react-bootstrap": "^2.10.10",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-redux": "^9.2.0"
   }
 }

From ce85d3192288cffe4f74bbe5c5019ee41d0b0adc Mon Sep 17 00:00:00 2001
From: chris jedrasik <chris.jed03@gmail.com>
Date: Sun, 18 May 2025 21:42:21 -0400
Subject: [PATCH 3/5] did a lot today, store should be good from last time,
 slices is setup and the API thunk fetches almost work, now to debug the
 error.

---
 app/page.js                    |  69 ++++----
 app/store/slices/getWeather.js |  92 +++++++++++
 package-lock.json              | 283 +++++++++++++++++++++++++++++----
 package.json                   |   4 +-
 4 files changed, 390 insertions(+), 58 deletions(-)
 create mode 100644 app/store/slices/getWeather.js

diff --git a/app/page.js b/app/page.js
index 3613939..e80d859 100644
--- a/app/page.js
+++ b/app/page.js
@@ -2,51 +2,65 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { Container, Row, Col } from 'react-bootstrap';
 import { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import {Sparklines } from 'react-sparklines';
+import { getLocation, fetchWeather } from './store/slices/getWeather'; 
 
 export default function App() {
+  // for the city search input field
   const [inputValue, setInputValue] = useState('');
-  const [error, setError] = useState('');
 
-  // this detemines what the submit button does and under what conditions
-const handleSearch = (e) => {
+  // for running actions
+  const dispatch = useDispatch();
+  
 
+  // this handles when the search button is clicked
+const handleSearch = async (e) => {
   // this prevents the page from reseting
   e.preventDefault();
+
+    try {
+    // gets lat/lon from city name searched (first thunk)
+    const location = await dispatch(getLocation(inputValue)).unwrap();
+
+    // gets the weather using the coordinates (second thunk)
+    await dispatch(fetchWeather({ lat: location.lat, lon: location.lon }));
+  } catch (error) {
+    // for possible error/s
+    console.error('Error fetching weather:', error);
+  }
 };
-  const handleChange = (e) => { 
-    setInputValue(e.target.value);
-    console.log(inputValue);
-}
+
   return (
     <>
-      {/* Primary background */}
       <Container fluid className="primaryBackground min-vh-100 py-5">
-        
-        {/* Search box centered */}
         <Row className="justify-content-center mb-4">
           <Col xs={12} md={6} lg={6}>
             <div className="bg-primary-subtle border border-primary-subtle rounded-4 p-4">
-                <Row className="g-2 align-items-center">
-                  <Col xs={12} md={9}>
-                    <input
-                      size="lg"
-                      type="text"
-                      placeholder="Search a city"
-                      value={inputValue}
-                      onChange={handleChange}
-                    />
-                  </Col>
-                  <Col xs={12} md={3}>
-                    <button className="w-100" variant="primary" size="lg">
-                      Search
-                    </button>
-                  </Col>
-                </Row>
+              <Row className="g-2 align-items-center">
+                <Col xs={12} md={9}>
+                  <input
+                    className="form-control form-control-lg"
+                    type="text"
+                    placeholder="Search a city"
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                  />
+                </Col>
+                <Col xs={12} md={3}>
+                  <button
+                    onClick={handleSearch}
+                    className="btn btn-primary btn-lg w-100"
+                  >
+                    Search
+                  </button>
+                </Col>
+              </Row>
             </div>
           </Col>
         </Row>
 
-        {/* Forecast boxes */}
+        {/* Forecast display */}
         <Row className="justify-content-center">
           <Col md={8}>
             <Container className="bg-primary-subtle border border-primary-subtle rounded-4 p-3 mb-2">
@@ -58,7 +72,6 @@ const handleSearch = (e) => {
               </Row>
             </Container>
           </Col>
-          {/* Add more forecast boxes as needed */}
         </Row>
       </Container>
     </>
diff --git a/app/store/slices/getWeather.js b/app/store/slices/getWeather.js
new file mode 100644
index 0000000..faeb127
--- /dev/null
+++ b/app/store/slices/getWeather.js
@@ -0,0 +1,92 @@
+import axios from 'axios';
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+
+// Initial state for weather data
+const dataState = { 
+  city: '',
+  temperature: [],
+  pressure: [],
+  humidity: [],
+  loading: false,
+  error: null,
+};
+
+// First thunk: get lat/lon from city search
+export const getLocation = createAsyncThunk(
+  'weather/getLocation',
+  async (city) => {
+    try {
+      const response = await axios.get(
+        `http://api.openweathermap.org/geo/1.0/direct?q=${city}&limit=1&appid=${process.env.NEXT_PUBLIC_API_KEY}`
+      );
+
+      const data = response.data;
+
+      if (!data || data.length === 0) {
+        throw new Error('City not found, please double check.');
+      }
+
+      const { lat, lon, name } = data[0];
+      return { lat, lon, city: name }; 
+    } catch (error) {
+      throw error;
+    }
+  }
+);
+
+// Second thunk: get forecast by lat/lon cords
+export const fetchWeather = createAsyncThunk(
+  'weather/fetchWeather',
+  async ({ lat, lon }) => {
+    const response = await axios.get(
+      `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=${process.env.NEXT_PUBLIC_API_KEY}&units=imperial`
+    );
+
+    return response.data; // all weather data returned
+  }
+);
+
+// Slice: tracks location and weather data
+const weatherSlice = createSlice({
+
+  name: 'weather',
+  initialState: dataState,
+  reducers: {},
+  extraReducers: (builder) => {
+    
+    builder
+      // getLocation starts (is pending)
+      .addCase(getLocation.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+
+      // getLocation succeeds (is fulfilled)
+      .addCase(getLocation.fulfilled, (state, action) => {
+        state.loading = false;
+        state.city = action.payload.city;
+      })
+
+      // fetchWeather succeeds (is fulfilled)
+      .addCase(fetchWeather.fulfilled, (state, action) => {
+        state.loading = false;
+        const dataList = action.payload.list;
+
+        state.temperature = dataList.map((item) => item.main.temp);
+        state.pressure = dataList.map((item) => item.main.pressure);
+        state.humidity = dataList.map((item) => item.main.humidity);
+      })
+
+      // if either fetch fails an error is thrown
+      .addCase(getLocation.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.error.message;
+      })
+      .addCase(fetchWeather.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.error.message;
+      });
+  }
+});
+
+export default weatherSlice.reducer;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 6bebda6..18514e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@reduxjs/toolkit": "^2.8.2",
+        "axios": "^1.9.0",
         "bootstrap": "^5.3.6",
         "eslint": "8.50.0",
         "eslint-config-next": "13.5.3",
@@ -16,7 +17,8 @@
         "react": "18.2.0",
         "react-bootstrap": "^2.10.10",
         "react-dom": "18.2.0",
-        "react-redux": "^9.2.0"
+        "react-redux": "^9.2.0",
+        "react-sparklines": "^1.7.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -770,6 +772,12 @@
         "has-symbols": "^1.0.3"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -789,6 +797,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
+      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -864,6 +883,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -933,6 +965,18 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1012,6 +1056,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -1052,6 +1105,20 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -1121,6 +1188,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-iterator-helpers": {
       "version": "1.0.15",
       "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.15.tgz",
@@ -1142,14 +1227,28 @@
         "safe-array-concat": "^1.0.1"
       }
     },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-set-tostringtag": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
-      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
       "dependencies": {
-        "get-intrinsic": "^1.1.3",
-        "has": "^1.0.3",
-        "has-tostringtag": "^1.0.0"
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -1687,6 +1786,26 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz",
       "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ=="
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -1695,15 +1814,34 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.6",
@@ -1731,19 +1869,42 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
-      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3"
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/get-symbol-description": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
@@ -1853,11 +2014,12 @@
       }
     },
     "node_modules/gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -1923,9 +2085,10 @@
       }
     },
     "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -1934,11 +2097,12 @@
       }
     },
     "node_modules/has-tostringtag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
       "dependencies": {
-        "has-symbols": "^1.0.2"
+        "has-symbols": "^1.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -1947,6 +2111,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -2465,6 +2641,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2485,6 +2670,27 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2856,6 +3062,12 @@
         "react": ">=0.14.0"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -2971,6 +3183,19 @@
         }
       }
     },
+    "node_modules/react-sparklines": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/react-sparklines/-/react-sparklines-1.7.0.tgz",
+      "integrity": "sha512-bJFt9K4c5Z0k44G8KtxIhbG+iyxrKjBZhdW6afP+R7EnIq+iKjbWbEFISrf3WKNFsda+C46XAfnX0StS5fbDcg==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.5.10"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
diff --git a/package.json b/package.json
index 6af062a..e3e9ffe 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.8.2",
+    "axios": "^1.9.0",
     "bootstrap": "^5.3.6",
     "eslint": "8.50.0",
     "eslint-config-next": "13.5.3",
@@ -17,6 +18,7 @@
     "react": "18.2.0",
     "react-bootstrap": "^2.10.10",
     "react-dom": "18.2.0",
-    "react-redux": "^9.2.0"
+    "react-redux": "^9.2.0",
+    "react-sparklines": "^1.7.0"
   }
 }

From 8694249eb4352678d7215b7e7dd451888fa24923 Mon Sep 17 00:00:00 2001
From: chris jedrasik <chris.jed03@gmail.com>
Date: Mon, 19 May 2025 21:46:43 -0400
Subject: [PATCH 4/5] lots of great stuff today, get the api running and data
 is correctly sorted and even split, next is using sparklines to display those
 value averages and append to the data container.

---
 app/layout.js                  | 23 ++++++-----
 app/page.js                    | 75 ++++++++++++++++++++++++----------
 app/store/slices/getWeather.js |  9 ++--
 app/store/store.js             | 13 ++++--
 4 files changed, 80 insertions(+), 40 deletions(-)

diff --git a/app/layout.js b/app/layout.js
index 65750a7..44b81bc 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -1,16 +1,17 @@
 'use client';
-import './globals.css';
-import { Inter } from 'next/font/google';
+
 import { Provider } from 'react-redux';
-import store from './store/store';
-const inter = Inter({ subsets: ['latin'] });
+import store from './store/store.js'; 
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 export default function RootLayout({ children }) {
-	return (
-		<html lang='en'>
-			<body className={inter.className}>
-				<Provider store={store}>{children}</Provider>
-			</body>
-		</html>
-	);
+  return (
+    <html lang="en">
+      <body>
+        <Provider store={store}>
+          {children}
+        </Provider>
+      </body>
+    </html>
+  );
 }
\ No newline at end of file
diff --git a/app/page.js b/app/page.js
index e80d859..d3d058b 100644
--- a/app/page.js
+++ b/app/page.js
@@ -7,30 +7,60 @@ import {Sparklines } from 'react-sparklines';
 import { getLocation, fetchWeather } from './store/slices/getWeather'; 
 
 export default function App() {
-  // for the city search input field
+  // State for the city search input field
   const [inputValue, setInputValue] = useState('');
+  const [weatherData, setWeatherData] = useState(null);
 
-  // for running actions
+  // Hook for dispatching Redux actions
   const dispatch = useDispatch();
-  
 
-  // this handles when the search button is clicked
-const handleSearch = async (e) => {
-  // this prevents the page from reseting
-  e.preventDefault();
+  // Calculate the avg. temp 
+  const getDailyAverages = (field) => {
+  if (!weatherData?.list?.length) return [];
 
-    try {
-    // gets lat/lon from city name searched (first thunk)
-    const location = await dispatch(getLocation(inputValue)).unwrap();
+  const dailyAverages = [];
+
+  for (let day = 0; day < 5; day++) {
+    const start = day * 8;
+    const end = start + 8;
+    const daySlice = weatherData.list.slice(start, end);
 
-    // gets the weather using the coordinates (second thunk)
-    await dispatch(fetchWeather({ lat: location.lat, lon: location.lon }));
-  } catch (error) {
-    // for possible error/s
-    console.error('Error fetching weather:', error);
+    const values = daySlice.map(item => item.main[field]);
+    const sum = values.reduce((acc, curr) => acc + curr, 0);
+    const avg = sum / values.length;
+
+    dailyAverages.push(avg.toFixed(1));
   }
+  return dailyAverages;
+  
 };
 
+const dataOrganized = weatherData?.list?.length > 0
+  ? {
+      temp: getDailyAverages('temp'),
+      humidity: getDailyAverages('humidity'),
+      pressure: getDailyAverages('pressure'),
+    }
+  : null;
+
+  // Handles search button click
+  const handleSearch = async (e) => {
+    e.preventDefault(); // Prevent page refresh on form submit
+    console.log(inputValue);
+    try {
+      // Get lat/lon from city name (1st thunk)
+      const location = await dispatch(getLocation(inputValue)).unwrap();
+
+      // Fetch weather data using coordinates (2nd thunk)
+      const rawData = await dispatch(fetchWeather({ lat: location.lat, lon: location.lon })).unwrap();
+      
+      setWeatherData(rawData);
+
+    } catch (error) {
+      console.error('Error fetching weather:', error); // Error logging
+    }
+  };
+
   return (
     <>
       <Container fluid className="primaryBackground min-vh-100 py-5">
@@ -49,6 +79,7 @@ const handleSearch = async (e) => {
                 </Col>
                 <Col xs={12} md={3}>
                   <button
+                    type="submit"
                     onClick={handleSearch}
                     className="btn btn-primary btn-lg w-100"
                   >
@@ -64,12 +95,14 @@ const handleSearch = async (e) => {
         <Row className="justify-content-center">
           <Col md={8}>
             <Container className="bg-primary-subtle border border-primary-subtle rounded-4 p-3 mb-2">
-              <div className="p-2 text-center">City Title 1</div>
-              <Row className="d-flex justify-content-center align-items-center">
-                <Col className="m-3">Temp.</Col>
-                <Col className="m-3">Hum.</Col>
-                <Col className="m-3">Pres.</Col>
-              </Row>
+              <div className="p-2 text-center">{inputValue}</div>
+                {weatherData?.list?.length > 0 && (
+                <Row className="d-flex justify-content-center align-items-center">
+                  <Col className="m-3">Temperature: {dataOrganized.temp}°F</Col>
+                  <Col className="m-3">Humidity: {dataOrganized.humidity}%</Col>
+                  <Col className="m-3">Pressure: {dataOrganized.pressure} hPa</Col>
+                </Row>
+              )}
             </Container>
           </Col>
         </Row>
diff --git a/app/store/slices/getWeather.js b/app/store/slices/getWeather.js
index faeb127..42b07f0 100644
--- a/app/store/slices/getWeather.js
+++ b/app/store/slices/getWeather.js
@@ -2,7 +2,7 @@ import axios from 'axios';
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 
 // Initial state for weather data
-const dataState = { 
+const initialState = { 
   city: '',
   temperature: [],
   pressure: [],
@@ -17,7 +17,7 @@ export const getLocation = createAsyncThunk(
   async (city) => {
     try {
       const response = await axios.get(
-        `http://api.openweathermap.org/geo/1.0/direct?q=${city}&limit=1&appid=${process.env.NEXT_PUBLIC_API_KEY}`
+        `https://api.openweathermap.org/geo/1.0/direct?q=${city}&limit=1&appid=${process.env.NEXT_PUBLIC_API_KEY}`
       );
 
       const data = response.data;
@@ -37,7 +37,8 @@ export const getLocation = createAsyncThunk(
 // Second thunk: get forecast by lat/lon cords
 export const fetchWeather = createAsyncThunk(
   'weather/fetchWeather',
-  async ({ lat, lon }) => {
+
+  async ({ lat, lon }) => { //  pass in { lat, lon } from handleSearch
     const response = await axios.get(
       `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=${process.env.NEXT_PUBLIC_API_KEY}&units=imperial`
     );
@@ -50,7 +51,7 @@ export const fetchWeather = createAsyncThunk(
 const weatherSlice = createSlice({
 
   name: 'weather',
-  initialState: dataState,
+  initialState,
   reducers: {},
   extraReducers: (builder) => {
     
diff --git a/app/store/store.js b/app/store/store.js
index 24c77ab..4ce5705 100644
--- a/app/store/store.js
+++ b/app/store/store.js
@@ -1,5 +1,10 @@
-import { configureStore } from '@reduxjs/toolkit'
+import { configureStore } from '@reduxjs/toolkit';
+import weatherReducer from './slices/getWeather'; 
 
-export default configureStore({
-  reducer: {},
-});
\ No newline at end of file
+const store = configureStore({
+  reducer: {
+    weather: weatherReducer,
+  },
+});
+
+export default store;
\ No newline at end of file

From 291183a3c561231bf15191c8eb96a12b94c5c0c2 Mon Sep 17 00:00:00 2001
From: chris jedrasik <chris.jed03@gmail.com>
Date: Thu, 22 May 2025 20:46:54 -0400
Subject: [PATCH 5/5] all done, i think. Things are working and data is in
 sparkline format

---
 app/page.js | 57 +++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 51 insertions(+), 6 deletions(-)

diff --git a/app/page.js b/app/page.js
index d3d058b..ecc7bfa 100644
--- a/app/page.js
+++ b/app/page.js
@@ -3,7 +3,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import { Container, Row, Col } from 'react-bootstrap';
 import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import {Sparklines } from 'react-sparklines';
+import { Sparklines, SparklinesLine, SparklinesReferenceLine, SparklinesSpots } from 'react-sparklines';
 import { getLocation, fetchWeather } from './store/slices/getWeather'; 
 
 export default function App() {
@@ -95,12 +95,57 @@ const dataOrganized = weatherData?.list?.length > 0
         <Row className="justify-content-center">
           <Col md={8}>
             <Container className="bg-primary-subtle border border-primary-subtle rounded-4 p-3 mb-2">
-              <div className="p-2 text-center">{inputValue}</div>
+              <div className="p-2 text-center fw-bold text-capitalize">{inputValue}</div>
                 {weatherData?.list?.length > 0 && (
-                <Row className="d-flex justify-content-center align-items-center">
-                  <Col className="m-3">Temperature: {dataOrganized.temp}°F</Col>
-                  <Col className="m-3">Humidity: {dataOrganized.humidity}%</Col>
-                  <Col className="m-3">Pressure: {dataOrganized.pressure} hPa</Col>
+                <Row className="d-flex justify-content-center align-items-center">      
+
+              {/* Temp. */}      
+
+                  <Col className="m-3">
+                      <Sparklines
+                      data={dataOrganized.temp}
+                      width={100}
+                      height={35}
+                      >
+                      <SparklinesLine style={{ fill: "#002ea1" }} />
+                      <SparklinesReferenceLine type="mean" />
+                      </Sparklines>
+                      <p className='text-sm text-gray-700 text-center fw-bold'>
+                        Temperature °F:
+                      </p>
+                    </Col>
+
+              {/* Humi. */}  
+
+                  <Col className="m-3">
+                      <Sparklines
+                      data={dataOrganized.humidity}
+                      width={100}
+                      height={35}
+                      >
+                      <SparklinesLine style={{ fill: "#002ea1" }} />
+                      <SparklinesReferenceLine type="mean" />
+                      </Sparklines>
+                      <p className='text-sm text-gray-700 text-center fw-bold'>
+                        Humidity %
+                      </p>
+                    </Col>
+
+              {/* Pres. */}    
+
+                  <Col className="m-3">
+                      <Sparklines
+                      data={dataOrganized.pressure}
+                      width={100}
+                      height={35}
+                      >
+                      <SparklinesLine style={{ fill: "#002ea1" }} />
+                      <SparklinesReferenceLine type="mean" />
+                      </Sparklines>
+                      <p className='text-sm text-gray-700 text-center fw-bold'>
+                        Pressure hPa
+                      </p>
+                    </Col>
                 </Row>
               )}
             </Container>