From 39d9db24cd9b195a00733b6058deb06f8e2ea1fd Mon Sep 17 00:00:00 2001 From: Tejas Panchal Date: Thu, 29 May 2025 00:50:46 +0530 Subject: [PATCH] bug fixes --- src/app/search/page.js | 2 +- src/components/EpisodeList.js | 15 +++- src/components/GenreBar.js | 10 +-- src/components/Navbar.js | 141 ++++++++------------------------- src/components/SharedLayout.js | 3 +- 5 files changed, 54 insertions(+), 117 deletions(-) diff --git a/src/app/search/page.js b/src/app/search/page.js index 8c85921..b8d1cba 100644 --- a/src/app/search/page.js +++ b/src/app/search/page.js @@ -411,7 +411,7 @@ function SearchResults() {

No results found

- We couldn't find any anime matching your search criteria. Please try different filters or a different search term. + We couldn't find any anime matching your search criteria. Please try different filters or a different search term.

)} diff --git a/src/components/EpisodeList.js b/src/components/EpisodeList.js index db29c23..97aca7a 100644 --- a/src/components/EpisodeList.js +++ b/src/components/EpisodeList.js @@ -32,8 +32,21 @@ export default function EpisodeList({ episodes, currentEpisode, onEpisodeClick, } }; + // Check initially checkCurrentEpisode(); - }, [episodes, window.location.pathname]); + + // Set up listener for URL changes using the History API + const handleUrlChange = () => { + checkCurrentEpisode(); + }; + + window.addEventListener('popstate', handleUrlChange); + + // Clean up + return () => { + window.removeEventListener('popstate', handleUrlChange); + }; + }, [episodes, episodesPerPage]); const filteredEpisodes = useMemo(() => { if (!searchQuery) return episodes; diff --git a/src/components/GenreBar.js b/src/components/GenreBar.js index f6f2a18..97543e8 100644 --- a/src/components/GenreBar.js +++ b/src/components/GenreBar.js @@ -1,7 +1,7 @@ 'use client'; import Link from 'next/link'; -import { useState, useEffect, useRef } from 'react'; +import { useState, useEffect, useRef, useMemo } from 'react'; import { fetchGenres } from '@/lib/api'; export default function GenreBar() { @@ -19,12 +19,12 @@ export default function GenreBar() { return string.charAt(0).toUpperCase() + string.slice(1); }; - // Predefined genres exactly as specified - const defaultGenres = [ + // Predefined genres exactly as specified - wrapped in useMemo to prevent recreation on every render + const defaultGenres = useMemo(() => [ "Action", "Adventure", "Comedy", "Drama", "Ecchi", "Fantasy", "Horror", "Mahou Shoujo", "Mecha", "Music", "Mystery", "Psychological", "Romance", "Sci-Fi", "Slice of Life", "Sports", "Supernatural", "Thriller" - ]; + ], []); // Handle long names on mobile const getMobileGenreName = (genre) => { @@ -85,7 +85,7 @@ export default function GenreBar() { setGenres(defaultGenres); setIsLoading(false); - }, []); + }, [defaultGenres]); // Check scroll position to determine button visibility useEffect(() => { diff --git a/src/components/Navbar.js b/src/components/Navbar.js index d2b6282..fc48f4e 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -1,6 +1,7 @@ 'use client'; import Link from 'next/link'; +import Image from 'next/image'; import { useState, useEffect, useRef } from 'react'; import { useRouter } from 'next/navigation'; import { @@ -24,82 +25,6 @@ export default function Navbar() { const searchInputRef = useRef(null); const router = useRouter(); - // Enhanced fallback suggestions with popular anime - const fallbackSuggestions = [ - { - id: "naruto", - title: "Naruto", - image: "https://cdn.myanimelist.net/images/anime/13/17405.jpg", - type: "TV", - year: 2002, - episodes: 220, - rating: 79 - }, - { - id: "one-piece", - title: "One Piece", - image: "https://cdn.myanimelist.net/images/anime/6/73245.jpg", - type: "TV", - year: 1999, - episodes: 1000, - rating: 85 - }, - { - id: "attack-on-titan", - title: "Attack on Titan", - image: "https://cdn.myanimelist.net/images/anime/10/47347.jpg", - type: "TV", - year: 2013, - episodes: 75, - rating: 90 - }, - { - id: "demon-slayer", - title: "Demon Slayer", - image: "https://cdn.myanimelist.net/images/anime/1286/99889.jpg", - type: "TV", - year: 2019, - episodes: 26, - rating: 86 - }, - { - id: "my-hero-academia", - title: "My Hero Academia", - image: "https://cdn.myanimelist.net/images/anime/10/78745.jpg", - type: "TV", - year: 2016, - episodes: 113, - rating: 82 - }, - { - id: "jujutsu-kaisen", - title: "Jujutsu Kaisen", - image: "https://cdn.myanimelist.net/images/anime/1171/109222.jpg", - type: "TV", - year: 2020, - episodes: 24, - rating: 88 - }, - { - id: "tokyo-revengers", - title: "Tokyo Revengers", - image: "https://cdn.myanimelist.net/images/anime/1839/122012.jpg", - type: "TV", - year: 2021, - episodes: 24, - rating: 80 - }, - { - id: "death-note", - title: "Death Note", - image: "https://cdn.myanimelist.net/images/anime/9/9453.jpg", - type: "TV", - year: 2006, - episodes: 37, - rating: 90 - } - ]; - // Track scroll position useEffect(() => { const handleScroll = () => { @@ -131,13 +56,21 @@ export default function Navbar() { // Take top 5 results setSearchSuggestions(apiSuggestions.slice(0, 5)); } else { - // Use fallback with pattern matching - getFilteredFallbackSuggestions(searchQuery); + // Create a generic suggestion based on the search query + setSearchSuggestions([{ + id: searchQuery.toLowerCase().replace(/\s+/g, '-'), + title: `Search for "${searchQuery}"`, + type: "SEARCH" + }]); } } catch (error) { console.error('Error in search component:', error); - // Use fallback with pattern matching - getFilteredFallbackSuggestions(searchQuery); + // Create a generic suggestion + setSearchSuggestions([{ + id: searchQuery.toLowerCase().replace(/\s+/g, '-'), + title: `Search for "${searchQuery}"`, + type: "SEARCH" + }]); } finally { setIsLoading(false); } @@ -147,24 +80,6 @@ export default function Navbar() { } }; - // Helper function to get filtered fallback suggestions - const getFilteredFallbackSuggestions = (query) => { - const filtered = fallbackSuggestions.filter(anime => - anime.title.toLowerCase().includes(query.toLowerCase()) - ); - - if (filtered.length > 0) { - setSearchSuggestions(filtered.slice(0, 5)); - } else { - // Create a generic suggestion based on the search query - setSearchSuggestions([{ - id: query.toLowerCase().replace(/\s+/g, '-'), - title: `Search for "${query}"`, - type: "SEARCH" - }]); - } - }; - const debounceTimer = setTimeout(() => { updateSuggestions(); }, 300); // 300ms debounce time @@ -313,7 +228,7 @@ export default function Navbar() { {/* Logo */}
- JustAnime Logo + JustAnime Logo
@@ -374,11 +289,15 @@ export default function Navbar() {
{suggestion.image ? ( - {suggestion.title} +
+ {suggestion.title} +
) : (
No img @@ -584,11 +503,15 @@ export default function Navbar() {
{suggestion.image ? ( - {suggestion.title} +
+ {suggestion.title} +
) : (
No img diff --git a/src/components/SharedLayout.js b/src/components/SharedLayout.js index 8731c1e..f42d5f2 100644 --- a/src/components/SharedLayout.js +++ b/src/components/SharedLayout.js @@ -1,6 +1,7 @@ 'use client'; import Navbar from './Navbar'; +import Image from 'next/image'; const Footer = () => { return ( @@ -10,7 +11,7 @@ const Footer = () => {
- JustAnime Logo + JustAnime Logo