Add WeatherCardDetails component

borsemayur2 · May 14, 2021 · c763a81 · c763a81
1 parent b29ed73
commit c763a81
Show file tree

Hide file tree

Showing 4 changed files with 230 additions and 78 deletions.
diff --git a/src/weather/components/TempBarChart.jsx b/src/weather/components/TempBarChart.jsx
@@ -9,6 +9,7 @@ import {
  ResponsiveContainer,
 } from "recharts";
 import { useSelector } from "react-redux";
+import { Typography } from "@material-ui/core";
 
 export default function TempBarChart(props) {
  const selectedWeatherItem = useSelector(
@@ -18,15 +19,18 @@ export default function TempBarChart(props) {
  return (
  <>
  {selectedWeatherItem && (
- <ResponsiveContainer width={"100%"} height={250}>
- <BarChart data={selectedWeatherItem.temperatures}>
- <CartesianGrid strokeDasharray="1 1" />
- <XAxis dataKey="time" />
- <YAxis dataKey="temp" width={30} />
- <Bar dataKey="temp" fill="#abbbaf" barSize={20} />
- <Tooltip />
- </BarChart>
- </ResponsiveContainer>
+ <>
+ <Typography>{selectedWeatherItem.date}</Typography>
+ <ResponsiveContainer width={"100%"} height={250}>
+ <BarChart data={selectedWeatherItem.temperatures}>
+ <CartesianGrid strokeDasharray="1 1" />
+ <XAxis dataKey="time" />
+ <YAxis dataKey="temp" width={30} />
+ <Bar dataKey="temp" fill="#abbbaf" barSize={20} />
+ <Tooltip />
+ </BarChart>
+ </ResponsiveContainer>
+ </>
  )}
  </>
  );

diff --git a/src/weather/components/WeatherCardDetails.jsx b/src/weather/components/WeatherCardDetails.jsx
@@ -0,0 +1,201 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import {
+ Divider,
+ Grid,
+ Paper,
+ List,
+ ListItem,
+ ListItemText,
+ ListItemIcon,
+ Collapse,
+ Avatar,
+} from "@material-ui/core";
+import ExpandLess from "@material-ui/icons/ExpandLess";
+import ExpandMore from "@material-ui/icons/ExpandMore";
+import { useSelector, useDispatch } from "react-redux";
+import { setSelectedWeatherItem } from "../weatherSlice";
+
+const useStyles = makeStyles((theme) => ({
+ paper: {
+ width: 280,
+ },
+ listRoot: {
+ width: "100%",
+ maxWidth: 280,
+ },
+ nested: {
+ paddingLeft: theme.spacing(4),
+ },
+}));
+
+const WeatherCardDetails = ({ weatherItem, selectedWeatherItem }) => {
+ const classes = useStyles();
+ const dispatch = useDispatch();
+
+ const tempUnit = useSelector((state) => state.weather.tempUnit);
+
+ const unit = tempUnit === "celsius" ? "°C" : "°F";
+
+ const [openTemperature, setOpenTemperature] = React.useState(false);
+ const [openPressure, setOpenPressure] = React.useState(false);
+ const [openHumidity, setOpenHumidity] = React.useState(false);
+
+ const handleClickTemperature = () => {
+ setOpenTemperature(!openTemperature);
+ };
+ const handleClickPressure = () => {
+ setOpenPressure(!openPressure);
+ };
+ const handleClickHumidity = () => {
+ setOpenHumidity(!openHumidity);
+ };
+
+ function getWindDirection(degree) {
+ const directions = ["N", "NW", "W", "SW", "S", "SE", "E", "NE"];
+ const index =
+ Math.round(((degree %= 360) < 0 ? degree + 360 : degree) / 45) % 8;
+ return directions[index];
+ }
+
+ return (
+ <Grid item key={weatherItem.date}>
+ <Paper
+ elevation={selectedWeatherItem?.date === weatherItem.date ? 8 : 1}
+ className={classes.paper}
+ >
+ <List className={classes.listRoot}>
+ <ListItem
+ button
+ onClick={() => {
+ dispatch(
+ setSelectedWeatherItem({
+ selectedWeatherItem: weatherItem,
+ })
+ );
+ }}
+ >
+ <ListItemIcon></ListItemIcon>
+ <ListItemText primary={weatherItem.date} secondary="Date" />
+ </ListItem>
+ <ListItem button onClick={handleClickTemperature}>
+ <ListItemIcon>
+ <Avatar
+ alt="Temp"
+ src="https://openweathermap.org/img/wn/[email protected]"
+ />
+ </ListItemIcon>
+ <ListItemText
+ primary={`${weatherItem.average.main.temp}${unit}`}
+ secondary="Temperature"
+ />
+ {openTemperature ? <ExpandLess /> : <ExpandMore />}
+ </ListItem>
+ <Collapse in={openTemperature} timeout="auto" unmountOnExit>
+ <List component="div" disablePadding>
+ <ListItem className={classes.nested}>
+ <ListItemText
+ primary={`${weatherItem.average.main.feels_like}${unit}`}
+ secondary="Feels"
+ />
+ <ListItemText
+ primary={`${weatherItem.average.main.temp_min}${unit}`}
+ secondary="Min"
+ />
+ <ListItemText
+ primary={`${weatherItem.average.main.temp_max}${unit}`}
+ secondary="Max"
+ />
+ </ListItem>
+ </List>
+ </Collapse>
+ <Divider />
+ <ListItem button onClick={handleClickPressure}>
+ <ListItemIcon></ListItemIcon>
+ <ListItemText
+ primary={`${weatherItem.average.main.pressure}hPa`}
+ secondary={"Pressure"}
+ />
+ {openPressure ? <ExpandLess /> : <ExpandMore />}
+ </ListItem>
+ <Collapse in={openPressure} timeout="auto" unmountOnExit>
+ <List component="div" disablePadding>
+ <ListItem className={classes.nested}>
+ <ListItemText
+ primary={`${weatherItem.average.main.sea_level}hPa`}
+ secondary={"Sea Level"}
+ />
+ <ListItemText
+ primary={`${weatherItem.average.main.grnd_level}hPa`}
+ secondary={"Ground Level"}
+ />
+ </ListItem>
+ </List>
+ </Collapse>
+ <Divider />
+ <ListItem button onClick={handleClickHumidity}>
+ <ListItemIcon></ListItemIcon>
+ <ListItemText
+ primary={`${weatherItem.average.main.humidity}%`}
+ secondary={"Humidity"}
+ />
+ {openHumidity ? <ExpandLess /> : <ExpandMore />}
+ </ListItem>
+ <Collapse in={openHumidity} timeout="auto" unmountOnExit>
+ <List component="div" disablePadding>
+ <ListItem className={classes.nested}>
+ <ListItemText
+ primary={`${weatherItem.average.clouds.all}%`}
+ secondary={"Cloudiness"}
+ />
+ <ListItemText
+ primary={`${weatherItem.average.pop}%`}
+ secondary={"Precipitation"}
+ />
+ </ListItem>
+ </List>
+ </Collapse>
+ <Divider />
+ <ListItem
+ button
+ onClick={() => {
+ dispatch(
+ setSelectedWeatherItem({
+ selectedWeatherItem: weatherItem,
+ })
+ );
+ }}
+ >
+ <ListItemIcon></ListItemIcon>
+ <ListItemText
+ primary={`${weatherItem.average.wind.speed}mph ${getWindDirection(
+ weatherItem.average.wind.deg
+ )}
+ `}
+ secondary={"Wind"}
+ />
+ </ListItem>
+ <Divider />
+ <ListItem
+ button
+ onClick={() => {
+ dispatch(
+ setSelectedWeatherItem({
+ selectedWeatherItem: weatherItem,
+ })
+ );
+ }}
+ >
+ <ListItemIcon></ListItemIcon>
+ <ListItemText
+ primary={`${weatherItem.average.visibility / 1000}KM`}
+ secondary={"Visibility"}
+ />
+ </ListItem>
+ </List>
+ </Paper>
+ </Grid>
+ );
+};
+
+export default WeatherCardDetails;
diff --git a/src/weather/components/WeatherCardList.jsx b/src/weather/components/WeatherCardList.jsx
@@ -1,27 +1,21 @@
 import React, { useEffect } from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import { Grid, Paper } from "@material-ui/core";
-import { useSelector, useDispatch } from "react-redux";
+import { Grid } from "@material-ui/core";
+import WeatherCardDetails from "./WeatherCardDetails";
 import { setSelectedWeatherItem } from "../weatherSlice";
+import { useSelector, useDispatch } from "react-redux";
 
 const useStyles = makeStyles((theme) => ({
  root: {
  flexGrow: 1,
- },
- paper: {
- height: 260,
- width: 160,
- },
- control: {
- padding: theme.spacing(2),
+ marginBottom: theme.spacing(2),
  },
 }));
 
 const WeatherCardList = ({ weatherItems }) => {
  const classes = useStyles();
  const dispatch = useDispatch();
 
- const tempUnit = useSelector((state) => state.weather.tempUnit);
  const selectedWeatherItem = useSelector(
  (state) => state.weather.selectedWeatherItem
  );
@@ -39,67 +33,20 @@ const WeatherCardList = ({ weatherItems }) => {
  }
  }, [weatherItems]);
 
- function getWindDirection(degree) {
- const directions = ["N", "NW", "W", "SW", "S", "SE", "E", "NE"];
- const index =
- Math.round(((degree %= 360) < 0 ? degree + 360 : degree) / 45) % 8;
- return directions[index];
- }
-
  return (
- <>
- <Grid container className={classes.root} spacing={2}>
- <Grid item xs={12}>
- <Grid container justify="center" spacing={4}>
- {weatherItems.map((weatherItem) => (
- <Grid key={weatherItem.date} item>
- <Paper
- className={classes.paper}
- onClick={() => {
- dispatch(
- setSelectedWeatherItem({
- selectedWeatherItem: weatherItem,
- })
- );
- }}
- >
- <img
- src={"https://openweathermap.org/img/wn/[email protected]"}
- height={50}
- width={50}
- />
- {selectedWeatherItem &&
- weatherItem.date === selectedWeatherItem.date &&
- "Selected"}
- <p>
- Temp:{" "}
- {tempUnit === "celsius"
- ? `${weatherItem.average.main.temp}°C`
- : `${weatherItem.average.main.temp}°F`}
- </p>
- <p>TrueFeel: {weatherItem.average.main.feels_like}</p>
- <p>Min: {weatherItem.average.main.temp_min}</p>
- <p>Max: {weatherItem.average.main.temp_max}</p>
-
- <p>Pressure: {weatherItem.average.main.pressure}hPa</p>
- <p>Sea Level: {weatherItem.average.main.sea_level}hPa</p>
- <p>Ground Level: {weatherItem.average.main.grnd_level}hPa</p>
- <p>Humidity: {weatherItem.average.main.humidity}%</p>
- <p>
- Wind:
- {weatherItem.average.wind.speed}mph{" "}
- {getWindDirection(weatherItem.average.wind.deg)}
- </p>
- <p>Cloudiness: {weatherItem.average.clouds.all}%</p>
- <p>Visibility: {weatherItem.average.visibility / 1000}KM</p>
- <p>Precipitation: {weatherItem.average.pop}</p>
- </Paper>
- </Grid>
- ))}
- </Grid>
+ <Grid container className={classes.root} spacing={1}>
+ <Grid item xs={12}>
+ <Grid container justify="center" spacing={1}>
+ {weatherItems.map((weatherItem) => (
+ <WeatherCardDetails
+ weatherItem={weatherItem}
+ selectedWeatherItem={selectedWeatherItem}
+ key={weatherItem.date}
+ />
+ ))}
  </Grid>
  </Grid>
- </>
+ </Grid>
  );
 };
 

diff --git a/src/weather/components/WeatherForecast.jsx b/src/weather/components/WeatherForecast.jsx
@@ -21,7 +21,7 @@ export default function WeatherForecast({ city }) {
  if (isFetching) return "fetching...";
  if (!isSuccess) return "Error while fetching weather";
 
- const cardsPerPage = 3;
+ const cardsPerPage = 2;
  const pageStart = pageIndex * cardsPerPage;
  const pageEnd = pageStart + cardsPerPage;