From e9e2769442863909d6ca2397ffe5a6918fbd9d60 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 09:28:39 +0530
Subject: [PATCH 01/33] started working on fetchDataUsingPincode :hammer:

---
 src/components/Home/Home.js                   |  27 ++--
 .../SingleVaccineData/VaccineDataSingle.css   | 139 +++++++++---------
 .../SingleVaccineData/VaccineDataSingle.js    |  78 +++++-----
 src/components/VaccineData/VaccineDataMain.js |  26 ++--
 4 files changed, 135 insertions(+), 135 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 63a7baf..77c4600 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -50,17 +50,17 @@ const Home = () => {
   const [formattedDate, setFormattedDate] = useState("");
   const classes = useStyles();
 
-  const GetFormattedDate = ()=> {
+  const GetFormattedDate = () => {
     var month = selectedDate.getMonth() + 1;
     var day = selectedDate.getDate();
     var year = selectedDate.getFullYear();
-    var finalDate =  day + "-" + month + "-" + year;
+    var finalDate = day + "-" + month + "-" + year;
 
-    setFormattedDate(finalDate)
-  }
+    setFormattedDate(finalDate);
+  };
 
   useEffect(() => {
-    GetFormattedDate()
+    GetFormattedDate();
     // eslint-disable-next-line
   }, [selectedDate, formattedDate]);
 
@@ -72,7 +72,7 @@ const Home = () => {
     fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states")
       .then((res) => res.json())
       .then((data) => {
-        setState(data.states)
+        setState(data.states);
       });
   }, [setState]);
 
@@ -102,7 +102,7 @@ const Home = () => {
       .then((data) => {
         setDistrictCode(districtCode);
         setVaccineData(data.sessions);
-        console.log(data.sessions)
+        console.log(data.sessions);
       });
   };
 
