Merge pull request #11 from stephin007/ui-fixes

UI-CHANGES
stephin007 · May 5, 2021 · 33e44f0 · 33e44f0
2 parents 64bcb9d + 9a44a4a
commit 33e44f0
Show file tree

Hide file tree

Showing 3 changed files with 204 additions and 99 deletions.
diff --git a/README.md b/README.md
@@ -2,4 +2,6 @@
 
 > TechStack - React JS, Material UI
 
-_MORE INFO YET TO BE ADDED... STAY TUNED_
+_MORE INFO YET TO BE ADDED... STAY TUNED_
+
+### Please check the Projects section to see the progress and the discussion panel to add your ideas, which will eventually be picked up for development
diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
@@ -1,6 +1,11 @@
-body{
-  background-color: #121212;
-  background-image: url(https://bioengineering.stanford.edu/sites/g/files/sbiybj17086/files/styles/breakpoint_2xl_2x/public/media/image/covid-19-5000501_1920_0.jpg?itok=s9XVFV61);
+body {
+  background: rgb(225, 69, 148);
+  background: linear-gradient(
+    90deg,
+    rgba(225, 69, 148, 1) 0%,
+    rgba(43, 53, 149, 1) 35%,
+    rgba(112, 69, 175, 1) 100%
+  );
 }
 .home {
   color: white;
@@ -14,49 +19,43 @@ body{
 .home__info {
   background-color: #121212;
   padding: 15px;
-  color: #BB86FC;
+  color: #bb86fc;
   margin-top: 20px;
   margin-bottom: 20px;
   border-radius: 5px;
 }
 
-.home__optionLeft > .MuiSlider-root {
-  color: #e35060;
-  width: 600px;
-}
-
 .home__optionLeft {
   padding: 10px;
   margin-top: 10px;
   margin-left: -15px;
 }
 
 .home__option {
-  padding: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  margin: 10px;
 }
 
-.home__optionRight > .MuiFormControl-root {
+.text > .MuiFormControl-root {
   background-color: #31333f;
   color: white !important;
-  width: 600px;
+  width: 300px;
   outline: 0 !important;
   border-radius: 10px;
+  margin: 10px;
 }
 
 .MuiSelect-root {
   color: white !important;
 }
+.MuiPaper-root {
+  margin-top: 10px;
+  margin-left: 10px;
+}
 
-@media (max-width: 600px) {
-  .home__optionLeft > .MuiSlider-root {
-    color: #e33060;
-    width: 150px;
-  }
+@media (max-width: 800px) {
   .home__optionRight > .MuiFormControl-root {
-    width: 150px;
+    width: 280px;
+    margin-left: 10px;
   }
   .home__info {
     border-radius: 10px;
@@ -65,8 +64,48 @@ body{
     background-size: 300%;
     height: 100vh;
   }
+
+  .home__optionRight {
+    display: flex;
+    flex-direction: column;
+  }
+  .text > .MuiFormControl-root {
+    background-color: #31333f;
+    color: white !important;
+    width: 280px;
+    outline: 0 !important;
+    border-radius: 10px;
+  }
+
+  .date__picker {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .MuiPaper-root {
+    margin-left: -5px;
+    margin-top: 10px;
+  }
 }
 
 body::-webkit-scrollbar {
   display: none;
 }
+
+.home__optionRight {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+}
+
+.date__picker {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+}
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -1,69 +1,147 @@
-import 'date-fns';
+import "date-fns";
 import React, { useEffect, useState } from "react";
-import {Grid, Typography, Container, MenuItem, FormControl, Select, Paper, TextField } from "@material-ui/core";
-import {MuiPickersUtilsProvider, KeyboardDatePicker} from '@material-ui/pickers';
-import { makeStyles } from '@material-ui/core/styles';
-import DateFnsUtils from '@date-io/date-fns';
+import {
+  Grid,
+  Typography,
+  Container,
+  MenuItem,
+  FormControl,
+  Select,
+  Paper,
+  TextField,
+} from "@material-ui/core";
+import {
+  MuiPickersUtilsProvider,
+  KeyboardDatePicker,
+} from "@material-ui/pickers";
+import { makeStyles } from "@material-ui/core/styles";
+import DateFnsUtils from "@date-io/date-fns";
 
 import "./Home.css";
 
-
 const useStyles = makeStyles((theme) => ({
   input: {
-    color: "#BB86FC"
+    color: "#BB86FC",
+  },
+  textfield: {
+    color: "#BB86FC",
+    height: "50px",
+    width: "248px",
+    padding: "0px 0px 0px 0px",
+    margin: "-5px 0px 0px 0px",
   },
-    textfield: {
-        color: "#BB86FC",
-        height: "50px",
-        width: "248px",
-        padding: "0px 0px 0px 0px",
-        margin: "-5px 0px 0px 0px"
-    },
   paper: {
     height: 70,
     width: 250,
     backgroundColor: "#31333F",
-    padding: "0px 10px 0px 10px"
-  }
+    padding: "0px 10px 0px 10px",
+  },
 }));
 
 const Home = () => {
   const [state, setState] = useState([]);
-  const [selectedDate, setSelectedDate] = useState(new Date('2021-04-30'))
-  const classes = useStyles()
+  const [selectedDate, setSelectedDate] = useState(new Date("2021-04-30"));
+  const [stateCode, setStateCode] = useState("States");
+  const [district, setDistricts] = useState([]);
+  const [districtCode, setDistrictCode] = useState("Districts");
+  const [vaccinedData, setVaccinatedData] = useState([]);
+  const classes = useStyles();
 
   const handleDateChange = (date) => {
-    setSelectedDate(date)
-  }
+    setSelectedDate(date);
+  };
 
   useEffect(() => {
     fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states")
-        .then((res) => res.json())
-        .then((data) => {
-          setState(data.states);
-        });
+      .then((res) => res.json())
+      .then((data) => {
+        setState(data.states);
+      });
   }, [setState]);
 
-  console.info(state);
+  console.log(vaccinedData);
+
+  const onStateChange = async (e) => {
+    const stateCode = e.target.value;
+    const url =
+      stateCode === "States"
+        ? "https://cdn-api.co-vin.in/api/v2/admin/location/districts/99"
+        : `https://cdn-api.co-vin.in/api/v2/admin/location/districts/${stateCode}`;
+    await fetch(url)
+      .then((response) => response.json())
+      .then((data) => {
+        setStateCode(stateCode);
+        setDistricts(data.districts);
+      });
+  };
+
+  const onDistrictChange = async (e) => {
+    const stateCode = e.target.value;
+    const url =
+      stateCode === "Districts"
+        ? null
+        : `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByDistrict?district_id=${stateCode}&date=31-03-2021
+        `;
+    await fetch(url)
+      .then((response) => response.json())
+      .then((data) => {
+        setDistrictCode(stateCode);
+        setVaccinatedData(data);
+      });
+  };
 
   return (
-      <Container>
-  <div className="home">
-    <h2>CoWIN Vaccination Slot Availablity</h2>
-    <div className="home__info">
-      <p>
-        The CoWIN APIs are geo fenced, so sometimes you may not see an output!
-        Please try after sometime
-      </p>
-    </div>
+    <Container>
+      <div className="home">
+        <h2>CoWIN Vaccination Slot Availablity</h2>
+        <div className="home__info">
+          <p>
+            The CoWIN APIs are geo fenced, so sometimes you may not see an
+            output! Please try after sometime
+          </p>
+        </div>
 
-    <Grid container className={classes.root} spacing={2}>
-      <Grid item xs={12}>
-        <Grid container justify="space-around" spacing={2}>
-          <Grid item>
-                <Paper className={classes.paper} elevation={3}>
-                  <MuiPickersUtilsProvider utils={DateFnsUtils}>
-                    <KeyboardDatePicker
+        <div className="home__option">
+          <div className="home__optionRight">
+            <div className="text">
+              <Typography>Select State</Typography>
+              <FormControl>
+                <Select
+                  variant="outlined"
+                  value={stateCode}
+                  onChange={onStateChange}
+                >
+                  <MenuItem value="States">States</MenuItem>
+                  {state.map((state) => (
+                    <MenuItem value={state?.state_id}>
+                      {state?.state_name}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            </div>
+            <div className="text">
+              <Typography>Select District</Typography>
+              <FormControl>
+                <Select
+                  variant="outlined"
+                  value={districtCode}
+                  onChange={onDistrictChange}
+                >
+                  {district.map((state) => (
+                    <MenuItem value={state?.district_id}>
+                      {state?.district_name}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            </div>
+            <div style={{ padding: "10px" }}>
+              <Grid item xs={12} className="date__picker">
+                <Grid item>
+                  <Paper className={classes.paper} elevation={3}>
+                    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+                      <KeyboardDatePicker
                         margin="normal"
                         id="date-picker-dialog"
                         label="Date picker dialog"
@@ -72,47 +150,33 @@ const Home = () => {
                         onChange={handleDateChange}
                         InputProps={{ className: classes.input }}
                         KeyboardButtonProps={{
-                          'aria-label': 'change date',
+                          "aria-label": "change date",
                         }}
-                    />
-                  </MuiPickersUtilsProvider>
-                </Paper>
-              </Grid>
-            <Grid item>
-                <Paper className={classes.paper} elevation={3}>
+                      />
+                    </MuiPickersUtilsProvider>
+                  </Paper>
+                </Grid>
+                <Grid item>
+                  <Paper className={classes.paper} elevation={3}>
                     <TextField
-                        id="outlined-number"
-                        margin="normal"
-                        label="Pin Code"
-                        type="number"
-                        variant="outlined"
-                        InputProps={{
-                          className: classes.textfield
-                        }}
+                      id="outlined-number"
+                      margin="normal"
+                      label="Pin Code"
+                      type="number"
+                      variant="outlined"
+                      InputProps={{
+                        className: classes.textfield,
+                      }}
                     />
-                </Paper>
+                  </Paper>
+                </Grid>
               </Grid>
-        </Grid>
-      </Grid>
-    </Grid>
-
-
-    <div className="home__option">
-      <div className="home__optionRight">
-        <Typography>Select State</Typography>
-        <FormControl>
-          <Select variant="outlined" value={"state"}>
-            <MenuItem value="state">State</MenuItem>
-            {state.map((state) => (
-                <MenuItem value={state.state_id}>{state.state_name}</MenuItem>
-            ))}
-          </Select>
-        </FormControl>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-      </Container>
-);
+    </Container>
+  );
 };
 
 export default Home;