-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: fix linting and styling issues and refactor navbar logic
- Loading branch information
1 parent
44e1d7e
commit 8317796
Showing
12 changed files
with
202 additions
and
113 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { RefObject, useEffect, useState } from 'react'; | ||
|
|
||
| type UseHandleAsterisksProps = { | ||
| asterisksRef1: RefObject<HTMLDivElement>; | ||
| asterisksRef2: RefObject<HTMLDivElement>; | ||
| }; | ||
|
|
||
| export const useHandleAsterisks = ({ | ||
| asterisksRef1, | ||
| asterisksRef2 | ||
| }: UseHandleAsterisksProps) => { | ||
| const [numAstericks, setNumAsterisks] = useState(0); | ||
|
|
||
| // TODO: add animation when asterisk first load in to make it less jarring (stagger effect?) | ||
| useEffect(() => { | ||
| /** | ||
| * Dynamically set the number of astricks | ||
| */ | ||
| const updateAsterisks = () => { | ||
| if (asterisksRef1.current) { | ||
| const width = asterisksRef1.current.getBoundingClientRect().width; | ||
| const calcNumAstericks = Math.floor(width / 10); | ||
| setNumAsterisks(calcNumAstericks); | ||
| } | ||
| if (asterisksRef2.current) { | ||
| const width = asterisksRef2.current.getBoundingClientRect().width; | ||
| const calcNumAstericks = Math.floor(width / 10); | ||
| setNumAsterisks(calcNumAstericks); | ||
| } | ||
| }; | ||
|
|
||
| updateAsterisks(); | ||
| window.addEventListener('resize', updateAsterisks); | ||
|
|
||
| return () => { | ||
| window.removeEventListener('resize', updateAsterisks); | ||
| }; | ||
| }); | ||
|
|
||
| return { numAstericks }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import { Dispatch, RefObject, SetStateAction, useEffect } from 'react'; | ||
| import { PageType } from '../Navbar'; | ||
|
|
||
| type UseHandleScrollType = { | ||
| setCurrPage: Dispatch<SetStateAction<PageType>>; | ||
| pageRefs: { | ||
| mainRef: RefObject<HTMLElement>; | ||
| landingRef: RefObject<HTMLElement>; | ||
| overviewRef: RefObject<HTMLElement>; | ||
| themesRef: RefObject<HTMLElement>; | ||
| faqRef: RefObject<HTMLElement>; | ||
| applyRef: RefObject<HTMLElement>; | ||
| }; | ||
| PAGE_TYPES: readonly ['Home', 'Overview', 'Themes', 'FAQ', 'Apply']; | ||
| }; | ||
|
|
||
| export const useHandleScroll = ({ | ||
| setCurrPage, | ||
| pageRefs, | ||
| PAGE_TYPES | ||
| }: UseHandleScrollType) => { | ||
| const { mainRef, landingRef, overviewRef, themesRef, faqRef, applyRef } = | ||
| pageRefs; | ||
| useEffect(() => { | ||
| const mainElement = mainRef.current; | ||
| const landingElement = landingRef.current; | ||
| const overviewElement = overviewRef.current; | ||
| const themesElement = themesRef.current; | ||
| const faqElement = faqRef.current; | ||
| const applyElement = applyRef.current; | ||
|
|
||
| /** | ||
| * Sets the current page | ||
| * Current page is based on what part of scroll we are at | ||
| */ | ||
| if ( | ||
| !mainElement || | ||
| !landingElement || | ||
| !overviewElement || | ||
| !themesElement || | ||
| !faqElement || | ||
| !applyElement | ||
| ) | ||
| return; | ||
|
|
||
| const pagesList = [ | ||
| landingElement, | ||
| overviewElement, | ||
| themesElement, | ||
| faqElement, | ||
| applyElement | ||
| ]; | ||
| const handleScroll = () => { | ||
| const scrollPosition = mainElement.scrollTop || 0; | ||
|
|
||
| pagesList.forEach((page, index) => { | ||
| const pageTop = page.offsetTop; | ||
| const pageBottom = pageTop + page.clientHeight; | ||
|
|
||
| const halfScrollPosition = scrollPosition + window.innerHeight / 2; | ||
| if (halfScrollPosition > pageTop && halfScrollPosition < pageBottom) { | ||
| setCurrPage(PAGE_TYPES[index]); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| mainElement.addEventListener('scroll', handleScroll); | ||
| return () => { | ||
| mainElement.removeEventListener('scroll', handleScroll); | ||
| }; | ||
| }, [ | ||
| PAGE_TYPES, | ||
| applyRef, | ||
| faqRef, | ||
| landingRef, | ||
| mainRef, | ||
| overviewRef, | ||
| setCurrPage, | ||
| themesRef | ||
| ]); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.