Refactor: moved said logic into custom hooks #21
Conversation
|
@CrownDestro is attempting to deploy a commit to the amFOSS Dev Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Pull Request Overview
This PR refactors inline logic into reusable custom hooks to improve code maintainability and reduce duplication across components. The changes extract scroll behavior, animation variants, drawer state, and responsive grid logic into dedicated hooks.
Key changes:
- Created six custom hooks:
useScrollRef,useScrollDirection,useNavbarColor,useDrawerState,useResponsiveGrid, anduseAnimationVariants - Updated components (Navbar, MembersAndAlumni) and page components (home, about, team, story, gallery, clublife, achievements) to use the new hooks
- Renamed
dataimport toclubLifeDatain clublife page for clarity
Reviewed Changes
Copilot reviewed 15 out of 17 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| lib/hooks/useScrollRef.js | New hook that provides a scrollRef |
| lib/hooks/useScrollDirection.js | Extracts scroll direction detection logic from Navbar |
| lib/hooks/useResponsiveGrid.js | Extracts responsive grid logic from MembersAndAlumni |
| lib/hooks/useNavbarColor.js | Extracts navbar color logic from Navbar |
| lib/hooks/useDrawerState.js | Extracts drawer state management from Navbar |
| lib/hooks/useAnimationVariants.js | Extracts animation variants definitions into reusable hook |
| components/shared/Navbar.jsx | Refactored to use new custom hooks |
| components/team/membersAndAlumni.jsx | Refactored to use useResponsiveGrid hook |
| app/(root)/team/page.jsx | Uses useScrollRef and useAnimationVariants hooks |
| app/(root)/story/page.jsx | Uses useScrollRef hook |
| app/(root)/gallery/page.jsx | Uses useScrollRef hook |
| app/(root)/clublife/page.jsx | Uses new hooks and renames component/imports |
| app/(root)/achievements/page.jsx | Uses useScrollRef hook |
| app/(root)/about/page.jsx | Uses useScrollRef hook |
| app/(root)/(home)/page.jsx | Uses useScrollRef and useAnimationVariants hooks |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| setHidden(false); | ||
| } | ||
|
|
||
| if (isDrawerOpen && window.innerHeight > 424) { |
There was a problem hiding this comment.
The magic number 424 should be extracted as a named constant (e.g., MIN_DRAWER_CLOSE_HEIGHT) to improve code clarity and maintainability.
Copilot uses AI. Check for mistakes.
| if (latest + 93 <= window.innerHeight && prevNavColor === true) { | ||
| return false; | ||
| } else if (latest + 93 > window.innerHeight && prevNavColor === false) { |
There was a problem hiding this comment.
The magic number 93 (appears to be navbar height offset) should be extracted as a named constant (e.g., NAVBAR_HEIGHT_OFFSET) to improve code clarity and maintainability.
Copilot uses AI. Check for mistakes.
| clubLife1Variants: clubLife1Varients, | ||
| clubLife2Variants: clubLife2Varients, |
There was a problem hiding this comment.
The destructured properties clubLife1Variants and clubLife2Variants do not exist in the useAnimationVariants hook. Based on the hook's implementation, these should be slideInRightVariant and slideInLeftVariant respectively.
| clubLife1Variants: clubLife1Varients, | |
| clubLife2Variants: clubLife2Varients, | |
| slideInRightVariant: clubLife1Varients, | |
| slideInLeftVariant: clubLife2Varients, |
Copilot uses AI. Check for mistakes.
| const { | ||
| clubLife1Variants: clubLife1Varients, | ||
| clubLife2Variants: clubLife2Varients, | ||
| imageVariants: imageVarients, |
There was a problem hiding this comment.
Corrected spelling of 'imageVarients' to 'imageVariants'.
| imageVariants: imageVarients, | |
| imageVariants, |
Copilot uses AI. Check for mistakes.
1 participant
Description: reusable custom hooks
Changes included:
Extracted Scroll and animation variants that are reused into useScrollRef.js & useAnimationVariants.js as hooks.
New custom hooks created:
useScrollDirection (for Navbar)
useNavbarColor (for Navbar)
useDrawerState (for MenuDrawer)
useResponsiveGrid (for MembersAndAlumni)
Assets updated: Updated Dheeraj_M’s image in public/assets/members/Secondyears.
Notes:
This PR addresses #18 .