Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added feedback form and sitemap to the footer #323

Merged
merged 9 commits into from
Oct 15, 2024
Merged

Added feedback form and sitemap to the footer #323

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
11826a7
added-feedback-form-&-sitemap-to -footer
RajatX24 Oct 6, 2024
6c2ab11
removed .env
RajatX24 Oct 6, 2024
8c8a23a
made changes suggested by coderabbitai
RajatX24 Oct 8, 2024
c6a8485
removed actual email from .env.example
RajatX24 Oct 8, 2024
282c379
Update frontend/.env.example
shravan20 Oct 15, 2024
55547c4
Update frontend/.env.example
shravan20 Oct 15, 2024
f20b0df
Apply suggestions from code review
shravan20 Oct 15, 2024
f57699c
Update frontend/src/components/Footer/Footer.js
shravan20 Oct 15, 2024
0c935ad
Update frontend/src/components/Footer/ResponseSuccess.js
shravan20 Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions frontend/.env.example
View file
Open in desktop
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]
104 changes: 101 additions & 3 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@formspree/react": "^2.5.1",
"@material-ui/core": "^4.11.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.3.0",
"dotenv": "^16.4.5",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-icons": "^5.3.0",
Expand Down Expand Up @@ -37,5 +39,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"dotenv-webpack": "^8.1.0"
}
}
72 changes: 72 additions & 0 deletions frontend/src/components/Footer/Footer.js
View file
Open in desktop
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);
Comment on lines +16 to +17
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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

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;
26 changes: 26 additions & 0 deletions frontend/src/components/Footer/ResponseSuccess.js
View file
Open in desktop
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>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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.

</Paper>)
}

ResponseSuccess.propTypes = {};

export default ResponseSuccess;
shravan20 marked this conversation as resolved.
Show resolved Hide resolved
2 changes: 2 additions & 0 deletions frontend/src/components/Pages/Home/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { themes, animations, layouts, fonts, colorValues, quoteTypes } from '../
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import ContributorsCard from '../../ContributorsCard/ContributorCard'
import Footer from '../../Footer/Footer';
const Home = () => {

const [theme, setTheme] = useState(themes[0]);
Expand Down Expand Up @@ -146,6 +147,7 @@ const Home = () => {
}
</Grid>
<ContributorsCard />
<Footer/>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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

</React.Fragment>
)
}
Expand Down