Skip to content

Commit 04b2404

Browse files
UIcoder511UIcoder511
committed
first commit
1 parent c0e8c74 commit 04b2404

12 files changed

+533
-97
lines changed

‎package-lock.json

+357
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+6
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,15 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@apollo/client": "^3.1.5",
7+
"@material-ui/core": "^4.11.0",
8+
"@material-ui/icons": "^4.9.1",
9+
"@material-ui/lab": "^4.0.0-alpha.56",
610
"@testing-library/jest-dom": "^4.2.4",
711
"@testing-library/react": "^9.5.0",
812
"@testing-library/user-event": "^7.2.1",
13+
"axios": "^0.20.0",
14+
"graphql": "^15.3.0",
915
"react": "^16.13.1",
1016
"react-dom": "^16.13.1",
1117
"react-scripts": "3.4.3"

‎src/App.css

-38
Original file line numberDiff line numberDiff line change
@@ -1,38 +0,0 @@
1-
.App {
2-
text-align: center;
3-
}
4-
5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
8-
}
9-
10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
14-
}
15-
16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
25-
}
26-
27-
.App-link {
28-
color: #61dafb;
29-
}
30-
31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
38-
}

‎src/App.js

+33-18
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,39 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
1+
import { Grid, makeStyles } from "@material-ui/core";
2+
import React, { useEffect, useState } from "react";
3+
// import "./App.css";
4+
import SelectCountry from "./Components/SelectCountry";
5+
6+
const useStyles = makeStyles((theme) => ({
7+
root: {
8+
// flexGrow: 1,
9+
display: "flex",
10+
margin: "auto",
11+
padding: theme.spacing(5, 0, 0, 0),
12+
},
13+
selectCountry: {
14+
display: "flex",
15+
justifyContent: "center",
16+
},
17+
}));
418

519
function App() {
20+
// const [countries, setCountries] = useState([]);
21+
const classes = useStyles();
622
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.js</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
23+
<div className={classes.root}>
24+
{/* <Grid container>
25+
<Grid item xs={12}>
26+
Logo
27+
</Grid>
28+
</Grid> */}
29+
<Grid container spacing={3}>
30+
<Grid item xs={1} />
31+
32+
<Grid item xs={10} className={classes.selectCountry}>
33+
<SelectCountry />
34+
</Grid>
35+
<Grid item xs={1} />
36+
</Grid>
2237
</div>
2338
);
2439
}

‎src/App.test.js

-9
This file was deleted.

‎src/Components/Config/APIconfig.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const config = (data) => ({
2+
method: "post",
3+
url: "https://api-corona.azurewebsites.net/graphql",
4+
headers: {
5+
"Content-Type": "application/json",
6+
},
7+
data: data,
8+
});
9+
10+
export default config;

‎src/Components/Map.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from "react";
2+
3+
function Map() {
4+
return <div></div>;
5+
}
6+
7+
export default Map;

‎src/Components/SelectCountry.js

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import React, { useEffect, useState } from "react";
2+
import TextField from "@material-ui/core/TextField";
3+
// import Autocomplete from "@material-ui/lab/Autocomplete";
4+
import { makeStyles } from "@material-ui/core/styles";
5+
import { Autocomplete } from "@material-ui/lab";
6+
7+
import Config from "./Config/APIconfig";
8+
9+
import axios from "axios";
10+
import { CircularProgress } from "@material-ui/core";
11+
12+
const useStyles = makeStyles({
13+
root: {
14+
width: "50%",
15+
},
16+
option: {},
17+
});
18+
19+
const data = {
20+
query: `{
21+
countriesCode {
22+
Country
23+
}
24+
}`,
25+
};
26+
27+
function SelectCountry() {
28+
const [open, setopen] = useState(false);
29+
const [countries, setCountries] = useState([]);
30+
const initial = { Country: "Global" };
31+
const [country, setCountry] = useState(initial);
32+
const classes = useStyles();
33+
34+
useEffect(() => {
35+
axios(Config(data))
36+
.then(function (response) {
37+
response.data.data.countriesCode.unshift(initial);
38+
const data = response.data.data.countriesCode;
39+
setCountries(data);
40+
setopen(true);
41+
})
42+
.catch(function (error) {
43+
console.log(error.message);
44+
});
45+
}, []);
46+
47+
return (
48+
<>
49+
<Autocomplete
50+
className={classes.root}
51+
// value={}
52+
// fullWidth
53+
// className={classes.autocomp}
54+
id="country-select"
55+
// style={{ width: 300 }}
56+
options={countries}
57+
onChange={(e, v) => setCountry(v)}
58+
// open={open}
59+
// inputValue="global"
60+
// getOptionSelected={(o, v) => o.Country === v.Country}
61+
disableClearable
62+
defaultValue={open ? countries[0] : { Country: "Global" }}
63+
loading={!open}
64+
classes={{
65+
option: classes.option,
66+
}}
67+
// autoHighlight
68+
getOptionLabel={(option) => option.Country}
69+
renderOption={(option) => (
70+
<>
71+
{option.Country}
72+
{/* <span>{countryToFlag(option.code)}</span> */}
73+
{/* {option.country} ({option.code}) +{option.phone} */}
74+
</>
75+
)}
76+
renderInput={(params) => (
77+
<TextField
78+
{...params}
79+
label="Choose a country"
80+
// placeholder="ss"
81+
variant="outlined"
82+
defaultValue="India"
83+
InputProps={{
84+
...params.InputProps,
85+
endAdornment: (
86+
<React.Fragment>
87+
{!open ? (
88+
<CircularProgress color="inherit" size={20} />
89+
) : null}
90+
{params.InputProps.endAdornment}
91+
</React.Fragment>
92+
),
93+
}}
94+
/>
95+
)}
96+
/>
97+
</>
98+
);
99+
}
100+
101+
export default SelectCountry;

‎src/index.css

-13
Original file line numberDiff line numberDiff line change
@@ -1,13 +0,0 @@
1-
body {
2-
margin: 0;
3-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5-
sans-serif;
6-
-webkit-font-smoothing: antialiased;
7-
-moz-osx-font-smoothing: grayscale;
8-
}
9-
10-
code {
11-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12-
monospace;
13-
}

‎src/index.js

+19-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import './index.css';
4-
import App from './App';
5-
import * as serviceWorker from './serviceWorker';
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
// import "./index.css";
4+
import App from "./App";
5+
import * as serviceWorker from "./serviceWorker";
6+
import { createMuiTheme, CssBaseline, ThemeProvider } from "@material-ui/core";
7+
import SelectCountry from "./Components/SelectCountry";
8+
9+
const theme = createMuiTheme({
10+
palette: {
11+
type: "dark",
12+
},
13+
});
614

715
ReactDOM.render(
816
<React.StrictMode>
9-
<App />
17+
<ThemeProvider theme={theme}>
18+
<CssBaseline />
19+
<App />
20+
{/* <SelectCountry /> */}
21+
</ThemeProvider>
1022
</React.StrictMode>,
11-
document.getElementById('root')
23+
document.getElementById("root")
1224
);
1325

1426
// If you want your app to work offline and load faster, you can change

‎src/logo.svg

-7
This file was deleted.

‎src/setupTests.js

-5
This file was deleted.

0 commit comments

Comments
 (0)