Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | 61x 66x 66x 66x 66x 66x 66x 66x | import React, { useState } from 'react';
import axios from 'axios';
import Modal from '@material-ui/core/Modal';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import CountrySelect from './CountrySelect';
import useStyles from './styles';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import InputAdornment from '@material-ui/core/InputAdornment';
import HelpIcon from '@material-ui/icons/Help';
import Fade from '@material-ui/core/Fade';
const AddOrgModal = ({ open, onClose }) => {
const classes = useStyles();
const [orgProps, setOrgProps] = useState({});
const handleClose = (newOrg) => {
onClose(newOrg)
}
const handleSave = async () => {
try {
const response = await axios.post(`${process.env.REACT_APP_API_URL}/api/organizations/`, orgProps);
handleClose(response.data);
} catch (error) {
console.log(error.response);
}
}
const handleCountryChange = (country) => {
setOrgProps({ ...orgProps, country: country })
};
const handleInputChange = (event) => {
const { name, value } = event.target;
setOrgProps({ ...orgProps, [name]: value });
};
return (
<>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="transition-modal-title"
className={classes.modal}
>
<Fade in={open}>
<Grid container style={{ justifyContent: 'center', overflow:'scroll', height: '100%' }} className={classes.AddOrgStyle}>
<Grid item xs={1} />
<Grid
item xs={10}
container
direction='column'
>
<Typography variant='h1' style={{ textAlign: 'center' }}>Add Organization to the Civic Tech Index</Typography>
<Grid item xs={12}>
<Typography variant='h2'>Organization Detail</Typography>
<Typography variant='h3'>Organization Name:*</Typography>
<TextField size='small' id='organization-name' name='name' onChange={handleInputChange}></TextField>
<Typography variant='h3'>Parent Organization:</Typography>
<TextField size='small' id='parent-organization' name='parent_organization' onChange={handleInputChange}></TextField>
</Grid>
<Grid item xs={12}>
<Typography variant='h2'>Project URL</Typography>
<Typography variant='h3'>Website URL:*</Typography>
<TextField size='small' id='project-website-url' name='website_url' onChange={handleInputChange}></TextField>
<Typography variant='h3'>Github URL:*</Typography>
<TextField size='small' id='project-github-url' name='github_url' onChange={handleInputChange}></TextField>
</Grid>
<Grid item xs={12}>
<Typography variant='h2'>Social Media URL</Typography>
<Typography variant='h3'>Facebook URL:</Typography>
<TextField size='small' id='facebook-url' name='facebook_url' onChange={handleInputChange}></TextField>
<Typography variant='h3'>Twitter URL:</Typography>
<TextField size='small' id='twitter-url' name='twitter_url' onChange={handleInputChange}></TextField>
<Typography variant='h3'>MeetUp URL:</Typography>
<TextField size='small' id='meetup-url' name='meetup_url' onChange={handleInputChange}></TextField>
</Grid>
<Grid item xs={12}>
<Typography variant='h2'>Location</Typography>
</Grid>
<Grid container item xs={12} spacing={2}>
<Grid item xs={12} sm={4}>
<Typography variant='h3'>City</Typography>
<TextField size='small' id='location-city' name='city' onChange={handleInputChange}></TextField>
</Grid>
<Grid item xs={12} sm={3}>
<Typography variant='h3'>State/Prov./Co.</Typography>
<TextField size='small' id='location-state-prov-co' name='state' onChange={handleInputChange}></TextField>
</Grid>
<Grid item xs={12} sm={5}>
<Typography variant='h3'>Country:</Typography>
<CountrySelect style={{ width: '100%' }} onChange={handleCountryChange}/>
</Grid>
</Grid>
<Grid item xs={12}>
<Typography variant='h2'>Github Tags</Typography>
<TextField
size='small'
id='github-tags'
name='org_tag'
InputProps={{
endAdornment: (
<InputAdornment position='start'>
<HelpIcon style={{ blend: 'pass-through' }}/>
</InputAdornment>
),
}}
onChange={handleInputChange}
>
</TextField>
</Grid>
<Grid item xs={12}>
<Typography variant='h2'>Organization Email*</Typography>
<TextField size='small' id='organization-email' name='organization_email' onChange={handleInputChange}></TextField>
</Grid>
{/* //Buttons */}
<Grid container justify='center' alignItems='center' style={{ height: '100px', padding: '40px 0px' }}>
<Grid style={{ textAlign: 'center' }}>
<Button
style={{ width: '270px', padding: '10px', margin: '12px' }}
variant='contained'
color='default'
onClick={() => handleClose(null)}
>
Cancel
</Button>
</Grid>
<Grid style={{ textAlign: 'center' }}>
<Button
style={{ width: '270px', padding: '10px', margin: '12px' }}
variant='contained'
color='secondary'
onClick={() => handleSave()}
>
Save
</Button>
</Grid>
</Grid>
</Grid>
<Grid item xs={1} />
</Grid>
</Fade>
</Modal>
</>
);
};
export default AddOrgModal;
|