From d00780873ef6e3823fdd3c0cb59521b34e74565f Mon Sep 17 00:00:00 2001 From: stephin007 Date: Tue, 4 May 2021 22:37:41 +0530 Subject: [PATCH 1/7] Added Material Container --- .idea/.gitignore | 5 ++ .idea/Cowin-Vaccine-Availablity-Checker.iml | 12 ++++ .idea/modules.xml | 8 +++ .idea/vcs.xml | 6 ++ public/index.html | 25 +------- src/App.js | 2 +- src/components/Home.js | 62 -------------------- src/components/{ => Home}/Home.css | 12 ++-- src/components/Home/Home.js | 63 +++++++++++++++++++++ 9 files changed, 104 insertions(+), 91 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/Cowin-Vaccine-Availablity-Checker.iml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml delete mode 100644 src/components/Home.js rename src/components/{ => Home}/Home.css (89%) create mode 100644 src/components/Home/Home.js diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/Cowin-Vaccine-Availablity-Checker.iml b/.idea/Cowin-Vaccine-Availablity-Checker.iml new file mode 100644 index 0000000..0c8867d --- /dev/null +++ b/.idea/Cowin-Vaccine-Availablity-Checker.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..5109ee9 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/public/index.html b/public/index.html index aa069f2..d4b1e42 100644 --- a/public/index.html +++ b/public/index.html @@ -10,34 +10,11 @@ content="Web site created using create-react-app" /> - - - React App + CoWIN Vaccination Tracker
- diff --git a/src/App.js b/src/App.js index 6b341bd..b4f68eb 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,6 @@ import React from "react"; import "./App.css"; -import Home from "./components/Home"; +import Home from "./components/Home/Home"; const App = () => { return ( diff --git a/src/components/Home.js b/src/components/Home.js deleted file mode 100644 index 7c1c7de..0000000 --- a/src/components/Home.js +++ /dev/null @@ -1,62 +0,0 @@ -import React, { useEffect, useState } from "react"; -import "./Home.css"; -import { Slider, Typography } from "@material-ui/core"; -import { MenuItem, FormControl, Select } from "@material-ui/core"; - -function valuetext(value) { - return `${value}°C`; -} - -const Home = () => { - const [state, setState] = useState([]); - - useEffect(() => { - fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states") - .then((res) => res.json()) - .then((data) => { - setState(data.states); - }); - }, [setState]); - - console.info(state); - - return ( -
-

CoWIN Vaccination Slot Availablity

-
-

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

-
- -
-
- Select Date Range - -
-
- Select State - - - -
-
-
- ); -}; - -export default Home; diff --git a/src/components/Home.css b/src/components/Home/Home.css similarity index 89% rename from src/components/Home.css rename to src/components/Home/Home.css index d3ce4bc..02daed3 100644 --- a/src/components/Home.css +++ b/src/components/Home/Home.css @@ -1,18 +1,22 @@ +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); +} .home { color: white; - 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-position: center center; background-size: 100%; background-repeat: no-repeat; - height: 100vh; + height: calc(100vh - 20px); padding: 10px; } .home__info { - background-color: #122338; + background-color: #121212; padding: 15px; - color: #006bee; + color: #BB86FC; margin-top: 20px; + border-radius: 5px; } .home__optionLeft > .MuiSlider-root { diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js new file mode 100644 index 0000000..3e55924 --- /dev/null +++ b/src/components/Home/Home.js @@ -0,0 +1,63 @@ +import React, { useEffect, useState } from "react"; +import "./Home.css"; +import { Slider, Typography, Container, MenuItem, FormControl, Select } from "@material-ui/core"; + +function valuetext(value) { + return `${value}°C`; +} + +const Home = () => { + const [state, setState] = useState([]); + + useEffect(() => { + fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states") + .then((res) => res.json()) + .then((data) => { + setState(data.states); + }); + }, [setState]); + + console.info(state); + + return ( + +
+

CoWIN Vaccination Slot Availablity

+
+

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

+
+ +
+
+ Select Date Range + +
+
+ Select State + + + +
+
+
+ +); +}; + +export default Home; From fa30108b05c3af04542d05bed725998a874fc141 Mon Sep 17 00:00:00 2001 From: stephin007 Date: Tue, 4 May 2021 22:37:41 +0530 Subject: [PATCH 2/7] Added Material Container --- .idea/.gitignore | 5 ++ .idea/Cowin-Vaccine-Availablity-Checker.iml | 12 ++++ .idea/modules.xml | 8 +++ .idea/vcs.xml | 6 ++ public/index.html | 25 +------- src/App.js | 2 +- src/components/Home.js | 62 -------------------- src/components/{ => Home}/Home.css | 12 ++-- src/components/Home/Home.js | 63 +++++++++++++++++++++ 9 files changed, 104 insertions(+), 91 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/Cowin-Vaccine-Availablity-Checker.iml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml delete mode 100644 src/components/Home.js rename src/components/{ => Home}/Home.css (89%) create mode 100644 src/components/Home/Home.js diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/Cowin-Vaccine-Availablity-Checker.iml b/.idea/Cowin-Vaccine-Availablity-Checker.iml new file mode 100644 index 0000000..0c8867d --- /dev/null +++ b/.idea/Cowin-Vaccine-Availablity-Checker.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..5109ee9 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/public/index.html b/public/index.html index aa069f2..d4b1e42 100644 --- a/public/index.html +++ b/public/index.html @@ -10,34 +10,11 @@ content="Web site created using create-react-app" /> - - - React App + CoWIN Vaccination Tracker
- diff --git a/src/App.js b/src/App.js index 6b341bd..b4f68eb 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,6 @@ import React from "react"; import "./App.css"; -import Home from "./components/Home"; +import Home from "./components/Home/Home"; const App = () => { return ( diff --git a/src/components/Home.js b/src/components/Home.js deleted file mode 100644 index 7c1c7de..0000000 --- a/src/components/Home.js +++ /dev/null @@ -1,62 +0,0 @@ -import React, { useEffect, useState } from "react"; -import "./Home.css"; -import { Slider, Typography } from "@material-ui/core"; -import { MenuItem, FormControl, Select } from "@material-ui/core"; - -function valuetext(value) { - return `${value}°C`; -} - -const Home = () => { - const [state, setState] = useState([]); - - useEffect(() => { - fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states") - .then((res) => res.json()) - .then((data) => { - setState(data.states); - }); - }, [setState]); - - console.info(state); - - return ( -
-

CoWIN Vaccination Slot Availablity

-
-

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

-
- -
-
- Select Date Range - -
-
- Select State - - - -
-
-
- ); -}; - -export default Home; diff --git a/src/components/Home.css b/src/components/Home/Home.css similarity index 89% rename from src/components/Home.css rename to src/components/Home/Home.css index d3ce4bc..02daed3 100644 --- a/src/components/Home.css +++ b/src/components/Home/Home.css @@ -1,18 +1,22 @@ +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); +} .home { color: white; - 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-position: center center; background-size: 100%; background-repeat: no-repeat; - height: 100vh; + height: calc(100vh - 20px); padding: 10px; } .home__info { - background-color: #122338; + background-color: #121212; padding: 15px; - color: #006bee; + color: #BB86FC; margin-top: 20px; + border-radius: 5px; } .home__optionLeft > .MuiSlider-root { diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js new file mode 100644 index 0000000..3e55924 --- /dev/null +++ b/src/components/Home/Home.js @@ -0,0 +1,63 @@ +import React, { useEffect, useState } from "react"; +import "./Home.css"; +import { Slider, Typography, Container, MenuItem, FormControl, Select } from "@material-ui/core"; + +function valuetext(value) { + return `${value}°C`; +} + +const Home = () => { + const [state, setState] = useState([]); + + useEffect(() => { + fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states") + .then((res) => res.json()) + .then((data) => { + setState(data.states); + }); + }, [setState]); + + console.info(state); + + return ( + +
+

CoWIN Vaccination Slot Availablity

+
+

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

+
+ +
+
+ Select Date Range + +
+
+ Select State + + + +
+
+
+ +); +}; + +export default Home; From 866993a13eaece491990ad89aac333d61bd57457 Mon Sep 17 00:00:00 2001 From: stephin007 Date: Wed, 5 May 2021 02:02:29 +0530 Subject: [PATCH 3/7] Added responsive grid plus date picker --- README.md | 71 ++--------------------------- package.json | 3 ++ src/components/Home/Home.css | 3 +- src/components/Home/Home.js | 87 +++++++++++++++++++++++++++++------- yarn.lock | 49 ++++++++++++++++++-- 5 files changed, 125 insertions(+), 88 deletions(-) diff --git a/README.md b/README.md index 02aac3f..a1d2912 100644 --- a/README.md +++ b/README.md @@ -1,70 +1,5 @@ -# Getting Started with Create React App +# CoWIN Vaccination Slots Checking App. -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). +> TechStack - React JS, Material UI -## Available Scripts - -In the project directory, you can run: - -### `yarn start` - -Runs the app in the development mode.\ -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.\ -You will also see any lint errors in the console. - -### `yarn test` - -Launches the test runner in the interactive watch mode.\ -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. - -### `yarn build` - -Builds the app for production to the `build` folder.\ -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.\ -Your app is ready to be deployed! - -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -### `yarn eject` - -**Note: this is a one-way operation. Once you `eject`, you can’t go back!** - -If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. - -You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -To learn React, check out the [React documentation](https://reactjs.org/). - -### Code Splitting - -This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) - -### Analyzing the Bundle Size - -This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) - -### Making a Progressive Web App - -This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) - -### Advanced Configuration - -This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) - -### Deployment - -This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) - -### `yarn build` fails to minify - -This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) +_MORE INFO YET TO BE ADDED... STAY TUNED_ \ No newline at end of file diff --git a/package.json b/package.json index 6d2046c..6ec68bc 100644 --- a/package.json +++ b/package.json @@ -3,10 +3,13 @@ "version": "0.1.0", "private": true, "dependencies": { + "@date-io/date-fns": "1.3.13", "@material-ui/core": "^4.11.4", + "@material-ui/pickers": "^3.3.10", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", + "date-fns": "^2.21.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css index 02daed3..f657567 100644 --- a/src/components/Home/Home.css +++ b/src/components/Home/Home.css @@ -16,11 +16,12 @@ body{ padding: 15px; color: #BB86FC; margin-top: 20px; + margin-bottom: 20px; border-radius: 5px; } .home__optionLeft > .MuiSlider-root { - color: #e33060; + color: #e35060; width: 600px; } diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index 3e55924..0d8b19d 100644 --- a/src/components/Home/Home.js +++ b/src/components/Home/Home.js @@ -1,13 +1,40 @@ +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 "./Home.css"; -import { Slider, Typography, Container, MenuItem, FormControl, Select } from "@material-ui/core"; -function valuetext(value) { - return `${value}°C`; -} + +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('2021-04-30')) + const classes = useStyles() + + const handleDateChange = (date) => { + setSelectedDate(date) + } useEffect(() => { fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states") @@ -30,19 +57,47 @@ const Home = () => {

