-
Notifications
You must be signed in to change notification settings - Fork 36
Redux Toolkit Eval #21
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.
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
meccacodes
wants to merge
13
commits into
projectshft:main
Choose a base branch
from
meccacodes:main
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
d010ae6
Basic app working as per insturctions, needs styling.
meccacodes f8e9ca5
Added show data based on IP, some styling
meccacodes 8104540
on inital render, displaying city, state and country properly. Does …
meccacodes 256611f
Data displayed correctly on initial render, and on zip code input
meccacodes cb94c8c
User iput of "city, state" is returning correct data, but the h3 show…
meccacodes 855422e
fixed temperature chart not displaying
meccacodes f8291fe
h3 displaying city and country, the state is not displaying.
meccacodes 19ac5dd
getting correct geocoding response back, now need to display city and…
meccacodes 55083bf
city, state input working properly now, inital render and zip code no…
meccacodes 3336eab
fetchWeatherByZip now displaying city, zip, country. Need to add state.
meccacodes 4823f73
h3 displaying correctly now
meccacodes e56ea3a
Merge pull request #1 from meccacodes/fix
meccacodes ab13b4e
Lost a bunch of work when merging, got angry and gave up. This versi…
meccacodes File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,14 @@ | ||
| 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 { Provider } from "react-redux"; | ||
| import store from "./store/configureStore"; | ||
|
|
||
| export default function RootLayout({ children }) { | ||
| return ( | ||
| <html lang="en"> | ||
| <body className={inter.className}>{children}</body> | ||
| <body> | ||
| <Provider store={store}>{children}</Provider> | ||
| </body> | ||
| </html> | ||
| ) | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,95 +1,125 @@ | ||
| import Image from 'next/image' | ||
| import styles from './page.module.css' | ||
| "use client"; | ||
| import React, { useState, useEffect } from "react"; | ||
| import { useDispatch, useSelector } from "react-redux"; | ||
| import { | ||
| fetchWeather, | ||
| fetchWeatherByZip, | ||
| fetchWeatherByCity, | ||
| } from "./store/slices/weatherSlice"; | ||
| import styles from "./page.module.css"; | ||
| import axios from "axios"; | ||
| import { | ||
| Sparklines, | ||
| SparklinesLine, | ||
| SparklinesReferenceLine, | ||
| } from "react-sparklines"; | ||
|
|
||
| export default function Home() { | ||
| return ( | ||
| <main className={styles.main}> | ||
| <div className={styles.description}> | ||
| <p> | ||
| Get started by editing | ||
| <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> | ||
| const Home = () => { | ||
| const [city, setCity] = useState(""); | ||
| const [cityName, setCityName] = useState(""); | ||
| const dispatch = useDispatch(); | ||
| const { loading, data, error, geoCityName, geoState, geoZip, country } = | ||
| useSelector((state) => state.weather); | ||
|
|
||
| <div className={styles.center}> | ||
| <Image | ||
| className={styles.logo} | ||
| src="/next.svg" | ||
| alt="Next.js Logo" | ||
| width={180} | ||
| height={37} | ||
| priority | ||
| /> | ||
| </div> | ||
| const getUserLocation = async () => { | ||
| try { | ||
| const response = await axios.get("https://ipapi.co/json/"); | ||
| const userCity = response.data.city; | ||
| const userState = response.data.region; | ||
| const userCountry = response.data.country; | ||
| const fullCityName = `${userCity}, ${ | ||
| userState ? userState + ", " : "" | ||
| }${userCountry}`; | ||
|
|
||
| dispatch(fetchWeather(fullCityName)); | ||
| setCityName(fullCityName); | ||
|
|
||
| dispatch({ type: "weather/setCityName", payload: fullCityName }); | ||
| return fullCityName; | ||
| } catch (error) { | ||
| console.error("Error fetching user location", error); | ||
| } | ||
| }; | ||
|
|
||
| <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>-></span> | ||
| </h2> | ||
| <p>Find in-depth information about Next.js features and API.</p> | ||
| </a> | ||
| useEffect(() => { | ||
| getUserLocation(); | ||
| }, []); | ||
|
|
||
| <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>-></span> | ||
| </h2> | ||
| <p>Learn about Next.js in an interactive course with quizzes!</p> | ||
| </a> | ||
| const handleSearch = async () => { | ||
| try { | ||
| const formattedInput = city.trim(); | ||
| const isZipCode = /^\d{5}(-\d{4})?$/.test(formattedInput); | ||
|
|
||
| <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>-></span> | ||
| </h2> | ||
| <p>Explore the Next.js 13 playground.</p> | ||
| </a> | ||
| if (isZipCode) { | ||
| dispatch(fetchWeatherByZip(formattedInput)); | ||
| } else { | ||
| const [inputCity, inputState] = formattedInput | ||
| .split(",") | ||
| .map((part) => part.trim()); | ||
| dispatch(fetchWeatherByCity({ city: inputCity, state: inputState })); | ||
| setCityName(formattedInput); | ||
| } | ||
| } catch (error) { | ||
| console.error("Error fetching location from input", error); | ||
| } | ||
| }; | ||
|
|
||
| <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>-></span> | ||
| </h2> | ||
| <p> | ||
| Instantly deploy your Next.js site to a shareable URL with Vercel. | ||
| </p> | ||
| </a> | ||
| const handleKeyPress = (event) => { | ||
| if (event.key === "Enter") { | ||
| handleSearch(); | ||
| } | ||
| }; | ||
|
|
||
| const getChartData = (key) => { | ||
| return data.list ? data.list.map((item) => item.main[key]) : []; | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={styles.container}> | ||
| <h2 className={styles.heading}>Weather Search</h2> | ||
| <input | ||
| className={styles.searchInput} | ||
| type="text" | ||
| value={city} | ||
| onChange={(e) => setCity(e.target.value)} | ||
| onKeyDown={handleKeyPress} | ||
| placeholder="Enter a US zip code" | ||
| /> | ||
| <button className={styles.searchBtn} onClick={handleSearch}> | ||
| Search | ||
| </button> | ||
| {loading && <p>Loading...</p>} | ||
| {error && <p>Error: {error}</p>} | ||
| <div> | ||
| <br></br> | ||
| <h3> | ||
| Showing data for{" "} | ||
| {geoCityName && geoZip | ||
| ? `${geoCityName}, ${geoZip}, ${country}` | ||
| : cityName} | ||
| </h3> | ||
| <br></br> | ||
| <h3>Temperature</h3> | ||
| <Sparklines | ||
| data={data.list ? data.list.map((item) => item.main.temp) : []} | ||
| ></Sparklines> | ||
| <Sparklines data={getChartData("temp")}> | ||
| <SparklinesLine color="blue" /> | ||
| <SparklinesReferenceLine type="mean" /> | ||
| </Sparklines> | ||
| <h3>Pressure</h3> | ||
| <Sparklines data={getChartData("pressure")}> | ||
| <SparklinesLine color="green" /> | ||
| <SparklinesReferenceLine type="mean" /> | ||
| </Sparklines> | ||
| <h3>Humidity</h3> | ||
| <Sparklines data={getChartData("humidity")}> | ||
| <SparklinesLine color="orange" /> | ||
| <SparklinesReferenceLine type="mean" /> | ||
| </Sparklines> | ||
| </div> | ||
| </main> | ||
| ) | ||
| } | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Home; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what is this for?
its creating the empty space