fixes down arrow scroll behavior on homepage #2495
Conversation
|
@Vipul-Vermaa is attempting to deploy a commit to the Vivek Prajapati's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe changes modify the DownArrow component and the Home page. The DownArrow now accepts a new prop, Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DownArrow
participant Home
User->>DownArrow: Click on arrow image
DownArrow->>Home: Call scrollToCategories()
Home->>Home: Execute categoriesRef.scrollIntoView({ behavior: "smooth" })
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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: 1
🧹 Nitpick comments (1)
src/User/components/DownArrow/downArrow.jsx (1)
6-6: Add prop validation for scrollToCategoriesThe ESLint error indicates that the
scrollToCategoriesprop is missing validation. Consider adding PropTypes to validate your component props.import React from "react"; import "../../pages/Home/Home.css"; import Arrow from "../../../assets/arrow.png"; +import PropTypes from "prop-types"; // Make sure to update the path to your actual image location const DownArrow = ({scrollToCategories}) => { return ( <div className="down-arrow flex justify-center items-center"> <img className="w-12 mt-32 hover:cursor-pointer" src={Arrow} alt="Down Arrow" id="arrow" onClick={scrollToCategories} /> </div> ); }; +DownArrow.propTypes = { + scrollToCategories: PropTypes.func.isRequired +}; export default DownArrow;🧰 Tools
🪛 ESLint
[error] 6-6: 'scrollToCategories' is missing in props validation
(react/prop-types)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/User/components/DownArrow/downArrow.jsx(1 hunks)src/User/pages/Home/Home.jsx(3 hunks)
🧰 Additional context used
🪛 ESLint
src/User/components/DownArrow/downArrow.jsx
[error] 6-6: 'scrollToCategories' is missing in props validation
(react/prop-types)
🔇 Additional comments (3)
src/User/pages/Home/Home.jsx (3)
167-169: Implementation looks goodThe scrollToCategories function correctly implements smooth scrolling behavior to the categories section. The function is well-named and follows React best practices.
228-228: Correctly passes the scroll function to DownArrowProperly connects the DownArrow component with the scroll functionality, fulfilling the PR objective to fix down arrow scroll behavior.
233-233: Correctly references the categories sectionThe ref is properly attached to the section element, allowing the scroll functionality to target the Popular Categories section.
| return ( | ||
| <div className="down-arrow flex justify-center items-center"> | ||
| <img | ||
| className="w-12 mt-32 hover:cursor-pointer" | ||
| src={Arrow} | ||
| alt="Down Arrow" | ||
| id="arrow" | ||
| onClick={scrollToCategories} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add fallback for scrollToCategories prop
The onClick handler will cause a runtime error if the scrollToCategories prop is not provided. Consider adding a default fallback.
import React from "react";
import "../../pages/Home/Home.css";
import Arrow from "../../../assets/arrow.png";
import PropTypes from "prop-types";
// Make sure to update the path to your actual image location
const DownArrow = ({scrollToCategories}) => {
return (
<div className="down-arrow flex justify-center items-center">
<img
className="w-12 mt-32 hover:cursor-pointer"
src={Arrow}
alt="Down Arrow"
id="arrow"
- onClick={scrollToCategories}
+ onClick={scrollToCategories || (() => {})}
/>
</div>
);
};
DownArrow.propTypes = {
scrollToCategories: PropTypes.func.isRequired
};
export default DownArrow;📝 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.
| onClick={scrollToCategories} | |
| import React from "react"; | |
| import "../../pages/Home/Home.css"; | |
| import Arrow from "../../../assets/arrow.png"; | |
| import PropTypes from "prop-types"; | |
| // Make sure to update the path to your actual image location | |
| const DownArrow = ({scrollToCategories}) => { | |
| return ( | |
| <div className="down-arrow flex justify-center items-center"> | |
| <img | |
| className="w-12 mt-32 hover:cursor-pointer" | |
| src={Arrow} | |
| alt="Down Arrow" | |
| id="arrow" | |
| onClick={scrollToCategories || (() => {})} | |
| /> | |
| </div> | |
| ); | |
| }; | |
| DownArrow.propTypes = { | |
| scrollToCategories: PropTypes.func.isRequired | |
| }; | |
| export default DownArrow; |
Closes #2439
Summary by CodeRabbit