-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor/#551 SongDetailListPage의 스와이프 추가 fetch 옵져버 로직에 callbackRef를 …
…적용하여 로직 흐름을 개선한다. (#552) * refactor: effect 삭제 및 callbackRef로 변경 * refactor: msw 로직 수정 * refctor: SongDetailListPage 내 로직 custom hook 분리 1. 첫 entries fetch 담당 hook 2. 이후 extra Fetch 담당 hook * refactor: refCallback setup, clean up 코드 순서 변경 * refactor: useLayoutEffect로 실행하던 스크롤 이동 로직 refCallback으로 변경 * refactor: 코드 순서 수정
- Loading branch information
1 parent
ba423bc
commit 2be7bb3
Showing
4 changed files
with
119 additions
and
85 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
import { useCallback, useRef } from 'react'; | ||
import useExtraFetch from '@/shared/hooks/useExtraFetch'; | ||
import useValidParams from '@/shared/hooks/useValidParams'; | ||
import createObserver from '@/shared/utils/createObserver'; | ||
import { getExtraNextSongDetails, getExtraPrevSongDetails } from '../remotes/songs'; | ||
import type { Genre } from '../types/Song.type'; | ||
|
||
const useExtraSongDetail = () => { | ||
const { genre: genreParams } = useValidParams(); | ||
|
||
const { data: extraPrevSongDetails, fetchData: fetchExtraPrevSongDetails } = useExtraFetch( | ||
getExtraPrevSongDetails, | ||
'prev' | ||
); | ||
|
||
const { data: extraNextSongDetails, fetchData: fetchExtraNextSongDetails } = useExtraFetch( | ||
getExtraNextSongDetails, | ||
'next' | ||
); | ||
|
||
const prevObserverRef = useRef<IntersectionObserver | null>(null); | ||
const nextObserverRef = useRef<IntersectionObserver | null>(null); | ||
|
||
const getExtraPrevSongDetailsOnObserve: React.RefCallback<HTMLDivElement> = useCallback((dom) => { | ||
if (dom !== null) { | ||
prevObserverRef.current = createObserver(() => | ||
fetchExtraPrevSongDetails(getFirstSongId(dom), genreParams as Genre) | ||
); | ||
|
||
prevObserverRef.current.observe(dom); | ||
return; | ||
} | ||
|
||
prevObserverRef.current?.disconnect(); | ||
}, []); | ||
|
||
const getExtraNextSongDetailsOnObserve: React.RefCallback<HTMLDivElement> = useCallback((dom) => { | ||
if (dom !== null) { | ||
nextObserverRef.current = createObserver(() => | ||
fetchExtraNextSongDetails(getLastSongId(dom), genreParams as Genre) | ||
); | ||
|
||
nextObserverRef.current.observe(dom); | ||
return; | ||
} | ||
|
||
nextObserverRef.current?.disconnect(); | ||
}, []); | ||
|
||
const getFirstSongId = (dom: HTMLDivElement) => { | ||
const firstSongId = dom.nextElementSibling?.getAttribute('data-song-id') as string; | ||
|
||
return Number(firstSongId); | ||
}; | ||
|
||
const getLastSongId = (dom: HTMLDivElement) => { | ||
const lastSongId = dom.previousElementSibling?.getAttribute('data-song-id') as string; | ||
|
||
return Number(lastSongId); | ||
}; | ||
|
||
return { | ||
extraPrevSongDetails, | ||
extraNextSongDetails, | ||
getExtraPrevSongDetailsOnObserve, | ||
getExtraNextSongDetailsOnObserve, | ||
}; | ||
}; | ||
|
||
export default useExtraSongDetail; |
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,21 @@ | ||
import { useCallback } from 'react'; | ||
import useFetch from '@/shared/hooks/useFetch'; | ||
import useValidParams from '@/shared/hooks/useValidParams'; | ||
import { getSongDetailEntries } from '../remotes/songs'; | ||
import type { Genre } from '../types/Song.type'; | ||
|
||
const useSongDetailEntries = () => { | ||
const { id: songIdParams, genre: genreParams } = useValidParams(); | ||
|
||
const { data: songDetailEntries } = useFetch(() => | ||
getSongDetailEntries(Number(songIdParams), genreParams as Genre) | ||
); | ||
|
||
const scrollIntoCurrentSong: React.RefCallback<HTMLDivElement> = useCallback((dom) => { | ||
if (dom !== null) dom.scrollIntoView({ behavior: 'instant', block: 'start' }); | ||
}, []); | ||
|
||
return { songDetailEntries, scrollIntoCurrentSong }; | ||
}; | ||
|
||
export default useSongDetailEntries; |
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