В моей текущей работе над сайтом манги на React с использованием API MangaDEX, я хочу сделать несколько заметок
Мой пользовательский хук для получения подробной информации о манге
function useMangaDetail(mangaId, { enable = true } = {}) {
const [manga, setManga] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
// if false then will not excute
if (!enable) {
return; // end it
}
(async () => {
try {
setLoading(true);
const result = await mangaApi.get(mangaId);
setManga(result.data);
} catch (error) {
console.log('Failed to fetch manga id=', mangaId, error);
}
setLoading(false);
})();
}, [mangaId, depEnable]);
return { manga, loading };
}
На странице чтения главы нам нужно получить информацию о манге в зависимости от mangaId, полученного из подробных данных главы.
function ChapterReadPage() {
const { chapterId } = useParams();
const { chapter, mangaId: mangaIdOfChapter } = useChapterDetail(chapterId);
const { manga } = useMangaDetail(mangaIdOfChapter, { enable: !!mangaIdOfChapter });
const mangaEnTitle = manga?.attributes?.title?.en;
return (
...
);
}