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 | 61x 1346x 1346x 1346x 1346x 6x 6x 1x 5x 3x 2x 1346x 1346x 60x 66x 2x 1218x 1346x 73x | /* eslint-disable complexity */
/* eslint-disable max-lines-per-function */
import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import useStyles from './styles';
import axios from 'axios';
import { Box } from '@material-ui/core';
const SubscribeSection = ({ size }) => {
const classes = useStyles();
const [inputValue, setInputValue] = useState('');
const [message, setMessage] = useState('');
const submitEmail = (event) => {
event.preventDefault();
/* TODO: This needs to be passed via build arguments */
axios
.post(`${process.env.REACT_APP_API_URL}/api/subscribe/`, {
email_address: inputValue,
notification_type: 'string',
})
.then((response) => {
setMessage('success');
})
.catch((error) => {
if (error.response.data.email_address) {
setMessage('error');
} else {
setMessage('duplicate');
}
});
};
const messageSwitch = (param) => {
switch (param) {
case 'duplicate':
return (
<Typography variant='body2' className={classes.errorMessage}>
That email address has already been registered with us.
</Typography>
);
case 'error':
return (
<Typography variant='body2' className={classes.errorMessage}>
The email address you have submitted was invalid.
<br />
Please check the format and resubmit.
</Typography>
);
case 'success':
return (
<Typography variant='h5' color='textSecondary' className={classes.successMessage}>
Thanks for subscribing!
<br />
We will be in touch soon.
</Typography>
);
default:
return null;
}
};
return (
message === 'success' ? (
<Box>
{messageSwitch(message)}
</Box>
) : (
<Box >
<Grid container className={size === 'lg' ? classes.subscribeSectionLarge : classes.subscribeSectionSmall} >
<Grid className={size === 'lg' ? null : classes.newsLetter} >
<Typography
variant='body2'
color='textSecondary'
className={size !== 'lg'
? `${classes.sectionPaddingSm}`
: `${classes.sectionPaddingLg}`
}
>
Newsletter
</Typography>
<Typography
variant='body1'
color='textSecondary'
className={classes.sectionPaddingLg}
>
To receive updates about new projects and trending topics on the index, subscribe here.
</Typography>
</Grid>
<form onSubmit={submitEmail} >
<Typography
variant='body2'
color='textSecondary'
className={size !== 'lg'
? `${classes.sectionPaddingSm}`
: `${classes.sectionPaddingLg}`
}>
E-mail
</Typography>
<Grid className={size === 'lg' ? null : classes.emailSubscribe} >
<TextField
onInput={(e) => setInputValue(e.target.value)}
placeholder='name@domain.com'
type='email'
variant='outlined'
className={size !== 'lg'
? `${classes.sectionPaddingSm}`
: `${classes.sectionPaddingLg}`
}
/>
<Button color='primary' onClick={submitEmail} className={classes.submitBtn}>Submit</Button>
</Grid>
</form>
{messageSwitch(message)}
</Grid>
</Box>
)
);
};
export default SubscribeSection;
|