From 1ff9c5bc87eb0f5cf57c8fb546788bd75613e25d Mon Sep 17 00:00:00 2001 From: Justinnn07 Date: Wed, 5 May 2021 12:02:45 +0530 Subject: [PATCH 1/4] initial commit :fire: --- src/components/Home/Home.css | 50 +++++--- src/components/Home/Home.js | 222 +++++++++++++++++++++++------------ 2 files changed, 175 insertions(+), 97 deletions(-) diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css index f657567..5b7d3b8 100644 --- a/src/components/Home/Home.css +++ b/src/components/Home/Home.css @@ -1,4 +1,4 @@ -body{ +body { background-color: #121212; background-image: url(https://bioengineering.stanford.edu/sites/g/files/sbiybj17086/files/styles/breakpoint_2xl_2x/public/media/image/covid-19-5000501_1920_0.jpg?itok=s9XVFV61); } @@ -14,17 +14,12 @@ body{ .home__info { background-color: #121212; padding: 15px; - color: #BB86FC; + color: #bb86fc; margin-top: 20px; margin-bottom: 20px; border-radius: 5px; } -.home__optionLeft > .MuiSlider-root { - color: #e35060; - width: 600px; -} - .home__optionLeft { padding: 10px; margin-top: 10px; @@ -32,16 +27,13 @@ body{ } .home__option { - padding: 10px; - display: flex; - align-items: center; - justify-content: space-between; + margin: 10px; } -.home__optionRight > .MuiFormControl-root { +.text > .MuiFormControl-root { background-color: #31333f; color: white !important; - width: 600px; + width: 500px; outline: 0 !important; border-radius: 10px; } @@ -50,13 +42,10 @@ body{ color: white !important; } -@media (max-width: 600px) { - .home__optionLeft > .MuiSlider-root { - color: #e33060; - width: 150px; - } +@media (max-width: 800px) { .home__optionRight > .MuiFormControl-root { - width: 150px; + width: 280px; + margin-left: 10px; } .home__info { border-radius: 10px; @@ -65,8 +54,31 @@ body{ background-size: 300%; height: 100vh; } + + .home__optionRight { + display: flex; + flex-direction: column; + } + .text > .MuiFormControl-root { + background-color: #31333f; + color: white !important; + width: 280px; + outline: 0 !important; + border-radius: 10px; + } } body::-webkit-scrollbar { display: none; } + +.home__optionRight { + display: flex; + align-items: center; + justify-content: center; +} + +.text { + display: flex; + flex-direction: column; +} diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index 0d8b19d..33433ba 100644 --- a/src/components/Home/Home.js +++ b/src/components/Home/Home.js @@ -1,118 +1,184 @@ -import 'date-fns'; +import "date-fns"; import React, { useEffect, useState } from "react"; -import {Grid, Typography, Container, MenuItem, FormControl, Select, Paper, TextField } from "@material-ui/core"; -import {MuiPickersUtilsProvider, KeyboardDatePicker} from '@material-ui/pickers'; -import { makeStyles } from '@material-ui/core/styles'; -import DateFnsUtils from '@date-io/date-fns'; +import { + Grid, + Typography, + Container, + MenuItem, + FormControl, + Select, + Paper, + TextField, +} from "@material-ui/core"; +import { + MuiPickersUtilsProvider, + KeyboardDatePicker, +} from "@material-ui/pickers"; +import { makeStyles } from "@material-ui/core/styles"; +import DateFnsUtils from "@date-io/date-fns"; import "./Home.css"; - const useStyles = makeStyles((theme) => ({ input: { - color: "#BB86FC" + color: "#BB86FC", + }, + textfield: { + color: "#BB86FC", + height: "50px", + width: "248px", + padding: "0px 0px 0px 0px", + margin: "-5px 0px 0px 0px", }, - textfield: { - color: "#BB86FC", - height: "50px", - width: "248px", - padding: "0px 0px 0px 0px", - margin: "-5px 0px 0px 0px" - }, paper: { height: 70, width: 250, backgroundColor: "#31333F", - padding: "0px 10px 0px 10px" - } + padding: "0px 10px 0px 10px", + }, })); const Home = () => { const [state, setState] = useState([]); - const [selectedDate, setSelectedDate] = useState(new Date('2021-04-30')) - const classes = useStyles() + const [selectedDate, setSelectedDate] = useState(new Date("2021-04-30")); + const [stateCode, setStateCode] = useState("States"); + const [district, setDistricts] = useState([]); + const [districtCode, setDistrictCode] = useState("Districts"); + const [vaccinedData, setVaccinatedData] = useState([]); + const classes = useStyles(); const handleDateChange = (date) => { - setSelectedDate(date) - } + setSelectedDate(date); + }; useEffect(() => { fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states") - .then((res) => res.json()) - .then((data) => { - setState(data.states); - }); + .then((res) => res.json()) + .then((data) => { + setState(data.states); + }); }, [setState]); - console.info(state); + console.log(vaccinedData); + + const onStateChange = async (e) => { + const stateCode = e.target.value; + const url = + stateCode === "States" + ? "https://cdn-api.co-vin.in/api/v2/admin/location/states" + : `https://cdn-api.co-vin.in/api/v2/admin/location/districts/${stateCode}`; + await fetch(url) + .then((response) => response.json()) + .then((data) => { + setStateCode(stateCode); + setDistricts(data.districts); + }); + }; + + const onDistrictChange = async (e) => { + const stateCode = e.target.value; + const url = + stateCode === "Districts" + ? "https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByDistrict?district_id=512&date=31-03-2021" + : `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByDistrict?district_id=${stateCode}&date=31-03-2021 + `; + await fetch(url) + .then((response) => response.json()) + .then((data) => { + setDistrictCode(stateCode); + setVaccinatedData(data); + }); + }; return ( - -
-

CoWIN Vaccination Slot Availablity

-
-

- The CoWIN APIs are geo fenced, so sometimes you may not see an output! - Please try after sometime -

-
+ +
+

CoWIN Vaccination Slot Availablity

+
+

+ The CoWIN APIs are geo fenced, so sometimes you may not see an + output! Please try after sometime +

+
- - - - +
+
+
+ Select State + + + +
+
+ Select District + + + +
+
+
+ + + + - + - + + + - - - - -
-
- Select State - - -
-
-
- -); + + ); }; export default Home; From c9028647a3ac8708f278f594d6bda7ab0607852a Mon Sep 17 00:00:00 2001 From: Justinnn07 Date: Wed, 5 May 2021 13:04:20 +0530 Subject: [PATCH 2/4] initial commit :fire: --- README.md | 4 ++- src/components/Home/Home.css | 33 +++++++++++++++-- src/components/Home/Home.js | 70 ++++++++++++++++++------------------ 3 files changed, 67 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index a1d2912..352bb22 100644 --- a/README.md +++ b/README.md @@ -2,4 +2,6 @@ > TechStack - React JS, Material UI -_MORE INFO YET TO BE ADDED... STAY TUNED_ \ No newline at end of file +_MORE INFO YET TO BE ADDED... STAY TUNED_ + +### Please check the Projects section to see the progress and the discussion panel to add your ideas, which will eventually be picked up for development diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css index 5b7d3b8..106c7d9 100644 --- a/src/components/Home/Home.css +++ b/src/components/Home/Home.css @@ -1,6 +1,11 @@ body { - background-color: #121212; - background-image: url(https://bioengineering.stanford.edu/sites/g/files/sbiybj17086/files/styles/breakpoint_2xl_2x/public/media/image/covid-19-5000501_1920_0.jpg?itok=s9XVFV61); + background: rgb(225, 69, 148); + background: linear-gradient( + 90deg, + rgba(225, 69, 148, 1) 0%, + rgba(43, 53, 149, 1) 35%, + rgba(112, 69, 175, 1) 100% + ); } .home { color: white; @@ -33,14 +38,19 @@ body { .text > .MuiFormControl-root { background-color: #31333f; color: white !important; - width: 500px; + 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 { @@ -66,6 +76,17 @@ body { 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 { @@ -82,3 +103,9 @@ body::-webkit-scrollbar { display: flex; flex-direction: column; } + +.date__picker { + display: flex; + align-items: center; + margin-top: 20px; +} diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index 33433ba..01f5707 100644 --- a/src/components/Home/Home.js +++ b/src/components/Home/Home.js @@ -136,46 +136,44 @@ const Home = () => {
- - - - - - - - - + + + + + + + + + + + - - - - - - - + + - - - + + + ); From e1cb482b76257b5def20df75661b08dd0a195d3d Mon Sep 17 00:00:00 2001 From: Justinnn07 Date: Wed, 5 May 2021 13:14:15 +0530 Subject: [PATCH 3/4] initial commit :fire: --- src/components/Home/Home.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index 01f5707..1a5f5ca 100644 --- a/src/components/Home/Home.js +++ b/src/components/Home/Home.js @@ -65,7 +65,7 @@ const Home = () => { const stateCode = e.target.value; const url = stateCode === "States" - ? "https://cdn-api.co-vin.in/api/v2/admin/location/states" + ? "https://cdn-api.co-vin.in/api/v2/admin/location/districts/6" : `https://cdn-api.co-vin.in/api/v2/admin/location/districts/${stateCode}`; await fetch(url) .then((response) => response.json()) @@ -79,7 +79,7 @@ const Home = () => { const stateCode = e.target.value; const url = stateCode === "Districts" - ? "https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByDistrict?district_id=512&date=31-03-2021" + ? null : `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByDistrict?district_id=${stateCode}&date=31-03-2021 `; await fetch(url) From 9a44a4a6858786e21b949134d90417d084778fb3 Mon Sep 17 00:00:00 2001 From: Justinnn07 Date: Wed, 5 May 2021 13:52:11 +0530 Subject: [PATCH 4/4] initial commit :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 1a5f5ca..9ab8cdb 100644 --- a/src/components/Home/Home.js +++ b/src/components/Home/Home.js @@ -65,7 +65,7 @@ const Home = () => { const stateCode = e.target.value; const url = stateCode === "States" - ? "https://cdn-api.co-vin.in/api/v2/admin/location/districts/6" + ? "https://cdn-api.co-vin.in/api/v2/admin/location/districts/99" : `https://cdn-api.co-vin.in/api/v2/admin/location/districts/${stateCode}`; await fetch(url) .then((response) => response.json())