Membership page added with its content #316
Conversation
|
@github-actions[bot] is attempting to deploy a commit to the bunty's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis pull request introduces several updates to the PlayCafe website repository. The Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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 (
|
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Outside diff range and nitpick comments (5)
frontend/src/router/index.jsx (1)
42-42: Consider removing the extra empty line.There's an unnecessary empty line after the new route. Consider removing it to maintain consistent spacing with other routes.
<Route path="/membership" element={<Membership />} /> - </Route>frontend/src/components/Membership.jsx (2)
1-1: Consider addressing the ESLint prettier issue instead of disabling it.The ESLint disable comment suggests there might be formatting issues in the file. It's generally better to fix the underlying formatting problems rather than disabling the linter.
Consider running Prettier on this file and adjusting your code to comply with the project's style guide.
73-73: Address the TODO comment in handleNext function.There's a TODO comment suggesting that you might need to handle the
selectedFeaturesbefore navigation. Make sure to implement this logic if necessary, or remove the comment if it's no longer relevant.Consider implementing the logic to handle
selectedFeaturesor remove the comment if it's not needed.frontend/src/components/Shared/Navbar.jsx (1)
Line range hint
44-50: LGTM! Consider adding error handling.The updated handleLogout function provides a comprehensive logout process, which is great. It correctly removes the auth token, updates the UI state, and redirects the user.
Consider adding error handling to make the logout process more robust:
const handleLogout = () => { - Cookies.remove('authToken'); - setToken(null); - setIsModalOpen(false); - setIsMenuOpen(false); - navigate('/login'); + try { + Cookies.remove('authToken'); + setToken(null); + setIsModalOpen(false); + setIsMenuOpen(false); + navigate('/login'); + } catch (error) { + console.error('Error during logout:', error); + // Optionally, show an error message to the user + } };This change will help catch and log any unexpected errors during the logout process.
README.md (1)
289-290: Fix linting issues: Replace hard tabs with spaces.There are linting issues related to the use of hard tabs in the markdown file. To improve consistency and adhere to markdown best practices, replace the hard tabs with spaces.
Apply this change to lines 289, 290, 333, and 334:
- </tr> - <tr> + </tr> + <tr>Also applies to: 333-334
🧰 Tools
🪛 Markdownlint
289-289: Column: 1
Hard tabs(MD010, no-hard-tabs)
290-290: Column: 1
Hard tabs(MD010, no-hard-tabs)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
- README.md (2 hunks)
- frontend/src/components/Membership.jsx (1 hunks)
- frontend/src/components/Shared/Navbar.jsx (1 hunks)
- frontend/src/router/index.jsx (2 hunks)
🧰 Additional context used
🪛 Markdownlint
README.md
289-289: Column: 1
Hard tabs(MD010, no-hard-tabs)
290-290: Column: 1
Hard tabs(MD010, no-hard-tabs)
333-333: Column: 1
Hard tabs(MD010, no-hard-tabs)
334-334: Column: 1
Hard tabs(MD010, no-hard-tabs)
🔇 Additional comments (8)
frontend/src/router/index.jsx (2)
23-23: LGTM: Import statement for Membership component.The import statement for the Membership component is correctly added and follows the existing code style.
41-41: LGTM: New route for Membership component added.The new route for the Membership component is correctly implemented and placed within the existing route structure.
frontend/src/components/Membership.jsx (3)
41-58: Animation variants look good.The
containerVariantsandcardVariantsare well-defined and should provide smooth animations for the component.
164-164: Default export looks good.The component is correctly exported as default, which is a common practice for React components.
1-164: Overall, good implementation with room for improvements.The
Membershipcomponent successfully implements the functionality described in the PR objectives. It displays various membership plans and allows for customization of add-ons. The use of Framer Motion for animations adds a nice touch to the user experience.Here's a summary of the main points from the review:
- Consider addressing ESLint/Prettier issues instead of disabling them.
- Extract
membershipDatato a separate file for better maintainability.- Implement the TODO in the
handleNextfunction or remove it if not needed.- Improve modal accessibility and user experience.
- Extract repeated button styles into a reusable component.
These improvements will enhance the code quality, maintainability, and user experience of the membership page.
README.md (3)
282-288: New contributor added successfully.The addition of Jay Shah (GitHub: Jay-1409) to the contributors' list is correct and follows the existing format.
334-340: New contributor added successfully.The addition of MANI (GitHub: devxMani) to the contributors' list is correct and follows the existing format.
🧰 Tools
🪛 Markdownlint
334-334: Column: 1
Hard tabs(MD010, no-hard-tabs)
Line range hint
290-332: Contributor removed as intended.The removal of Tanishi Rai (GitHub: tanishirai) from the contributors' list has been executed correctly.
🧰 Tools
🪛 Markdownlint
289-289: Column: 1
Hard tabs(MD010, no-hard-tabs)
290-290: Column: 1
Hard tabs(MD010, no-hard-tabs)
| {isModalOpen && ( | ||
| <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"> | ||
| <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full"> | ||
| <h2 className="text-2xl font-bold mb-4">Select Your Add-ons</h2> | ||
| <div className="flex flex-col mb-6"> | ||
| {membershipData[2].features.map((feature, idx) => ( | ||
| <label key={idx} className="flex items-center mb-2"> | ||
| <input | ||
| type="checkbox" | ||
| checked={selectedFeatures[feature] || false} | ||
| onChange={() => handleFeatureChange(feature)} | ||
| className="mr-2" | ||
| /> | ||
| {feature} | ||
| </label> | ||
| ))} | ||
| </div> | ||
| <button | ||
| className="bg-gradient-to-r from-orange-500 to-pink-500 text-white py-2 px-4 rounded-full hover:from-pink-500 hover:to-orange-500 transition-all" | ||
| onClick={handleNext} | ||
| > | ||
| Next | ||
| </button> | ||
| <button | ||
| className="ml-2 bg-gray-300 text-gray-700 py-2 px-4 rounded-full hover:bg-gray-400 transition-all" | ||
| onClick={() => setIsModalOpen(false)} // Close modal | ||
| > | ||
| Cancel | ||
| </button> | ||
| </div> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve modal accessibility and user experience.
The modal implementation could be enhanced for better accessibility and user experience:
- Add a focus trap to keep focus within the modal when it's open.
- Implement closing the modal when clicking outside or pressing the Esc key.
- Add aria attributes for screen readers.
Consider using a library like react-modal or implementing these features manually. Here's a basic example of improvements:
import { useEffect, useRef } from 'react';
// ... (in the component)
const modalRef = useRef(null);
useEffect(() => {
const handleEsc = (event) => {
if (event.keyCode === 27) setIsModalOpen(false);
};
window.addEventListener('keydown', handleEsc);
return () => window.removeEventListener('keydown', handleEsc);
}, []);
// ... (in the JSX)
{isModalOpen && (
<div
className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
onClick={() => setIsModalOpen(false)}
>
<div
ref={modalRef}
className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full"
onClick={(e) => e.stopPropagation()}
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
>
<h2 id="modal-title" className="text-2xl font-bold mb-4">Select Your Add-ons</h2>
{/* ... (rest of the modal content) */}
</div>
</div>
)}| <button | ||
| className="fixed bottom-4 bg-gradient-to-r from-orange-500 to-pink-500 text-white py-2 px-8 rounded-full hover:from-pink-500 hover:to-orange-500 transition-all" | ||
| onClick={() => setIsModalOpen(true)} // Open modal on click | ||
| > | ||
| Customize Add-ons | ||
| </button> | ||
| ) : ( | ||
| <button | ||
| className="fixed bottom-4 bg-gradient-to-r from-orange-500 to-pink-500 text-white py-2 px-8 rounded-full hover:from-pink-500 hover:to-orange-500 transition-all" | ||
| onClick={() => navigate('/signup')} | ||
| > | ||
| Sign Up | ||
| </button> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider extracting button styles to a reusable component.
The button styling is repeated for both the "Customize Add-ons" and "Sign Up" buttons. To improve maintainability and reduce redundancy, consider extracting this into a reusable component.
Example refactor:
const GradientButton = ({ onClick, children }) => (
<button
className="fixed bottom-4 bg-gradient-to-r from-orange-500 to-pink-500 text-white py-2 px-8 rounded-full hover:from-pink-500 hover:to-orange-500 transition-all"
onClick={onClick}
>
{children}
</button>
);
// Usage
<GradientButton onClick={() => setIsModalOpen(true)}>
Customize Add-ons
</GradientButton>
<GradientButton onClick={() => navigate('/signup')}>
Sign Up
</GradientButton>
|
@Jay-1409 just change the color and choose some colors which should match with the UI |
Okayy |
|
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
README.md (1)
289-290: Minor: Fix hard tabs in the contributors table.There are some linting issues related to hard tabs in the contributors table. Consider replacing these with spaces for consistency with the rest of the document.
You can fix this by running a markdown linter or manually replacing the tabs with spaces. Here's an example of how to fix it:
- </tr> - <tr> + </tr> + <tr>Apply this change to all instances of hard tabs in the contributors table.
Also applies to: 333-334, 377-378, 421-422
🧰 Tools
🪛 Markdownlint
289-289: Column: 1
Hard tabs(MD010, no-hard-tabs)
290-290: Column: 1
Hard tabs(MD010, no-hard-tabs)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- README.md (7 hunks)
- frontend/src/components/Membership.jsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/components/Membership.jsx
🧰 Additional context used
🪛 Markdownlint
README.md
289-289: Column: 1
Hard tabs(MD010, no-hard-tabs)
290-290: Column: 1
Hard tabs(MD010, no-hard-tabs)
333-333: Column: 1
Hard tabs(MD010, no-hard-tabs)
334-334: Column: 1
Hard tabs(MD010, no-hard-tabs)
377-377: Column: 1
Hard tabs(MD010, no-hard-tabs)
378-378: Column: 1
Hard tabs(MD010, no-hard-tabs)
421-421: Column: 1
Hard tabs(MD010, no-hard-tabs)
422-422: Column: 1
Hard tabs(MD010, no-hard-tabs)
🔇 Additional comments (2)
README.md (2)
248-253: LGTM! Contributors list updated.The changes to the contributors list look good. Two new contributors, Jay Shah and MANI, have been added, which aligns with the project's growth.
Could you please confirm if the removal of Tanishi Rai from the contributors list was intentional? If so, ensure that their contributions have been properly acknowledged elsewhere if needed.
Also applies to: 269-273, 333-362, 377-378, 421-422
Line range hint
1-442: Overall: README updates look good with minor suggestions.The changes to the README are focused on updating the contributors list, which is a positive reflection of the project's growth. The rest of the document remains unchanged, maintaining its comprehensive structure and informative content.
To further improve the document:
- Address the hard tab issues in the contributors table.
- Verify the intentional removal of Tanishi Rai from the contributors list.
These minor adjustments will enhance the overall quality and consistency of the README.
🧰 Tools
🪛 Markdownlint
245-245: Column: 1
Hard tabs(MD010, no-hard-tabs)
246-246: Column: 1
Hard tabs(MD010, no-hard-tabs)
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
RamakrushnaBiswal
added
enhancement
#296
@RamakrushnaBiswal
Screencast_20241016_161728.mp4
Summary by CodeRabbit
Release Notes
New Features
/membership.Bug Fixes
Documentation