Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revamped search movies page #114

Merged
merged 1 commit into from
Oct 10, 2024
+183 −191
Merged

Revamped search movies page #114

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
374 changes: 183 additions & 191 deletions client/src/pages/SearchMovie/SearchMovie.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,205 +1,197 @@
import React, { useState } from "react"
import { useNavigate } from "react-router-dom"
import { FaSearch } from "react-icons/fa"
import { toast } from "react-toastify"
import "../../index.css"
import { useSearchMovies } from "@/services/movieService"
import { SimpleMovie } from "@/Types/Movie"
import { genreMap } from "@/lib/stats"
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { FaSearch } from "react-icons/fa";
import { toast } from "react-toastify";
import { useSearchMovies } from "@/services/movieService";
import { SimpleMovie } from "@/Types/Movie";
import { genreMap } from "@/lib/stats";
import { X, ChevronDown } from "lucide-react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button"
import { ChevronDown, X } from "lucide-react"
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";

const SearchMovie: React.FC = () => {
const navigate = useNavigate()
const [searchTerm, setSearchTerm] = useState<string>("")
const [selectedYear, setSelectedYear] = useState<string>("")
const [selectedGenre, setSelectedGenre] = useState<string>("")
const {
data: movies,
isLoading,
error,
} = useSearchMovies(
searchTerm,
selectedYear ? parseInt(selectedYear) : undefined,
selectedGenre ? parseInt(selectedGenre) : undefined
)
const navigate = useNavigate();
const [searchTerm, setSearchTerm] = useState<string>("");
const [selectedYear, setSelectedYear] = useState<string>("");
const [selectedGenre, setSelectedGenre] = useState<string>("");

const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchTerm(e.target.value)
}
const { data: movies, isLoading, error } = useSearchMovies(
searchTerm,
selectedYear ? parseInt(selectedYear) : undefined,
selectedGenre ? parseInt(selectedGenre) : undefined
);

if (error) {
toast.error("An error occurred while searching for movies.")
}
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchTerm(e.target.value);
};

const handleclick = (id: string) => () => {
navigate(`/movie/${id}`)
}
if (error) {
toast.error("An error occurred while searching for movies.");
}

const currentYear = new Date().getFullYear()
const years = Array.from({ length: 70 }, (_, i) => currentYear - i)
const genres = Object.entries(genreMap)
const handleClick = (id: string) => () => {
navigate(`/movie/${id}`);
};

const handleYearSelect = (year: string) => {
setSelectedYear(year === selectedYear ? "" : year)
}
const currentYear = new Date().getFullYear();
const years = Array.from({ length: 70 }, (_, i) => currentYear - i);
const genres = Object.entries(genreMap);

const handleGenreSelect = (genreId: string) => {
setSelectedGenre(genreId === selectedGenre ? "" : genreId)
}
const handleYearSelect = (year: string) => {
setSelectedYear(year === selectedYear ? "" : year);
};

