shishantbiswas/JustAnime
1
0
Fork 0
mirror of https://github.com/JustAnimeCore/JustAnime.git synced 2026-04-18 06:11:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

search working

Browse Source
This commit is contained in:
tejaspanchall
2025-06-05 17:47:41 +05:30
parent 39d9db24cd
commit 9b6de000e7
6 changed files with 173 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
next.config.js
View File

@@ -1,7 +1,6 @@
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {
reactStrictMode: true, reactStrictMode: true,
swcMinify: true,
env: { env: {
NEXT_PUBLIC_CORSPROXY_URL: process.env.CORSPROXY_URL, NEXT_PUBLIC_CORSPROXY_URL: process.env.CORSPROXY_URL,
}, },

24
src/app/anime/[id]/page.js
View File

@@ -72,30 +72,14 @@ const NotFoundState = () => (
// Main anime content component // Main anime content component
const AnimeContent = async ({ id }) => { const AnimeContent = async ({ id }) => {
try { try {
console.log('[Server] Fetching info for ID:', id); console.log('[AnimeInfo] Fetching info for ID:', id);
const anime = await fetchAnimeInfo(id); const anime = await fetchAnimeInfo(id);
console.log('[Server] API Response structure:', JSON.stringify({ console.log('[AnimeInfo] API Response received:', anime ? 'success' : 'empty');
info: anime.info ? 'Present' : 'Missing',
moreInfo: anime.moreInfo ? 'Present' : 'Missing',
relatedAnime: Array.isArray(anime.relatedAnime) ? anime.relatedAnime.length : 'Not an array',
recommendations: Array.isArray(anime.recommendations) ? anime.recommendations.length : 'Not an array',
seasons: Array.isArray(anime.seasons) ? anime.seasons.length : 'Not an array',
mostPopular: Array.isArray(anime.mostPopular) ? anime.mostPopular.length : 'Not an array',
promotionalVideos: anime.info?.promotionalVideos ? anime.info.promotionalVideos.length : 'Missing',
characterVoiceActor: anime.info?.characterVoiceActor ? anime.info.characterVoiceActor.length : 'Missing'
}, null, 2));
// Explicitly log the characterVoiceActor data
console.log('[Server] Character Voice Actor data:',
anime.info?.characterVoiceActor
? JSON.stringify(anime.info.characterVoiceActor.slice(0, 2))
: 'Not available'
);
if (!anime || !anime.info) { if (!anime || !anime.info) {
console.error('[Server] Missing required anime data'); console.error('[AnimeInfo] Missing required anime data');
return <NotFoundState />; return <NotFoundState />;
} }
@@ -105,7 +89,7 @@ const AnimeContent = async ({ id }) => {
</div> </div>
); );
} catch (error) { } catch (error) {
console.error('[Server Error]', error); console.error('[AnimeInfo] Error:', error.message);
return <ErrorState error={error.message || 'An error occurred while loading the anime.'} />; return <ErrorState error={error.message || 'An error occurred while loading the anime.'} />;
} }
}; };

41
src/app/home/page.js
View File

@@ -71,6 +71,8 @@ const AnimeGridSection = ({ title, animeList = [], viewMoreLink, isRecent = fals
async function HomePage() { async function HomePage() {
try { try {
console.log('[HomePage] Fetching home page data');
// Fetch all data in parallel // Fetch all data in parallel
const [ const [
spotlightData, spotlightData,
@@ -85,47 +87,49 @@ async function HomePage() {
trending trending
] = await Promise.all([ ] = await Promise.all([
fetchSpotlightAnime().catch(err => { fetchSpotlightAnime().catch(err => {
console.error("Error fetching spotlight anime:", err); console.error("[HomePage] Error fetching spotlight anime:", err.message);
return []; return [];
}), }),
fetchRecentEpisodes().catch(err => { fetchRecentEpisodes().catch(err => {
console.error("Error fetching recent episodes:", err); console.error("[HomePage] Error fetching recent episodes:", err.message);
return { results: [] }; return { results: [] };
}), }),
fetchMostFavorite().catch(err => { fetchMostFavorite().catch(err => {
console.error("Error fetching most favorite:", err); console.error("[HomePage] Error fetching most favorite:", err.message);
return { results: [] }; return { results: [] };
}), }),
fetchTopToday().catch(err => { fetchTopToday().catch(err => {
console.error("Error fetching top today:", err); console.error("[HomePage] Error fetching top today:", err.message);
return []; return [];
}), }),
fetchTopWeek().catch(err => { fetchTopWeek().catch(err => {
console.error("Error fetching top week:", err); console.error("[HomePage] Error fetching top week:", err.message);
return []; return [];
}), }),
fetchTopMonth().catch(err => { fetchTopMonth().catch(err => {
console.error("Error fetching top month:", err); console.error("[HomePage] Error fetching top month:", err.message);
return []; return [];
}), }),
fetchTopAiring().catch(err => { fetchTopAiring().catch(err => {
console.error("Error fetching top airing anime:", err); console.error("[HomePage] Error fetching top airing anime:", err.message);
return { results: [] }; return { results: [] };
}), }),
fetchMostPopular().catch(err => { fetchMostPopular().catch(err => {
console.error("Error fetching popular anime:", err); console.error("[HomePage] Error fetching popular anime:", err.message);
return { results: [] }; return { results: [] };
}), }),
fetchLatestCompleted().catch(err => { fetchLatestCompleted().catch(err => {
console.error("Error fetching latest completed anime:", err); console.error("[HomePage] Error fetching latest completed anime:", err.message);
return { results: [] }; return { results: [] };
}), }),
fetchTrending().catch(err => { fetchTrending().catch(err => {
console.error("Error fetching trending anime:", err); console.error("[HomePage] Error fetching trending anime:", err.message);
return { results: [] }; return { results: [] };
}) })
]); ]);
console.log('[HomePage] Data fetched successfully');
return ( return (
<div className="py-6 bg-[var(--background)] text-white"> <div className="py-6 bg-[var(--background)] text-white">
<div className="w-full px-4 md:px-[4rem]"> <div className="w-full px-4 md:px-[4rem]">
@@ -177,8 +181,21 @@ async function HomePage() {
</div> </div>
); );
} catch (error) { } catch (error) {
console.error('Error in HomePage:', error); console.error('[HomePage] Error in HomePage:', error.message);
return <div>Error loading page</div>; return (
<div className="min-h-screen flex items-center justify-center p-4">
<div className="max-w-lg w-full bg-[var(--card)] border border-[var(--border)] p-6 rounded-lg text-center">
<h2 className="text-xl font-semibold text-white mb-4">Unable to load content</h2>
<p className="text-[var(--text-muted)] mb-6">There was an error loading the home page content. Please try refreshing the page.</p>
<button
onClick={() => window.location.reload()}
className="px-6 py-2 bg-[var(--primary)] text-white rounded-md hover:opacity-90 transition-opacity"
>
Refresh Page
</button>
</div>
</div>
);
} }
} }

90
src/app/search/page.js
View File

@@ -68,15 +68,14 @@ function SearchResults() {
if (yearFilter !== 'all') filters.year = yearFilter; if (yearFilter !== 'all') filters.year = yearFilter;
if (sortOrder !== 'default') filters.sort = sortOrder; if (sortOrder !== 'default') filters.sort = sortOrder;
// Only add these filters if API supports them // Support all client-side filters in API call when possible
// Currently, these may need to be handled client-side if (selectedSeasons.length > 0) filters.season = selectedSeasons.join(',');
// if (selectedSeasons.length > 0) filters.seasons = selectedSeasons; if (selectedTypes.length > 0) filters.type = selectedTypes.join(',');
// if (selectedTypes.length > 0) filters.types = selectedTypes; if (selectedStatus.length > 0) filters.status = selectedStatus.join(',');
// if (selectedStatus.length > 0) filters.status = selectedStatus; if (selectedLanguages.length > 0) filters.language = selectedLanguages.join(',');
// if (selectedLanguages.length > 0) filters.languages = selectedLanguages;
return filters; return filters;
}, [selectedGenre, yearFilter, sortOrder]); }, [selectedGenre, yearFilter, sortOrder, selectedSeasons, selectedTypes, selectedStatus, selectedLanguages]);
// Apply client-side filters for things not supported by API // Apply client-side filters for things not supported by API
const applyClientSideFilters = useCallback((animeList) => { const applyClientSideFilters = useCallback((animeList) => {
@@ -199,20 +198,32 @@ function SearchResults() {
try { try {
const filters = getFiltersForApi(); const filters = getFiltersForApi();
const data = await searchAnime(queryTerm, 1, filters); console.log(`[Search] Searching for: "${queryTerm}" with filters:`, filters);
const processedData = processAnimeData(data);
const data = await searchAnime(queryTerm, 1, filters);
// If no results but no error was thrown, show empty state
if (!data || (!data.results || data.results.length === 0)) {
console.log('[Search] No results found for search term:', queryTerm);
setError(`No results found for "${queryTerm}"`);
setAnimeList([]);
setFilteredList([]);
setIsLoading(false);
return;
}
const processedData = processAnimeData(data);
const results = processedData.results || []; const results = processedData.results || [];
setAnimeList(results); setAnimeList(results);
// Apply client-side filters // Only apply client-side filters for things not supported by API
const filteredResults = applyClientSideFilters(results); const filteredResults = applyClientSideFilters(results);
setFilteredList(filteredResults); setFilteredList(filteredResults);
setHasNextPage(processedData.hasNextPage || false); setHasNextPage(processedData.hasNextPage || false);
} catch (error) { } catch (error) {
console.error('Error searching anime:', error); console.error('[Search] Error searching anime:', error);
setError('Failed to search anime. Please try again later.'); setError('Failed to search anime. Please try again later or check your internet connection.');
setAnimeList([]); setAnimeList([]);
setFilteredList([]); setFilteredList([]);
} finally { } finally {
@@ -249,7 +260,7 @@ function SearchResults() {
setHasNextPage(processedData.hasNextPage || false); setHasNextPage(processedData.hasNextPage || false);
} else { } else {
// Load more search results // For search results, include filters
const filters = getFiltersForApi(); const filters = getFiltersForApi();
const data = await searchAnime(queryTerm, currentPage, filters); const data = await searchAnime(queryTerm, currentPage, filters);
const processedData = processAnimeData(data); const processedData = processAnimeData(data);
@@ -257,7 +268,7 @@ function SearchResults() {
const newResults = processedData.results || []; const newResults = processedData.results || [];
setAnimeList(prev => [...prev, ...newResults]); setAnimeList(prev => [...prev, ...newResults]);
// Apply client-side filters to new results // Only apply client-side filters for things not supported by API
const filteredNewResults = applyClientSideFilters(newResults); const filteredNewResults = applyClientSideFilters(newResults);
setFilteredList(prev => [...prev, ...filteredNewResults]); setFilteredList(prev => [...prev, ...filteredNewResults]);
@@ -272,7 +283,7 @@ function SearchResults() {
}; };
loadMoreData(); loadMoreData();
}, [currentPage, queryTerm, getFiltersForApi, processAnimeData, applyClientSideFilters, isEmptySearch]); }, [currentPage, queryTerm, isEmptySearch, getFiltersForApi, processAnimeData, applyClientSideFilters]);
// Re-apply client-side filters when filters change but don't need API refetch // Re-apply client-side filters when filters change but don't need API refetch
useEffect(() => { useEffect(() => {
@@ -361,39 +372,39 @@ function SearchResults() {
</div> </div>
</div> </div>
{isLoading && currentPage === 1 ? ( {error ? (
<div className="flex justify-center py-12"> <div className="text-center py-16">
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div> <p className="text-red-400">{error}</p>
</div> </div>
) : error ? ( ) : isLoading && currentPage === 1 ? (
<div className="bg-zinc-900 rounded-lg p-8 text-center"> <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4">
<h3 className="text-xl font-medium text-zinc-200 mb-2">Error</h3> {/* Loading skeleton */}
<p className="text-zinc-400">{error}</p> {[...Array(24)].map((_, index) => (
<div key={index} className="animate-pulse bg-gray-800 rounded-md h-64"></div>
))}
</div> </div>
) : !queryTerm && !isEmptySearch ? ( ) : filteredList.length === 0 ? (
<div className="bg-zinc-900 rounded-lg p-8 text-center"> <div className="text-center py-16">
<h3 className="text-xl font-medium text-zinc-200 mb-2">Start Searching</h3> <p className="text-zinc-400">No anime found matching your filters.</p>
<p className="text-zinc-400">Enter a keyword in the search box above to find anime</p>
</div> </div>
) : filteredList.length > 0 ? ( ) : (
<> <>
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 gap-2 sm:gap-4"> <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4 mb-8">
{filteredList.map((anime) => ( {filteredList.map((anime) => (
<AnimeCard key={anime.id} anime={anime} /> <AnimeCard key={anime.id} anime={anime} />
))} ))}
</div> </div>
{/* Load more button */}
{hasNextPage && ( {hasNextPage && (
<div className="mt-8 text-center"> <div className="flex justify-center mt-8 mb-4">
<button <button
className="px-6 py-2 bg-[#1a1a1a] text-white rounded-md hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
onClick={handleLoadMore} onClick={handleLoadMore}
disabled={isLoading} disabled={isLoading}
className={`px-6 py-3 bg-zinc-700 text-white rounded-md ${
isLoading ? 'opacity-50 cursor-not-allowed' : 'hover:bg-zinc-600'
}`}
> >
{isLoading ? ( {isLoading ? (
<span className="flex items-center justify-center"> <span className="flex items-center">
<svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle> <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
@@ -407,13 +418,6 @@ function SearchResults() {
</div> </div>
)} )}
</> </>
) : (
<div className="bg-zinc-900 rounded-lg p-8 text-center">
<h3 className="text-xl font-medium text-zinc-200 mb-2">No results found</h3>
<p className="text-zinc-400">
We couldn&apos;t find any anime matching your search criteria. Please try different filters or a different search term.
</p>
</div>
)} )}
</div> </div>
</div> </div>
@@ -422,11 +426,7 @@ function SearchResults() {
export default function SearchPage() { export default function SearchPage() {
return ( return (
<Suspense fallback={ <Suspense fallback={<div>Loading...</div>}>
<div className="flex justify-center py-12">
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
</div>
}>
<SearchResults /> <SearchResults />
</Suspense> </Suspense>
); );

6
src/components/Navbar.js
View File

@@ -60,7 +60,8 @@ export default function Navbar() {
setSearchSuggestions([{ setSearchSuggestions([{
id: searchQuery.toLowerCase().replace(/\s+/g, '-'), id: searchQuery.toLowerCase().replace(/\s+/g, '-'),
title: `Search for "${searchQuery}"`, title: `Search for "${searchQuery}"`,
type: "SEARCH" type: "SEARCH",
image: null
}]); }]);
} }
} catch (error) { } catch (error) {
@@ -69,7 +70,8 @@ export default function Navbar() {
setSearchSuggestions([{ setSearchSuggestions([{
id: searchQuery.toLowerCase().replace(/\s+/g, '-'), id: searchQuery.toLowerCase().replace(/\s+/g, '-'),
title: `Search for "${searchQuery}"`, title: `Search for "${searchQuery}"`,
type: "SEARCH" type: "SEARCH",
image: null
}]); }]);
} finally { } finally {
setIsLoading(false); setIsLoading(false);

103
src/lib/api.js
View File

@@ -1,4 +1,8 @@
const API_BASE_URL = process.env.ANIWATCH_API || "https://justaniwatchapi.vercel.app/api/v2/hianime"; // Use absolute URL for server components and relative URL for client components
const isServer = typeof window === 'undefined';
const API_BASE_URL = isServer
? "https://justaniwatchapi.vercel.app/api/v2/hianime" // Use absolute URL for server-side
: "/api/v2/hianime"; // Use relative URL for client-side
// Common headers for all API requests // Common headers for all API requests
const API_HEADERS = { const API_HEADERS = {
@@ -484,19 +488,69 @@ export const fetchEpisodeSources = async (episodeId, dub = false) => {
} }
}; };
export const searchAnime = async (query, page = 1) => { export const searchAnime = async (query, page = 1, filters = {}) => {
try { try {
const response = await fetch(`${API_BASE_URL}/search?q=${encodeURIComponent(query)}&page=${page}`); // Build the URL with query and page parameters
if (!response.ok) throw new Error('Failed to search anime'); let url = `${API_BASE_URL}/search?q=${encodeURIComponent(query)}&page=${page}`;
// Add any additional filters to the URL
if (filters && Object.keys(filters).length > 0) {
Object.entries(filters).forEach(([key, value]) => {
if (value) {
url += `&${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
}
});
}
console.log("[API] Searching anime at:", url);
// Make the request
const response = await fetch(url, {
headers: API_HEADERS,
next: { revalidate: 60 }, // Cache for 60 seconds
cache: 'no-cache' // Don't use browser cache
});
if (!response.ok) {
console.error(`[API] Search error: ${response.status} ${response.statusText}`);
throw new Error(`Failed to search anime: ${response.status} ${response.statusText}`);
}
const data = await response.json(); const data = await response.json();
console.log("[API] Search response:", data);
// Check if the response is valid and matches expected format
if (!data.data) {
console.error('[API] Invalid response format from search API:', data);
return {
results: [],
mostPopularResults: [],
currentPage: page,
hasNextPage: false,
searchQuery: query,
searchFilters: filters
};
}
return { return {
results: data.data.animes || [], results: data.data.animes || [],
currentPage: data.data.currentPage, mostPopularResults: data.data.mostPopularAnimes || [],
hasNextPage: data.data.hasNextPage currentPage: data.data.currentPage || page,
hasNextPage: data.data.hasNextPage || false,
totalPages: data.data.totalPages || 1,
searchQuery: data.data.searchQuery || query,
searchFilters: data.data.searchFilters || filters
}; };
} catch (error) { } catch (error) {
console.error('Error searching anime:', error); console.error('[API] Error searching anime:', error);
return { results: [] }; return {
results: [],
mostPopularResults: [],
currentPage: page,
hasNextPage: false,
searchQuery: query,
searchFilters: filters
};
} }
}; };
@@ -530,12 +584,37 @@ export const fetchGenreAnime = async (genre, page = 1) => {
export const fetchSearchSuggestions = async (query) => { export const fetchSearchSuggestions = async (query) => {
try { try {
const response = await fetch(`${API_BASE_URL}/search/suggestion?q=${encodeURIComponent(query)}`); console.log("[API] Fetching search suggestions for:", query);
if (!response.ok) throw new Error('Failed to fetch search suggestions'); const response = await fetch(`${API_BASE_URL}/search/suggestion?q=${encodeURIComponent(query)}`, {
headers: API_HEADERS,
next: { revalidate: 60 }, // Cache for 60 seconds
cache: 'no-cache' // Don't use browser cache
});
if (!response.ok) {
console.error(`[API] Search suggestions error: ${response.status} ${response.statusText}`);
throw new Error(`Failed to fetch search suggestions: ${response.status} ${response.statusText}`);
}
const data = await response.json(); const data = await response.json();
return data.data.suggestions || []; console.log("[API] Search suggestions response:", data);
if (!data.data) {
console.error('[API] Invalid response format from search suggestions API:', data);
return [];
}
// Map the suggestions to include required fields
return (data.data.suggestions || []).map(suggestion => ({
id: suggestion.id,
title: suggestion.name || suggestion.title,
image: suggestion.poster || suggestion.image,
// Include additional fields that might be useful for display
type: suggestion.type || 'ANIME',
jname: suggestion.jname || ''
}));
} catch (error) { } catch (error) {
console.error('Error fetching search suggestions:', error); console.error('[API] Error fetching search suggestions:', error);
return []; return [];
} }
}; };