Added favorite/s pages

master
MickSlash 2023-08-18 15:27:23 +02:00
parent 2116b70e22
commit 00a1538fe2
7 changed files with 128 additions and 8 deletions

View File

@ -0,0 +1,21 @@
import axios from "axios";
import React, {useCallback,useMemo} from "react";
import useCurrentUser from "@/hooks/useCurrentUser";
import useFavorite from "@/hooks/useFavorite";
import { AiOutlinePlus } from "react-icons/ai"
interface FavoriteButtonProps {
movieId: string
}
const FavoriteButton: React.FC<FavoriteButtonProps> = ({movieId}) => {
return (
<div className="cursor-pointer group/item w-6 h-6 lg:w-10 lg:h-10 border-white border-2 rounded-full flex justify-center items-center transition hover:border-neutral-300 ">
<AiOutlinePlus className="text-white" size={25} />
</div>
)
}
export default FavoriteButton;

View File

@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import { BsFillPlayFill } from "react-icons/bs"; import { BsFillPlayFill } from "react-icons/bs";
import FavoriteButton from "./FavoriteButton"
interface MovieCardProps { interface MovieCardProps {
data: Record<string,any>[]; data: Record<string,any>[];
@ -27,6 +28,7 @@ const MovieCard: React.FC<MovieCardProps> = ({ data }) => {
<div className="cursor-pointer w-6 h-6 lg:w-10 lg:h-10 bg-white rounded-full flex justify-center items-center transition hover:bg-neutral-300" onClick={() => {}}> <div className="cursor-pointer w-6 h-6 lg:w-10 lg:h-10 bg-white rounded-full flex justify-center items-center transition hover:bg-neutral-300" onClick={() => {}}>
<BsFillPlayFill size={30} /> <BsFillPlayFill size={30} />
</div> </div>
<FavoriteButton movieId={data?.id} />
</div> </div>
<p className="text-green-400 font-semibold mt-4"> <p className="text-green-400 font-semibold mt-4">
New <span className="text-white">2023</span> New <span className="text-white">2023</span>

18
hooks/useFavorite.ts Normal file
View File

@ -0,0 +1,18 @@
import useSWR from 'swr';
import fetcher from '@/lib/fetcher';
const useFavorite = () => {
const {data,error,isLoading, mutate} = useSWR('/api/favorites',fetcher,{
revalidateIfStale: false,
revalidateOnFocus: false,
revalidateOnReconnect: false
});
return {
data,
error,
isLoading,
mutate
}
}
export default useFavorite;

7
package-lock.json generated
View File

@ -18,7 +18,6 @@
"bcrypt": "^5.1.0", "bcrypt": "^5.1.0",
"eslint": "8.42.0", "eslint": "8.42.0",
"eslint-config-next": "13.4.4", "eslint-config-next": "13.4.4",
"loadash": "^1.0.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"next": "13.4.4", "next": "13.4.4",
"next-auth": "^4.22.1", "next-auth": "^4.22.1",
@ -2998,12 +2997,6 @@
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
}, },
"node_modules/loadash": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/loadash/-/loadash-1.0.0.tgz",
"integrity": "sha512-xlX5HBsXB3KG0FJbJJG/3kYWCfsCyCSus3T+uHVu6QL6YxAdggmm3QeyLgn54N2yi5/UE6xxL5ZWJAAiHzHYEg==",
"deprecated": "Package is unsupport. Please use the lodash package instead."
},
"node_modules/locate-path": { "node_modules/locate-path": {
"version": "6.0.0", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",

61
pages/api/favorite.ts Normal file
View File

@ -0,0 +1,61 @@
import prismadb from '@/lib/prismadb';
import { NextApiRequest,NextApiResponse } from "next";
import { without } from "lodash";
import serverAuth from '@/lib/serverAuth';
export default async function handler(res: NextApiResponse,req:NextApiRequest) {
try{
if (req.method === "POST"){
const { currentUser } = await serverAuth(req);
const { movieId } = req.body;
const existingMovie = await prismadb.movie.findUnique({
where: {
id: movieId,
}
});
if(!existingMovie){
throw new Error("ID Non Valido!")
}
const user = await prismadb.user.update({
where: {
email: currentUser.email || '',
},
data: {
favoriteIds: {
push: movieId,
}
}
})
return res.status(200).json(user)
}
if(req.method === "DELETE"){
const { currentUser } = await serverAuth(req);
const { movieId } = req.body;
const existingMovie = await prismadb.movie.findUnique({
where: {
id: movieId,
}
});
if(!existingMovie){
throw new Error("ID Non Valido!");
}
const updatedFavoritesId = without(currentUser.favoriteIds,movieId);
const updatedUser = await prismadb.user.update({
where: {
email: currentUser.email || '',
},
data: {
favoriteIds: {
push: updatedFavoritesId,
}
}
})
return res.status(200).json(updatedUser);
}
return res.status(405).end()
}catch(error){
console.log(error)
res.status(400).end()
}
}

25
pages/api/favorites.ts Normal file
View File

@ -0,0 +1,25 @@
import prismadb from '@/lib/prismadb';
import { NextApiRequest,NextApiResponse } from "next";
import serverAuth from '@/lib/serverAuth';
export default async function handler(res: NextApiResponse,req:NextApiRequest) {
if(req.method !== "GET"){
return res.status(405).end()
}
try {
const { currentUser } = await serverAuth(req);
const favoritesMovie = await prismadb.movie.findMany({
where: {
id: {
in: currentUser?.favoriteIds,
}
}
})
return res.status(200).json(favoritesMovie);
}catch(error){
console.log(error)
return res.status(400).end()
}
}

View File

@ -28,7 +28,7 @@ export default function Home() {
<> <>
<Navbar /> <Navbar />
<Billboard /> <Billboard />
<div> <div className="pb-40">
<MovieList title="Popolari" data={film} /> <MovieList title="Popolari" data={film} />
</div> </div>
</> </>