return (
<div className="min-h-screen w-full p-4 bg-background text-white flex flex-col items-center justify-start">
<div className="w-full max-w-3xl rounded-2xl p-4 bg-background text-white shadow-2xl">
<h1 className="text-2xl md:text-3xl font-bold mb-4 italic text-center font-Montserrat">
Find your favorite movies.
</h1>
<div className="mb-6 relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<FaSearch className="text-gray-400" />
</div>
<input
type="text"
className="w-full pl-10 pr-10 py-2 rounded-2xl focus:outline-none focus:ring bg-white bg-opacity-10 text-white"
placeholder="Search Movies"
value={searchTerm}
onChange={handleSearch}
/>
{isLoading && searchTerm.length > 2 && (
<div className="absolute inset-y-0 right-0 pr-3 flex items-center">
<div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white"></div>
const handleGenreSelect = (genreId: string) => {
setSelectedGenre(genreId === selectedGenre ? "" : genreId);
};

return (
<div className="w-full max-h-screen overflow-auto scrollbar-hide text-white flex flex-col items-center justify-center">
<header className="w-full max-w-xl py-8 flex flex-col items-center sm:flex sm:flex-col sm:justify-between">
{!searchTerm && <h1 className="text-4xl font-bold mb-4 text-center sm:text-left">Find Your Favorite Movie Here</h1>}
<div className="relative w-full sm:w-full">
<input
type="text"
className="w-full pl-14 pr-20 py-2 rounded-full bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-[rgb(193,108,249)]"
placeholder="Search movies, TV shows, and more"
value={searchTerm}
onChange={handleSearch}
/>
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
{searchTerm && (
<button
onClick={() => setSearchTerm("")}
className="absolute right-16 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white"
>
<X size={20} />
</button>
)}
</div>
</header>

{/* Filter Section */}
<div className="flex items-center space-x-4 p-4 w-full max-w-xl justify-center flex-wrap">
<div className="flex items-center space-x-2">
{/* Year Dropdown */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button className="w-full sm:w-40 bg-gray-800 text-white hover:bg-gray-700">
{selectedYear || "Select Year"}
<ChevronDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="max-h-[300px] overflow-y-auto bg-gray-800 text-white">
{years.map((year) => (
<DropdownMenuItem
key={year}
onClick={() => handleYearSelect(year.toString())}
>
{year}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
{selectedYear && (
<Button
variant="ghost"
onClick={() => setSelectedYear("")}
className="p-2 text-white"
>
<X className="h-4 w-4" />
</Button>
)}
</div>

<div className="flex items-center space-x-2">
{/* Genre Dropdown */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button className="w-full sm:w-40 bg-gray-800 text-white hover:bg-gray-700">
{selectedGenre
? genreMap[parseInt(selectedGenre)]
: "Select Genre"}
<ChevronDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="max-h-[300px] overflow-y-auto bg-gray-800 text-white">
{genres.map(([id, name]) => (
<DropdownMenuItem
key={id}
onClick={() => handleGenreSelect(id)}
>
{name}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
{selectedGenre && (
<Button
variant="ghost"
onClick={() => setSelectedGenre("")}
className="p-2 text-white"
>
<X className="h-4 w-4" />
</Button>
)}
</div>
</div>

{/* Movie List */}
<div className="flex-1 px-4 py-8 overflow-auto w-full">
{isLoading && searchTerm.length > 2 ? (
<div className="flex justify-center items-center h-64">
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-[rgb(193,108,249)]"></div>
</div>
) : (
<>
{movies && movies.length > 0 ? (
<>
<h2 className="text-2xl font-bold mb-4 text-center sm:text-left">Search Results</h2>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
{movies.map((movie: SimpleMovie) => (
<div
key={movie.id}
className="cursor-pointer transition-transform duration-300 hover:scale-105"
onClick={handleClick(movie.id)}
>
{movie.poster_path ? (
<img
src={`https://image.tmdb.org/t/p/w300${movie.poster_path}`}
alt={movie.title}
className="w-full h-auto rounded"
/>
) : (
<div className="w-full h-0 pb-[150%] bg-gray-800 rounded flex items-center justify-center">
<span className="text-center p-2">{movie.title}</span>
</div>
)}
</div>
<div className="flex flex-col sm:flex-row justify-between space-y-4 sm:space-y-0 sm:space-x-4 mb-6">
<div className="flex items-center space-x-2 w-full sm:w-auto">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button className="w-full sm:w-40 bg-background hover:bg-gradient-to-tr hover:from-gray-900 hover:to-gray-700 bg-opacity-10 text-white">
{selectedYear || "Select Year"}
<ChevronDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="max-h-[400px] overflow-y-auto">
{years.map((year) => (
<DropdownMenuItem
key={year}
className=" hover:bg-gradient-to-br hover:from-gray-900 hover:to-gray-700"
onSelect={() =>
handleYearSelect(year.toString())
}
>
{year}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
{selectedYear && (
<Button
onClick={() => setSelectedYear("")}
className="p-2"
>
<X className="h-4 w-4" />
</Button>
)}
</div>
<div className="flex items-center space-x-2 w-full sm:w-auto">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button className="w-full sm:w-40 bg-background hover:bg-gradient-to-tr hover:from-gray-900 hover:to-gray-700">
{selectedGenre
? genreMap[parseInt(selectedGenre)]
: "Select Genre"}
<ChevronDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="max-h-[400px] overflow-y-auto">
{genres.map(([id, name]) => (
<DropdownMenuItem
key={id}
onSelect={() => handleGenreSelect(id)}
>
{name}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
{selectedGenre && (
<Button
variant="ghost"
onClick={() => setSelectedGenre("")}
className="p-2"
>
<X className="h-4 w-4" />
</Button>
)}
)}
<h3 className="mt-2 text-sm font-medium truncate">
{movie.title}
</h3>
<p className="text-xs text-gray-400">
{movie.release_date?.split("-")[0]}
</p>
</div>
))}
</div>
{isLoading && searchTerm.length > 2 ? (
<div className="mt-2">
<p className="text-sm font-bold text-lime-500">
Loading Please Wait
<span className="inline-block animate-bounce">
.
</span>
<span className="inline-block animate-bounce delay-150">
.
</span>
<span className="inline-block animate-bounce delay-300">
.
</span>
<span className="inline-block animate-bounce delay-300">
.
</span>
</p>
</div>
) : (
<ul className="max-h-[300px] overflow-y-auto bg-white bg-opacity-10 rounded-lg shadow-lg mb-6">
{movies && movies.length > 0
? movies.map((movie: SimpleMovie) => (
<li
key={movie.id}
className="flex items-center space-x-4 p-3 hover:bg-white hover:bg-opacity-20 cursor-pointer border-b border-white border-opacity-20"
onClick={handleclick(movie.id)}
>
{movie.poster_path && (
<img
src={`https://image.tmdb.org/t/p/w92${movie.poster_path}`}
alt={movie.title}
className="w-16 h-24 object-cover rounded"
/>
)}
<div className="flex-grow">
<h3 className="font-semibold">
{movie.title}
</h3>
<p className="text-sm text-gray-300">
{movie.release_date}
</p>
<p className="text-sm text-gray-300">
{movie.genre_ids
?.map((id) => genreMap[id])
.join(", ")}
</p>
</div>
</li>
))
: searchTerm.length > 2 && (
<li className="p-3 text-center">
No movies found.
</li>
)}
</ul>
)}
</div>
</div>
)
}
</>
) : (
searchTerm.length > 2 && (
<div className="text-center text-gray-400 mt-12">
No movies found.
</div>
)
)}
</>
)}
</div>
</div>
);
};

export default SearchMovie
export default SearchMovie;