1. import React, { useState, useEffect } from 'react'
2. import {
3.     Grid,
4.     Button,
5.     FormControlLabel,
6.     MenuItem,
7.     InputAdornment,
8. } from "@material-ui/core";
9. import { Form, Field } from "formik";
10. import {
11.     TextField,
12.     Switch
13. } from 'formik-material-ui';
14. import { withStyles, Theme, createStyles, WithStyles } from '@material-ui/core/styles';
15. import {universityService} from '../../_services'
16. import { City } from '../../_types/City.type';
17. import { University } from '../../_types/University.type';
18.  
19. const styles = ((theme: Theme) => createStyles({
20.     form: {
21.         display: 'flex',
22.         flexWrap: 'wrap',
23.         flexDirection: 'row'
24.     },
25.     textField: {
26.         marginLeft: theme.spacing(1),
27.         marginRight: theme.spacing(1),
28.     },
29.     dense: {
30.         marginTop: theme.spacing(2),
31.     }
32. }));
33.  
34. interface Props extends WithStyles<typeof styles> {
35.     submitForm: any;
36.     isSubmitting: any;
37.     values: any;
38.     setFieldValue: any;
39. }
40.  
41. interface UniversitySelectType {
42.         value: string;
43.         label: string;
44. }
45.  
46. interface CitySelectType {
47.         value: string;
48.         label: string;
49. }
50.  
51. interface State {
52.         cities: CitySelectType[];
53.     city: number;
54.     universities: UniversitySelectType[];
55.     university: number;
56.     email: string;
57.     driverLicense: false;
58. }
59.  
60. class EditProfileForm extends React.Component<Props, State> {
61.         constructor(props: Props) {
62.                 super(props);
63.                 this.state = {
64.             cities: [],
65.             city: 1,
66.                         universities: [],
67.             university: 1,
68.             email: "test",
69.             driverLicense: false
70.                 };
71.         }
72.  
73.         async componentDidMount() {
74.                 let universities: University[] = await universityService.getUniversities();
75.                 const transformedUniversities: UniversitySelectType[] = universities.map(university => ({
76.                         value: university.name,
77.                         label: university.name
78.         }));
79.        
80.         let cities: City[] = await universityService.getCities();
81.                 const transformedCities: CitySelectType[] = cities.map(city => ({
82.                         value: city.name,
83.                         label: city.name
84.         }));
85.        
86.         this.setState({ universities: transformedUniversities, cities: transformedCities});
87.         }
88.  
89.         render() {
90.                 const {
91.                         classes,
92.                         submitForm,
93.                         isSubmitting,
94.                         values,
95.                         setFieldValue
96.                 } = this.props;
97.  
98.     return (
99.         <div>
100.             <Form>
101.                 <Grid container>
102.                     <Grid container>
103.                         <Grid item xs={12} md={6}>
104.                             <Field
105.                                 id="university"
106.                                 name="university"
107.                                 label="Uniwersytet"
108.                                 type="text"
109.                                 select
110.                                 component={TextField}
111.                                 className={classes.textField}
112.                                 margin="normal"
113.                                 fullWidth
114.                                 >
115.                                 {this.state.universities.map(university => (
116.                                     <MenuItem
117.                                         key={university.value}
118.                                         value={university.value}
119.                                     >
120.                                         {university.label}
121.                                     </MenuItem>
122.                                 ))}
123.                             </Field>
124.                         </Grid>
125.                         <Grid item xs={12} md={6}>
126.                             <Field
127.                                id="city"
128.                                name="city"
129.                                type="text"
130.                                select
131.                                component={TextField}
132.                                className={classes.textField}
133.                                margin="normal"
134.                                label="Miasto"
135.                                fullWidth
136.                                >
137.                                {this.state.cities.map(city => (
138.                                    <MenuItem
139.                                        key={city.value}
140.                                        value={city.value}
141.                                    >
142.                                        {city.label}
143.                                    </MenuItem>
144.                                ))}
145.                            </Field>
146.                         </Grid>
147.                     </Grid>
148.  
149.                     <Grid container alignItems="center">
150.                         <Grid item xs={12} md={6}>
151.                             <FormControlLabel
152.                                 control={
153.                                     <Field label="Czy masz prawo jazdy?" name="haveDriverLicense" component={Switch} />
154.                                 }
155.                                 label="Czy masz prawo jazdy?"
156.                             />
157.                         </Grid>
158.                         <Grid item xs={12} md={6}>
159.                             <Field
160.                                 id="email"
161.                                 name="email"
162.                                 label="E-mail"
163.                                 type="text"
164.                                 component={TextField}
165.                                 className={classes.textField}
166.                                 margin="normal"
167.                                 fullWidth
168.                             />
169.                         </Grid>              
170.                         </Grid>
171.                     </Grid>
172.  
173.                 <Button
174.                     type="submit"
175.                     variant="contained"
176.                     color="primary"
177.                     disabled={isSubmitting}
178.                     onClick={submitForm}
179.                 >
180.                     Zapisz zmiany
181.                 </Button>
182.             </Form>
183.         </div>
184.     )
185. }
186. }
187. export default withStyles(styles)(EditProfileForm);
188.