@@ -144,9 +144,14 @@ const Home = () => {
                   value={districtCode}
                   onChange={onDistrictChange}
                 >
-                  <MenuItem value="States" disabled={true}>Select State First</MenuItem>
+                  <MenuItem value="States" disabled={true}>
+                    Select State First
+                  </MenuItem>
                   {district.map((district) => (
-                    <MenuItem key={district?.district_id} value={district?.district_id}>
+                    <MenuItem
+                      key={district?.district_id}
+                      value={district?.district_id}
+                    >
                       {district?.district_name}
                     </MenuItem>
                   ))}
@@ -179,7 +184,7 @@ const Home = () => {
                       type="number"
                       variant="outlined"
                       InputProps={{
-                        className: classes.textfield
+                        className: classes.textfield,
                       }}
                     />
                   </Paper>
@@ -188,7 +193,7 @@ const Home = () => {
             </div>
           </div>
         </div>
-          <VaccineDataMain vaccineData={vaccineData}/>
+        <VaccineDataMain vaccineData={vaccineData} />
       </div>
     </Container>
   );
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
index ae138db..da895db 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
@@ -1,102 +1,99 @@
 .wrapper {
-    display: flex;
-    background-color: #333333;
-    height: 30vh
+  display: flex;
+  background-color: #333333;
+  height: 30vh;
 }
 
 .wrapper > * {
-    padding: 20px;
+  padding: 20px;
 }
 
 .paper-left {
-    width: 50%;
+  width: 50%;
 }
 
-.paper-left h1{
-    color: whitesmoke;
-    text-transform: uppercase;
-    font-family: monospace;
+.paper-left h1 {
+  color: whitesmoke;
+  text-transform: uppercase;
+  font-family: monospace;
 }
 
-.paper-left .paper-left_content{
-    display: flex;
-    justify-content: space-between;
-    margin-top: 10px;
+.paper-left .paper-left_content {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
 }
 
-
-.paper-left .paper-left_content h3{
-    color: #BB86FC;
-    font-weight: bold;
-    text-transform: capitalize;
+.paper-left .paper-left_content h3 {
+  color: #bb86fc;
+  font-weight: bold;
+  text-transform: capitalize;
 }
 
-.paper-left .paper-left_content p{
-    color: #F48FB1;
-    margin-top: 5px;
-    text-transform: capitalize;
-    font-family: monospace;
+.paper-left .paper-left_content p {
+  color: #f48fb1;
+  margin-top: 5px;
+  text-transform: capitalize;
+  font-family: monospace;
 }
 
 .paper-left .paper-left_time {
-    display: flex;
-    justify-content: space-evenly;
-    margin-top: 10px;
+  display: flex;
+  justify-content: space-evenly;
+  margin-top: 10px;
 }
 
-.paper-left .paper-left_time .time{
-    padding: 10px;
-    border-radius: 7px;
-    font-weight: bold;
+.paper-left .paper-left_time .time {
+  padding: 10px;
+  border-radius: 7px;
+  font-weight: bold;
 }
 
-.paper-left .paper-left_time .open-time{
-    background-color: #009E60;
-    font-family: monospace;
+.paper-left .paper-left_time .open-time {
+  background-color: #009e60;
+  font-family: monospace;
 }
 
-.paper-left .paper-left_time .close-time{
-    background-color: rgb(222,49,99);
-    color: white;
-    font-family: monospace;
+.paper-left .paper-left_time .close-time {
+  background-color: rgb(222, 49, 99);
+  color: white;
+  font-family: monospace;
 }
 
 .paper-right {
-    width: 50%;
+  width: 50%;
 }
 
-
-
 /*Media Queries*/
 @media screen and (max-width: 500px) {
-    .wrapper {
-        height: 50vh;
-        flex-direction: column;
-    }
-
-    .paper-left {
-        width: 90%;
-    }
-
-    .paper-left p {
-        width: 100%;
-    }
-
-    .paper-left .paper-left_content{
-        display: flex;
-        flex-direction: column;
-    }
-
-    .paper-left .paper-left_time {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .paper-left .paper-left_time .time{
-        margin-top: 5px;
-    }
-
-    .paper-right {
-        width: 90%;
-    }
-}
\ No newline at end of file
+  .wrapper {
+    height: 50vh;
+    flex-direction: column;
+  }
+
+  .paper-left {
+    width: 90%;
+  }
+
+  .paper-left p {
+    width: 100%;
+  }
+
+  .paper-left .paper-left_content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .paper-left .paper-left_time {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .paper-left .paper-left_time .time {
+    margin-top: 5px;
+  }
+
+  .paper-right {
+    width: 90%;
+  }
+}
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
index b88900c..40fb258 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
@@ -1,46 +1,48 @@
-import { makeStyles } from '@material-ui/core/styles';
-import Paper from '@material-ui/core/Paper';
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from "@material-ui/core/Paper";
 
-import "./VaccineDataSingle.css"
+import "./VaccineDataSingle.css";
 
 const useStyles = makeStyles((theme) => ({
-    paperMainDiv:{
-        width: "100%"
-    },
+  paperMainDiv: {
+    width: "100%",
+  },
 }));
 
-const VaccineDataSingle = (vaccine)=> {
-    const classes = useStyles();
+const VaccineDataSingle = (vaccine) => {
+  const classes = useStyles();
 
-    return(
-        <div className={classes.paperMainDiv}>
-            <Paper variant="outlined" className="wrapper" style={{backgroundColor: "#333333"}}>
-                <div className="paper-left">
-                    <h1>{vaccine.name}</h1>
-                    <hr/>
-                    <br/>
-                    <div className="paper-left_content">
-                        <h3>address</h3>
-                        <p>{vaccine.block_name}, {vaccine.district_name}, {vaccine.state_name}</p>
-                    </div>
-                    <div className="paper-left_content">
-                        <h3>pincode</h3>
-                        <p>{vaccine.pincode}</p>
-                    </div>
-                    <div className="paper-left_time">
-                        <div className="open-time time">
-                            Opening Time: {vaccine.from}
-                        </div>
-                        <div className="close-time time">
-                            Closing Time: {vaccine.to}
-                        </div>
-                    </div>
-                </div>
-                <div className="paper-right">
-                </div>
-            </Paper>
+  return (
+    <div className={classes.paperMainDiv}>
+      <Paper
+        variant="outlined"
+        className="wrapper"
+        style={{ backgroundColor: "#333333" }}
+      >
+        <div className="paper-left">
+          <h1>{vaccine.name}</h1>
+          <hr />
+          <br />
+          <div className="paper-left_content">
+            <h3>address</h3>
+            <p>
+              {vaccine.block_name}, {vaccine.district_name},{" "}
+              {vaccine.state_name}
+            </p>
+          </div>
+          <div className="paper-left_content">
+            <h3>pincode</h3>
+            <p>{vaccine.pincode}</p>
+          </div>
+          <div className="paper-left_time">
+            <div className="open-time time">Opening Time: {vaccine.from}</div>
+            <div className="close-time time">Closing Time: {vaccine.to}</div>
+          </div>
         </div>
-    )
-}
+        <div className="paper-right"></div>
+      </Paper>
+    </div>
+  );
+};
 
-export default VaccineDataSingle
\ No newline at end of file
+export default VaccineDataSingle;
diff --git a/src/components/VaccineData/VaccineDataMain.js b/src/components/VaccineData/VaccineDataMain.js
index 4a639be..172c859 100644
--- a/src/components/VaccineData/VaccineDataMain.js
+++ b/src/components/VaccineData/VaccineDataMain.js
@@ -1,18 +1,14 @@
 import VaccineDataSingle from "./SingleVaccineData/VaccineDataSingle";
 
-const VaccineDataMain = ({vaccineData}) => {
-    return (
-        <>
-            {
-                vaccineData.map((vaccine)=>{
-                    const {center_id} = vaccine
-                    return(
-                        <VaccineDataSingle key={center_id} {...vaccine}/>
-                    )
-                })
-            }
-        </>
-    )
-}
+const VaccineDataMain = ({ vaccineData }) => {
+  return (
+    <>
+      {vaccineData.map((vaccine) => {
+        const { center_id } = vaccine;
+        return <VaccineDataSingle key={center_id} {...vaccine} />;
+      })}
+    </>
+  );
+};
 
-export default VaccineDataMain;
\ No newline at end of file
+export default VaccineDataMain;

From 43850fb3f0cb701d076cc4197a08ce1e40930e4b Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 09:55:47 +0530
Subject: [PATCH 02/33] fixed vaccineData to none onChangeState :hammer:

---
 src/components/Home/Home.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 77c4600..3d991ee 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -78,9 +78,10 @@ const Home = () => {
 
   const onStateChange = async (e) => {
     const stateCode = e.target.value;
+    setVaccineData([]);
     const url =
       stateCode === "States"
-        ? "https://cdn-api.co-vin.in/api/v2/admin/location/districts/9"
+        ? null
         : `https://cdn-api.co-vin.in/api/v2/admin/location/districts/${stateCode}`;
     await fetch(url)
       .then((response) => response.json())
@@ -102,7 +103,6 @@ const Home = () => {
       .then((data) => {
         setDistrictCode(districtCode);
         setVaccineData(data.sessions);
-        console.log(data.sessions);
       });
   };
 
@@ -128,7 +128,8 @@ const Home = () => {
                   onChange={onStateChange}
                 >
                   <MenuItem value="States">States</MenuItem>
-                  {state.map((state) => (
+
+                  {state?.map((state) => (
                     <MenuItem key={state?.state_id} value={state?.state_id}>
                       {state?.state_name}
                     </MenuItem>
@@ -144,10 +145,13 @@ const Home = () => {
                   value={districtCode}
                   onChange={onDistrictChange}
                 >
-                  <MenuItem value="States" disabled={true}>
-                    Select State First
-                  </MenuItem>
-                  {district.map((district) => (
+                  {district.length === 0 ? (
+                    <MenuItem value="States" disabled={true}>
+                      Select State First
+                    </MenuItem>
+                  ) : null}
+
+                  {district?.map((district) => (
                     <MenuItem
                       key={district?.district_id}
                       value={district?.district_id}

From 3c029495145b27fc80f3260e6451e8250e7ec169 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 11:27:56 +0530
Subject: [PATCH 03/33] building the home page :hammer:

---
 package.json                     |   1 +
 src/App.js                       |  19 ++-
 src/components/Header/Header.css |  49 ++++++++
 src/components/Header/Header.js  |  27 ++++
 src/components/Home/Home.css     | 110 ++--------------
 src/components/Home/Home.js      | 207 ++-----------------------------
 src/components/Test.css          |  51 ++++++++
 src/components/Test.js           |  25 ++++
 yarn.lock                        |  98 +++++++++++++--
 9 files changed, 275 insertions(+), 312 deletions(-)
 create mode 100644 src/components/Header/Header.css
 create mode 100644 src/components/Header/Header.js
 create mode 100644 src/components/Test.css
 create mode 100644 src/components/Test.js

diff --git a/package.json b/package.json
index d69a987..80a84ae 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "date-fns": "^2.21.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },
diff --git a/src/App.js b/src/App.js
index b4f68eb..5bbe861 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,25 @@
 import React from "react";
 import "./App.css";
+import Test from "./components/Test";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import Home from "./components/Home/Home";
+import Header from "./components/Header/Header";
 
 const App = () => {
   return (
-    <div className="app">
-      <Home />
-    </div>
+    <Router>
+      <div className="app">
+        <Header />
+        <Switch>
+          <Route exact={true} path="/">
+            <Test />
+          </Route>
+          <Route path="/vaccines" exact={true}>
+            <Home />
+          </Route>
+        </Switch>
+      </div>
+    </Router>
   );
 };
 
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
new file mode 100644
index 0000000..52c38a8
--- /dev/null
+++ b/src/components/Header/Header.css
@@ -0,0 +1,49 @@
+.header__leftImg {
+  width: 120px;
+  padding: 20px;
+  margin-top: -40px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  width: 100%;
+}
+.header__right {
+  display: flex;
+  margin: 25px;
+}
+
+.header__right > h3 {
+  font-weight: 400;
+  margin-left: 30px;
+  margin-right: 30px;
+  cursor: pointer;
+}
+
+@media screen and (max-width: 800px) {
+  .header__right > h3 {
+    font-weight: 400;
+    cursor: pointer;
+  }
+  .header__right {
+    margin-left: -20px;
+  }
+
+  .header__rightNav {
+    margin-left: 20px;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0;
+    align-items: flex-start;
+    width: 100%;
+  }
+}
+
+body {
+  overflow-x: hidden;
+}
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
new file mode 100644
index 0000000..f0dd9ec
--- /dev/null
+++ b/src/components/Header/Header.js
@@ -0,0 +1,27 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import "./Header.css";
+
+const Header = () => {
+  return (
+    <div className="header">
+      <div className="header__left">
+        <Link to="/">
+          <img
+            className="header__leftImg"
+            src="https://user-images.githubusercontent.com/71087810/117496136-3d18fb00-af94-11eb-876a-d3acc96aaa75.png"
+            alt=""
+          />
+        </Link>
+      </div>
+      <div className="header__rightNav">
+        <div className="header__right">
+          <h3>Contribute</h3>
+          <h3>About</h3>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;
diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index 95cbeec..02d2456 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -1,105 +1,9 @@
-body {
-  background-color: #121212;
-}
-.home {
-  color: white;
-  background-position: center center;
-  background-size: 100%;
-  background-repeat: no-repeat;
-  height: calc(100vh - 20px);
-  padding: 10px;
-}
-
-.home__info {
-  background-color: #352f44;
-  padding: 15px;
-  color: #bb86fc;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  border-radius: 5px;
-}
-
-.home__optionLeft {
+.home__intro > h2 {
+  text-align: center;
+  margin-top: 50px;
+  font-weight: 400;
+  border: 5px solid black;
+  margin: auto 500px;
   padding: 10px;
-  margin-top: 10px;
-  margin-left: -15px;
-}
-
-.home__option {
-  margin: 10px;
-}
-
-.text > .MuiFormControl-root {
-  background-color: #31333f;
-  color: white !important;
-  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: 800px) {
-  .home__optionRight > .MuiFormControl-root {
-    width: 280px;
-    margin-left: 10px;
-  }
-  .home__info {
-    border-radius: 10px;
-  }
-  .home {
-    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;
+  font-size: 25px;
 }
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 3d991ee..09de3c8 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,205 +1,22 @@
-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 VaccineDataMain from "../VaccineData/VaccineDataMain";
-
+import React from "react";
 import "./Home.css";
 
-const useStyles = makeStyles((theme) => ({
-  input: {
-    color: "#bb86fc",
-  },
-  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",
-  },
-}));
-
 const Home = () => {
-  const [state, setState] = useState([]);
-  const [selectedDate, setSelectedDate] = useState(new Date());
-  const [stateCode, setStateCode] = useState("States");
-  const [district, setDistricts] = useState([]);
-  const [districtCode, setDistrictCode] = useState("Districts");
-  const [vaccineData, setVaccineData] = useState([]);
-  const [formattedDate, setFormattedDate] = useState("");
-  const classes = useStyles();
-
-  const GetFormattedDate = () => {
-    var month = selectedDate.getMonth() + 1;
-    var day = selectedDate.getDate();
-    var year = selectedDate.getFullYear();
-    var finalDate = day + "-" + month + "-" + year;
-
-    setFormattedDate(finalDate);
-  };
-
-  useEffect(() => {
-    GetFormattedDate();
-    // eslint-disable-next-line
-  }, [selectedDate, formattedDate]);
-
-  const handleDateChange = (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);
-      });
-  }, [setState]);
-
-  const onStateChange = async (e) => {
-    const stateCode = e.target.value;
-    setVaccineData([]);
-    const url =
-      stateCode === "States"
-        ? null
-        : `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 districtCode = e.target.value;
-    const url =
-      stateCode === "Districts"
-        ? null
-        : `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByDistrict?district_id=${districtCode}&date=${formattedDate}
-        `;
-    await fetch(url)
-      .then((response) => response.json())
-      .then((data) => {
-        setDistrictCode(districtCode);
-        setVaccineData(data.sessions);
-      });
-  };
-
   return (
-    <Container>
-      <div className="home">
-        <h2>CoWIN Vaccination Slot Availability</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>
-
-        <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 key={state?.state_id} 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.length === 0 ? (
-                    <MenuItem value="States" disabled={true}>
-                      Select State First
-                    </MenuItem>
-                  ) : null}
+    <div className="home">
+      <div className="home__intro">
+        <h2>Vaccine Availablity</h2>
+      </div>
 
-                  {district?.map((district) => (
-                    <MenuItem
-                      key={district?.district_id}
-                      value={district?.district_id}
-                    >
-                      {district?.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"
-                        format="dd-MM-yyyy"
-                        value={selectedDate}
-                        onChange={handleDateChange}
-                        InputProps={{ className: classes.input }}
-                      />
-                    </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,
-                      }}
-                    />
-                  </Paper>
-                </Grid>
-              </Grid>
-            </div>
-          </div>
+      <div className="home__options">
+        <div className="home__optionsTop">
+          <h4>Select State</h4>
+          <h4>Select District</h4>
+          <h4>Pincode</h4>
+          <h4>Date </h4>
         </div>
-        <VaccineDataMain vaccineData={vaccineData} />
       </div>
-    </Container>
+    </div>
   );
 };
 
diff --git a/src/components/Test.css b/src/components/Test.css
new file mode 100644
index 0000000..9d6eb43
--- /dev/null
+++ b/src/components/Test.css
@@ -0,0 +1,51 @@
+.test__home > img {
+  width: 550px;
+}
+
+.test__home {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  margin-right: 40px;
+}
+
+.test__homeText {
+  border: 3px solid black;
+  padding: 10px 55px 10px 50px;
+  margin-top: -25px;
+  font-weight: 400;
+  text-align: center;
+}
+
+.test__homeText:hover {
+  border: 3px solid black;
+  color: white;
+  padding: 10px 55px 10px 50px;
+  margin-top: -25px;
+  transition: 0.5s;
+  background-color: black;
+  font-weight: 400;
+  text-align: center;
+}
+
+@media screen and (max-width: 800px) {
+  .test__home > img {
+    width: 300px;
+  }
+  .test__home {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    margin-right: -10px;
+    margin-top: 40px;
+  }
+  .test__home {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 20px;
+  }
+}
diff --git a/src/components/Test.js b/src/components/Test.js
new file mode 100644
index 0000000..f08d461
--- /dev/null
+++ b/src/components/Test.js
@@ -0,0 +1,25 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import "./Test.css";
+
+const Test = () => {
+  return (
+    <div className="test">
+      <div className="test__home">
+        <img
+          src="https://user-images.githubusercontent.com/71087810/117496553-d5af7b00-af94-11eb-84bb-913a1f386811.png"
+          alt=""
+        />
+
+        <Link
+          style={{ textDecorationLine: "none", color: "black" }}
+          to="/vaccines"
+        >
+          <h3 className="test__homeText">Vaccine Availablity</h3>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Test;
diff --git a/yarn.lock b/yarn.lock
index e46ba7e..2df66eb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1091,6 +1091,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.6.0", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
+  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.12.18"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.18.tgz#af137bd7e7d9705a412b3caaf991fe6aaa97831b"
@@ -1098,13 +1105,6 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.6.0", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
-  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.3.3":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
@@ -5563,6 +5563,18 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -5572,7 +5584,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -6266,6 +6278,11 @@ is-wsl@^2.1.1, is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -7183,7 +7200,7 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -7389,6 +7406,14 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-create-react-context@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
+  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    tiny-warning "^1.0.3"
+
 mini-css-extract-plugin@0.11.3:
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz#15b0910a7f32e62ffde4a7430cfefbd700724ea6"
@@ -8148,6 +8173,13 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-to-regexp@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
@@ -9228,7 +9260,7 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
-react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9248,6 +9280,35 @@ react-refresh@^0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-router-dom@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
+  integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.2.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-router@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
+  integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.4.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
 react-scripts@4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.3.tgz#b1cafed7c3fa603e7628ba0f187787964cb5d345"
@@ -9622,6 +9683,11 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url-loader@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.2.tgz#235e2c28e22e3e432ba7a5d4e305c59a58edfc08"
@@ -10729,7 +10795,12 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
-tiny-warning@^1.0.2:
+tiny-invariant@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
+tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -11151,6 +11222,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"

From 8453451e92a7812d9858192a4634c0ad0cbf8092 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 11:39:26 +0530
Subject: [PATCH 04/33] new ui

---
 src/components/Home/Home.css | 15 +++++++++++++--
 src/components/Home/Home.js  |  2 ++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index 02d2456..209dd84 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -1,9 +1,20 @@
 .home__intro > h2 {
-  text-align: center;
   margin-top: 50px;
   font-weight: 400;
   border: 5px solid black;
-  margin: auto 500px;
   padding: 10px;
   font-size: 25px;
 }
+
+.home__optionsTop {
+  display: flex;
+  align-items: center;
+  border: 3px solid black;
+  margin-top: 10px;
+}
+
+.home {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 09de3c8..8f5bee8 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,5 +1,6 @@
 import React from "react";
 import "./Home.css";
+import DateRangeIcon from "@material-ui/icons/DateRange";
 
 const Home = () => {
   return (
@@ -14,6 +15,7 @@ const Home = () => {
           <h4>Select District</h4>
           <h4>Pincode</h4>
           <h4>Date </h4>
+          <DateRangeIcon />
         </div>
       </div>
     </div>

From ab345173c10abb329cbd8b0819cbbf499a920f34 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 11:42:07 +0530
Subject: [PATCH 05/33] New ui :hammer:

---
 src/App.js                            | 4 ++--
 src/components/{Test.css => Main.css} | 0
 src/components/{Test.js => Main.js}   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename src/components/{Test.css => Main.css} (100%)
 rename src/components/{Test.js => Main.js} (96%)

diff --git a/src/App.js b/src/App.js
index 5bbe861..1613683 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,6 @@
 import React from "react";
 import "./App.css";
-import Test from "./components/Test";
+import Main from "./components/Main";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import Home from "./components/Home/Home";
 import Header from "./components/Header/Header";
@@ -12,7 +12,7 @@ const App = () => {
         <Header />
         <Switch>
           <Route exact={true} path="/">
-            <Test />
+            <Main />
           </Route>
           <Route path="/vaccines" exact={true}>
             <Home />
diff --git a/src/components/Test.css b/src/components/Main.css
similarity index 100%
rename from src/components/Test.css
rename to src/components/Main.css
diff --git a/src/components/Test.js b/src/components/Main.js
similarity index 96%
rename from src/components/Test.js
rename to src/components/Main.js
index f08d461..1eb0f64 100644
--- a/src/components/Test.js
+++ b/src/components/Main.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import "./Test.css";
+import "./Main.css";
 
 const Test = () => {
   return (

From 12a210fdba7e8b51e2c498a1f6720419e53379f2 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 11:57:37 +0530
Subject: [PATCH 06/33] new ui :fire:

---
 src/components/Home/Home.css | 21 +++++++++++++++++++++
 src/components/Home/Home.js  |  6 ++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index 209dd84..a74b5cb 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -11,10 +11,31 @@
   align-items: center;
   border: 3px solid black;
   margin-top: 10px;
+  text-align: center;
 }
 
 .home {
   display: flex;
   align-items: center;
   flex-direction: column;
+  margin-top: -90px;
+}
+
+.home__optionsTop > h4 {
+  margin: 10px;
+  font-weight: 500;
+  width: 200px;
+}
+
+.home__optionsAlign > h4 {
+  font-weight: 500;
+  margin-top: -1px;
+}
+
+.home__optionsAlign {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  margin-left: 10px;
 }
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 8f5bee8..49efd74 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -14,8 +14,10 @@ const Home = () => {
           <h4>Select State</h4>
           <h4>Select District</h4>
           <h4>Pincode</h4>
-          <h4>Date </h4>
-          <DateRangeIcon />
+          <div className="home__optionsAlign">
+            <h4>Date</h4>
+            <DateRangeIcon />
+          </div>
         </div>
       </div>
     </div>

From a607680d967515a5151a8692ec2540c28b02f39b Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 12:16:55 +0530
Subject: [PATCH 07/33] NEW UI :hammer:

---
 src/components/Home/Home.css | 4 ++++
 src/components/Home/Home.js  | 9 +++++++++
 2 files changed, 13 insertions(+)

diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index a74b5cb..0691a52 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -39,3 +39,7 @@
   padding: 10px;
   margin-left: 10px;
 }
+
+.home__optionBottom {
+  border: 2px solid black;
+}
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 49efd74..c3678a9 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,6 +1,7 @@
 import React from "react";
 import "./Home.css";
 import DateRangeIcon from "@material-ui/icons/DateRange";
+import { FormControl, MenuItem, Select } from "@material-ui/core";
 
 const Home = () => {
   return (
@@ -19,6 +20,14 @@ const Home = () => {
             <DateRangeIcon />
           </div>
         </div>
+        <div className="home__optionBottom">
+          <FormControl>
+            <Select variant="outlined">
+              <MenuItem value="States">States</MenuItem>
+              <MenuItem value="1">Delhi</MenuItem>
+            </Select>
+          </FormControl>
+        </div>
       </div>
     </div>
   );

From e38567299da9e1fb6158db272e3fb94ca20b738f Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 12:56:25 +0530
Subject: [PATCH 08/33] UI FIXES :hammer:

---
 src/components/Home/Home.css | 12 ++++++
 src/components/Home/Home.js  | 77 ++++++++++++++++++++++++++++++++----
 2 files changed, 82 insertions(+), 7 deletions(-)

diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index 0691a52..e02533e 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -42,4 +42,16 @@
 
 .home__optionBottom {
   border: 2px solid black;
+  margin-top: 10px;
+}
+
+.home__optionBottom > div > .MuiFormControl-root {
+  margin-left: 20px;
+  width: 150px;
+  padding: 10px;
+}
+
+.home__selects {
+  display: flex;
+  justify-content: space-between;
 }
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index c3678a9..551ae20 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,9 +1,27 @@
-import React from "react";
+import React, { useState } from "react";
 import "./Home.css";
 import DateRangeIcon from "@material-ui/icons/DateRange";
 import { FormControl, MenuItem, Select } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import TextField from "@material-ui/core/TextField";
+import ToggleOnIcon from "@material-ui/icons/ToggleOn";
+import ToggleOffIcon from "@material-ui/icons/ToggleOff";
+
+const useStyles = makeStyles((theme) => ({
+  textField: {
+    margin: 10,
+    width: 200,
+  },
+
+  text: {
+    marginTop: -10,
+  },
+}));
 
 const Home = () => {
+  const classes = useStyles();
+  const [pincodeMenu, setPincodeMenu] = useState(true);
+
   return (
     <div className="home">
       <div className="home__intro">
@@ -14,6 +32,18 @@ const Home = () => {
         <div className="home__optionsTop">
           <h4>Select State</h4>
           <h4>Select District</h4>
+          {pincodeMenu === true ? (
+            <ToggleOffIcon
+              fontSize="large"
+              onClick={() => setPincodeMenu(false)}
+            />
+          ) : (
+            <ToggleOnIcon
+              onClick={() => setPincodeMenu(true)}
+              fontSize="large"
+              style={{ color: "red" }}
+            />
+          )}
           <h4>Pincode</h4>
           <div className="home__optionsAlign">
             <h4>Date</h4>
@@ -21,12 +51,45 @@ const Home = () => {
           </div>
         </div>
         <div className="home__optionBottom">
-          <FormControl>
-            <Select variant="outlined">
-              <MenuItem value="States">States</MenuItem>
-              <MenuItem value="1">Delhi</MenuItem>
-            </Select>
-          </FormControl>
+          <div className="home__selects">
+            <FormControl>
+              <Select variant="outlined">
+                <MenuItem value="States">States</MenuItem>
+                <MenuItem value="1">Delhi</MenuItem>
+              </Select>
+            </FormControl>
+            {pincodeMenu === true ? (
+              <FormControl>
+                <Select variant="outlined">
+                  <MenuItem value="States">States</MenuItem>
+                  <MenuItem value="1">Delhi</MenuItem>
+                </Select>
+              </FormControl>
+            ) : (
+              <div>
+                <TextField
+                  id="outlined-number"
+                  margin="normal"
+                  label="Pin Code"
+                  type="number"
+                  variant="outlined"
+                  InputProps={{
+                    className: classes.text,
+                  }}
+                />
+              </div>
+            )}
+
+            <TextField
+              id="date"
+              type="date"
+              defaultValue="2017-05-24"
+              className={classes.textField}
+              InputLabelProps={{
+                shrink: true,
+              }}
+            />
+          </div>
         </div>
       </div>
     </div>

From 6944cb8c6a86303c972baa878180716ed97b1f92 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 13:56:52 +0530
Subject: [PATCH 09/33] NEW UI :hammer:

---
 src/components/Home/Home.css |  1 +
 src/components/Home/Home.js  | 84 +++++++++++++++++++++++++++++++++---
 2 files changed, 78 insertions(+), 7 deletions(-)

diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index e02533e..4e86b08 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -54,4 +54,5 @@
 .home__selects {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 551ae20..074e930 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import "./Home.css";
 import DateRangeIcon from "@material-ui/icons/DateRange";
 import { FormControl, MenuItem, Select } from "@material-ui/core";
@@ -21,6 +21,60 @@ const useStyles = makeStyles((theme) => ({
 const Home = () => {
   const classes = useStyles();
   const [pincodeMenu, setPincodeMenu] = useState(true);
+  const [state, setState] = useState([]);
+  const [stateCode, setStateCode] = useState("States");
+  const [districts, setDistricts] = useState([]);
+  const [districtCode, setDistrictCode] = useState(
+    "PLEASE SELECT A STATE FIRST!!!"
+  );
+  const [formatedDate, setFormatedDate] = useState("");
+  const [selectedDate, setSelectedDate] = useState(new Date());
+
+  useEffect(() => {
+    fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states")
+      .then((res) => res.json())
+      .then((data) => {
+        setState(data.states);
+      });
+  }, [setState, formatedDate]);
+
+  const handleDateChange = (date) => {
+    setSelectedDate(date);
+  };
+
+  const onStateChange = async (e) => {
+    const stateCode = e.target.value;
+
+    console.log(stateCode);
+
+    const url =
+      stateCode === "States"
+        ? "https://cdn-api.co-vin.in/api/v2/admin/location/districts/9"
+        : `https://cdn-api.co-vin.in/api/v2/admin/location/districts/${stateCode}`;
+
+    await fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+        setStateCode(stateCode);
+        setDistricts(data.districts);
+      });
+  };
+
+  const onDistrictChange = async (e) => {
+    const districtCode = e.target.value;
+
+    const url =
+      districtCode === "PLEASE SELECT A STATE FIRST!!!"
+        ? null
+        : `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByDistrict?district_id=${districtCode}&date=03-06-2021`;
+
+    await fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+        setDistrictCode(districtCode);
+        console.log(data);
+      });
+  };
 
   return (
     <div className="home">
@@ -53,16 +107,31 @@ const Home = () => {
         <div className="home__optionBottom">
           <div className="home__selects">
             <FormControl>
-              <Select variant="outlined">
+              <Select
+                variant="outlined"
+                value={stateCode}
+                onChange={onStateChange}
+              >
                 <MenuItem value="States">States</MenuItem>
-                <MenuItem value="1">Delhi</MenuItem>
+                {state?.map((stateData) => (
+                  <MenuItem value={stateData?.state_id}>
+                    {stateData?.state_name}
+                  </MenuItem>
+                ))}
               </Select>
             </FormControl>
             {pincodeMenu === true ? (
               <FormControl>
-                <Select variant="outlined">
-                  <MenuItem value="States">States</MenuItem>
-                  <MenuItem value="1">Delhi</MenuItem>
+                <Select
+                  variant="outlined"
+                  value={districtCode}
+                  onChange={onDistrictChange}
+                >
+                  {districts?.map((districtData) => (
+                    <MenuItem value={districtData?.district_id}>
+                      {districtData?.district_name}
+                    </MenuItem>
+                  ))}
                 </Select>
               </FormControl>
             ) : (
@@ -83,7 +152,8 @@ const Home = () => {
             <TextField
               id="date"
               type="date"
-              defaultValue="2017-05-24"
+              defaultValue={selectedDate}
+              onChange={handleDateChange}
               className={classes.textField}
               InputLabelProps={{
                 shrink: true,

From 0a848d0af90359f357b320269f41782a57dc0d8c Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 14:00:27 +0530
Subject: [PATCH 10/33] NEW UI :hammer:

---
 src/components/Home/Home.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 074e930..5c12831 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -27,7 +27,7 @@ const Home = () => {
   const [districtCode, setDistrictCode] = useState(
     "PLEASE SELECT A STATE FIRST!!!"
   );
-  const [formatedDate, setFormatedDate] = useState("");
+  const [formatedDate] = useState("");
   const [selectedDate, setSelectedDate] = useState(new Date());
 
   useEffect(() => {

From 4922a0fb134925ac11ac30cf5ce97bd64622036c Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 14:46:31 +0530
Subject: [PATCH 11/33] fixed ui :fire:

---
 src/components/Home/Home.css | 10 ++--
 src/components/Home/Home.js  | 92 +++++++++++++++++++++++++++++-------
 2 files changed, 83 insertions(+), 19 deletions(-)

diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index 4e86b08..5775724 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -1,9 +1,13 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
+
 .home__intro > h2 {
   margin-top: 50px;
   font-weight: 400;
-  border: 5px solid black;
   padding: 10px;
-  font-size: 25px;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-family: "Nunito", sans-serif;
+  font-size: 35px;
 }
 
 .home__optionsTop {
@@ -47,7 +51,7 @@
 
 .home__optionBottom > div > .MuiFormControl-root {
   margin-left: 20px;
-  width: 150px;
+  width: 200px;
   padding: 10px;
 }
 
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 5c12831..6e28518 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -6,6 +6,13 @@ import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import ToggleOnIcon from "@material-ui/icons/ToggleOn";
 import ToggleOffIcon from "@material-ui/icons/ToggleOff";
+import {
+  KeyboardDatePicker,
+  MuiPickersUtilsProvider,
+} from "@material-ui/pickers";
+import "date-fns";
+import DateFnsUtils from "@date-io/date-fns";
+import SearchIcon from "@material-ui/icons/Search";
 
 const useStyles = makeStyles((theme) => ({
   textField: {
@@ -27,16 +34,33 @@ const Home = () => {
   const [districtCode, setDistrictCode] = useState(
     "PLEASE SELECT A STATE FIRST!!!"
   );
-  const [formatedDate] = useState("");
+  const [pin, setPin] = useState("");
+  const [formattedDate, setFormattedDate] = useState("");
   const [selectedDate, setSelectedDate] = useState(new Date());
 
+  const GetFormattedDate = () => {
+    var month = selectedDate.getMonth() + 1;
+    var day = selectedDate.getDate();
+    var year = selectedDate.getFullYear();
+    var finalDate = day + "-" + month + "-" + year;
+
+    setFormattedDate(finalDate);
+  };
+
+  console.log(formattedDate);
+
+  console.log(pin);
+
   useEffect(() => {
     fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states")
       .then((res) => res.json())
       .then((data) => {
         setState(data.states);
       });
-  }, [setState, formatedDate]);
+
+    GetFormattedDate();
+    // eslint-disable-next-line
+  }, [setState, selectedDate, formattedDate]);
 
   const handleDateChange = (date) => {
     setSelectedDate(date);
@@ -45,11 +69,13 @@ const Home = () => {
   const onStateChange = async (e) => {
     const stateCode = e.target.value;
 
+    setDistricts([]);
+
     console.log(stateCode);
 
     const url =
       stateCode === "States"
-        ? "https://cdn-api.co-vin.in/api/v2/admin/location/districts/9"
+        ? null
         : `https://cdn-api.co-vin.in/api/v2/admin/location/districts/${stateCode}`;
 
     await fetch(url)
@@ -76,6 +102,18 @@ const Home = () => {
       });
   };
 
+  const fetchDataUsingPincode = () => {
+    if (pin.length <= 6) {
+      alert("Please enter correct pincode");
+    } else {
+      fetch(
+        `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/calendarByPin?pincode=${pin}&date=31-05-2021`
+      )
+        .then((res) => res.json())
+        .then((data) => console.log(data));
+    }
+  };
+
   return (
     <div className="home">
       <div className="home__intro">
@@ -86,19 +124,21 @@ const Home = () => {
         <div className="home__optionsTop">
           <h4>Select State</h4>
           <h4>Select District</h4>
+
+          <h4>Pincode</h4>
           {pincodeMenu === true ? (
             <ToggleOffIcon
               fontSize="large"
               onClick={() => setPincodeMenu(false)}
+              style={{ marginLeft: -70 }}
             />
           ) : (
             <ToggleOnIcon
               onClick={() => setPincodeMenu(true)}
               fontSize="large"
-              style={{ color: "red" }}
+              style={{ color: "red", marginLeft: -70 }}
             />
           )}
-          <h4>Pincode</h4>
           <div className="home__optionsAlign">
             <h4>Date</h4>
             <DateRangeIcon />
@@ -127,6 +167,9 @@ const Home = () => {
                   value={districtCode}
                   onChange={onDistrictChange}
                 >
+                  {districts.length === 0 ? (
+                    <MenuItem disabled={true}>Select a State First</MenuItem>
+                  ) : null}
                   {districts?.map((districtData) => (
                     <MenuItem value={districtData?.district_id}>
                       {districtData?.district_name}
@@ -135,7 +178,7 @@ const Home = () => {
                 </Select>
               </FormControl>
             ) : (
-              <div>
+              <div style={{ display: "flex", alignItems: "center" }}>
                 <TextField
                   id="outlined-number"
                   margin="normal"
@@ -145,20 +188,37 @@ const Home = () => {
                   InputProps={{
                     className: classes.text,
                   }}
+                  value={pin}
+                  onChange={(e) => setPin(e.target.value)}
+                />
+                <SearchIcon
+                  onClick={fetchDataUsingPincode}
+                  style={{
+                    margin: 10,
+                    background: "#347edd",
+                    color: "white",
+                    padding: 5,
+                    cursor: "pointer",
+                    width: 30,
+                    height: 43,
+                    marginBottom: 12,
+                    borderRadius: "2px",
+                  }}
+                  fontSize="medium"
                 />
               </div>
             )}
 
-            <TextField
-              id="date"
-              type="date"
-              defaultValue={selectedDate}
-              onChange={handleDateChange}
-              className={classes.textField}
-              InputLabelProps={{
-                shrink: true,
-              }}
-            />
+            <MuiPickersUtilsProvider utils={DateFnsUtils}>
+              <KeyboardDatePicker
+                margin="normal"
+                id="date-picker-dialog"
+                format="dd-MM-yyyy"
+                value={selectedDate}
+                onChange={handleDateChange}
+                InputProps={{ className: classes.input }}
+              />
+            </MuiPickersUtilsProvider>
           </div>
         </div>
       </div>

From f83d5ad37512f8c25a89c1727c449e8751de1913 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 15:32:51 +0530
Subject: [PATCH 12/33] fixed ui :fire:

---
 src/components/Home/Home.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 6e28518..a5073e1 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -92,7 +92,7 @@ const Home = () => {
     const url =
       districtCode === "PLEASE SELECT A STATE FIRST!!!"
         ? null
-        : `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByDistrict?district_id=${districtCode}&date=03-06-2021`;
+        : `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByDistrict?district_id=${districtCode}&date=${formattedDate}`;
 
     await fetch(url)
       .then((res) => res.json())
@@ -107,7 +107,7 @@ const Home = () => {
       alert("Please enter correct pincode");
     } else {
       fetch(
-        `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/calendarByPin?pincode=${pin}&date=31-05-2021`
+        `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/calendarByPin?pincode=${pin}&date=${formattedDate}`
       )
         .then((res) => res.json())
         .then((data) => console.log(data));
@@ -167,7 +167,7 @@ const Home = () => {
                   value={districtCode}
                   onChange={onDistrictChange}
                 >
-                  {districts.length === 0 ? (
+                  {districts?.length === 0 ? (
                     <MenuItem disabled={true}>Select a State First</MenuItem>
                   ) : null}
                   {districts?.map((districtData) => (

From 509cfccdef0d167686edfb4679e8f8e26f6100eb Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 15:33:05 +0530
Subject: [PATCH 13/33] fixed ui :fire:

---
 src/components/Home/Home.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index a5073e1..55fd0d8 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -103,7 +103,7 @@ const Home = () => {
   };
 
   const fetchDataUsingPincode = () => {
-    if (pin.length <= 6) {
+    if (pin.length >= 6) {
       alert("Please enter correct pincode");
     } else {
       fetch(

From d24a189d3ebc228078de7d398794c60b77616c68 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 16:28:01 +0530
Subject: [PATCH 14/33] fixed ui :fire:

---
 src/components/Home/Home.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 55fd0d8..d225882 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -108,9 +108,8 @@ const Home = () => {
     } else {
       fetch(
         `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/calendarByPin?pincode=${pin}&date=${formattedDate}`
-      )
-        .then((res) => res.json())
-        .then((data) => console.log(data));
+      ).then((res) => res.json());
+      // .then((data) => console.log(data));
     }
   };
 

From bcad99a8aeb96d18d8f9eb79fd7951e6e795e0c3 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Fri, 14 May 2021 18:34:13 +0530
Subject: [PATCH 15/33] Added About Page

---
 src/App.js                       |  5 ++++
 src/components/About/About.css   | 44 ++++++++++++++++++++++++++++++++
 src/components/About/About.js    | 19 ++++++++++++++
 src/components/Header/Header.css |  1 +
 src/components/Header/Header.js  |  4 ++-
 src/components/Home/Home.js      |  3 ++-
 src/components/Main.js           |  2 +-
 7 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 src/components/About/About.css
 create mode 100644 src/components/About/About.js

diff --git a/src/App.js b/src/App.js
index 1613683..96db108 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,8 +2,10 @@ import React from "react";
 import "./App.css";
 import Main from "./components/Main";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+
 import Home from "./components/Home/Home";
 import Header from "./components/Header/Header";
+import About from "./components/About/About";
 
 const App = () => {
   return (
@@ -17,6 +19,9 @@ const App = () => {
           <Route path="/vaccines" exact={true}>
             <Home />
           </Route>
+          <Route path="/about" exact={true}>
+            <About />
+          </Route>
         </Switch>
       </div>
     </Router>
diff --git a/src/components/About/About.css b/src/components/About/About.css
new file mode 100644
index 0000000..d174e37
--- /dev/null
+++ b/src/components/About/About.css
@@ -0,0 +1,44 @@
+.about-container {
+    max-width: 1100px;
+    margin: auto;
+    overflow: hidden;
+    padding: 0 2rem;
+    font-family: "Fira Code Medium", "monospace";
+}
+
+.about-head{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.about-head p{
+   font-weight: bold;
+    font-size: large;
+}
+
+h4{
+    color: #333333;
+    text-transform: capitalize;
+}
+
+@media screen and (max-width: 500px) {
+    .about-container {
+        width: 350px;
+    }
+
+    .about-head p{
+        font-weight: bold;
+        font-size: 13px;
+    }
+
+    .about-head h1{
+        font-weight: bold;
+        font-size: 20px;
+    }
+
+    h4{
+        font-size: 10px;
+    }
+}
\ No newline at end of file
diff --git a/src/components/About/About.js b/src/components/About/About.js
new file mode 100644
index 0000000..9e82901
--- /dev/null
+++ b/src/components/About/About.js
@@ -0,0 +1,19 @@
+import "./About.css"
+
+const About = () => {
+    return (
+        <>
+            <div className="about-container">
+                <div className="about-head">
+                    <h1>About this App</h1>
+                    <p>Version: 1.0.3</p>
+                </div>
+                <hr/>
+                <br/>
+                <h4>App to checkout the latest COVID19 Vaccination Slots Across India🎨</h4>
+            </div>
+        </>
+    )
+}
+
+export default About
\ No newline at end of file
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index 52c38a8..e103be1 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -9,6 +9,7 @@
   justify-content: space-between;
   padding: 10px;
   width: 100%;
+  font-family: "Fira Code Medium", "monospace";
 }
 .header__right {
   display: flex;
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index f0dd9ec..8f5758d 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -17,7 +17,9 @@ const Header = () => {
       <div className="header__rightNav">
         <div className="header__right">
           <h3>Contribute</h3>
-          <h3>About</h3>
+          <Link to="/about" style={{ textDecoration: "none", color: "black", fontSize: "19px" }}>
+              <p>About</p>
+          </Link>
         </div>
       </div>
     </div>
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index d225882..444600a 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import "./Home.css";
 import DateRangeIcon from "@material-ui/icons/DateRange";
 import { FormControl, MenuItem, Select } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
@@ -14,6 +13,8 @@ import "date-fns";
 import DateFnsUtils from "@date-io/date-fns";
 import SearchIcon from "@material-ui/icons/Search";
 
+import "./Home.css";
+
 const useStyles = makeStyles((theme) => ({
   textField: {
     margin: 10,
diff --git a/src/components/Main.js b/src/components/Main.js
index 1eb0f64..52c20ab 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -15,7 +15,7 @@ const Test = () => {
           style={{ textDecorationLine: "none", color: "black" }}
           to="/vaccines"
         >
-          <h3 className="test__homeText">Vaccine Availablity</h3>
+          <h3 className="test__homeText">Vaccine Availability</h3>
         </Link>
       </div>
     </div>

From 75f6643e60a6f61704bb2ffb3c0cb27bd0594f14 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Fri, 14 May 2021 19:26:03 +0530
Subject: [PATCH 16/33] Added non responsive vaccine card.

---
 src/components/Home/Home.js                   |  4 +
 .../SingleVaccineData/VaccineDataSingle.css   | 87 ++++++++++++-------
 .../SingleVaccineData/VaccineDataSingle.js    | 27 +++---
 3 files changed, 72 insertions(+), 46 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 444600a..5af5ba0 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -14,6 +14,7 @@ import DateFnsUtils from "@date-io/date-fns";
 import SearchIcon from "@material-ui/icons/Search";
 
 import "./Home.css";
+import VaccineDataMain from "../VaccineData/VaccineDataMain";
 
 const useStyles = makeStyles((theme) => ({
   textField: {
@@ -38,6 +39,7 @@ const Home = () => {
   const [pin, setPin] = useState("");
   const [formattedDate, setFormattedDate] = useState("");
   const [selectedDate, setSelectedDate] = useState(new Date());
+  const [vaccineData, setVaccineData] = useState([]);
 
   const GetFormattedDate = () => {
     var month = selectedDate.getMonth() + 1;
@@ -99,6 +101,7 @@ const Home = () => {
       .then((res) => res.json())
       .then((data) => {
         setDistrictCode(districtCode);
+        setVaccineData(data.sessions);
         console.log(data);
       });
   };
@@ -222,6 +225,7 @@ const Home = () => {
           </div>
         </div>
       </div>
+      <VaccineDataMain vaccineData={vaccineData}/>
     </div>
   );
 };
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
index 05ca43d..75dd4ed 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
@@ -1,21 +1,21 @@
 .wrapper {
     display: flex;
     background-color: #333333;
-    height: 27vh
+    height: 32vh
 }
 
 .wrapper > * {
-  padding: 20px;
+    padding: 20px;
 }
 
 .paper-left {
-  width: 50%;
+    width: 50%;
 }
 
-.paper-left h1 {
-  color: whitesmoke;
-  text-transform: uppercase;
-  font-family: monospace;
+.paper-left h1{
+    color: whitesmoke;
+    text-transform: uppercase;
+    font-family: monospace;
 }
 
 .paper-left_vaccine_head{
@@ -48,44 +48,45 @@
     margin-top: 10px;
 }
 
-.paper-left .paper-left_content h3 {
-  color: #bb86fc;
-  font-weight: bold;
-  text-transform: capitalize;
+
+.paper-left .paper-left_content h3{
+    color: #BB86FC;
+    font-weight: bold;
+    text-transform: capitalize;
 }
 
-.paper-left .paper-left_content p {
-  color: #f48fb1;
-  margin-top: 5px;
-  text-transform: capitalize;
-  font-family: monospace;
+.paper-left .paper-left_content p{
+    color: #F48FB1;
+    margin-top: 5px;
+    text-transform: capitalize;
+    font-family: monospace;
 }
 
 .paper-left .paper-left_time {
-  display: flex;
-  justify-content: space-evenly;
-  margin-top: 10px;
+    display: flex;
+    justify-content: space-evenly;
+    margin-top: 10px;
 }
 
-.paper-left .paper-left_time .time {
-  padding: 10px;
-  border-radius: 7px;
-  font-weight: bold;
+.paper-left .paper-left_time .time{
+    padding: 10px;
+    border-radius: 7px;
+    font-weight: bold;
 }
 
-.paper-left .paper-left_time .open-time {
-  background-color: #009e60;
-  font-family: monospace;
+.paper-left .paper-left_time .open-time{
+    background-color: #009E60;
+    font-family: monospace;
 }
 
-.paper-left .paper-left_time .close-time {
-  background-color: rgb(222, 49, 99);
-  color: white;
-  font-family: monospace;
+.paper-left .paper-left_time .close-time{
+    background-color: rgb(222,49,99);
+    color: white;
+    font-family: monospace;
 }
 
 .paper-right {
-  width: 50%;
+    width: 50%;
 }
 
 .paper-right_Badges{
@@ -160,6 +161,18 @@
 
 
 /*Media Queries*/
+@media screen and (max-width: 1024px){
+    .wrapper {
+        height: 35vh;
+    }
+}
+
+@media screen and (max-width: 850px){
+    .wrapper {
+        height: 40vh;
+    }
+}
+
 @media screen and (max-width: 500px) {
     .wrapper {
         height: 70vh;
@@ -266,3 +279,15 @@
         text-align: center;
     }
 }
+
+@media screen and (max-width: 400px){
+    .wrapper {
+        height: 82vh;
+    }
+}
+
+@media screen and (max-width: 360px){
+    .wrapper {
+        height: 100vh;
+    }
+}
\ No newline at end of file
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
index 7cc826c..4ff7095 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
@@ -1,4 +1,3 @@
-
 import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Badge from '@material-ui/core/Badge';
@@ -6,16 +5,17 @@ import Badge from '@material-ui/core/Badge';
 import HealingIcon from '@material-ui/icons/Healing';
 import VerifiedUserRoundedIcon from '@material-ui/icons/VerifiedUserRounded';
 
-import "./VaccineDataSingle.css";
+import "./VaccineDataSingle.css"
 
 const useStyles = makeStyles((theme) => ({
-  paperMainDiv: {
-    width: "100%",
-  },
+    paperMainDiv:{
+        width: "100%"
+    },
 }));
 
-const VaccineDataSingle = (vaccine) => {
-  const classes = useStyles();
+const VaccineDataSingle = (vaccine)=> {
+    const classes = useStyles();
+
     return(
         <div className={classes.paperMainDiv}>
             <Paper variant="outlined" className="wrapper" style={{backgroundColor: "#333333"}}>
@@ -60,7 +60,7 @@ const VaccineDataSingle = (vaccine) => {
                     </div>
                     <div className="paper-right_age">
                         <div className="age_text">
-                             <h3>Minimum Age</h3>
+                            <h3>Minimum Age</h3>
                         </div>
                         <div className="age_content">
                             <p>{vaccine.min_age_limit} years</p>
@@ -68,7 +68,7 @@ const VaccineDataSingle = (vaccine) => {
                     </div>
                     <div className="paper-right_age">
                         <div className="age_text">
-                             <h3>Minimum Fare(₹)</h3>
+                            <h3>Minimum Fare(₹)</h3>
                         </div>
                         <div className="age_content">
                             <p>{vaccine.fee_type} </p>
@@ -81,10 +81,7 @@ const VaccineDataSingle = (vaccine) => {
                 </div>
             </Paper>
         </div>
-        <div className="paper-right"></div>
-      </Paper>
-    </div>
-  );
-};
+    )
+}
 
-export default VaccineDataSingle;
+export default VaccineDataSingle
\ No newline at end of file

From 6b49f00d06ec3a1017d32d3eb63bb8986bad3063 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Fri, 14 May 2021 20:09:35 +0530
Subject: [PATCH 17/33] Added GH Link

---
 src/components/Header/Header.css | 5 +++++
 src/components/Header/Header.js  | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index e103be1..633791b 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -23,6 +23,11 @@
   cursor: pointer;
 }
 
+.header__right > h3 a {
+  text-decoration: none;
+  color: black;
+}
+
 @media screen and (max-width: 800px) {
   .header__right > h3 {
     font-weight: 400;
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 8f5758d..47794b2 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -16,7 +16,7 @@ const Header = () => {
       </div>
       <div className="header__rightNav">
         <div className="header__right">
-          <h3>Contribute</h3>
+          <h3><a href="https://github.com/stephin007/Cowin-Vaccine-Availablity-Checker">Contribute</a></h3>
           <Link to="/about" style={{ textDecoration: "none", color: "black", fontSize: "19px" }}>
               <p>About</p>
           </Link>

From 4fb961afc38bda6f99b43a2f45c6a3a12e9f3ec9 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Sat, 22 May 2021 18:22:02 +0530
Subject: [PATCH 18/33] Revamped the new UI

---
 README.md                    |   7 +-
 src/components/Home/Home.css | 208 +++++++++++++++++++++++++++++------
 src/components/Home/Home.js  | 181 +++++++++++++++---------------
 3 files changed, 270 insertions(+), 126 deletions(-)

diff --git a/README.md b/README.md
index b7b346b..4e22227 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
 # CoWIN Vaccination Slots Checking App.
---- 
+
+---
 
 > TechStack - React JS, Material UI
 
@@ -7,8 +8,6 @@ _MORE INFO YET TO BE ADDED... STAY TUNED_
 
 # DON'T JUST CLONE, PLEASE LEAVE A STAR, MOTIVATES US TO ADD MORE FEATURES TO THE PROJECT.
 
-
-
-
+> NEW UI COMING UP , CHECK THIS SITE TO SEE THE LATEST UPDATES : [https://cowinvaccinetracker.stephinreji.me/](https://cowinvaccinetracker.stephinreji.me/)
 
 ### _NOTE:_ 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
index 5775724..1508510 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -2,61 +2,205 @@
 
 .home__intro > h2 {
   margin-top: 50px;
-  font-weight: 400;
   padding: 10px;
   text-transform: uppercase;
   font-weight: bold;
+  text-align: center;
   font-family: "Nunito", sans-serif;
   font-size: 35px;
 }
 
-.home__optionsTop {
+.home_selectionHeader {
   display: flex;
-  align-items: center;
-  border: 3px solid black;
-  margin-top: 10px;
-  text-align: center;
+  justify-content: center;
+  flex-direction: column;
+  align-items: stretch;
+  margin-top: 15px;
 }
 
-.home {
+.home_selectionHeader h4 {
+  margin-bottom: 10px;
+  font-family: "Nunito", sans-serif !important;
+}
+
+.home_selectedHeaders {
   display: flex;
-  align-items: center;
-  flex-direction: column;
-  margin-top: -90px;
+  justify-content: space-between;
 }
 
-.home__optionsTop > h4 {
-  margin: 10px;
-  font-weight: 500;
-  width: 200px;
+.home_selectedHeaders .form-control {
+  min-width: 450px !important;
+  margin-top: 15px;
 }
 
-.home__optionsAlign > h4 {
-  font-weight: 500;
-  margin-top: -1px;
+.empty_error {
+  margin-top: 10px;
+  border-radius: 5px;
+  background-color: #5f235f;
+  color: whitesmoke;
+  padding: 10px 10px;
+  font-family: "Nunito", sans-serif !important;
 }
 
-.home__optionsAlign {
+.home_selectedPin {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  padding: 10px;
-  margin-left: 10px;
+  margin-top: 10px;
 }
 
-.home__optionBottom {
-  border: 2px solid black;
-  margin-top: 10px;
+.home_selectedPin .home_selectedpincontainer .textField {
+  width: 500px;
 }
 
-.home__optionBottom > div > .MuiFormControl-root {
-  margin-left: 20px;
-  width: 200px;
-  padding: 10px;
+.home_selectedPin .input {
+  width: 330px;
+  margin-bottom: -10px;
 }
 
-.home__selects {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+@media screen and (max-width: 1024px) {
+  .home {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
+    max-width: 925px;
+  }
+  .home__intro > h2 {
+    margin-top: 20px;
+    font-size: 25px;
+  }
+
+  .home_selectedHeaders {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .home_selectedHeaders .form-control {
+    min-width: 270px !important;
+    margin-top: 15px;
+  }
+
+  .home_selectedPin .home_selectedpincontainer .textField {
+    width: 300px;
+  }
+
+  .home_selectedPin .input {
+    width: 300px;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .home_selectedPin .home_selectedpincontainer .textField {
+    width: 250px;
+  }
+
+  .home_selectedPin .input {
+    width: 200px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .home {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
+    width: 410px;
+  }
+  .home__intro > h2 {
+    margin-top: 20px;
+    font-size: 25px;
+  }
+
+  .home_selectedHeaders {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .home_selectedHeaders .form-control {
+    min-width: 40px !important;
+    margin-top: 15px;
+  }
+
+  .home_selectedPin {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    margin-top: 10px;
+  }
+
+  .home_selectedPin .home_selectedpincontainer .textField {
+    width: 370px;
+  }
+
+  .home_selectedPin .input {
+    margin-top: 15px;
+    width: 410px;
+  }
 }
+
+@media screen and (max-width: 400px) {
+  .home {
+    width: 380px;
+  }
+
+  .home_selectedPin .home_selectedpincontainer .textField {
+    width: 340px;
+  }
+
+  .home_selectedPin .input {
+    width: 380px;
+  }
+}
+
+/*.home__optionsTop {*/
+/*  display: flex;*/
+/*  align-items: center;*/
+/*  border: 3px solid black;*/
+/*  margin-top: 10px;*/
+/*  text-align: center;*/
+/*}*/
+
+/*.home {*/
+/*  display: flex;*/
+/*  align-items: center;*/
+/*  flex-direction: column;*/
+/*  margin-top: -90px;*/
+/*}*/
+
+/*.home__optionsTop > h4 {*/
+/*  margin: 10px;*/
+/*  font-weight: 500;*/
+/*  width: 200px;*/
+/*}*/
+
+/*.home__optionsAlign > h4 {*/
+/*  font-weight: 500;*/
+/*  margin-top: -1px;*/
+/*}*/
+
+/*.home__optionsAlign {*/
+/*  display: flex;*/
+/*  align-items: center;*/
+/*  justify-content: center;*/
+/*  padding: 10px;*/
+/*  margin-left: 10px;*/
+/*}*/
+
+/*.home__optionBottom {*/
+/*  border: 2px solid black;*/
+/*  margin-top: 10px;*/
+/*}*/
+
+/*.home__optionBottom > div > .MuiFormControl-root {*/
+/*  margin-left: 20px;*/
+/*  width: 200px;*/
+/*  padding: 10px;*/
+/*}*/
+
+/*.home__selects {*/
+/*  display: flex;*/
+/*  justify-content: space-between;*/
+/*  align-items: center;*/
+/*}*/
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 5af5ba0..4279f30 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,10 +1,8 @@
 import React, { useState, useEffect } from "react";
-import DateRangeIcon from "@material-ui/icons/DateRange";
 import { FormControl, MenuItem, Select } from "@material-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
+
+import InputLabel from "@material-ui/core/InputLabel";
 import TextField from "@material-ui/core/TextField";
-import ToggleOnIcon from "@material-ui/icons/ToggleOn";
-import ToggleOffIcon from "@material-ui/icons/ToggleOff";
 import {
   KeyboardDatePicker,
   MuiPickersUtilsProvider,
@@ -12,24 +10,13 @@ import {
 import "date-fns";
 import DateFnsUtils from "@date-io/date-fns";
 import SearchIcon from "@material-ui/icons/Search";
+import Container from "@material-ui/core/Container";
 
 import "./Home.css";
 import VaccineDataMain from "../VaccineData/VaccineDataMain";
 
-const useStyles = makeStyles((theme) => ({
-  textField: {
-    margin: 10,
-    width: 200,
-  },
-
-  text: {
-    marginTop: -10,
-  },
-}));
-
 const Home = () => {
-  const classes = useStyles();
-  const [pincodeMenu, setPincodeMenu] = useState(true);
+  // const [pincodeMenu, setPincodeMenu] = useState(true);
   const [state, setState] = useState([]);
   const [stateCode, setStateCode] = useState("States");
   const [districts, setDistricts] = useState([]);
@@ -40,6 +27,13 @@ const Home = () => {
   const [formattedDate, setFormattedDate] = useState("");
   const [selectedDate, setSelectedDate] = useState(new Date());
   const [vaccineData, setVaccineData] = useState([]);
+  const [toSearchValue, setToSearchValue] = useState("");
+  const [toSearch] = useState([
+    "Find By District",
+    "Find By PinCode",
+    "Find By Pincode & Date(for next 7 days)",
+    "Find By District & Date(for next 7 days)",
+  ]);
 
   const GetFormattedDate = () => {
     var month = selectedDate.getMonth() + 1;
@@ -106,65 +100,68 @@ const Home = () => {
       });
   };
 
-  const fetchDataUsingPincode = () => {
-    if (pin.length >= 6) {
+  const fetchDataUsingCalendarByPin = () => {
+    if (pin.length !== 6) {
       alert("Please enter correct pincode");
     } else {
       fetch(
         `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/calendarByPin?pincode=${pin}&date=${formattedDate}`
-      ).then((res) => res.json());
-      // .then((data) => console.log(data));
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          console.log(data);
+        });
     }
   };
 
   return (
-    <div className="home">
-      <div className="home__intro">
-        <h2>Vaccine Availablity</h2>
-      </div>
-
-      <div className="home__options">
-        <div className="home__optionsTop">
-          <h4>Select State</h4>
-          <h4>Select District</h4>
-
-          <h4>Pincode</h4>
-          {pincodeMenu === true ? (
-            <ToggleOffIcon
-              fontSize="large"
-              onClick={() => setPincodeMenu(false)}
-              style={{ marginLeft: -70 }}
-            />
-          ) : (
-            <ToggleOnIcon
-              onClick={() => setPincodeMenu(true)}
-              fontSize="large"
-              style={{ color: "red", marginLeft: -70 }}
-            />
-          )}
-          <div className="home__optionsAlign">
-            <h4>Date</h4>
-            <DateRangeIcon />
+    <>
+      <Container maxWidth="md">
+        <div className="home">
+          <div className="home__intro">
+            <h2>Vaccine Availablity</h2>
+            <hr />
           </div>
-        </div>
-        <div className="home__optionBottom">
-          <div className="home__selects">
+
+          <div className="home_selectionHeader">
+            <h4>Select a method to search for slots</h4>
             <FormControl>
+              <InputLabel id="select-outlined-label">
+                Search Criteria
+              </InputLabel>
               <Select
-                variant="outlined"
-                value={stateCode}
-                onChange={onStateChange}
+                variant="filled"
+                value={toSearchValue}
+                onChange={(e) => setToSearchValue(e.target.value)}
               >
-                <MenuItem value="States">States</MenuItem>
-                {state?.map((stateData) => (
-                  <MenuItem value={stateData?.state_id}>
-                    {stateData?.state_name}
-                  </MenuItem>
-                ))}
+                {toSearch.map((functionName, index) => {
+                  return (
+                    <MenuItem key={index} value={functionName}>
+                      {functionName}
+                    </MenuItem>
+                  );
+                })}
               </Select>
             </FormControl>
-            {pincodeMenu === true ? (
-              <FormControl>
+          </div>
+
+          {toSearchValue === "Find By District" ? (
+            <div className="home_selectedHeaders">
+              <FormControl className="form-control">
+                <Select
+                  variant="outlined"
+                  value={stateCode}
+                  onChange={onStateChange}
+                >
+                  <MenuItem value="States">Select a State</MenuItem>
+                  {state?.map((stateData) => (
+                    <MenuItem value={stateData?.state_id}>
+                      {stateData?.state_name}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl className="form-control">
                 <Select
                   variant="outlined"
                   value={districtCode}
@@ -180,53 +177,57 @@ const Home = () => {
                   ))}
                 </Select>
               </FormControl>
-            ) : (
-              <div style={{ display: "flex", alignItems: "center" }}>
+            </div>
+          ) : null}
+
+          {toSearchValue === "" && (
+            <h3 className="empty_error">Please Select an Option</h3>
+          )}
+
+          {toSearchValue === "Find By Pincode & Date(for next 7 days)" ? (
+            <div className="home_selectedPin">
+              <div className="home_selectedpincontainer">
                 <TextField
                   id="outlined-number"
                   margin="normal"
                   label="Pin Code"
                   type="number"
                   variant="outlined"
-                  InputProps={{
-                    className: classes.text,
-                  }}
+                  className="textField"
                   value={pin}
                   onChange={(e) => setPin(e.target.value)}
                 />
                 <SearchIcon
-                  onClick={fetchDataUsingPincode}
+                  onClick={fetchDataUsingCalendarByPin}
                   style={{
-                    margin: 10,
-                    background: "#347edd",
-                    color: "white",
+                    background: "#3f51b5",
+                    color: "#fff",
                     padding: 5,
                     cursor: "pointer",
                     width: 30,
-                    height: 43,
-                    marginBottom: 12,
-                    borderRadius: "2px",
+                    height: 45,
+                    marginTop: 16,
+                    borderRadius: "0 5px 5px 0",
                   }}
                   fontSize="medium"
                 />
               </div>
-            )}
-
-            <MuiPickersUtilsProvider utils={DateFnsUtils}>
-              <KeyboardDatePicker
-                margin="normal"
-                id="date-picker-dialog"
-                format="dd-MM-yyyy"
-                value={selectedDate}
-                onChange={handleDateChange}
-                InputProps={{ className: classes.input }}
-              />
-            </MuiPickersUtilsProvider>
-          </div>
+              <MuiPickersUtilsProvider utils={DateFnsUtils}>
+                <KeyboardDatePicker
+                  margin="normal"
+                  id="date-picker-dialog"
+                  format="dd-MM-yyyy"
+                  value={selectedDate}
+                  onChange={handleDateChange}
+                  className="input"
+                />
+              </MuiPickersUtilsProvider>
+            </div>
+          ) : null}
+          <VaccineDataMain vaccineData={vaccineData} />
         </div>
-      </div>
-      <VaccineDataMain vaccineData={vaccineData}/>
-    </div>
+      </Container>
+    </>
   );
 };
 

From 920eca2b585ae2f308abc57cb91f4098b48b2843 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Sat, 22 May 2021 18:23:23 +0530
Subject: [PATCH 19/33] Removed unwanted CSS:hammer:

---
 src/components/Home/Home.css | 51 ------------------------------------
 1 file changed, 51 deletions(-)

diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index 1508510..551724b 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -153,54 +153,3 @@
     width: 380px;
   }
 }
-
-/*.home__optionsTop {*/
-/*  display: flex;*/
-/*  align-items: center;*/
-/*  border: 3px solid black;*/
-/*  margin-top: 10px;*/
-/*  text-align: center;*/
-/*}*/
-
-/*.home {*/
-/*  display: flex;*/
-/*  align-items: center;*/
-/*  flex-direction: column;*/
-/*  margin-top: -90px;*/
-/*}*/
-
-/*.home__optionsTop > h4 {*/
-/*  margin: 10px;*/
-/*  font-weight: 500;*/
-/*  width: 200px;*/
-/*}*/
-
-/*.home__optionsAlign > h4 {*/
-/*  font-weight: 500;*/
-/*  margin-top: -1px;*/
-/*}*/
-
-/*.home__optionsAlign {*/
-/*  display: flex;*/
-/*  align-items: center;*/
-/*  justify-content: center;*/
-/*  padding: 10px;*/
-/*  margin-left: 10px;*/
-/*}*/
-
-/*.home__optionBottom {*/
-/*  border: 2px solid black;*/
-/*  margin-top: 10px;*/
-/*}*/
-
-/*.home__optionBottom > div > .MuiFormControl-root {*/
-/*  margin-left: 20px;*/
-/*  width: 200px;*/
-/*  padding: 10px;*/
-/*}*/
-
-/*.home__selects {*/
-/*  display: flex;*/
-/*  justify-content: space-between;*/
-/*  align-items: center;*/
-/*}*/

From 93cec63930eb4b30ace5218f0996adb351496881 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Sat, 22 May 2021 19:08:29 +0530
Subject: [PATCH 20/33] Edited alerts

---
 src/components/Home/Home.js | 63 +++++++++++++++++++++++++++++++++----
 1 file changed, 57 insertions(+), 6 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 4279f30..7e2d44e 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -21,7 +21,7 @@ const Home = () => {
   const [stateCode, setStateCode] = useState("States");
   const [districts, setDistricts] = useState([]);
   const [districtCode, setDistrictCode] = useState(
-    "PLEASE SELECT A STATE FIRST!!!"
+    "PLEASE SELECT A STATE FIRST"
   );
   const [pin, setPin] = useState("");
   const [formattedDate, setFormattedDate] = useState("");
@@ -102,7 +102,7 @@ const Home = () => {
 
   const fetchDataUsingCalendarByPin = () => {
     if (pin.length !== 6) {
-      alert("Please enter correct pincode");
+      alert("A Pincode must be of 6 digits");
     } else {
       fetch(
         `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/calendarByPin?pincode=${pin}&date=${formattedDate}`
@@ -114,6 +114,20 @@ const Home = () => {
     }
   };
 
+  const fetchDataUsingByPin = () => {
+    if (pin.length !== 6) {
+      alert("A Pincode must be of 6 digits");
+    } else {
+      fetch(
+        `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByPin?pincode=${pin}&date=${formattedDate}`
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          console.log(data);
+        });
+    }
+  };
+
   return (
     <>
       <Container maxWidth="md">
@@ -122,7 +136,6 @@ const Home = () => {
             <h2>Vaccine Availablity</h2>
             <hr />
           </div>
-
           <div className="home_selectionHeader">
             <h4>Select a method to search for slots</h4>
             <FormControl>
@@ -143,8 +156,8 @@ const Home = () => {
                 })}
               </Select>
             </FormControl>
+            {/* {toSearchValue} */}
           </div>
-
           {toSearchValue === "Find By District" ? (
             <div className="home_selectedHeaders">
               <FormControl className="form-control">
@@ -179,11 +192,9 @@ const Home = () => {
               </FormControl>
             </div>
           ) : null}
-
           {toSearchValue === "" && (
             <h3 className="empty_error">Please Select an Option</h3>
           )}
-
           {toSearchValue === "Find By Pincode & Date(for next 7 days)" ? (
             <div className="home_selectedPin">
               <div className="home_selectedpincontainer">
@@ -224,6 +235,46 @@ const Home = () => {
               </MuiPickersUtilsProvider>
             </div>
           ) : null}
+          {toSearchValue === "Find By PinCode" ? (
+            <div className="home_selectedPin">
+              <div className="home_selectedpincontainer">
+                <TextField
+                  id="outlined-number"
+                  margin="normal"
+                  label="Pin Code"
+                  type="number"
+                  variant="outlined"
+                  className="textField"
+                  value={pin}
+                  onChange={(e) => setPin(e.target.value)}
+                />
+                <SearchIcon
+                  onClick={fetchDataUsingByPin}
+                  style={{
+                    background: "#3f51b5",
+                    color: "#fff",
+                    padding: 5,
+                    cursor: "pointer",
+                    width: 30,
+                    height: 45,
+                    marginTop: 16,
+                    borderRadius: "0 5px 5px 0",
+                  }}
+                  fontSize="medium"
+                />
+              </div>
+              <MuiPickersUtilsProvider utils={DateFnsUtils}>
+                <KeyboardDatePicker
+                  margin="normal"
+                  id="date-picker-dialog"
+                  format="dd-MM-yyyy"
+                  value={selectedDate}
+                  onChange={handleDateChange}
+                  className="input"
+                />
+              </MuiPickersUtilsProvider>
+            </div>
+          ) : null}
           <VaccineDataMain vaccineData={vaccineData} />
         </div>
       </Container>

From 76503a95abd8b72e3cf5188b8599120df559a785 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Sat, 22 May 2021 19:26:14 +0530
Subject: [PATCH 21/33] Added date for searchByDistrict

---
 src/components/Home/Home.css | 10 +++++++++-
 src/components/Home/Home.js  | 27 ++++++++++++++++++---------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index 551724b..5f7cf70 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -29,10 +29,14 @@
 }
 
 .home_selectedHeaders .form-control {
-  min-width: 450px !important;
+  min-width: 300px !important;
   margin-top: 15px;
 }
 
+.districtDateInput {
+  margin-top: 37px !important;
+}
+
 .empty_error {
   margin-top: 10px;
   border-radius: 5px;
@@ -76,6 +80,10 @@
     flex-direction: column;
   }
 
+  .districtDateInput {
+    margin-top: 20px !important;
+  }
+
   .home_selectedHeaders .form-control {
     min-width: 270px !important;
     margin-top: 15px;
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 7e2d44e..869c6eb 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -30,9 +30,9 @@ const Home = () => {
   const [toSearchValue, setToSearchValue] = useState("");
   const [toSearch] = useState([
     "Find By District",
-    "Find By PinCode",
-    "Find By Pincode & Date(for next 7 days)",
-    "Find By District & Date(for next 7 days)",
+    "Find By PinCode & Date",
+    "Find By Pincode & Date(Slots for next 7 days)",
+    "Find By District & Date(Slots for next 7 days)",
   ]);
 
   const GetFormattedDate = () => {
@@ -83,11 +83,11 @@ const Home = () => {
       });
   };
 
-  const onDistrictChange = async (e) => {
+  const findByDistrict = async (e) => {
     const districtCode = e.target.value;
 
     const url =
-      districtCode === "PLEASE SELECT A STATE FIRST!!!"
+      districtCode === "PLEASE SELECT A STATE FIRST"
         ? null
         : `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByDistrict?district_id=${districtCode}&date=${formattedDate}`;
 
@@ -156,7 +156,6 @@ const Home = () => {
                 })}
               </Select>
             </FormControl>
-            {/* {toSearchValue} */}
           </div>
           {toSearchValue === "Find By District" ? (
             <div className="home_selectedHeaders">
@@ -178,7 +177,7 @@ const Home = () => {
                 <Select
                   variant="outlined"
                   value={districtCode}
-                  onChange={onDistrictChange}
+                  onChange={findByDistrict}
                 >
                   {districts?.length === 0 ? (
                     <MenuItem disabled={true}>Select a State First</MenuItem>
@@ -190,12 +189,22 @@ const Home = () => {
                   ))}
                 </Select>
               </FormControl>
+              <MuiPickersUtilsProvider utils={DateFnsUtils}>
+                <KeyboardDatePicker
+                  margin="normal"
+                  id="date-picker-dialog"
+                  format="dd-MM-yyyy"
+                  value={selectedDate}
+                  onChange={handleDateChange}
+                  className="districtDateInput"
+                />
+              </MuiPickersUtilsProvider>
             </div>
           ) : null}
           {toSearchValue === "" && (
             <h3 className="empty_error">Please Select an Option</h3>
           )}
-          {toSearchValue === "Find By Pincode & Date(for next 7 days)" ? (
+          {toSearchValue === "Find By Pincode & Date(Slots for next 7 days)" ? (
             <div className="home_selectedPin">
               <div className="home_selectedpincontainer">
                 <TextField
@@ -235,7 +244,7 @@ const Home = () => {
               </MuiPickersUtilsProvider>
             </div>
           ) : null}
-          {toSearchValue === "Find By PinCode" ? (
+          {toSearchValue === "Find By PinCode & Date" ? (
             <div className="home_selectedPin">
               <div className="home_selectedpincontainer">
                 <TextField

From b7056eef3cbeb855e48973a7d8729355ec3142f1 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Sat, 22 May 2021 20:50:38 +0530
Subject: [PATCH 22/33] edited vaccine count badge

---
 src/components/Home/Home.js                   |  29 +--
 .../SingleVaccineData/VaccineDataSingle.js    | 171 ++++++++++--------
 2 files changed, 111 insertions(+), 89 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 869c6eb..f09329a 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,8 +1,12 @@
 import React, { useState, useEffect } from "react";
-import { FormControl, MenuItem, Select } from "@material-ui/core";
-
-import InputLabel from "@material-ui/core/InputLabel";
-import TextField from "@material-ui/core/TextField";
+import {
+  FormControl,
+  MenuItem,
+  Select,
+  InputLabel,
+  TextField,
+  Container,
+} from "@material-ui/core";
 import {
   KeyboardDatePicker,
   MuiPickersUtilsProvider,
@@ -10,13 +14,11 @@ import {
 import "date-fns";
 import DateFnsUtils from "@date-io/date-fns";
 import SearchIcon from "@material-ui/icons/Search";
-import Container from "@material-ui/core/Container";
 
 import "./Home.css";
 import VaccineDataMain from "../VaccineData/VaccineDataMain";
 
 const Home = () => {
-  // const [pincodeMenu, setPincodeMenu] = useState(true);
   const [state, setState] = useState([]);
   const [stateCode, setStateCode] = useState("States");
   const [districts, setDistricts] = useState([]);
@@ -42,19 +44,17 @@ const Home = () => {
     var finalDate = day + "-" + month + "-" + year;
 
     setFormattedDate(finalDate);
+    // setSelectedDate(finalDate);
   };
 
   console.log(formattedDate);
 
-  console.log(pin);
-
   useEffect(() => {
     fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states")
       .then((res) => res.json())
       .then((data) => {
         setState(data.states);
       });
-
     GetFormattedDate();
     // eslint-disable-next-line
   }, [setState, selectedDate, formattedDate]);
@@ -157,6 +157,11 @@ const Home = () => {
               </Select>
             </FormControl>
           </div>
+
+          {toSearchValue === "" && (
+            <h3 className="empty_error">Please Select an Option</h3>
+          )}
+
           {toSearchValue === "Find By District" ? (
             <div className="home_selectedHeaders">
               <FormControl className="form-control">
@@ -201,9 +206,7 @@ const Home = () => {
               </MuiPickersUtilsProvider>
             </div>
           ) : null}
-          {toSearchValue === "" && (
-            <h3 className="empty_error">Please Select an Option</h3>
-          )}
+
           {toSearchValue === "Find By Pincode & Date(Slots for next 7 days)" ? (
             <div className="home_selectedPin">
               <div className="home_selectedpincontainer">
@@ -244,6 +247,7 @@ const Home = () => {
               </MuiPickersUtilsProvider>
             </div>
           ) : null}
+
           {toSearchValue === "Find By PinCode & Date" ? (
             <div className="home_selectedPin">
               <div className="home_selectedpincontainer">
@@ -284,6 +288,7 @@ const Home = () => {
               </MuiPickersUtilsProvider>
             </div>
           ) : null}
+
           <VaccineDataMain vaccineData={vaccineData} />
         </div>
       </Container>
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
index 4ff7095..9bc7c8b 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
@@ -1,87 +1,104 @@
-import { makeStyles } from '@material-ui/core/styles';
-import Paper from '@material-ui/core/Paper';
-import Badge from '@material-ui/core/Badge';
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from "@material-ui/core/Paper";
+import Badge from "@material-ui/core/Badge";
 
-import HealingIcon from '@material-ui/icons/Healing';
-import VerifiedUserRoundedIcon from '@material-ui/icons/VerifiedUserRounded';
+import HealingIcon from "@material-ui/icons/Healing";
+import VerifiedUserRoundedIcon from "@material-ui/icons/VerifiedUserRounded";
 
-import "./VaccineDataSingle.css"
+import "./VaccineDataSingle.css";
 
 const useStyles = makeStyles((theme) => ({
-    paperMainDiv:{
-        width: "100%"
-    },
+  paperMainDiv: {
+    width: "100%",
+  },
 }));
 
-const VaccineDataSingle = (vaccine)=> {
-    const classes = useStyles();
+const VaccineDataSingle = (vaccine) => {
+  const classes = useStyles();
 
-    return(
-        <div className={classes.paperMainDiv}>
-            <Paper variant="outlined" className="wrapper" style={{backgroundColor: "#333333"}}>
-                <div className="paper-left">
-                    <div>
-                        <h1>{vaccine.name} <VerifiedUserRoundedIcon style={{color: "#009E60"}}/></h1>
-                    </div>
-                    <hr/>
-                    <br/>
-                    <div className="paper-left_vaccine_head">
-                        <h3>Vaccine Name</h3>
-                        <p>{vaccine.vaccine}</p>
-                    </div>
+  return (
+    <div className={classes.paperMainDiv}>
+      <Paper
+        variant="outlined"
+        className="wrapper"
+        style={{ backgroundColor: "#333333" }}
+      >
+        <div className="paper-left">
+          <div>
+            <h1>
+              {vaccine.name}{" "}
+              <VerifiedUserRoundedIcon style={{ color: "#009E60" }} />
+            </h1>
+          </div>
+          <hr />
+          <br />
+          <div className="paper-left_vaccine_head">
+            <h3>Vaccine Name</h3>
+            <p>{vaccine.vaccine}</p>
+          </div>
 
-                    <div className="paper-left_content">
-                        <h3>address</h3>
-                        <p>{vaccine.block_name}, {vaccine.district_name}, {vaccine.state_name}</p>
-                    </div>
-                    <div className="paper-left_content">
-                        <h3>pincode</h3>
-                        <p>{vaccine.pincode}</p>
-                    </div>
-                    <div className="paper-left_time">
-                        <div className="open-time time">
-                            Opening Time: {vaccine.from}
-                        </div>
-                        <div className="close-time time">
-                            Closing Time: {vaccine.to}
-                        </div>
-                    </div>
-                </div>
-                <div className="paper-right">
-                    <div className="paper-right_Badges">
-                        <div className="paper-right_capacity">
-                            <Badge color="secondary" badgeContent={vaccine.available_capacity}>
-                                <h5>Available Capacity</h5> <HealingIcon className="healing_icon"/>
-                            </Badge>
-                        </div>
-                        <div>
-                            <p><span>Date:</span>{vaccine.date}</p>
-                        </div>
-                    </div>
-                    <div className="paper-right_age">
-                        <div className="age_text">
-                            <h3>Minimum Age</h3>
-                        </div>
-                        <div className="age_content">
-                            <p>{vaccine.min_age_limit} years</p>
-                        </div>
-                    </div>
-                    <div className="paper-right_age">
-                        <div className="age_text">
-                            <h3>Minimum Fare(₹)</h3>
-                        </div>
-                        <div className="age_content">
-                            <p>{vaccine.fee_type} </p>
-                        </div>
-                    </div>
-                    <div className="paper-right_slots">
-                        <h3>Slots Available</h3>
-                        <p>{vaccine.slots.join(",")}</p>
-                    </div>
-                </div>
-            </Paper>
+          <div className="paper-left_content">
+            <h3>address</h3>
+            <p>
+              {vaccine.block_name}, {vaccine.district_name},{" "}
+              {vaccine.state_name}
+            </p>
+          </div>
+          <div className="paper-left_content">
+            <h3>pincode</h3>
+            <p>{vaccine.pincode}</p>
+          </div>
+          <div className="paper-left_time">
+            <div className="open-time time">Opening Time: {vaccine.from}</div>
+            <div className="close-time time">Closing Time: {vaccine.to}</div>
+          </div>
         </div>
-    )
-}
+        <div className="paper-right">
+          <div className="paper-right_Badges">
+            <div className="paper-right_capacity">
+              <Badge
+                color="secondary"
+                badgeContent={
+                  vaccine.available_capacity !== 0
+                    ? vaccine.available_capacity
+                    : "0"
+                }
+              >
+                <h5>Available Capacity</h5>{" "}
+                <HealingIcon className="healing_icon" />
+              </Badge>
+            </div>
+            <div>
+              <p>
+                <span>Date:</span>
+                {vaccine.date}
+              </p>
+            </div>
+          </div>
+          <div className="paper-right_age">
+            <div className="age_text">
+              <h3>Minimum Age</h3>
+            </div>
+            <div className="age_content">
+              <p>{vaccine.min_age_limit} years</p>
+            </div>
+          </div>
+          <div className="paper-right_age">
+            <div className="age_text">
+              <h3>Minimum Fare(₹)</h3>
+            </div>
+            <div className="age_content">
+              <p>{vaccine.fee_type} </p>
+            </div>
+          </div>
+          <div className="paper-right_slots">
+            <h3>Slots Available</h3>
+            <p>{vaccine.slots.join(",")}</p>
+          </div>
+        </div>
+      </Paper>
+    </div>
+  );
+};
 
-export default VaccineDataSingle
\ No newline at end of file
+export default VaccineDataSingle;

From 9a4f4f97630b53b45c7c7e8e40242e345b71ff14 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Sun, 23 May 2021 23:16:48 +0530
Subject: [PATCH 23/33] Added Date in the select by districts

---
 src/components/Home/Home.js                   | 43 +++++++++++++------
 src/components/VaccineData/VaccineDataMain.js | 14 ++++--
 2 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index f09329a..bdda6ea 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -44,7 +44,6 @@ const Home = () => {
     var finalDate = day + "-" + month + "-" + year;
 
     setFormattedDate(finalDate);
-    // setSelectedDate(finalDate);
   };
 
   console.log(formattedDate);
@@ -57,10 +56,12 @@ const Home = () => {
       });
     GetFormattedDate();
     // eslint-disable-next-line
-  }, [setState, selectedDate, formattedDate]);
+  }, [selectedDate, formattedDate]);
 
   const handleDateChange = (date) => {
     setSelectedDate(date);
+    setVaccineData([]);
+    setDistricts([]);
   };
 
   const onStateChange = async (e) => {
@@ -179,20 +180,36 @@ const Home = () => {
                 </Select>
               </FormControl>
               <FormControl className="form-control">
-                <Select
+                {/* <Select
                   variant="outlined"
                   value={districtCode}
                   onChange={findByDistrict}
-                >
-                  {districts?.length === 0 ? (
-                    <MenuItem disabled={true}>Select a State First</MenuItem>
-                  ) : null}
-                  {districts?.map((districtData) => (
-                    <MenuItem value={districtData?.district_id}>
-                      {districtData?.district_name}
-                    </MenuItem>
-                  ))}
-                </Select>
+                > */}
+                {districts?.length !== 0 ? (
+                  <>
+                    <Select
+                      variant="outlined"
+                      value={districtCode}
+                      onChange={findByDistrict}
+                    >
+                      {districts?.map((districtData) => (
+                        <MenuItem value={districtData?.district_id}>
+                          {districtData?.district_name}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </>
+                ) : (
+                  <>
+                    <Select
+                      variant="outlined"
+                      value={districtCode}
+                      onChange={findByDistrict}
+                    >
+                      <MenuItem disabled={true}>Select a State First</MenuItem>
+                    </Select>
+                  </>
+                )}
               </FormControl>
               <MuiPickersUtilsProvider utils={DateFnsUtils}>
                 <KeyboardDatePicker
diff --git a/src/components/VaccineData/VaccineDataMain.js b/src/components/VaccineData/VaccineDataMain.js
index 172c859..ba89b54 100644
--- a/src/components/VaccineData/VaccineDataMain.js
+++ b/src/components/VaccineData/VaccineDataMain.js
@@ -3,10 +3,16 @@ import VaccineDataSingle from "./SingleVaccineData/VaccineDataSingle";
 const VaccineDataMain = ({ vaccineData }) => {
   return (
     <>
-      {vaccineData.map((vaccine) => {
-        const { center_id } = vaccine;
-        return <VaccineDataSingle key={center_id} {...vaccine} />;
-      })}
+      {vaccineData.length !== 0 ? (
+        <>
+          {vaccineData.map((vaccine) => {
+            const { center_id } = vaccine;
+            return <VaccineDataSingle key={center_id} {...vaccine} />;
+          })}
+        </>
+      ) : (
+        <p>No data found</p>
+      )}
     </>
   );
 };

From d512fef43e662b5965974504be2aff0c5e0fd1a8 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sun, 23 May 2021 23:37:38 +0530
Subject: [PATCH 24/33] fixed null district :hammer

---
 src/components/Home/Home.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index bdda6ea..16bd4c3 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -61,7 +61,7 @@ const Home = () => {
   const handleDateChange = (date) => {
     setSelectedDate(date);
     setVaccineData([]);
-    setDistricts([]);
+    setDistrictCode("");
   };
 
   const onStateChange = async (e) => {

From 9b8c65803ac2a75bf61dbbf74e566c348f21e29f Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Mon, 24 May 2021 00:06:03 +0530
Subject: [PATCH 25/33] emptied the array when searchvalues chnages

---
 src/components/Home/Home.js                   | 5 ++++-
 src/components/VaccineData/VaccineDataMain.js | 4 +---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index bdda6ea..ff71daf 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -146,7 +146,10 @@ const Home = () => {
               <Select
                 variant="filled"
                 value={toSearchValue}
-                onChange={(e) => setToSearchValue(e.target.value)}
+                onChange={(e) => {
+                  setToSearchValue(e.target.value);
+                  setVaccineData([]);
+                }}
               >
                 {toSearch.map((functionName, index) => {
                   return (
diff --git a/src/components/VaccineData/VaccineDataMain.js b/src/components/VaccineData/VaccineDataMain.js
index ba89b54..d363718 100644
--- a/src/components/VaccineData/VaccineDataMain.js
+++ b/src/components/VaccineData/VaccineDataMain.js
@@ -10,9 +10,7 @@ const VaccineDataMain = ({ vaccineData }) => {
             return <VaccineDataSingle key={center_id} {...vaccine} />;
           })}
         </>
-      ) : (
-        <p>No data found</p>
-      )}
+      ) : null}
     </>
   );
 };

From 3bb95eebf460009f17074ba0c0ced79cc7c1a99e Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Mon, 24 May 2021 00:19:18 +0530
Subject: [PATCH 26/33] added options for find districts and date for next 7
 days

---
 src/components/Home/Home.js | 60 ++++++++++++++++++++++++++++++++++---
 1 file changed, 56 insertions(+), 4 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index ff71daf..5bdb1df 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -183,11 +183,63 @@ const Home = () => {
                 </Select>
               </FormControl>
               <FormControl className="form-control">
-                {/* <Select
+                {districts?.length !== 0 ? (
+                  <>
+                    <Select
+                      variant="outlined"
+                      value={districtCode}
+                      onChange={findByDistrict}
+                    >
+                      {districts?.map((districtData) => (
+                        <MenuItem value={districtData?.district_id}>
+                          {districtData?.district_name}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </>
+                ) : (
+                  <>
+                    <Select
+                      variant="outlined"
+                      value={districtCode}
+                      onChange={findByDistrict}
+                    >
+                      <MenuItem disabled={true}>Select a State First</MenuItem>
+                    </Select>
+                  </>
+                )}
+              </FormControl>
+              <MuiPickersUtilsProvider utils={DateFnsUtils}>
+                <KeyboardDatePicker
+                  margin="normal"
+                  id="date-picker-dialog"
+                  format="dd-MM-yyyy"
+                  value={selectedDate}
+                  onChange={handleDateChange}
+                  className="districtDateInput"
+                />
+              </MuiPickersUtilsProvider>
+            </div>
+          ) : null}
+
+          {toSearchValue ===
+          "Find By District & Date(Slots for next 7 days)" ? (
+            <div className="home_selectedHeaders">
+              <FormControl className="form-control">
+                <Select
                   variant="outlined"
-                  value={districtCode}
-                  onChange={findByDistrict}
-                > */}
+                  value={stateCode}
+                  onChange={onStateChange}
+                >
+                  <MenuItem value="States">Select a State</MenuItem>
+                  {state?.map((stateData) => (
+                    <MenuItem value={stateData?.state_id}>
+                      {stateData?.state_name}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl className="form-control">
                 {districts?.length !== 0 ? (
                   <>
                     <Select

From 2d7607ff3bb1b3b3cdd33a86c56b2e91fd7fed73 Mon Sep 17 00:00:00 2001
From: himanshu <himanshujasuja1040@gmail.com>
Date: Mon, 24 May 2021 14:44:28 +0530
Subject: [PATCH 27/33] a

---
 .../SingleVaccineData/VaccineDataSingle.css   | 493 ++++++++++--------
 .../SingleVaccineData/VaccineDataSingle.js    | 180 +++----
 2 files changed, 349 insertions(+), 324 deletions(-)

diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
index 75dd4ed..1760f0d 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
@@ -1,293 +1,328 @@
+@import url("https://fonts.googleapis.com/css2?family=Raleway&family=Roboto&family=Ubuntu&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap');
+/* font-family: 'Raleway', sans-serif;
+font-family: 'Roboto', sans-serif;
+font-family: 'Ubuntu', sans-serif; */
+
 .wrapper {
-    display: flex;
-    background-color: #333333;
-    height: 32vh
+  display: flex;
+  background-color: #333333;
+  height: 32vh;
 }
 
 .wrapper > * {
-    padding: 20px;
+  padding: 20px;
 }
 
 .paper-left {
-    width: 50%;
+  width: 50%;
 }
 
-.paper-left h1{
-    color: whitesmoke;
-    text-transform: uppercase;
-    font-family: monospace;
+.paper-left h1 {
+  /* color: white; */
+  text-align: center;
+  color: black;
+  text-transform: uppercase;
+  font-family: "Ubuntu", sans-serif;
+  font-size: 18px;
+  letter-spacing: 1px;
+}
+.paper-left_vaccine_head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.paper-left_vaccine_head{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+.paper-left_vaccine_head h3 {
+  text-transform: uppercase;
+  font-weight: bold;
+  color: #275efe;
+  font-family: 'Fira Code', monospace;
+  letter-spacing: 2px;
+}
+.paper-left_vaccine_head p {
+  text-transform: uppercase;
+  font-weight: bold;
+  color: black;
+  /* background-color: lightblue; */
+  box-shadow: inset 0 0 35px 5px rgba(0, 0, 0, 0.25),
+    inset 0 2px 1px 1px rgba(255, 255, 255, 0.9),
+    inset 0 -2px 1px 0 rgba(0, 0, 0, 0.25);
+  font-family: monospace;
+  background-color: #fff;
+  border: 1px solid;
+  padding: 10px;
+  border-radius: 7px;
+  text-align: center;
 }
 
-.paper-left_vaccine_head h3{
-    text-transform: uppercase;
-    font-weight: bold;
-    color: white;
-    font-family: "Fira Code Medium", "monospace";
+.paper-left .paper-left_content {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
 }
 
-.paper-left_vaccine_head p{
-    text-transform: uppercase;
-    font-weight: bold;
-    color: black;
-    font-family: monospace;
-    background-color: #009E60;
-    padding: 10px;
-    border-radius: 7px;
-    text-align: center;
+.paper-left .paper-left_content h3 {
+  /* color: #BB86FC; */
+  color: #212121;
+  font-weight: bold;
+  text-transform: capitalize;
 }
 
-.paper-left .paper-left_content{
-    display: flex;
-    justify-content: space-between;
-    margin-top: 10px;
+.paper-left .paper-left_content p {
+  /* color: #F48FB1; */
+  color: red;
+  /* color: black; */
+  margin-top: 5px;
+  text-transform: capitalize;
+  font-family: "Raleway", sans-serif;
+  font-size: 16px;
+  letter-spacing: 1px;
 }
 
+.paper-left .paper-left_time {
+  display: flex;
+  justify-content: space-evenly;
+  margin-top: 5px;
+}
+.paper-left .paper-left_time .time:hover {
+  color: #002060;
+}
+.paper-left .paper-left_time .time {
+  padding: 10px;
+  border-radius: 7px;
+  font-weight: bold;
+}
 
-.paper-left .paper-left_content h3{
-    color: #BB86FC;
-    font-weight: bold;
-    text-transform: capitalize;
+.paper-left .paper-left_time .open-time {
+  /* background-color: rgb(20, 209, 20);
+    -moz-box-shadow:    inset 0 0 10px green;
+    -webkit-box-shadow: inset 0 0 10px green;
+    box-shadow:         inset 0 0 10px green; */
+  background-color: white;
+  color: black;
+  border: 1px solid;
+  box-shadow: inset 2px 0px 10px 2px white, inset 0px 0px 4px 0px black;
+  font-family: "Raleway", sans-serif;
 }
 
-.paper-left .paper-left_content p{
-    color: #F48FB1;
-    margin-top: 5px;
-    text-transform: capitalize;
-    font-family: monospace;
+.paper-left .paper-left_time .close-time {
+  /* background-color: rgb(231, 31, 125);
+    background-color: white; */
+  color: black;
+  background-color: white;
+  box-shadow: inset 2px 0px 10px 2px white, inset 0px 0px 4px 0px black;
+  border: 1px solid;
+  font-family: "Raleway", sans-serif;
 }
 
-.paper-left .paper-left_time {
-    display: flex;
-    justify-content: space-evenly;
-    margin-top: 10px;
+.paper-right {
+  width: 50%;
 }
 
-.paper-left .paper-left_time .time{
-    padding: 10px;
-    border-radius: 7px;
-    font-weight: bold;
+.paper-right_Badges {
+  display: flex;
+  justify-content: space-between;
 }
 
-.paper-left .paper-left_time .open-time{
-    background-color: #009E60;
-    font-family: monospace;
+.paper-right_Badges h5 {
+  margin-right: 10px;
+  /* color: rgb(241, 11, 11); */
+  color: #275efe;
+  font-family: "Roboto", sans-serif;
+  font-size: 20px;
 }
 
-.paper-left .paper-left_time .close-time{
-    background-color: rgb(222,49,99);
-    color: white;
-    font-family: monospace;
+.paper-right_Badges .healing_icon {
+  color: white;
 }
 
-.paper-right {
-    width: 50%;
+.paper-right_Badges p {
+  color: #275efe;
+  font-size: 15px;
 }
 
-.paper-right_Badges{
-    display: flex;
-    justify-content: space-between;
+.paper-right_Badges p span {
+  color: rgb(255, 255, 255);
+  color: black;
+  font-family: monospace;
+  font-size: 20px;
 }
 
-.paper-right_Badges h5{
-    margin-right: 10px;
-    color: aquamarine;
-    font-family: monospace;
-    font-size: 22px;
+.paper-right_age {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
 }
 
-.paper-right_Badges .healing_icon{
-    color: white;
+.paper-right_age .age_text h3 {
+  color: rgb(10, 192, 107);
+  color: black;
+  font-family: "Raleway", sans-serif;
+  font-size: 17px;
 }
 
-.paper-right_Badges p {
-    color: whitesmoke;
-    font-size: 15px;
+.paper-right_age .age_content p {
+  margin-bottom: 5px;
+  font-size: 19px;
+  font-weight: 600;
+  color: red;
 }
 
-.paper-right_Badges p span{
-    color: aquamarine;
-    font-family: monospace;
-    font-size: 20px;
+.paper-right_age .age_content {
+  height: 25px;
+  width: 75px;
+  padding: 5px;
+  border-radius: 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.paper-right_age{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 10px;
+.paper-right_slots h3 {
+  text-align: center;
+  font-weight: 700;
+  color: #275efe;
+  margin: 5px;
 }
 
-.paper-right_age .age_text h3{
-    color: aquamarine;
-    font-family: monospace;
-    font-size: 20px;
+.paper-right_slots p {
+  color: rgb(100, 4, 4);
+  color: #374957;
+  font-size: 17px;
+  text-align: center;
 }
 
-.paper-right_age .age_content p{
-    margin-bottom: 5px;
-    font-size: 20px;
+/*Media Queries*/
+@media screen and (max-width: 1024px) {
+  .wrapper {
+    height: 35vh;
+  }
+}
+
+@media screen and (max-width: 850px) {
+  .wrapper {
+    height: 40vh;
+  }
 }
 
-.paper-right_age .age_content{
-    background-color: rgb(222,49,99);
-    height: 25px;
-    width: 75px;
+@media screen and (max-width: 500px) {
+  .wrapper {
+    height: 70vh;
+    flex-direction: column;
+  }
+
+  .paper-left {
+    width: 90%;
+  }
+
+  .paper-left_vaccine_head {
+    flex-direction: column;
+  }
+
+  .paper-left_vaccine_head h3 {
+    font-size: 15px;
+    margin-bottom: 10px;
+  }
+
+  .paper-left_vaccine_head p {
     padding: 5px;
+    font-size: 15px;
+    border-radius: 7px;
+    text-align: center;
+  }
+
+  .paper-left p {
+    width: 100%;
+  }
+
+  .paper-left .paper-left_content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .paper-left .paper-left_time {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .paper-left .paper-left_time .time {
+    margin-top: 5px;
+  }
+
+  .paper-right {
+    width: 90%;
+  }
+
+  .paper-right_Badges h5 {
+    margin-top: 5px;
+    margin-right: 3px;
+    color: aquamarine;
+    font-weight: bold;
+    font-size: 11px;
+  }
+
+  .paper-right_Badges .healing_icon {
+    font-size: 20px;
+  }
+
+  .paper-right_Badges p {
+    margin-top: 5px;
+    color: whitesmoke;
+    font-size: 15px;
+  }
+
+  .paper-right_Badges p span {
+    font-size: 15px;
+  }
+
+  .paper-right_age {
+    margin-top: 3px;
+  }
+
+  .paper-right_age .age_text h3 {
+    font-size: 13px;
+  }
+
+  .paper-right_age .age_content {
+    /* background-color: rgb(222,49,99); */
+    background-color: red;
+    height: 15px;
+    width: 65px;
+    padding: 3px;
     border-radius: 3px;
     color: white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
+  }
 
-.paper-right_slots h3{
+  .paper-right_age .age_content p {
+    margin-bottom: 1px;
+    font-size: 13px;
+  }
+
+  .paper-right_slots h3 {
     text-align: center;
     font-weight: 700;
-    color: #BB86FC;
-    margin: 5px;
-}
+    color: #bb86fc;
+    margin: 3px;
+  }
 
-.paper-right_slots p{
+  .paper-right_slots p {
     color: whitesmoke;
-    font-size: 17px;
+    font-size: 15px;
     text-align: center;
+  }
 }
 
-
-/*Media Queries*/
-@media screen and (max-width: 1024px){
-    .wrapper {
-        height: 35vh;
-    }
+@media screen and (max-width: 400px) {
+  .wrapper {
+    height: 82vh;
+  }
 }
 
-@media screen and (max-width: 850px){
-    .wrapper {
-        height: 40vh;
-    }
+@media screen and (max-width: 360px) {
+  .wrapper {
+    height: 100vh;
+  }
 }
-
-@media screen and (max-width: 500px) {
-    .wrapper {
-        height: 70vh;
-        flex-direction: column;
-    }
-
-    .paper-left {
-        width: 90%;
-    }
-
-    .paper-left_vaccine_head{
-        flex-direction: column;
-    }
-
-    .paper-left_vaccine_head h3{
-        font-size: 15px;
-        margin-bottom: 10px;
-    }
-
-    .paper-left_vaccine_head p{
-        padding: 5px;
-        font-size: 15px;
-        border-radius: 7px;
-        text-align: center;
-    }
-
-    .paper-left p {
-        width: 100%;
-    }
-
-    .paper-left .paper-left_content{
-        display: flex;
-        flex-direction: column;
-    }
-
-    .paper-left .paper-left_time {
-        display: flex;
-        flex-direction: column;
-        text-align: center;
-    }
-
-    .paper-left .paper-left_time .time{
-        margin-top: 5px;
-    }
-
-    .paper-right {
-        width: 90%;
-    }
-
-    .paper-right_Badges h5{
-        margin-top: 5px;
-        margin-right: 3px;
-        color: aquamarine;
-        font-weight: bold;
-        font-size: 11px;
-    }
-
-    .paper-right_Badges .healing_icon{
-        font-size: 20px;
-    }
-
-    .paper-right_Badges p {
-        margin-top: 5px;
-        color: whitesmoke;
-        font-size: 15px;
-    }
-
-    .paper-right_Badges p span{
-        font-size: 15px;
-    }
-
-    .paper-right_age{
-        margin-top: 3px;
-    }
-
-    .paper-right_age .age_text h3{
-        font-size: 13px;
-    }
-
-    .paper-right_age .age_content{
-        background-color: rgb(222,49,99);
-        height: 15px;
-        width: 65px;
-        padding: 3px;
-        border-radius: 3px;
-        color: white;
-    }
-
-    .paper-right_age .age_content p{
-        margin-bottom: 1px;
-        font-size: 13px;
-    }
-
-    .paper-right_slots h3{
-        text-align: center;
-        font-weight: 700;
-        color: #BB86FC;
-        margin: 3px;
-    }
-
-    .paper-right_slots p{
-        color: whitesmoke;
-        font-size: 15px;
-        text-align: center;
-    }
-}
-
-@media screen and (max-width: 400px){
-    .wrapper {
-        height: 82vh;
-    }
-}
-
-@media screen and (max-width: 360px){
-    .wrapper {
-        height: 100vh;
-    }
-}
\ No newline at end of file
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
index 9bc7c8b..3605709 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
@@ -1,104 +1,94 @@
-import { makeStyles } from "@material-ui/core/styles";
-import Paper from "@material-ui/core/Paper";
-import Badge from "@material-ui/core/Badge";
+import { makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Badge from '@material-ui/core/Badge';
 
-import HealingIcon from "@material-ui/icons/Healing";
-import VerifiedUserRoundedIcon from "@material-ui/icons/VerifiedUserRounded";
+import HealingIcon from '@material-ui/icons/Healing';
+import VerifiedUserRoundedIcon from '@material-ui/icons/VerifiedUserRounded';
 
-import "./VaccineDataSingle.css";
+import "./VaccineDataSingle.css"
 
 const useStyles = makeStyles((theme) => ({
-  paperMainDiv: {
-    width: "100%",
-  },
+    paperMainDiv:{
+        width: "100%"
+    },
 }));
+const VaccineDataSingle = (vaccine)=> {
+    const classes = useStyles();
+    return(
+        <div className={classes.paperMainDiv}>
+            <Paper variant="outlined" className="wrapper" style={{backgroundColor: "#E5E7EB", margin:"10px 0px"}}>
+                <div className="paper-left">
+                    <div>
+                        <h1>{vaccine.name} <VerifiedUserRoundedIcon style={{color: "#009E60"}}/></h1>
+                    </div>
+                    <hr/>
+                    <br/>
+                    <div className="paper-left_vaccine_head">
+                        <h3>Vaccine Name</h3>
+                        {vaccine.vaccine==="COVISHIELD"?(
+                            <p style={{backgroundColor:"skyblue",color:"white"}}>{vaccine.vaccine}</p>
+                        ):(
+                            <p style={{backgroundColor:"slateblue",color:"white"}}>{vaccine.vaccine}</p>
+                        )}
+                    </div>
 
-const VaccineDataSingle = (vaccine) => {
-  const classes = useStyles();
+                    <div className="paper-left_content">
+                        <h3>address</h3>
+                        <p>{vaccine.block_name}, {vaccine.district_name}, {vaccine.state_name}</p>
+                    </div>
+                    <div className="paper-left_content">
+                        <h3>pincode</h3>
+                        <p>{vaccine.pincode}</p>
+                    </div>
+                    <div className="paper-left_time">
+                        <div className="open-time time">
+                            Opening Time: {vaccine.from}
+                        </div>
+                        <div className="close-time time">
+                            Closing Time: {vaccine.to}
+                        </div>
+                    </div>
+                </div>
+                <div className="paper-right">
+                    <div className="paper-right_Badges">
+                        <div className="paper-right_capacity">
+                            <Badge color="secondary" badgeContent={vaccine.available_capacity}>
+                                <h5>Available Capacity</h5> <HealingIcon className="healing_icon"/>
+                            </Badge>
+                        </div>
+                        <div>
+                            <p><span>Date:</span>{vaccine.date}</p>
+                        </div>
+                    </div>
+                    <div className="paper-right_age">
+                        <div className="age_text">
+                            <h3>Minimum Age</h3>
+                        </div>
+                        <div className="age_content">
+                            <p>{vaccine.min_age_limit} years</p>
+                        </div>
+                    </div>
+                    <div className="paper-right_age">
+                        <div className="age_text">
+                            <h3>Minimum Fare(₹)</h3>
+                        </div>
+                        <div className="age_content">
+                            {vaccine.fee_type==="Free"?(
+                                <p style={{color:"green"}}>{vaccine.fee_type} </p>
+                            ):(
+                                <p style={{color:"red"}}>{vaccine.fee_type} </p>
 
-  return (
-    <div className={classes.paperMainDiv}>
-      <Paper
-        variant="outlined"
-        className="wrapper"
-        style={{ backgroundColor: "#333333" }}
-      >
-        <div className="paper-left">
-          <div>
-            <h1>
-              {vaccine.name}{" "}
-              <VerifiedUserRoundedIcon style={{ color: "#009E60" }} />
-            </h1>
-          </div>
-          <hr />
-          <br />
-          <div className="paper-left_vaccine_head">
-            <h3>Vaccine Name</h3>
-            <p>{vaccine.vaccine}</p>
-          </div>
-
-          <div className="paper-left_content">
-            <h3>address</h3>
-            <p>
-              {vaccine.block_name}, {vaccine.district_name},{" "}
-              {vaccine.state_name}
-            </p>
-          </div>
-          <div className="paper-left_content">
-            <h3>pincode</h3>
-            <p>{vaccine.pincode}</p>
-          </div>
-          <div className="paper-left_time">
-            <div className="open-time time">Opening Time: {vaccine.from}</div>
-            <div className="close-time time">Closing Time: {vaccine.to}</div>
-          </div>
-        </div>
-        <div className="paper-right">
-          <div className="paper-right_Badges">
-            <div className="paper-right_capacity">
-              <Badge
-                color="secondary"
-                badgeContent={
-                  vaccine.available_capacity !== 0
-                    ? vaccine.available_capacity
-                    : "0"
-                }
-              >
-                <h5>Available Capacity</h5>{" "}
-                <HealingIcon className="healing_icon" />
-              </Badge>
-            </div>
-            <div>
-              <p>
-                <span>Date:</span>
-                {vaccine.date}
-              </p>
-            </div>
-          </div>
-          <div className="paper-right_age">
-            <div className="age_text">
-              <h3>Minimum Age</h3>
-            </div>
-            <div className="age_content">
-              <p>{vaccine.min_age_limit} years</p>
-            </div>
-          </div>
-          <div className="paper-right_age">
-            <div className="age_text">
-              <h3>Minimum Fare(₹)</h3>
-            </div>
-            <div className="age_content">
-              <p>{vaccine.fee_type} </p>
-            </div>
-          </div>
-          <div className="paper-right_slots">
-            <h3>Slots Available</h3>
-            <p>{vaccine.slots.join(",")}</p>
-          </div>
+                            )}
+                        </div>
+                    </div>
+                    <div className="paper-right_slots">
+                        <h3>Slots Available</h3>
+                        <p>{vaccine.slots.join(",")}</p>
+                    </div>
+                </div>
+            </Paper>
         </div>
-      </Paper>
-    </div>
-  );
-};
+    )
+}
 
-export default VaccineDataSingle;
+export default VaccineDataSingle
\ No newline at end of file

From f814188ac59c8c6fb4190fbe5819614f194c7a3d Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Mon, 24 May 2021 23:13:00 +0530
Subject: [PATCH 28/33] fixed data fetching using pincode and date :hammer:

---
 src/components/Home/Home.js                   |  23 +++
 .../SingleVaccineData/VaccineDataSingle.js    | 190 ++++++++++--------
 2 files changed, 125 insertions(+), 88 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 0fdfc0f..3995793 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -111,6 +111,28 @@ const Home = () => {
         .then((res) => res.json())
         .then((data) => {
           console.log(data);
+          const arena = data?.centers?.map((res) => ({
+            name: res?.name,
+            vaccine: res?.sessions?.slice(0, 1).map((res) => res?.vaccine),
+            block_name: res?.block_name,
+            district_name: res?.district_name,
+            state_name: res?.state_name,
+            pincode: res?.pincode,
+            from: res?.from,
+            to: res?.to,
+            available_capacity: res?.sessions
+              ?.slice(0, 1)
+              .map((res) => res?.available_capacity),
+            date: res?.sessions?.slice(0, 1).map((res) => res?.date),
+            min_age_limit: res?.sessions
+              ?.slice(0, 1)
+              .map((res) => res?.min_age_limit),
+            fee_type: res?.fee_type,
+            slots: res?.sessions?.slice(0, 1).map((res) => res.slots),
+          }));
+          console.log(arena);
+
+          setVaccineData(arena);
         });
     }
   };
@@ -125,6 +147,7 @@ const Home = () => {
         .then((res) => res.json())
         .then((data) => {
           console.log(data);
+          setVaccineData(data.sessions);
         });
     }
   };
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
index 3605709..17e7fa3 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
@@ -1,94 +1,108 @@
-import { makeStyles } from '@material-ui/core/styles';
-import Paper from '@material-ui/core/Paper';
-import Badge from '@material-ui/core/Badge';
-
-import HealingIcon from '@material-ui/icons/Healing';
-import VerifiedUserRoundedIcon from '@material-ui/icons/VerifiedUserRounded';
-
-import "./VaccineDataSingle.css"
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from "@material-ui/core/Paper";
+import Badge from "@material-ui/core/Badge";
+import HealingIcon from "@material-ui/icons/Healing";
+import VerifiedUserRoundedIcon from "@material-ui/icons/VerifiedUserRounded";
+import "./VaccineDataSingle.css";
 
 const useStyles = makeStyles((theme) => ({
-    paperMainDiv:{
-        width: "100%"
-    },
+  paperMainDiv: {
+    width: "100%",
+  },
 }));
-const VaccineDataSingle = (vaccine)=> {
-    const classes = useStyles();
-    return(
-        <div className={classes.paperMainDiv}>
-            <Paper variant="outlined" className="wrapper" style={{backgroundColor: "#E5E7EB", margin:"10px 0px"}}>
-                <div className="paper-left">
-                    <div>
-                        <h1>{vaccine.name} <VerifiedUserRoundedIcon style={{color: "#009E60"}}/></h1>
-                    </div>
-                    <hr/>
-                    <br/>
-                    <div className="paper-left_vaccine_head">
-                        <h3>Vaccine Name</h3>
-                        {vaccine.vaccine==="COVISHIELD"?(
-                            <p style={{backgroundColor:"skyblue",color:"white"}}>{vaccine.vaccine}</p>
-                        ):(
-                            <p style={{backgroundColor:"slateblue",color:"white"}}>{vaccine.vaccine}</p>
-                        )}
-                    </div>
+const VaccineDataSingle = (vaccine) => {
+  const classes = useStyles();
+  return (
+    <div className={classes.paperMainDiv}>
+      <Paper
+        variant="outlined"
+        className="wrapper"
+        style={{ backgroundColor: "#E5E7EB", margin: "10px 0px" }}
+      >
+        <div className="paper-left">
+          <div>
+            <h1>
+              {vaccine?.name}{" "}
+              <VerifiedUserRoundedIcon style={{ color: "#009E60" }} />
+            </h1>
+          </div>
+          <hr />
+          <br />
+          <div className="paper-left_vaccine_head">
+            <h3>Vaccine Name</h3>
+            {vaccine.vaccine === "COVISHIELD" ? (
+              <p style={{ backgroundColor: "skyblue", color: "white" }}>
+                {vaccine?.vaccine}
+              </p>
+            ) : (
+              <p style={{ backgroundColor: "slateblue", color: "white" }}>
+                {vaccine?.vaccine}
+              </p>
+            )}
+          </div>
 
-                    <div className="paper-left_content">
-                        <h3>address</h3>
-                        <p>{vaccine.block_name}, {vaccine.district_name}, {vaccine.state_name}</p>
-                    </div>
-                    <div className="paper-left_content">
-                        <h3>pincode</h3>
-                        <p>{vaccine.pincode}</p>
-                    </div>
-                    <div className="paper-left_time">
-                        <div className="open-time time">
-                            Opening Time: {vaccine.from}
-                        </div>
-                        <div className="close-time time">
-                            Closing Time: {vaccine.to}
-                        </div>
-                    </div>
-                </div>
-                <div className="paper-right">
-                    <div className="paper-right_Badges">
-                        <div className="paper-right_capacity">
-                            <Badge color="secondary" badgeContent={vaccine.available_capacity}>
-                                <h5>Available Capacity</h5> <HealingIcon className="healing_icon"/>
-                            </Badge>
-                        </div>
-                        <div>
-                            <p><span>Date:</span>{vaccine.date}</p>
-                        </div>
-                    </div>
-                    <div className="paper-right_age">
-                        <div className="age_text">
-                            <h3>Minimum Age</h3>
-                        </div>
-                        <div className="age_content">
-                            <p>{vaccine.min_age_limit} years</p>
-                        </div>
-                    </div>
-                    <div className="paper-right_age">
-                        <div className="age_text">
-                            <h3>Minimum Fare(₹)</h3>
-                        </div>
-                        <div className="age_content">
-                            {vaccine.fee_type==="Free"?(
-                                <p style={{color:"green"}}>{vaccine.fee_type} </p>
-                            ):(
-                                <p style={{color:"red"}}>{vaccine.fee_type} </p>
-
-                            )}
-                        </div>
-                    </div>
-                    <div className="paper-right_slots">
-                        <h3>Slots Available</h3>
-                        <p>{vaccine.slots.join(",")}</p>
-                    </div>
-                </div>
-            </Paper>
+          <div className="paper-left_content">
+            <h3>address</h3>
+            <p>
+              {vaccine?.block_name}, {vaccine?.district_name},{" "}
+              {vaccine?.state_name}
+            </p>
+          </div>
+          <div className="paper-left_content">
+            <h3>pincode</h3>
+            <p>{vaccine?.pincode}</p>
+          </div>
+          <div className="paper-left_time">
+            <div className="open-time time">Opening Time: {vaccine.from}</div>
+            <div className="close-time time">Closing Time: {vaccine.to}</div>
+          </div>
+        </div>
+        <div className="paper-right">
+          <div className="paper-right_Badges">
+            <div className="paper-right_capacity">
+              <Badge
+                color="secondary"
+                badgeContent={vaccine?.available_capacity}
+              >
+                <h5>Available Capacity</h5>{" "}
+                <HealingIcon className="healing_icon" />
+              </Badge>
+            </div>
+            <div>
+              <p>
+                <span>Date:</span>
+                {vaccine?.date}
+              </p>
+            </div>
+          </div>
+          <div className="paper-right_age">
+            <div className="age_text">
+              <h3>Minimum Age</h3>
+            </div>
+            <div className="age_content">
+              <p>{vaccine?.min_age_limit} years</p>
+            </div>
+          </div>
+          <div className="paper-right_age">
+            <div className="age_text">
+              <h3>Minimum Fare(₹)</h3>
+            </div>
+            <div className="age_content">
+              {vaccine.fee_type === "Free" ? (
+                <p style={{ color: "green" }}>{vaccine?.fee_type} </p>
+              ) : (
+                <p style={{ color: "red" }}>{vaccine?.fee_type} </p>
+              )}
+            </div>
+          </div>
+          <div className="paper-right_slots">
+            <h3>Slots Available</h3>
+            <p>{vaccine?.slots?.join(",")}</p>
+          </div>
         </div>
-    )
-}
+      </Paper>
+    </div>
+  );
+};
 
-export default VaccineDataSingle
\ No newline at end of file
+export default VaccineDataSingle;

From fdb358510a5e6e0adacc0eee113cab80d9c15279 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Tue, 25 May 2021 01:04:54 +0530
Subject: [PATCH 29/33] checkingsignedCommits

---
 src/components/Home/Home.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 0fdfc0f..89b6938 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -204,7 +204,7 @@ const Home = () => {
                       value={districtCode}
                       onChange={findByDistrict}
                     >
-                      <MenuItem disabled={true}>Select a State First</MenuItem>
+                      <MenuItem disabled={true}>Select a Statee First</MenuItem>
                     </Select>
                   </>
                 )}

From 414077d2d0ce507dd2c40fb3f60aa004cf67df05 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Tue, 25 May 2021 01:06:42 +0530
Subject: [PATCH 30/33] checkingsignedCommits

---
 src/components/Home/Home.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 89b6938..0fdfc0f 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -204,7 +204,7 @@ const Home = () => {
                       value={districtCode}
                       onChange={findByDistrict}
                     >
-                      <MenuItem disabled={true}>Select a Statee First</MenuItem>
+                      <MenuItem disabled={true}>Select a State First</MenuItem>
                     </Select>
                   </>
                 )}

From e47a283129a14c7028c344ba9f6b2df687b2680c Mon Sep 17 00:00:00 2001
From: Justin Varghese <69856008+Justinnn07@users.noreply.github.com>
Date: Tue, 25 May 2021 08:21:25 +0530
Subject: [PATCH 31/33] changed "arena" to "pincodeData"

---
 src/components/Home/Home.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 3995793..e1dd9c8 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -111,7 +111,7 @@ const Home = () => {
         .then((res) => res.json())
         .then((data) => {
           console.log(data);
-          const arena = data?.centers?.map((res) => ({
+          const pincodeData = data?.centers?.map((res) => ({
             name: res?.name,
             vaccine: res?.sessions?.slice(0, 1).map((res) => res?.vaccine),
             block_name: res?.block_name,
@@ -130,9 +130,9 @@ const Home = () => {
             fee_type: res?.fee_type,
             slots: res?.sessions?.slice(0, 1).map((res) => res.slots),
           }));
-          console.log(arena);
+          console.log(pincodeData);
 
-          setVaccineData(arena);
+          setVaccineData(pincodeData);
         });
     }
   };

From 47c91e456e9815ecbf1d3fa4dbf65023c5db0058 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Tue, 25 May 2021 08:27:34 +0530
Subject: [PATCH 32/33] changed arena to pincodeData and removed all console
 logs :fire:

---
 src/components/Home/Home.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index e1dd9c8..6b0a4e3 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -46,8 +46,6 @@ const Home = () => {
     setFormattedDate(finalDate);
   };
 
-  console.log(formattedDate);
-
   useEffect(() => {
     fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states")
       .then((res) => res.json())
@@ -97,7 +95,6 @@ const Home = () => {
       .then((data) => {
         setDistrictCode(districtCode);
         setVaccineData(data.sessions);
-        console.log(data);
       });
   };
 
@@ -110,7 +107,6 @@ const Home = () => {
       )
         .then((res) => res.json())
         .then((data) => {
-          console.log(data);
           const pincodeData = data?.centers?.map((res) => ({
             name: res?.name,
             vaccine: res?.sessions?.slice(0, 1).map((res) => res?.vaccine),
@@ -130,8 +126,6 @@ const Home = () => {
             fee_type: res?.fee_type,
             slots: res?.sessions?.slice(0, 1).map((res) => res.slots),
           }));
-          console.log(pincodeData);
-
           setVaccineData(pincodeData);
         });
     }

From 35ace5347379eb4604f8c52ff813e57aba99f825 Mon Sep 17 00:00:00 2001
From: himanshu <himanshujasuja1040@gmail.com>
Date: Tue, 25 May 2021 17:19:45 +0530
Subject: [PATCH 33/33] done

---
 .../SingleVaccineData/VaccineDataSingle.css   | 139 +++++++++++++++---
 1 file changed, 117 insertions(+), 22 deletions(-)

diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
index 1760f0d..06e7347 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
@@ -195,21 +195,120 @@ font-family: 'Ubuntu', sans-serif; */
 }
 
 /*Media Queries*/
+@media screen and (max-width: 1496px) {
+  .wrapper {
+    height: 37vh;
+  }
+}
 @media screen and (max-width: 1024px) {
   .wrapper {
-    height: 35vh;
+    height: 37vh;
   }
 }
-
-@media screen and (max-width: 850px) {
+@media screen and (max-width: 916px){
+  .paper-left .paper-left_content p {
+    font-size: 15px;
+  }
+  .paper-left .paper-left_time .open-time{
+    font-size: 15px;
+  }
+  .paper-left .paper-left_time .close-time{
+    font-size: 15px;
+  }
+}
+@media screen and (max-width: 890px) {
+  .paper-left h1{
+    font-size: 16px;
+  }
+  .paper-left .paper-left_time .open-time{
+    font-size: 13px;
+  }
+  .paper-left .paper-left_time .close-time{
+    font-size: 13px;
+  }
+  .MuiSvgIcon-root {
+    font-size: 1.18rem;
+}
+}
+@media screen and (max-width: 812px) {
   .wrapper {
     height: 40vh;
   }
+  .paper-left .paper-left_content p {
+    font-size: 12px;
+  }
+  .paper-left .paper-left_time{
+    margin-top: 20px;
+  }
+  .paper-left h1{
+    font-size: 14px;
+  }
+  .paper-right_Badges h5{
+    font-size: 16px;
+  }
+  .paper-right_slots p{
+    font-size: 15px;
+  }
+  .paper-left .paper-left_time .open-time{
+    font-size: 11px;
+  }
+  .paper-left .paper-left_time .close-time{
+    font-size: 11px;
+  }
 }
-
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 722px) {
+  .wrapper {
+    height: 42vh;
+  }
+ 
+  .paper-left .paper-left_time .open-time{
+    font-size: 10px;
+  }
+  .paper-left .paper-left_time .close-time{
+    font-size: 10px;
+  }
+  .paper-left .paper-left_content p {
+    font-size: 11px;
+  }
+  .paper-right_Badges p{
+    font-size: 12px;
+  }
+  .paper-left .paper-left_time{
+    margin-top: 30px;
+  }
+}
+@media screen and (max-width: 690px) {
   .wrapper {
-    height: 70vh;
+    height: 47vh;
+  }
+  .paper-left_vaccine_head h3{
+    font-size: 15px;
+  }
+  .paper-right_Badges h5 {
+    font-size: 14px;
+  }
+  .paper-right_Badges p {
+    font-size: 10px;
+  }
+  .paper-left .paper-left_content h3{
+    font-size: 13px;
+  }
+  .paper-left .paper-left_time .open-time{
+    font-size: 10px;
+  }
+  .paper-left .paper-left_time .close-time{
+    font-size: 10px;
+  }
+  .paper-left .paper-left_content p {
+    font-size: 11px;
+  }
+  .paper-right_Badges p{
+    font-size: 12px;
+  }
+}
+@media screen and (max-width: 646px) {
+  .wrapper {
+    height: 80vh;
     flex-direction: column;
   }
 
@@ -225,18 +324,24 @@ font-family: 'Ubuntu', sans-serif; */
     font-size: 15px;
     margin-bottom: 10px;
   }
-
+  .paper-left .paper-left_content h3{
+    font-size: 15px;
+  }
   .paper-left_vaccine_head p {
     padding: 5px;
     font-size: 15px;
     border-radius: 7px;
     text-align: center;
   }
-
+  .paper-left .paper-left_content p {
+    font-size: 15px;
+  }
   .paper-left p {
     width: 100%;
   }
-
+  .paper-left .paper-left_time{
+    margin-top: 20px;
+  }
   .paper-left .paper-left_content {
     display: flex;
     flex-direction: column;
@@ -246,6 +351,7 @@ font-family: 'Ubuntu', sans-serif; */
     display: flex;
     flex-direction: column;
     text-align: center;
+    letter-spacing: 2px;
   }
 
   .paper-left .paper-left_time .time {
@@ -259,7 +365,6 @@ font-family: 'Ubuntu', sans-serif; */
   .paper-right_Badges h5 {
     margin-top: 5px;
     margin-right: 3px;
-    color: aquamarine;
     font-weight: bold;
     font-size: 11px;
   }
@@ -270,7 +375,6 @@ font-family: 'Ubuntu', sans-serif; */
 
   .paper-right_Badges p {
     margin-top: 5px;
-    color: whitesmoke;
     font-size: 15px;
   }
 
@@ -287,13 +391,10 @@ font-family: 'Ubuntu', sans-serif; */
   }
 
   .paper-right_age .age_content {
-    /* background-color: rgb(222,49,99); */
-    background-color: red;
     height: 15px;
     width: 65px;
     padding: 3px;
     border-radius: 3px;
-    color: white;
   }
 
   .paper-right_age .age_content p {
@@ -304,25 +405,19 @@ font-family: 'Ubuntu', sans-serif; */
   .paper-right_slots h3 {
     text-align: center;
     font-weight: 700;
-    color: #bb86fc;
     margin: 3px;
   }
 
   .paper-right_slots p {
-    color: whitesmoke;
     font-size: 15px;
     text-align: center;
   }
 }
 
-@media screen and (max-width: 400px) {
+@media screen and (max-width: 502px) {
   .wrapper {
     height: 82vh;
   }
 }
 
-@media screen and (max-width: 360px) {
-  .wrapper {
-    height: 100vh;
-  }
-}
+