Handling case no info were found in some anime

src/Components/Content/InfoBoxENG/index.js

@@ -69,10 +69,12 @@ function InfoBoxENG({ loading, info }) {
 								<h5 className="font-black my-[2px] p-[6px] bg-[#282828]/[0.8] inline-block rounded font-bebas-neue text-xl">
 									STATUS
 								</h5>
-								<p className="mb-[6px]">{info?.status}</p>
+								<p className="mb-[6px]">
+									{info?.status || info?.status?.anilist}
+								</p>
 							</div>
 						)}
-						{!!info.popularity.anilist && (
+						{!!info?.popularity?.anilist && (
 							<div>
 								<h5 className="font-black my-[2px] p-[6px] bg-[#282828]/[0.8] inline-block rounded font-bebas-neue text-xl">
 									POPULARITY

src/Components/Content/InfoDetailENG/index.js

@@ -159,7 +159,7 @@ function InfoDetailENG({
 							</div>
 						</div>
 					)}
-					{info.characters.length > 0 && (
+					{info?.characters?.length > 0 && (
 						<CharacterList characters={info.characters} />
 					)}
 					<div className="mt-[18px] mb-[8px]">

src/Pages/AnimeInfoENG/index.js

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from "react"
-import { useParams } from "react-router-dom"
+import { Link, useParams } from "react-router-dom"
 import axios from "axios"
 import InfoBannerENG from "../../Components/Content/InfoBannerENG"
 import InfoBoxENG from "../../Components/Content/InfoBoxENG"
 import InfoDetailENG from "../../Components/Content/InfoDetailENG"
 import useDocumentTitle from "../../Hooks/useDocumentTitle"
 import { API } from "../../constants"
+import errorImage from "../../Utilities/img/error.webp"
 
 function AnimeInfoENG() {
 	const { animeId } = useParams()
@@ -16,6 +17,7 @@ function AnimeInfoENG() {
 	const [title, setTitle] = useState("Loading")
 	const [watchNow, setWatchNow] = useState(null)
 	const [providerOptions, setProviderOptions] = useState([])
+	const [error, setError] = useState(false)
 
 	useEffect(() => {
 		window.scrollTo(0, 0)
@@ -53,6 +55,9 @@ function AnimeInfoENG() {
 					}
 				})
 				.catch((thrown) => {
+					if (thrown.response.status === 404) {
+						setError(true)
+					}
 					if (axios.isCancel(thrown)) return
 				})
 				.finally(() => setLoading(false))
@@ -68,24 +73,42 @@ function AnimeInfoENG() {
 	useDocumentTitle(title)
 	return (
 		<div className="mb-8">
-			<InfoBannerENG loading={loading} info={info} />
-			<div className="w-full flex relative max-lg:flex-col">
-				<InfoBoxENG loading={loading} info={info} />
-				<InfoDetailENG
-					watchNow={watchNow}
-					loading={loading}
-					info={info}
-					setProvider={setProvider}
-					provider={provider}
-					loadingProvider={loadingProvider}
-					setLoadingProvider={setLoadingProvider}
-					setLoading={setLoading}
-					itemId={animeId}
-					setInfo={setInfo}
-					setWatchNow={setWatchNow}
-					providerOptions={providerOptions}
-				/>
-			</div>
+			{error ? (
+				<div className="flex flex-col justify-center items-center gap-2">
+					<img src={errorImage} alt="Error not found anime" />
+					<span className="text-lg">
+						There was something wrong with this one anime, come back later...😖
+					</span>
+					<Link
+						className="border-orange-500 rounded border-2 p-1 hover:bg-orange-500 duration-300 ease-linear hover:text-black"
+						to={`/eng`}
+					>
+						Back to home page
+					</Link>
+				</div>
+			) : (
+				<>
+					{" "}
+					<InfoBannerENG loading={loading} info={info} />
+					<div className="w-full flex relative max-lg:flex-col">
+						<InfoBoxENG loading={loading} info={info} />
+						<InfoDetailENG
+							watchNow={watchNow}
+							loading={loading}
+							info={info}
+							setProvider={setProvider}
+							provider={provider}
+							loadingProvider={loadingProvider}
+							setLoadingProvider={setLoadingProvider}
+							setLoading={setLoading}
+							itemId={animeId}
+							setInfo={setInfo}
+							setWatchNow={setWatchNow}
+							providerOptions={providerOptions}
+						/>
+					</div>
+				</>
+			)}
 		</div>
 	)
 }