From fafd38fc866c2f858c7b7d9bae8aaba6196cdeb3 Mon Sep 17 00:00:00 2001 From: Marvin Sierra Date: Sat, 13 Sep 2025 20:26:06 -0400 Subject: [PATCH 01/12] Files Structure setups I made my folders and files for what I will be needing. Plus added my .env.local files for my api key which I will try to hide when it comes to submitting. --- app/components/ChartsRow.jsx | 0 app/components/SearchBar.jsx | 0 app/favicon.ico | Bin 25931 -> 0 bytes app/layout.js | 10 +- app/lib/openWeather.js | 0 app/page.js | 96 +------- app/page.module.css | 229 ------------------- app/store/configureStore.js | 0 app/store/slices/weatherSlice.js | 0 package-lock.json | 381 ++++++++++++++++++++++++++++--- package.json | 5 +- 11 files changed, 362 insertions(+), 359 deletions(-) create mode 100644 app/components/ChartsRow.jsx create mode 100644 app/components/SearchBar.jsx delete mode 100644 app/favicon.ico create mode 100644 app/lib/openWeather.js delete mode 100644 app/page.module.css create mode 100644 app/store/configureStore.js create mode 100644 app/store/slices/weatherSlice.js diff --git a/app/components/ChartsRow.jsx b/app/components/ChartsRow.jsx new file mode 100644 index 0000000..e69de29 diff --git a/app/components/SearchBar.jsx b/app/components/SearchBar.jsx new file mode 100644 index 0000000..e69de29 diff --git a/app/favicon.ico b/app/favicon.ico deleted file mode 100644 index 718d6fea4835ec2d246af9800eddb7ffb276240c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 25931 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 LrJugUA?W`A8`#=m diff --git a/app/layout.js b/app/layout.js index c93f806..4b51f80 100644 --- a/app/layout.js +++ b/app/layout.js @@ -1,17 +1,9 @@ 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', -} export default function RootLayout({ children }) { return ( - {children} + {children} ) } diff --git a/app/lib/openWeather.js b/app/lib/openWeather.js new file mode 100644 index 0000000..e69de29 diff --git a/app/page.js b/app/page.js index f049c39..0ddac83 100644 --- a/app/page.js +++ b/app/page.js @@ -1,95 +1,11 @@ -import Image from 'next/image' -import styles from './page.module.css' + export default function Home() { return ( -
-
-

- Get started by editing  - app/page.js -

- -
- -
- Next.js Logo -
- - -
+
+
+

Hello

