Added feedback form and sitemap to the footer #323
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@RajatX24 is attempting to deploy a commit to the shravan20's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Caution Review failedThe pull request is closed. WalkthroughThe changes involve updates to the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Footer
participant Formspree
participant ResponseSuccess
User->>Footer: Fill out feedback form
Footer->>Formspree: Submit form data
Formspree->>ResponseSuccess: Return success message
ResponseSuccess-->>Footer: Display success message
Possibly related PRs
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Outside diff range and nitpick comments (3)
frontend/src/components/Footer/ResponseSuccess.js (1)
1-10: Summary: Good implementation with room for improvementsThe
ResponseSuccesscomponent is well-implemented and fulfills its purpose of displaying a success message. However, there are several areas where it could be improved:
- Use function declaration syntax and add PropTypes for better readability and type checking.
- Refactor inline styles to use Material-UI's styling solution for improved maintainability.
- Implement a translation function to prepare for future internationalization.
These changes will enhance the component's maintainability, scalability, and adherence to React and Material-UI best practices.
Consider creating a shared styles file for common styling patterns across components, which could include the centering logic used in this component. This would promote consistency and reusability throughout the application.
frontend/package.json (2)
12-12: LGTM: Addition of dotenv dependency with a suggestionThe addition of dotenv (version ^16.4.5) is appropriate for handling environment variables, which is necessary for the Formspree integration as mentioned in the PR objectives.
Consider moving this dependency to the devDependencies section, as it's typically only needed during development and build time, not at runtime in a frontend React application.
Line range hint
1-45: Overall changes look good with a suggestion for future improvementThe additions to package.json are consistent with the PR objectives and follow good practices. The new dependencies (@formspree/react, dotenv, and dotenv-webpack) are all relevant to implementing the feedback form functionality.
For a future improvement, consider updating other dependencies to their latest compatible versions. This can be done in a separate PR to keep the current changes focused. You can use a tool like
npm-check-updatesto assist with this process.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (4)
- frontend/package.json (2 hunks)
- frontend/src/components/Footer/Footer.js (1 hunks)
- frontend/src/components/Footer/ResponseSuccess.js (1 hunks)
- frontend/src/components/Pages/Home/index.js (2 hunks)
🧰 Additional context used
🔇 Additional comments (9)
frontend/src/components/Footer/ResponseSuccess.js (2)
1-3: LGTM: Import statements are correct and follow best practices.The import statements are properly structured, importing only the necessary components from React and Material-UI. This approach helps to keep the bundle size smaller and is considered a best practice in React development.
10-10: LGTM: Export statement is correct.The default export of the
ResponseSuccesscomponent follows React best practices and allows for easy import in other parts of the application.frontend/package.json (2)
6-6: LGTM: Addition of @formspree/react dependencyThe addition of @formspree/react (version ^2.5.1) aligns well with the PR objective of implementing a feedback form. This library will facilitate easy form handling and submission.
43-44: LGTM: Addition of dotenv-webpack devDependencyThe addition of dotenv-webpack (version ^8.1.0) as a devDependency is appropriate. This webpack plugin will ensure that environment variables are correctly loaded during the build process, supporting the Formspree integration mentioned in the PR objectives.
frontend/src/components/Footer/Footer.js (3)
1-10: Imports look good and appropriate for the component.The necessary React and Material-UI components are imported, along with the Formspree hook and a custom ResponseSuccess component. All imports appear to be used in the component.
69-69: Component export looks good.The Footer component is correctly exported as the default export, following common React practices.
1-69: Overall, the Footer component is well-implemented and aligns with the PR objectives.The component successfully adds a feedback form and sitemap to the footer, as requested in the PR objectives. It uses Material-UI components for a consistent look and feel, and implements responsiveness using the Grid system. The use of Formspree for form submission is a good choice for handling user feedback without requiring backend changes.
Some minor improvements have been suggested in previous comments, mainly focusing on:
- Verifying the Formspree environment variable setup
- Improving the feedback form's submission handling
- Enhancing the maintainability of the sitemap links
Once these suggestions are addressed, the component will be in excellent shape and fully ready for integration into the main application.
Great job on implementing this feature!
frontend/src/components/Pages/Home/index.js (2)
8-8: LGTM: Footer component import added correctly.The import statement for the Footer component is correctly placed and follows React conventions.
8-8: Overall impact: Footer added, but implementation details needed.The Footer component has been successfully imported and added to the Home page. However, there are a few points to address:
- Please confirm that the feedback form and sitemap are implemented within the Footer component itself, as they're not visible in this file.
- Ensure that the Footer component is responsive and doesn't negatively impact the existing layout, especially on mobile devices.
- Consider adding props to the Footer component if any data from the Home component needs to be passed down.
To verify the responsiveness of the Footer component, please run the following script:
Also applies to: 150-150
| import Typography from '@material-ui/core/Typography'; | ||
|
|
||
| const ResponseSuccess = ()=> | ||
| <Paper style={{height:'90%',display:'flex',alignItems:'center',justifyContent:'center',backgroundColor:'#DBE2E9'}}> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Refactor: Use Material-UI's styling solution instead of inline styles.
While the current inline styles work, using Material-UI's makeStyles hook or styled API would improve maintainability and follow Material-UI best practices.
Here's a suggested refactor using the makeStyles hook:
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+ paper: {
+ height: '90%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ backgroundColor: '#DBE2E9',
+ },
+}));
+
function ResponseSuccess() {
+ const classes = useStyles();
return (
- <Paper style={{height:'90%',display:'flex',alignItems:'center',justifyContent:'center',backgroundColor:'#DBE2E9'}}>
+ <Paper className={classes.paper}>
<Typography variant="h6" color="primary" gutterBottom>Your response has been recorded successfully!</Typography>
</Paper>
);
}This approach separates styles from the component logic, improving readability and maintainability.
Committable suggestion was skipped due to low confidence.
| import Paper from '@material-ui/core/Paper'; | ||
| import Typography from '@material-ui/core/Typography'; | ||
|
|
||
| const ResponseSuccess = ()=> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider using function declaration and adding PropTypes.
While the current arrow function definition is valid, consider the following improvements:
- Use a function declaration for better readability and hoisting.
- Add PropTypes for type checking, even if the component currently doesn't accept any props.
Here's a suggested refactor:
-const ResponseSuccess = ()=>
+import PropTypes from 'prop-types';
+
+function ResponseSuccess() {
+ return (
<Paper style={{height:'90%',display:'flex',alignItems:'center',justifyContent:'center',backgroundColor:'#DBE2E9'}}>
<Typography variant="h6" color="primary" gutterBottom>Your response has been recorded successfully!</Typography>
</Paper>
+ );
+}
+
+ResponseSuccess.propTypes = {};This change improves code clarity and sets up the component for future prop additions.
Committable suggestion was skipped due to low confidence.
|
|
||
| const ResponseSuccess = ()=> | ||
| <Paper style={{height:'90%',display:'flex',alignItems:'center',justifyContent:'center',backgroundColor:'#DBE2E9'}}> | ||
| <Typography variant="h6" color="primary" gutterBottom>Your response has been recorded successfully!</Typography> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider using a translation function for the success message.
The current hardcoded message works well, but to support future internationalization efforts, consider using a translation function.
Here's a suggested improvement:
+import { useTranslation } from 'react-i18next';
+
function ResponseSuccess() {
const classes = useStyles();
+ const { t } = useTranslation();
return (
<Paper className={classes.paper}>
- <Typography variant="h6" color="primary" gutterBottom>Your response has been recorded successfully!</Typography>
+ <Typography variant="h6" color="primary" gutterBottom>{t('response.success')}</Typography>
</Paper>
);
}This change prepares the component for future localization without affecting its current functionality.
Committable suggestion was skipped due to low confidence.
| <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="https://github.com/shravan20/github-readme-quotes" display="block" style={{ marginBottom: '10px' }} color="textSecondary"> | ||
| About Us | ||
| </Link> | ||
| <Link href="mailto:[email protected]" display="block" style={{ marginBottom: '10px' }} color="textSecondary"> | ||
| Contact Us | ||
| </Link> | ||
| <Link href="https://github.com/shravan20/github-readme-quotes/blob/main/LICENSE" display="block" style={{ marginBottom: '10px' }} color="textSecondary"> | ||
| Terms and Conditions | ||
| </Link> | ||
| </Paper> | ||
| </Grid> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Sitemap implementation is good, but could be improved for maintainability.
The sitemap structure and styling using Material-UI components are well-implemented. However, there are a few suggestions for improvement:
- The hardcoded URLs might make maintenance difficult in the future.
- The Contact Us link currently uses a mailto link, which might not be the best user experience for all users.
Consider the following improvements:
- Use constants or environment variables for URLs to improve maintainability:
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]';
// Then use these constants in your links
<Link href={`${GITHUB_REPO_URL}`} ...>About Us</Link>
<Link href={`mailto:${CONTACT_EMAIL}`} ...>Contact Us</Link>
<Link href={`${GITHUB_REPO_URL}/blob/main/LICENSE`} ...>Terms and Conditions</Link>- Consider creating a dedicated contact page instead of using a mailto link:
<Link href="/contact" ...>Contact Us</Link>These changes will improve the maintainability of the component and provide a better user experience.
| 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> | ||
| {state.succeeded && <Typography style={{ color: 'green' }}>Your response has been recorded successfully!</Typography>} | ||
| <Grid item xs={12}> | ||
| <Button type="submit" disabled={false} variant="contained" color="primary" size="large" fullWidth> | ||
| SEND US A MESSAGE | ||
| </Button> | ||
| </Grid> | ||
| </Grid> | ||
| </form>} | ||
| </Box> | ||
| </Grid> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Feedback form implementation looks good, with some suggestions for improvement.
The form structure and styling using Material-UI components are well-implemented. The conditional rendering based on submission state is a good practice for user experience.
However, there are a couple of points that could be improved:
- The success message on line 37 is inside the form, which is unnecessary since the entire form is not rendered when
state.succeededis true. - The submit button is always enabled (
disabled={false}), which might allow multiple submissions while the form is being processed.
Consider the following improvements:
- Remove the success message from inside the form:
-{state.succeeded && <Typography style={{ color: 'green' }}>Your response has been recorded successfully!</Typography>}- Disable the submit button while the form is being submitted:
-<Button type="submit" disabled={false} variant="contained" color="primary" size="large" fullWidth>
+<Button type="submit" disabled={state.submitting} variant="contained" color="primary" size="large" fullWidth>These changes will improve the form's behavior and prevent potential issues with multiple submissions.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| 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> | |
| {state.succeeded && <Typography style={{ color: 'green' }}>Your response has been recorded successfully!</Typography>} | |
| <Grid item xs={12}> | |
| <Button type="submit" disabled={false} variant="contained" color="primary" size="large" fullWidth> | |
| SEND US A MESSAGE | |
| </Button> | |
| </Grid> | |
| </Grid> | |
| </form>} | |
| </Box> | |
| </Grid> | |
| 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> |
| @@ -146,6 +147,7 @@ const Home = () => { | |||
| } | |||
| </Grid> | |||
| <ContributorsCard /> | |||
| <Footer/> | |||
There was a problem hiding this comment.
💡 Codebase verification
Footer component is missing the sitemap element.
The Footer component includes the feedback form but does not contain the sitemap as specified in the PR objectives.
🔗 Analysis chain
Verify Footer component contents.
The Footer component is correctly placed at the end of the JSX structure. However, please ensure that the Footer component includes the feedback form and sitemap as mentioned in the PR objectives.
To verify the contents of the Footer component, please run the following script:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the contents of the Footer component
# Test: Check if the Footer component includes a feedback form and sitemap
ast-grep --lang javascript --pattern 'const Footer = () => {
$$$
form $$$
$$$
sitemap $$$
$$$
}'
Length of output: 108
Script:
#!/bin/bash
# Description: Re-verify the contents of the Footer component with a more flexible pattern
# Test: Check if the Footer component includes both a feedback form and a sitemap
ast-grep --lang javascript --pattern 'const Footer = () => {
$$$
<form $$$ /> $$$
<sitemap $$$ /> $$$
}'
Length of output: 112
Script:
#!/bin/bash
# Description: Locate the Footer component and verify it includes a form and sitemap
# Step 1: Find the Footer component file
footer_files=$(fd --type f --extension js --glob '*Footer*.js')
# Check if any Footer component files are found
if [ -z "$footer_files" ]; then
echo "Footer component file not found."
exit 1
fi
# Step 2: Verify the Footer component includes both a form and a sitemap
echo "$footer_files" | while read -r file; do
form_present=$(rg --count '<form' "$file")
sitemap_present=$(rg --count '<sitemap' "$file")
if [ "$form_present" -gt 0 ] && [ "$sitemap_present" -gt 0 ]; then
echo "In $file: Both form and sitemap are present."
else
echo "In $file: "
[ "$form_present" -gt 0 ] || echo "- <form> is missing."
[ "$sitemap_present" -gt 0 ] || echo "- <sitemap> is missing."
fi
done
Length of output: 799
|
Please let me know if there are any changes that need to be made. |
Can you address the PR review comments by the coderabbitai? |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (4)
frontend/.env.example (3)
1-1: Use a placeholder value for REACT_APP_FORMSPREE_FORM_CODEThe current value 'abcdef' is appropriate as a placeholder for the Formspree form code. However, to make it clearer that this is a placeholder, consider using a more descriptive value.
Consider updating the line as follows:
-REACT_APP_FORMSPREE_FORM_CODE = abcdef +REACT_APP_FORMSPREE_FORM_CODE = your_formspree_form_code_here
2-2: Consider using a placeholder for REACT_APP_GITHUB_REPO_URLWhile the current URL is likely correct for the project, it's generally better to use placeholder values in example environment files to avoid potential confusion or unintended use of production values.
Consider updating the line as follows:
-REACT_APP_GITHUB_REPO_URL = https://github.com/shravan20/github-readme-quotes +REACT_APP_GITHUB_REPO_URL = https://github.com/username/repository
1-3: Add comments to explain the purpose of each environment variableTo improve clarity and maintainability, consider adding comments to explain the purpose and expected format of each environment variable.
Here's an example of how you could add comments:
+# Formspree form code for handling form submissions REACT_APP_FORMSPREE_FORM_CODE = your_formspree_form_code_here +# URL of the GitHub repository associated with this project REACT_APP_GITHUB_REPO_URL = https://github.com/username/repository +# Contact email address for inquiries REACT_APP_CONTACT_EMAIL = [email protected]frontend/src/components/Footer/Footer.js (1)
50-67: Sitemap implementation looks good, with a minor suggestion.The sitemap structure and styling using Material-UI components are well-implemented. I appreciate that you've used the constants for URLs as suggested in the previous review.
One minor suggestion for consistency:
Consider using a Box component for the sitemap section instead of Paper, to match the structure of the feedback form section. This would make both sections visually consistent:
-<Paper id="sitemap" style={{ marginLeft: '30px', height: '90%', padding: '20px' }} elevation={9}> +<Box id="sitemap" style={{ marginLeft: '30px', height: '90%', padding: '20px' }}> {/* Sitemap content */} -</Paper> +</Box>This change would remove the elevation and make both sections visually equal, improving the overall design consistency.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
- frontend/.env.example (1 hunks)
- frontend/src/components/Footer/Footer.js (1 hunks)
- frontend/src/components/Footer/ResponseSuccess.js (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/components/Footer/ResponseSuccess.js
🧰 Additional context used
🔇 Additional comments (3)
frontend/src/components/Footer/Footer.js (3)
1-14: Imports and constant declarations look good!The necessary imports are present, and the use of environment variables for configuration is a great practice. I appreciate that you've implemented the suggestion from a previous review to use constants for URLs, which improves maintainability.
18-48: Feedback form implementation looks great!The form structure and styling using Material-UI components are well-implemented. I'm pleased to see that you've addressed the previous review comments:
- The success message is now handled separately using the
ResponseSuccesscomponent.- The submit button is correctly disabled during form submission (
disabled={state.submitting}).The conditional rendering based on submission state and the responsive layout using Grid components are good practices for user experience.
72-72: Component export looks good.The Footer component is correctly exported as the default export, following common React practices.
frontend/.env.example
Outdated
| @@ -0,0 +1,3 @@ | |||
| REACT_APP_FORMSPREE_FORM_CODE = abcdef | |||
| REACT_APP_GITHUB_REPO_URL = https://github.com/shravan20/github-readme-quotes | |||
| REACT_APP_CONTACT_EMAIL = [email protected] | |||
There was a problem hiding this comment.
Replace actual email with a placeholder for REACT_APP_CONTACT_EMAIL
It's not recommended to include actual email addresses in example configuration files. This could lead to unintended exposure of personal information if the file is shared or made public.
Please replace the actual email with a placeholder. For example:
-REACT_APP_CONTACT_EMAIL = [email protected]
+REACT_APP_CONTACT_EMAIL = [email protected]📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| REACT_APP_CONTACT_EMAIL = shravan@ohmyscript.com | |
| REACT_APP_CONTACT_EMAIL = your_contact_email@example.com |
| const Footer = () => { | ||
| const [state, handleSubmitFormspree] = useForm(process.env.REACT_APP_FORMSPREE_FORM_CODE); |
There was a problem hiding this comment.
💡 Codebase verification
Missing REACT_APP_FORMSPREE_FORM_CODE in .env
The REACT_APP_FORMSPREE_FORM_CODE environment variable is not set in the .env file. Please add the correct Formspree form code to ensure the Footer component functions properly.
🔗 Analysis chain
Component declaration and Formspree setup look good.
The Footer component is correctly declared as a functional component, and the Formspree hook is properly used with an environment variable for the form code.
Please ensure that the REACT_APP_FORMSPREE_FORM_CODE environment variable is properly set in the .env file. You can verify this by running the following command in the project root:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if the REACT_APP_FORMSPREE_FORM_CODE is set in the .env file
grep REACT_APP_FORMSPREE_FORM_CODE .env || echo "REACT_APP_FORMSPREE_FORM_CODE is not set in .env file"
Length of output: 158
made changes suggested by coderabbitai👨💻 Changes made
Changes not made
Note to reviewersIf there are any changes that need to be made please let me know. 📷 ScreenshotsADDED MUI'S STYLING SOLUTION INSTEAD OF INLINE STYLES:
ADDED PROP TYPES:
USED CONSTANTS AND ENVIRONMENT VARIABLES FOR SITEMAP MAINTAINABILITY
|
frontend/.env.example
Outdated
| @@ -0,0 +1,3 @@ | |||
| REACT_APP_FORMSPREE_FORM_CODE = abcdef | |||
| REACT_APP_GITHUB_REPO_URL = https://github.com/shravan20/github-readme-quotes | |||
| REACT_APP_CONTACT_EMAIL = [email protected] | |||
There was a problem hiding this comment.
| REACT_APP_CONTACT_EMAIL = [email protected] | |
| REACT_APP_CONTACT_EMAIL = [email protected] | |
This reverts commit 89fcfb7.
I have added the feedback form and the sitemap to the footer as requested in issue.
This is the sample image from the issue, showing how the footer should look:
BEFORE MAKING CHANGES:
AFTER MAKING CHANGES:
MOBILE VIEW:
NOTE: In order to link the form in footer to your formspree form
2)register and create a form
3)copy the form code of your form
4)create a .env file in frontend folder
5)inside it write as follows: REACT_APP_FORMSPREE_FORM_FORM_CODE = your-form-code-here
After doing the above the form should work.
I request the maintainer to please mark this as 'hacktoberfest-accepted' while merging this. I want this contribution to count for hacktober fest.
Thanks!
Summary by CodeRabbit
Footercomponent with a feedback form for user submissions.ResponseSuccesscomponent to display confirmation messages upon successful feedback submission.Footercomponent into theHomepage layout.@formspree/reactanddotenv.dotenv-webpackas a development dependency.