fix: News Fetch Error, Wrong Episodes on Media, Episode Img on Watch …

…Page
ErickLimaS · Mar 23, 2024 · 104b020 · 104b020
2 parents f0d418c + 48f55e4
commit 104b020
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 24 deletions.
diff --git a/api/news.ts b/api/news.ts
@@ -24,7 +24,7 @@ export default {
 
             console.log(err)
 
-            return err
+            return null
 
         }
 
@@ -47,7 +47,7 @@ export default {
 
             console.log(err)
 
-            return err
+            return null
 
         }
 

diff --git a/app/layout/header/components/NewsNavListHover/index.tsx b/app/layout/header/components/NewsNavListHover/index.tsx
@@ -10,7 +10,7 @@ import Image from 'next/image'
 
 function AnimeNavListHover() {
 
-    const [animeData, setAnimeData] = useState<News[]>()
+    const [animeData, setAnimeData] = useState<News[] | null>(null)
 
     const loadData = async () => {
 
@@ -39,14 +39,14 @@ function AnimeNavListHover() {
                         <li key={key}>
 
                             <div className={styles.image_container}>
-                                <Link href={`/news/${item.id.replace(/\/?daily-briefs\//, "") }`}>
+                                <Link href={`/news/${item.id.replace(/\/?daily-briefs\//, "")}`}>
                                     <Image fill src={item.thumbnail} alt={item.title}></Image>
                                 </Link>
                             </div>
 
                             <div className={styles.title_container}>
 
-                                <h5><Link href={`/news/${item.id.replace(/\/?daily-briefs\//, "") }`}>{item.title}</Link></h5>
+                                <h5><Link href={`/news/${item.id.replace(/\/?daily-briefs\//, "")}`}>{item.title}</Link></h5>
 
                                 <small><SvgCalendar width={16} height={16} alt="Calendar" /> {item.uploadedAt}</small>
 

diff --git a/app/lib/checkApiMediaMisspelling.ts b/app/lib/checkApiMediaMisspelling.ts
@@ -0,0 +1,15 @@
+// made for many MISTAKES of API with spelling.
+// It converts the wrong name that i got to the correct one,
+//  or to the one that gets the correct result.
+export function checkApiMisspellingMedias(mediaTitle: string) {
+
+    const animesList = [
+        { wrongNameOnApi: "NARUTO: Shippuuden", correctName: "NARUTO: Shippuden" },
+        { wrongNameOnApi: "JUJUTSU KAISEN", correctName: "JUJUTSU KAISEN (TV)" }
+    ]
+
+    const hasCorrectName = animesList.find(item => item.wrongNameOnApi.toLowerCase() == mediaTitle.toLowerCase())
+
+    return hasCorrectName?.correctName || mediaTitle
+
+}
diff --git a/app/lib/fetchAnimeOnApi.ts b/app/lib/fetchAnimeOnApi.ts
@@ -4,10 +4,11 @@ import regexOnlyAlphabetic from "./regexOnlyAlphabetic"
 import simulateRange from "./simulateRange"
 import gogoanime from "@/api/gogoanime"
 import { MediaEpisodes, MediaInfo, MediaSearchResult } from "../ts/interfaces/apiGogoanimeDataInterface"
+import { checkApiMisspellingMedias } from "./checkApiMediaMisspelling"
 
 export async function fetchWithGoGoAnime(textSearch: string, only?: "episodes") {
 
-    const regexMediaTitle = regexOnlyAlphabetic(textSearch).toLowerCase()
+    const regexMediaTitle = regexOnlyAlphabetic(checkApiMisspellingMedias(textSearch)).toLowerCase()
 
     let mediaSearched = await gogoanime.getInfoFromThisMedia(textSearch, "anime") as MediaInfo
     let searchResultsForMedia
@@ -45,16 +46,30 @@ export async function fetchWithGoGoAnime(textSearch: string, only?: "episodes")
 
 }
 
-export async function fetchWithAniWatch(textSearch: string, only?: "episodes") {
+export async function fetchWithAniWatch(textSearch: string, only?: "episodes", format?: string, mediaTotalEpisodes?: number) {
 
-    const regexMediaTitle = regexOnlyAlphabetic(textSearch).toLowerCase()
+    const regexMediaTitle = regexOnlyAlphabetic(checkApiMisspellingMedias(textSearch)).toLowerCase()
 
-    const searchResultsForMedia = await aniwatch.searchMedia(regexMediaTitle).then((res: void | MediaInfoFetchedAnimeWatch) => res!.animes) as MediaInfoAniwatch[]
+    let searchResultsForMedia = await aniwatch.searchMedia(regexMediaTitle).then((res: void | MediaInfoFetchedAnimeWatch) => res!.animes) as MediaInfoAniwatch[]
 
-    const closestResult: MediaInfoAniwatch = searchResultsForMedia.find((item) => regexOnlyAlphabetic(item.name).toLowerCase().includes(regexMediaTitle)) || searchResultsForMedia[0]
+    if (format) {
+        searchResultsForMedia = searchResultsForMedia.filter(item => item.type.toLowerCase() == format.toLowerCase())
+    }
+
+    let closestResult: MediaInfoAniwatch | undefined
+
+    if (mediaTotalEpisodes) {
+        closestResult = searchResultsForMedia.find(
+            (item) => item.episodes.sub == mediaTotalEpisodes
+        )
+    }
+
+    if (!closestResult) closestResult = searchResultsForMedia.find(
+        (item) => regexOnlyAlphabetic(item.name).toLowerCase().includes(regexMediaTitle) || searchResultsForMedia[0]
+    )
 
     if (only == "episodes") {
-        const res = await aniwatch.getEpisodes(closestResult.id) as EpisodesFetchedAnimeWatch
+        const res = await aniwatch.getEpisodes(closestResult!.id) as EpisodesFetchedAnimeWatch
 
         return res.episodes.length == 0 ? null : res.episodes
     }

diff --git a/app/media/[id]/components/AnimeEpisodesContainer/index.tsx b/app/media/[id]/components/AnimeEpisodesContainer/index.tsx
@@ -26,8 +26,18 @@ import simulateRange from '@/app/lib/simulateRange';
 import { fetchWithAniWatch, fetchWithGoGoAnime } from '@/app/lib/fetchAnimeOnApi';
 import regexOnlyAlphabetic from '@/app/lib/regexOnlyAlphabetic';
 import { ImdbEpisode } from '@/app/ts/interfaces/apiImdbInterface';
+import { checkApiMisspellingMedias } from '@/app/lib/checkApiMediaMisspelling';
+
+type EpisodesContainerTypes = {
+  dataCrunchyroll: EpisodesType[],
+  dataImdb: ImdbEpisode[],
+  mediaTitle: string,
+  mediaFormat: string,
+  mediaId: number,
+  totalEpisodes: number
+}
 
-function EpisodesContainer(props: { dataCrunchyroll: EpisodesType[], dataImdb: ImdbEpisode[], mediaTitle: string, mediaId: number, totalEpisodes: number }) {
+function EpisodesContainer(props: EpisodesContainerTypes) {
 
   const { dataCrunchyroll } = props
   const { dataImdb } = props
@@ -130,13 +140,11 @@ function EpisodesContainer(props: { dataCrunchyroll: EpisodesType[], dataImdb: I
 
         const searchResultsForMedia = await aniwatch.searchMedia(regexOnlyAlphabetic(query)) as MediaInfoFetchedAnimeWatch
 
-        console.log(searchResultsForMedia)
-
-        setMediaResultsInfoArray(searchResultsForMedia.animes)
+        setMediaResultsInfoArray(searchResultsForMedia.animes.filter(item => item.type.toLowerCase() == props.mediaFormat.toLowerCase()))
 
         setEpisodeSource(chooseSource)
 
-        mediaEpisodes = await fetchWithAniWatch(query, "episodes") as EpisodesFetchedAnimeWatch["episodes"]
+        mediaEpisodes = await fetchWithAniWatch(query, "episodes", props.mediaFormat, dataImdb.length) as EpisodesFetchedAnimeWatch["episodes"]
 
         setEpisodesDataFetched(mediaEpisodes)
 
@@ -244,9 +252,17 @@ function EpisodesContainer(props: { dataCrunchyroll: EpisodesType[], dataImdb: I
 
             <small>Wrong Episodes? Select bellow!</small>
 
-            <select onChange={(e) => getEpisodesToThisMediaFromAniwatch(e.target.value)}>
+            <select
+              onChange={(e) => getEpisodesToThisMediaFromAniwatch(e.target.value)}
+              defaultValue={checkApiMisspellingMedias(props.mediaTitle).toLowerCase()}
+            >
               {mediaResultsInfoArray.length > 0 && mediaResultsInfoArray?.map((item, key) => (
-                <option key={key} value={item.id}>{item.name}</option>
+                <option
+                  key={key}
+                  value={item.id.toLowerCase()}
+                >
+                  {item.name}
+                </option>
               ))}
             </select>
 

diff --git a/app/media/[id]/page.tsx b/app/media/[id]/page.tsx
@@ -336,6 +336,7 @@ async function MediaPage({ params }: { params: { id: number } }) {
                   dataCrunchyroll={episodesFromCrunchyroll}
                   dataImdb={imdbEpisodes}
                   mediaTitle={mediaData.title.romaji}
+                  mediaFormat={mediaData.format}
                   mediaId={mediaData.id}
                   totalEpisodes={mediaData.nextAiringEpisode ?
                     mediaData.nextAiringEpisode.episode - 1 : mediaData.episodes // work around to api gogoanime not showing episodes

diff --git a/app/watch/[id]/page.tsx b/app/watch/[id]/page.tsx
@@ -51,12 +51,6 @@ async function WatchEpisode({ params, searchParams }: {
         // fetch episodes for this media
         episodes = await fetchWithGoGoAnime(mediaData.title.romaji, "episodes") as MediaEpisodes[]
 
-        // get media info on imdb
-        const imdbMediaInfo: ImdbMediaInfo = await getMediaInfo(true, undefined, undefined, mediaData.title.romaji, mediaData.startDate.year) as ImdbMediaInfo
-
-        // get episodes on imdb
-        imdbMediaInfo.seasons?.map(itemA => itemA.episodes.map(itemB => imdbEpisodes.push(itemB)))
-
     }
     else {
 
@@ -72,6 +66,12 @@ async function WatchEpisode({ params, searchParams }: {
 
     }
 
+    // get media info on imdb
+    const imdbMediaInfo: ImdbMediaInfo = await getMediaInfo(true, undefined, undefined, mediaData.title.romaji, mediaData.startDate.year) as ImdbMediaInfo
+
+    // get episodes on imdb
+    imdbMediaInfo.seasons?.map(itemA => itemA.episodes.map(itemB => imdbEpisodes.push(itemB)))
+
     return (
         <main id={styles.container}>