Revert "Revert "Added feedback form and sitemap to the footer"" #327
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| REACT_APP_FORMSPREE_FORM_CODE = moqgpayj | ||
| REACT_APP_GITHUB_REPO_URL = https://github.com/shravan20/github-readme-quotes | ||
| REACT_APP_CONTACT_EMAIL = [email protected] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import React from "react"; | ||
| import Grid from '@material-ui/core/Grid'; | ||
| import Box from '@material-ui/core/Box'; | ||
| import TextField from '@material-ui/core/TextField'; | ||
| import Typography from '@material-ui/core/Typography'; | ||
| import Button from '@material-ui/core/Button'; | ||
| import Link from '@material-ui/core/Link'; | ||
| import Paper from '@material-ui/core/Paper'; | ||
| import { useForm } from '@formspree/react'; | ||
| import ResponseSuccess from "./ResponseSuccess"; | ||
|
|
||
|
|
||
| const GITHUB_REPO_URL = process.env.REACT_APP_GITHUB_REPO_URL || 'https://github.com/shravan20/github-readme-quotes'; | ||
| const CONTACT_EMAIL = process.env.REACT_APP_CONTACT_EMAIL || '[email protected]'; | ||
|
|
||
| const Footer = () => { | ||
| const [state, handleSubmitFormspree] = useForm(process.env.REACT_APP_FORMSPREE_FORM_CODE); | ||
| return ( | ||
| <Grid container> | ||
| <Grid item xs={12} md={6}> | ||
| {state.succeeded && <ResponseSuccess />} | ||
| <Box id="feedback-form"> | ||
| {!state.succeeded && <form onSubmit={handleSubmitFormspree}> | ||
| <Grid container> | ||
| <Grid item xs={12}> | ||
| <Typography variant="h5" gutterBottom color="primary"> | ||
| <Box sx={{ fontWeight: 'bold' }} display='inline'> | ||
| Drop us a message: | ||
| </Box> | ||
| </Typography> | ||
| </Grid> | ||
| <Grid item xs={12} sm={6}> | ||
| <TextField id="name" label="Your Name" name="name" variant="outlined" required style={{ marginBottom: '10px' }} /> | ||
| </Grid> | ||
| <Grid item xs={12} sm={6}> | ||
| <TextField id="email" label="E-mail Address" name="email" type="email" required variant="outlined" style={{ marginBottom: '10px' }} /> | ||
| </Grid> | ||
| <Grid item xs={12}> | ||
| <TextField id="message" label="Message" variant="outlined" name="message" fullWidth multiline required style={{ marginBottom: '10px' }} /> | ||
| </Grid> | ||
| <Grid item xs={12}> | ||
| <Button type="submit" disabled={state.submitting} variant="contained" color="primary" size="large" fullWidth> | ||
| SEND US A MESSAGE | ||
| </Button> | ||
| </Grid> | ||
| </Grid> | ||
| </form>} | ||
| </Box> | ||
| </Grid> | ||
| <Grid item xs={12} md={6}> | ||
| <Paper id="sitemap" style={{ marginLeft: '30px', height: '90%', padding: '20px' }} elevation={9}> | ||
| <Typography variant="h5" gutterBottom color="primary"> | ||
| <Box sx={{ fontWeight: 'bold' }} display='inline'> | ||
| Sitemap | ||
| </Box> | ||
| </Typography> | ||
| <Link href={`${GITHUB_REPO_URL}`} display="block" style={{ marginBottom: '10px' }} color="textSecondary"> | ||
| About Us | ||
| </Link> | ||
| <Link href={`mailto:${CONTACT_EMAIL}`} display="block" style={{ marginBottom: '10px' }} color="textSecondary"> | ||
| Contact Us | ||
| </Link> | ||
| <Link href={`${GITHUB_REPO_URL}/blob/main/LICENSE`} display="block" style={{ marginBottom: '10px' }} color="textSecondary"> | ||
| Terms and Conditions | ||
| </Link> | ||
| </Paper> | ||
| </Grid> | ||
| </Grid> | ||
| ) | ||
| } | ||
|
|
||
| export default Footer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,26 @@ | ||||||||||||||||||||||||||
| import React from "react"; | ||||||||||||||||||||||||||
| import Paper from '@material-ui/core/Paper'; | ||||||||||||||||||||||||||
| import Typography from '@material-ui/core/Typography'; | ||||||||||||||||||||||||||
| import { makeStyles } from '@material-ui/core/styles'; | ||||||||||||||||||||||||||
| import PropTypes from 'prop-types'; | ||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
| const useStyles = makeStyles((theme) => ({ | ||||||||||||||||||||||||||
| paper: { | ||||||||||||||||||||||||||
| height: '90%', | ||||||||||||||||||||||||||
| display: 'flex', | ||||||||||||||||||||||||||
| alignItems: 'center', | ||||||||||||||||||||||||||
| justifyContent: 'center', | ||||||||||||||||||||||||||
| backgroundColor: '#DBE2E9', | ||||||||||||||||||||||||||
| }, | ||||||||||||||||||||||||||
| })); | ||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
| function ResponseSuccess(){ | ||||||||||||||||||||||||||
| const classes = useStyles(); | ||||||||||||||||||||||||||
| return (<Paper className={classes.paper}> | ||||||||||||||||||||||||||
| <Typography variant="h6" color="primary" gutterBottom>Your response has been recorded successfully!</Typography> | ||||||||||||||||||||||||||
| </Paper>) | ||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||
|
Comment on lines
+17
to
+22
There was a problem hiding this comment. 🛠️ Refactor suggestion Enhance component flexibility and accessibility The component structure is good, but consider these improvements:
Apply this diff to implement these suggestions: -function ResponseSuccess(){
+function ResponseSuccess({ message = "Your response has been recorded successfully!" }){
const classes = useStyles();
- return (<Paper className={classes.paper}>
- <Typography variant="h6" color="primary" gutterBottom>Your response has been recorded successfully!</Typography>
+ return (<Paper className={classes.paper} aria-label="Success message">
+ <Typography variant="h6" color="primary" gutterBottom>{message}</Typography>
</Paper>)
}📝 Committable suggestion
Suggested change
|
||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
| ResponseSuccess.propTypes = {}; | ||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
| export default ResponseSuccess; | ||||||||||||||||||||||||||
|
Comment on lines
+24
to
+26
There was a problem hiding this comment. Add PropTypes for message prop Now that we've added a Apply this diff to add PropTypes for the message prop: +import PropTypes from 'prop-types';
function ResponseSuccess({ message = "Your response has been recorded successfully!" }){
// ... component code ...
}
-ResponseSuccess.propTypes = {};
+ResponseSuccess.propTypes = {
+ message: PropTypes.string
+};
export default ResponseSuccess;
|
||||||||||||||||||||||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Enhance style consistency using theme spacing
While the styles are well-defined, consider using theme spacing for consistency with Material-UI's design system. This will make the component more adaptable to theme changes.
Consider applying this diff to use theme spacing:
const useStyles = makeStyles((theme) => ({ paper: { - height: '90%', + height: `calc(100% - ${theme.spacing(2)}px)`, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#DBE2E9', + padding: theme.spacing(2), }, }));📝 Committable suggestion