Facebook
From Toxic Teal, 6 Months ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 63
  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.