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;