+ + + + + + + + + + + + + + + + + + + +
-
- Select Date Range - -
Select State diff --git a/yarn.lock b/yarn.lock index f972afb..52fd1a2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1098,7 +1098,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@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== @@ -1161,6 +1161,18 @@ resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18" integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg== +"@date-io/core@1.x", "@date-io/core@^1.3.13": + version "1.3.13" + resolved "https://registry.yarnpkg.com/@date-io/core/-/core-1.3.13.tgz#90c71da493f20204b7a972929cc5c482d078b3fa" + integrity sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA== + +"@date-io/date-fns@1.3.13": + version "1.3.13" + resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-1.3.13.tgz#7798844041640ab393f7e21a7769a65d672f4735" + integrity sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA== + dependencies: + "@date-io/core" "^1.3.13" + "@emotion/hash@^0.8.0": version "0.8.0" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" @@ -1419,6 +1431,18 @@ react-is "^16.8.0 || ^17.0.0" react-transition-group "^4.4.0" +"@material-ui/pickers@^3.3.10": + version "3.3.10" + resolved "https://registry.yarnpkg.com/@material-ui/pickers/-/pickers-3.3.10.tgz#f1b0f963348cc191645ef0bdeff7a67c6aa25485" + integrity sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w== + dependencies: + "@babel/runtime" "^7.6.0" + "@date-io/core" "1.x" + "@types/styled-jsx" "^2.2.8" + clsx "^1.0.2" + react-transition-group "^4.0.0" + rifm "^0.7.0" + "@material-ui/styles@^4.11.4": version "4.11.4" resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d" @@ -1893,6 +1917,13 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff" integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw== +"@types/styled-jsx@^2.2.8": + version "2.2.8" + resolved "https://registry.yarnpkg.com/@types/styled-jsx/-/styled-jsx-2.2.8.tgz#b50d13d8a3c34036282d65194554cf186bab7234" + integrity sha512-Yjye9VwMdYeXfS71ihueWRSxrruuXTwKCbzue4+5b2rjnQ//AtyM7myZ1BEhNhBQ/nL/RE7bdToUoLln2miKvg== + dependencies: + "@types/react" "*" + "@types/tapable@*", "@types/tapable@^1.0.5": version "1.0.6" resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74" @@ -3339,7 +3370,7 @@ cliui@^6.0.0: strip-ansi "^6.0.0" wrap-ansi "^6.2.0" -clsx@^1.0.4: +clsx@^1.0.2, clsx@^1.0.4: version "1.1.1" resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== @@ -3971,6 +4002,11 @@ data-urls@^2.0.0: whatwg-mimetype "^2.3.0" whatwg-url "^8.0.0" +date-fns@^2.21.1: + version "2.21.1" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.21.1.tgz#679a4ccaa584c0706ea70b3fa92262ac3009d2b0" + integrity sha512-m1WR0xGiC6j6jNFAyW4Nvh4WxAi4JF4w9jRJwSI8nBmNcyZXPcP9VUQG+6gHQXAmqaGEKDKhOqAtENDC941UkA== + debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" @@ -9271,7 +9307,7 @@ react-scripts@4.0.3: optionalDependencies: fsevents "^2.1.3" -react-transition-group@^4.4.0: +react-transition-group@^4.0.0, react-transition-group@^4.4.0: version "4.4.1" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9" integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw== @@ -9654,6 +9690,13 @@ rgba-regex@^1.0.0: resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3" integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM= +rifm@^0.7.0: + version "0.7.0" + resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.7.0.tgz#debe951a9c83549ca6b33e5919f716044c2230be" + integrity sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ== + dependencies: + "@babel/runtime" "^7.3.1" + rimraf@^2.5.4, rimraf@^2.6.3: version "2.7.1" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec" From 1ff9c5bc87eb0f5cf57c8fb546788bd75613e25d Mon Sep 17 00:00:00 2001 From: Justinnn07 Date: Wed, 5 May 2021 12:02:45 +0530 Subject: [PATCH 4/7] 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 5/7] 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 6/7] 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 7/7] 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())