+
+
) } 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/app/store/configureStore.js b/app/store/configureStore.js new file mode 100644 index 0000000..e69de29 diff --git a/app/store/slices/weatherSlice.js b/app/store/slices/weatherSlice.js new file mode 100644 index 0000000..e69de29 diff --git a/package-lock.json b/package-lock.json index 90f6bb1..58a5c02 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,11 +8,14 @@ "name": "parsity_rtk_weather", "version": "0.1.0", "dependencies": { + "@reduxjs/toolkit": "^2.9.0", + "axios": "^1.12.1", "eslint": "8.50.0", "eslint-config-next": "13.5.3", "next": "13.5.3", "react": "18.2.0", - "react-dom": "18.2.0" + "react-dom": "18.2.0", + "react-redux": "^9.2.0" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -296,11 +299,49 @@ "node": ">= 8" } }, + "node_modules/@reduxjs/toolkit": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.9.0.tgz", + "integrity": "sha512-fSfQlSRu9Z5yBkvsNhYF2rPS8cGXn/TZVrlwN1948QyZ8xMZ0JvP50S2acZNaf+o63u6aEeMjipFyksjIcWrog==", + "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/@rushstack/eslint-patch": { "version": "1.5.0", "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", @@ -314,6 +355,12 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "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/@typescript-eslint/parser": { "version": "6.7.3", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.7.3.tgz", @@ -615,6 +662,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", @@ -634,6 +687,17 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.1.tgz", + "integrity": "sha512-Kn4kbSXpkFHCGE6rBFNwIv0GQs4AvDT80jlveJDKFxjbTYMUeB4QtsdPCv6H8Cm19Je7IU6VFtRl2zWZI0rudQ==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.4", + "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", @@ -690,6 +754,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", @@ -753,6 +830,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", @@ -826,6 +915,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", @@ -856,6 +954,20 @@ "node": ">=6.0.0" } }, + "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", @@ -925,6 +1037,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", @@ -946,14 +1076,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" @@ -1491,6 +1635,26 @@ "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz", "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==" }, + "node_modules/follow-redirects": { + "version": "1.15.11", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz", + "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==", + "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", @@ -1499,15 +1663,35 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz", + "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==", + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "es-set-tostringtag": "^2.1.0", + "hasown": "^2.0.2", + "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", @@ -1535,19 +1719,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==", - "dependencies": { - "function-bind": "^1.1.1", - "has": "^1.0.3", - "has-proto": "^1.0.1", - "has-symbols": "^1.0.3" + "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": { + "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", @@ -1657,11 +1864,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" @@ -1727,9 +1935,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" }, @@ -1738,11 +1947,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" @@ -1751,6 +1961,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", @@ -1759,6 +1981,16 @@ "node": ">= 4" } }, + "node_modules/immer": { + "version": "10.1.3", + "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.3.tgz", + "integrity": "sha512-tmjF/k8QDKydUlm3mZU+tjM6zeq9/fFpPqH9SzWmBnVVKsPBg/V66qsMwb3/Bo90cgUN+ghdVBess+hPsxUyRw==", + "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", @@ -2250,6 +2482,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", @@ -2270,6 +2511,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", @@ -2628,6 +2890,12 @@ "react-is": "^16.13.1" } }, + "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", @@ -2683,6 +2951,44 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "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/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", @@ -2723,6 +3029,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", @@ -3225,6 +3537,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/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..04d7482 100644 --- a/package.json +++ b/package.json @@ -9,10 +9,13 @@ "lint": "next lint" }, "dependencies": { + "@reduxjs/toolkit": "^2.9.0", + "axios": "^1.12.1", "eslint": "8.50.0", "eslint-config-next": "13.5.3", "next": "13.5.3", "react": "18.2.0", - "react-dom": "18.2.0" + "react-dom": "18.2.0", + "react-redux": "^9.2.0" } } From c1b8cc867a01548891010ccfa91e28d77121a2df Mon Sep 17 00:00:00 2001 From: Marvin Sierra Date: Sat, 13 Sep 2025 20:47:19 -0400 Subject: [PATCH 02/12] store and provider I made the store and the provider, no reducer yet --- app/layout.js | 10 +++++++++- app/store/configureStore.js | 10 ++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/app/layout.js b/app/layout.js index 4b51f80..3889dd4 100644 --- a/app/layout.js +++ b/app/layout.js @@ -1,9 +1,17 @@ import './globals.css' +import { Provider } from 'react-redux' +import { store } from './store/configureStore' export default function RootLayout({ children }) { return ( - {children} + + + + {children} + + + ) } diff --git a/app/store/configureStore.js b/app/store/configureStore.js index e69de29..e8e599b 100644 --- a/app/store/configureStore.js +++ b/app/store/configureStore.js @@ -0,0 +1,10 @@ +'use client' + +import { configureStore } from "@reduxjs/toolkit" + +//right now I have no reducers but thats ok for now +export const store = configureStore({ + reducer: { + //future reducer + }, +}) \ No newline at end of file From ccf4303a432ec8aa70706fa86510936420364966 Mon Sep 17 00:00:00 2001 From: Marvin Sierra Date: Sat, 13 Sep 2025 20:51:14 -0400 Subject: [PATCH 03/12] page.js main skeleton/ design --- app/page.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/page.js b/app/page.js index 0ddac83..eb8a7ac 100644 --- a/app/page.js +++ b/app/page.js @@ -1,11 +1,12 @@ +'use client' +//Main skeleton for weather app export default function Home() { return (
-
-

