Conversation
…location weather data.
…trived is for current weather, but coordinates are included in data which can be used to fetch five-day-forecast.
…sparkline component
…sure and humidity.
…Additional styling.
.env
Outdated
| @@ -0,0 +1 @@ | |||
| NEXT_PUBLIC_API_KEY="6427275c4ee8b157888fdf144b2fc5ca" No newline at end of file | |||
There was a problem hiding this comment.
you generally want to add .env files to .gitignore, so it's not visible on the repo, where anyone can use it.
There was a problem hiding this comment.
Doh, I was proud of myself for putting it in the .env but forgot to add to .gitignore. Fixed now.
app/page.tsx
Outdated
| import { indexData } from "./types/indexData"; | ||
| import type { cityProcessedData } from "./types/cityProcessedData"; | ||
|
|
||
| type weatherPropsType = { |
There was a problem hiding this comment.
It's convention to TitleCase type names. Also to prefer interface over type where possible
app/page.tsx
Outdated
| > | ||
| <div className="font-medium text-sm my-auto">{city.city}</div> | ||
| {weatherCharts(city).map((props) => ( | ||
| <Chart {...props} key={props.avg} /> |
There was a problem hiding this comment.
they key needs to be guaranteed to be unique. If your data had two items with the same .avg value, you'd get a duplicate key warning or it might not even render one of them, I forget. You could use color instead, since you control that property and know it's always unique. Or it would be safe to use index from map as well in this instance. weatherCharts(city).map((props, index) => (
There was a problem hiding this comment.
Since avg is actually a string with a unit attached (eg. "72 degrees", "84 %" I thought it would be safe?
…perties form state: coordinates, default city.
…This simplifies code in app/page.tsx to map over ChartGroups based on state.weather.cities.
| }) | ||
| .addCase(fetchWeather.fulfilled, (state, action) => { | ||
| state.status = "succeeded"; | ||
| state.cities = [...state.cities, action.payload]; |
There was a problem hiding this comment.
state.cities.push(action.payload); instead
3 participants
No description provided.