Skip to content

rtk-weather cjedrasik03 #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cjedrasik03 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

rtk-weather cjedrasik03 #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ad51861
Mock app template and initial app setup
cjedrasik03 May 16, 2025
ee71549
pure pain, store is setup (i think), my bootstrap is styling and have…
cjedrasik03 May 18, 2025
ce85d31
did a lot today, store should be good from last time, slices is setup…
cjedrasik03 May 19, 2025
8694249
lots of great stuff today, get the api running and data is correctly …
cjedrasik03 May 20, 2025
291183a
all done, i think. Things are working and data is in sparkline format
cjedrasik03 May 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 9 additions & 102 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,107 +1,14 @@
: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));
.searchContainer {
max-width: auto;
}

a {
color: inherit;
text-decoration: none;
.primaryBackground {
background-color: lightblue;
max-width: 1000px;
margin: 0 auto;
border-radius: 25px;
}

@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
.resultDisplayed {
max-width: 800px;
}
22 changes: 11 additions & 11 deletions app/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import './globals.css'
import { Inter } from 'next/font/google'
'use client';

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
import { Provider } from 'react-redux';
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}>{children}</body>
<body>
<Provider store={store}>
{children}
</Provider>
</body>
</html>
)
}
);
}
246 changes: 154 additions & 92 deletions app/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,95 +1,157 @@
import Image from 'next/image'
import styles from './page.module.css'
'use client';
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, SparklinesLine, SparklinesReferenceLine, SparklinesSpots } from 'react-sparklines';
import { getLocation, fetchWeather } from './store/slices/getWeather';

export default function App() {
// State for the city search input field
const [inputValue, setInputValue] = useState('');
const [weatherData, setWeatherData] = useState(null);

// Hook for dispatching Redux actions
const dispatch = useDispatch();

// Calculate the avg. temp
const getDailyAverages = (field) => {
if (!weatherData?.list?.length) return [];

const dailyAverages = [];

for (let day = 0; day < 5; day++) {
const start = day * 8;
const end = start + 8;
const daySlice = weatherData.list.slice(start, end);

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
}
};

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>
)
<>
<Container fluid className="primaryBackground min-vh-100 py-5">
<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
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
type="submit"
onClick={handleSearch}
className="btn btn-primary btn-lg w-100"
>
Search
</button>
</Col>
</Row>
</div>
</Col>
</Row>

{/* 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">
<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">

{/* 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>
</Col>
</Row>
</Container>
</>
);
}
Loading