Hello

-
+

Weather Charts

+

Search Bar and charts here

) } From 45aa455f5085d14c644f90f8983cfbe42127fd89 Mon Sep 17 00:00:00 2001 From: Marvin Sierra Date: Sat, 13 Sep 2025 21:16:18 -0400 Subject: [PATCH 04/12] configured store and added slice --- app/store/configureStore.js | 5 +++-- app/store/slices/weatherSlice.js | 31 +++++++++++++++++++++++++++++++ 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/app/store/configureStore.js b/app/store/configureStore.js index e8e599b..eb210ef 100644 --- a/app/store/configureStore.js +++ b/app/store/configureStore.js @@ -1,10 +1,11 @@ 'use client' import { configureStore } from "@reduxjs/toolkit" +import { weatherReducer } from './slices/weatherSlice' -//right now I have no reducers but thats ok for now +//added reducer which connects it to the store export const store = configureStore({ reducer: { - //future reducer + weather: weatherReducer }, }) \ No newline at end of file diff --git a/app/store/slices/weatherSlice.js b/app/store/slices/weatherSlice.js index e69de29..4ef2eec 100644 --- a/app/store/slices/weatherSlice.js +++ b/app/store/slices/weatherSlice.js @@ -0,0 +1,31 @@ +'use client' + +import { createSlice } from "@reduxjs/toolkit" + +const initialState = { + status: 'idle', //idle -> loading - success or fail + error:null, + city: null, + series: { + temps: [], + pressures: [], + humidities: [], + } +} + +// A slice has name, initial state, and reducers + +const weatherSlice = createSlice({ + name: 'weather', + initialState, + reducers: { + clearError(state) { + state.error = null + } + } +}) + +//export actions made from reducer +export const {clearError} = weatherSlice.actions +//export the reducer so the store can use it +export default weatherSlice.reducer \ No newline at end of file From 35276a26a049ac819f270994d028658d8356c1ec Mon Sep 17 00:00:00 2001 From: Marvin Sierra Date: Sat, 13 Sep 2025 21:31:51 -0400 Subject: [PATCH 05/12] added api/axios --- app/lib/openWeather.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/app/lib/openWeather.js b/app/lib/openWeather.js index e69de29..db8982f 100644 --- a/app/lib/openWeather.js +++ b/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: + temps: + pressure: + humidities: + } +} \ No newline at end of file From a2dffe1dfe7e3246d57fe2ee6ddae27c26d51322 Mon Sep 17 00:00:00 2001 From: Marvin Sierra Date: Wed, 17 Sep 2025 11:10:49 -0400 Subject: [PATCH 06/12] updated openWeather.js we added the logic for the API call using axios and createAsyncThunk as well as adding extraReducers to update slice --- app/store/slices/weatherSlice.js | 41 +++++++++++++++++++++++++++++--- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/app/store/slices/weatherSlice.js b/app/store/slices/weatherSlice.js index 4ef2eec..9b05c55 100644 --- a/app/store/slices/weatherSlice.js +++ b/app/store/slices/weatherSlice.js @@ -1,6 +1,23 @@ 'use client' -import { createSlice } from "@reduxjs/toolkit" +import { createSlice,createAsyncThunk, isRejectedWithValue } from "@reduxjs/toolkit" +import { fetchForecast, forecastData } from "@/app/lib/openWeather" + +// createAsyncThunk handles the action for side effects + +export const fetchCityForecast = createAsyncThunk( + async (city, { rejectedWithValue } ) => { + try { + const raw = await fetchForecast ( city ) + return forecastData( raw ) + } + catch ( err ){ + const apiMsg = err?.response?.data?.message + if ( apiMsg ) return rejectedWithValue( apiMsg ) + return rejectedWithValue( 'Make Believe City, Try Again') + } + } +) const initialState = { status: 'idle', //idle -> loading - success or fail @@ -13,8 +30,6 @@ const initialState = { } } -// A slice has name, initial state, and reducers - const weatherSlice = createSlice({ name: 'weather', initialState, @@ -22,6 +37,26 @@ const weatherSlice = createSlice({ clearError(state) { state.error = null } + }, + extraReducers: (builder) => { + builder + .addCase(fetchCityForecast.pending, (state) => { + state.status = 'loading'; + state.error = null; + }) + + .addCase(fetchCityForecast.fulfilled, (state, action) => { + state.status = 'succeeded'; + state.city = action.payload.city; + state.series.temps = action.payload.temps; + state.series.pressures = action.payload.pressures; + state.series.humidities = action.payload.humidities; + }) + + .addCase(fetchForecastByCity.rejected, (state, action) => { + state.status = 'failed'; + state.error = action.payload || 'Error'; + }); } }) From 302fc1aa82e70f435d38497ddfdb13d5142a9202 Mon Sep 17 00:00:00 2001 From: Marvin Sierra Date: Wed, 17 Sep 2025 15:37:01 -0400 Subject: [PATCH 07/12] Lots of changes done to files Forgot to commit my last section as I am running into some problems but will explain in next commit --- app/components/ChartsRow.jsx | 38 +++++++++++++++++++++++++++++ app/layout.js | 2 ++ app/lib/openWeather.js | 10 +++++--- app/page.js | 47 +++++++++++++++++++++++++++++++++--- package-lock.json | 16 +++++++++++- package.json | 3 ++- 6 files changed, 107 insertions(+), 9 deletions(-) diff --git a/app/components/ChartsRow.jsx b/app/components/ChartsRow.jsx index e69de29..cc63525 100644 --- a/app/components/ChartsRow.jsx +++ b/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 ( +
+
+ {title} ({unit}) +
+ + {data.length ? ( + + + + + + + ): ( +
No Data
+ )} +
avg: {avg} {unit}
+
+ ) +} + +export default function ChartsRow({temps = [], pressures = [], humidities = []}){ + return ( +
+ + + +
+ ) +} \ No newline at end of file diff --git a/app/layout.js b/app/layout.js index 3889dd4..af0aff2 100644 --- a/app/layout.js +++ b/app/layout.js @@ -1,3 +1,5 @@ +'use client' + import './globals.css' import { Provider } from 'react-redux' import { store } from './store/configureStore' diff --git a/app/lib/openWeather.js b/app/lib/openWeather.js index db8982f..016a14f 100644 --- a/app/lib/openWeather.js +++ b/app/lib/openWeather.js @@ -1,3 +1,5 @@ + + import axios from "axios"; export async function fetchForecast(city){ @@ -14,9 +16,9 @@ export async function fetchForecast(city){ export function forecastData (raw){ return { - city: - temps: - pressure: - humidities: + 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) ?? [] } } \ No newline at end of file diff --git a/app/page.js b/app/page.js index eb8a7ac..328b425 100644 --- a/app/page.js +++ b/app/page.js @@ -1,12 +1,53 @@ -'use client' +'use client' + +import { useState } from "react" +import { useDispatch, useSelector } from "react-redux" +import { fetchCityForecast, clearError } from "./store/slices/weatherSlice" +import ChartsRow from "./components/ChartsRow" -//Main skeleton for weather app export default function Home() { + const [cityName, setCityName] = useState("") + const dispatch = useDispatch() + const weather = useSelector(state => state.weather) + + function handleSubmit(e){ + e.preventDefault() + if(!cityName.trim()) return + dispatch(clearError()) + dispatch(fetchCityForecast(cityName.trim()) + ) + } + return (

Weather Charts

-

Search Bar and charts here

+
+ setCityName(e.target.value)} + placeholder="City" + /> + + +
+ + + {weather.status === 'idle' &&

Type a city and search.

} + {weather.status === 'failed' &&

{weather.error}

} + {weather.status === 'succeeded' && ( +
+

{weather.city}

+ +
+ + )}
) } diff --git a/package-lock.json b/package-lock.json index 58a5c02..707963a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,8 @@ "next": "13.5.3", "react": "18.2.0", "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": { @@ -2974,6 +2975,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/redux": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", diff --git a/package.json b/package.json index 04d7482..bf60a6a 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "next": "13.5.3", "react": "18.2.0", "react-dom": "18.2.0", - "react-redux": "^9.2.0" + "react-redux": "^9.2.0", + "react-sparklines": "^1.7.0" } } From 70f8204cdd7274f5de0b67864c0981bfa1d9f188 Mon Sep 17 00:00:00 2001 From: Marvin Sierra Date: Fri, 19 Sep 2025 00:05:23 -0400 Subject: [PATCH 08/12] Fixed errors Well I fixed some error but now i see that when I run my server I see nothing. Will have to make sure everything is linked up correctly, could be that there is also no css. --- app/components/SearchBar.jsx | 26 ++++++++ app/globals.css | 111 ++--------------------------------- app/page.js | 79 +++++++++++-------------- 3 files changed, 64 insertions(+), 152 deletions(-) diff --git a/app/components/SearchBar.jsx b/app/components/SearchBar.jsx index e69de29..6d19f11 100644 --- a/app/components/SearchBar.jsx +++ b/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 [state,changeState] = useState('') + + function handleSubmit(e){ + e.preventDefault() + const cleaned = cityName.trim() + if(!cleaned) return + onSearch(cleaned) + } + return( +
+ changeState(e.target.value)} + placeholder={placeholder} + /> + +
+ ) +} \ No newline at end of file diff --git a/app/globals.css b/app/globals.css index d4f491e..631c2e9 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,107 +1,4 @@ -: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; - } -} +html{ + background-color: black; + color: aliceblue; +} \ No newline at end of file diff --git a/app/page.js b/app/page.js index 328b425..20c5597 100644 --- a/app/page.js +++ b/app/page.js @@ -1,53 +1,42 @@ -'use client' - -import { useState } from "react" -import { useDispatch, useSelector } from "react-redux" -import { fetchCityForecast, clearError } from "./store/slices/weatherSlice" -import ChartsRow from "./components/ChartsRow" +'use client'; +import { useDispatch, useSelector } from 'react-redux'; +import { fetchForecastByCity, clearError } from './store/slices/weatherSlice'; +import ChartsRow from './components/ChartsRow'; +import SearchBar from './components/SearchBar'; export default function Home() { - const [cityName, setCityName] = useState("") - const dispatch = useDispatch() - const weather = useSelector(state => state.weather) + const dispatch = useDispatch(); + const weather = useSelector(state => state.weather); - function handleSubmit(e){ - e.preventDefault() - if(!cityName.trim()) return - dispatch(clearError()) - dispatch(fetchCityForecast(cityName.trim()) - ) - } + + function handleSearch(cleanCity) { + dispatch(clearError()); + dispatch(fetchForecastByCity(cleanCity)); return ( -
-

Weather Charts

-
- setCityName(e.target.value)} - placeholder="City" - /> - - -
+
+

Weather Charts

- - {weather.status === 'idle' &&

Type a city and search.

} - {weather.status === 'failed' &&

{weather.error}

} - {weather.status === 'succeeded' && ( -
-

{weather.city}

- -
- - )} -
- ) -} + + {weather?.status === 'idle' &&

Type a city and search.

} + {weather?.status === 'failed' &&

{weather.error}

} + {weather?.status === 'succeeded' && ( + <> +

{weather.city}

+ + + )} +
+ ); + } +} \ No newline at end of file From ef94e2dbb6c1c6dbf6f3308515329f6a0bfb8d26 Mon Sep 17 00:00:00 2001 From: Marvin Sierra Date: Sat, 20 Sep 2025 21:33:43 -0400 Subject: [PATCH 09/12] fixed problem- empty webpage in the file SearchBar I had put cityName insteatd of state which I problably should reverse but thats fine for now --- app/components/SearchBar.jsx | 2 +- app/page.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/SearchBar.jsx b/app/components/SearchBar.jsx index 6d19f11..3343d05 100644 --- a/app/components/SearchBar.jsx +++ b/app/components/SearchBar.jsx @@ -18,7 +18,7 @@ export default function SearchBar ({disabled=false, onSearch,placeholder="type a onChange={(e)=> changeState(e.target.value)} placeholder={placeholder} /> - diff --git a/app/page.js b/app/page.js index 20c5597..92797e6 100644 --- a/app/page.js +++ b/app/page.js @@ -13,7 +13,7 @@ export default function Home() { function handleSearch(cleanCity) { dispatch(clearError()); dispatch(fetchForecastByCity(cleanCity)); - + } return (

Weather Charts

@@ -38,5 +38,5 @@ export default function Home() { )}
); - } + } \ No newline at end of file From bb4b2209100bf7524abfd5caeaf6de47661539ef Mon Sep 17 00:00:00 2001 From: Marvin Sierra Date: Tue, 28 Oct 2025 12:19:37 -0400 Subject: [PATCH 10/12] Update SearchBar.jsx --- app/components/SearchBar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/SearchBar.jsx b/app/components/SearchBar.jsx index 3343d05..f69e199 100644 --- a/app/components/SearchBar.jsx +++ b/app/components/SearchBar.jsx @@ -21,6 +21,6 @@ export default function SearchBar ({disabled=false, onSearch,placeholder="type a - + ) } \ No newline at end of file From 6e02006e832d1847632d8d703dfca3c11a83a988 Mon Sep 17 00:00:00 2001 From: Marvin Sierra Date: Thu, 13 Nov 2025 13:33:53 -0500 Subject: [PATCH 11/12] fixed more errors fixed some name errors. I wanted to change some names and i got mixed up with where I put them for a bit But I am now all organized and will continue with the app. --- app/components/SearchBar.jsx | 8 ++++---- app/globals.css | 3 +-- app/store/slices/weatherSlice.js | 2 +- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/app/components/SearchBar.jsx b/app/components/SearchBar.jsx index f69e199..ca591eb 100644 --- a/app/components/SearchBar.jsx +++ b/app/components/SearchBar.jsx @@ -3,7 +3,7 @@ import { useState } from "react" export default function SearchBar ({disabled=false, onSearch,placeholder="type a city"}){ - const [state,changeState] = useState('') + const [cityName,changeCityName] = useState('') function handleSubmit(e){ e.preventDefault() @@ -14,11 +14,11 @@ export default function SearchBar ({disabled=false, onSearch,placeholder="type a return(
changeState(e.target.value)} + value={cityName} + onChange={(e)=> changeCityName(e.target.value)} placeholder={placeholder} /> -
diff --git a/app/globals.css b/app/globals.css index 631c2e9..eaf7283 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,4 +1,3 @@ html{ - background-color: black; - color: aliceblue; + color: blue } \ No newline at end of file diff --git a/app/store/slices/weatherSlice.js b/app/store/slices/weatherSlice.js index 9b05c55..ccada51 100644 --- a/app/store/slices/weatherSlice.js +++ b/app/store/slices/weatherSlice.js @@ -5,7 +5,7 @@ import { fetchForecast, forecastData } from "@/app/lib/openWeather" // createAsyncThunk handles the action for side effects -export const fetchCityForecast = createAsyncThunk( +export const fetchForecastByCity = createAsyncThunk( async (city, { rejectedWithValue } ) => { try { const raw = await fetchForecast ( city ) From a6f955858671c6a57ee3982777d5bbc1b025accb Mon Sep 17 00:00:00 2001 From: Marvin Sierra Date: Thu, 13 Nov 2025 16:28:39 -0500 Subject: [PATCH 12/12] Final all fixed Code After a very long time I looked at all the naming mistakes in the entire app and was able to get it working. Now using Redux/RTK we can type a city name and get 3 charts back using React SparkLines. --- app/globals.css | 9 ++++++++- app/lib/openWeather.js | 2 -- app/page.js | 3 ++- app/store/configureStore.js | 2 +- app/store/slices/weatherSlice.js | 19 ++++++++++--------- 5 files changed, 21 insertions(+), 14 deletions(-) diff --git a/app/globals.css b/app/globals.css index eaf7283..04cee3b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,3 +1,10 @@ html{ - color: blue + background-color:rgb(97, 95, 95); + display: flex; + justify-content: center; + +} + +h1{ + color: black; } \ No newline at end of file diff --git a/app/lib/openWeather.js b/app/lib/openWeather.js index 016a14f..baf7035 100644 --- a/app/lib/openWeather.js +++ b/app/lib/openWeather.js @@ -1,5 +1,3 @@ - - import axios from "axios"; export async function fetchForecast(city){ diff --git a/app/page.js b/app/page.js index 92797e6..08749ba 100644 --- a/app/page.js +++ b/app/page.js @@ -25,7 +25,8 @@ export default function Home() { /> {weather?.status === 'idle' &&

Type a city and search.

} - {weather?.status === 'failed' &&

{weather.error}

} + + {weather?.status === 'failed' &&

{weather.error}

} {weather?.status === 'succeeded' && ( <>

{weather.city}

diff --git a/app/store/configureStore.js b/app/store/configureStore.js index eb210ef..da3e54b 100644 --- a/app/store/configureStore.js +++ b/app/store/configureStore.js @@ -6,6 +6,6 @@ import { weatherReducer } from './slices/weatherSlice' //added reducer which connects it to the store export const store = configureStore({ reducer: { - weather: weatherReducer + weather: weatherReducer, }, }) \ No newline at end of file diff --git a/app/store/slices/weatherSlice.js b/app/store/slices/weatherSlice.js index ccada51..50a3ab2 100644 --- a/app/store/slices/weatherSlice.js +++ b/app/store/slices/weatherSlice.js @@ -1,20 +1,21 @@ 'use client' -import { createSlice,createAsyncThunk, isRejectedWithValue } from "@reduxjs/toolkit" +import { createSlice,createAsyncThunk } from "@reduxjs/toolkit" import { fetchForecast, forecastData } from "@/app/lib/openWeather" // createAsyncThunk handles the action for side effects - export const fetchForecastByCity = createAsyncThunk( - async (city, { rejectedWithValue } ) => { + 'weather/fetchForecastByCity', + async (city, { rejectWithValue } ) => { try { const raw = await fetchForecast ( city ) - return forecastData( raw ) + return forecastData(raw) } + catch ( err ){ const apiMsg = err?.response?.data?.message - if ( apiMsg ) return rejectedWithValue( apiMsg ) - return rejectedWithValue( 'Make Believe City, Try Again') + if ( apiMsg ) return rejectWithValue( apiMsg ) + return rejectWithValue( 'Make Believe City, Try Again') } } ) @@ -40,12 +41,12 @@ const weatherSlice = createSlice({ }, extraReducers: (builder) => { builder - .addCase(fetchCityForecast.pending, (state) => { + .addCase(fetchForecastByCity.pending, (state) => { state.status = 'loading'; state.error = null; }) - .addCase(fetchCityForecast.fulfilled, (state, action) => { + .addCase(fetchForecastByCity.fulfilled, (state, action) => { state.status = 'succeeded'; state.city = action.payload.city; state.series.temps = action.payload.temps; @@ -63,4 +64,4 @@ const weatherSlice = createSlice({ //export actions made from reducer export const {clearError} = weatherSlice.actions //export the reducer so the store can use it -export default weatherSlice.reducer \ No newline at end of file +export const weatherReducer = weatherSlice.reducer