React Weather Data Submission

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/babel", "next/core-web-vitals"]
 }

.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

app/components/CityList.js

@@ -0,0 +1,53 @@
+'use client';
+import { useSelector } from 'react-redux';
+import { Sparklines, SparklinesLine } from 'react-sparklines';
+import '../style.css';
+
+
+const CityList = () => {
+  const cities = useSelector((state) => state.city.city)
+	return (
+
+
+		<table className='table table-hover  city-table'>
+			<thead>
+				<tr>
+					<th>City</th>
+					<th>Temperature</th>
+					<th>Pressure</th>
+					<th>Humidityv</th>
+				</tr>
+			</thead>
+			<tbody>
+			{cities.map((city) => {
+				return(
+				<tr>
+					<td >{city.cityName}</td>
+					<td>
+				<Sparklines data={city.temperature}>
+				<SparklinesLine />
+				</Sparklines>
+					<p className='graph-data'>{city.temperature[0]} °F</p>
+				</td>
+				<td>
+				<Sparklines data={city.pressure}>
+
+				<SparklinesLine />
+				</Sparklines>
+				<p className='graph-data'>{city.pressure[0]} hPa</p>
+				</td>
+				<td>
+				<Sparklines data={city.humidity}>
+				<SparklinesLine />
+				</Sparklines>
+				<p className='graph-data'>{city.humidity[0]}%</p>
+				</td>
+				</tr>
+			)})}
+			</tbody>
+		</table>
+
+	);
+};
+
+export default CityList;

app/components/CitySearch.js

@@ -0,0 +1,37 @@
+'use client';
+import { useDispatch } from 'react-redux';
+import { fetchData } from '../store/slices/city';
+
+
+
+const CitySearch = () => {
+  const dispatch = useDispatch();
+
+	const handleSubmit = async(event) => {
+		event.preventDefault();
+		await dispatch(fetchData(event.target.city.value));
+	}
+
+	return (
+    <>
+    <h1 style={{textAlign: "center", marginTop: "50px"}}>Weather Data</h1>
+		<form class="search-city" onSubmit={handleSubmit}>
+            <div class="form-group d-flex">
+              <input
+								name="city"
+                class="form-control"
+                id="search-city"
+                type="text"
+                placeholder="Enter City"
+                style={{marginTop: "60px"}}
+              />
+              <button type="submit" class="btn btn-primary search ms-2" style={{marginTop: "60px"}}>
+                Search
+              </button>
+            </div>
+          </form>
+          </>
+	);
+};
+
+export default CitySearch;

app/globals.css

@@ -1,107 +1,7 @@
 :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;
-  }
+  --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;
 }

app/layout.js

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

app/page.js

@@ -1,95 +1,12 @@
-import Image from 'next/image'
 import styles from './page.module.css'
+import CityList from './components/CityList'
+import CitySearch from './components/CitySearch'
 
 export default function Home() {
   return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>app/page.js</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <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>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p>Explore the Next.js 13 playground.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
+    <>
+      <CitySearch />
+      <CityList />
+    </>
   )
 }

app/page.module.css

@@ -97,7 +97,7 @@
 
 .center::before,
 .center::after {
-  content: '';
+  content: "";
   left: 50%;
   position: absolute;
   filter: blur(45px);

app/store/configureStore.js

@@ -0,0 +1,8 @@
+import { configureStore } from '@reduxjs/toolkit';
+import rootReducer from './rootReducer';
+
+const store = configureStore({
+  reducer: rootReducer
+});
+
+export default store;

app/store/rootReducer.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux';
+import cityReducer from './slices/city';
+
+const rootReducer = combineReducers({
+  city: cityReducer,
+});
+
+export default rootReducer;