diff --git a/components/BeerById/BeerInfoHeader.tsx b/components/BeerById/BeerInfoHeader.tsx index 4b21cdf..8d1f2b9 100644 --- a/components/BeerById/BeerInfoHeader.tsx +++ b/components/BeerById/BeerInfoHeader.tsx @@ -1,20 +1,84 @@ import Link from 'next/link'; import formatDistanceStrict from 'date-fns/formatDistanceStrict'; import format from 'date-fns/format'; -import { useEffect, useState } from 'react'; +import { useContext, useEffect, useState } from 'react'; import { FaRegThumbsUp, FaThumbsUp } from 'react-icons/fa'; import BeerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult'; +import UserContext from '@/pages/contexts/userContext'; +import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema'; +import { z } from 'zod'; const BeerInfoHeader: React.FC<{ beerPost: BeerPostQueryResult }> = ({ beerPost }) => { const createdAtDate = new Date(beerPost.createdAt); const [timeDistance, setTimeDistance] = useState(''); - + const { user } = useContext(UserContext); useEffect(() => { setTimeDistance(formatDistanceStrict(new Date(beerPost.createdAt), new Date())); }, [beerPost.createdAt]); + const [loading, setLoading] = useState(true); const [isLiked, setIsLiked] = useState(false); + useEffect(() => { + if (!user) { + setLoading(false); + return; + } + + fetch(`/api/beers/${beerPost.id}/like/is-liked`) + .then((response) => response.json()) + .then((data) => { + const parsed = APIResponseValidationSchema.safeParse(data); + + if (!parsed.success) { + throw new Error('Invalid API response.'); + } + const { payload } = parsed.data; + + const parsedPayload = z + .object({ + isLiked: z.boolean(), + }) + .safeParse(payload); + + if (!parsedPayload.success) { + throw new Error('Invalid API response payload.'); + } + + const { isLiked: alreadyLiked } = parsedPayload.data; + + setIsLiked(alreadyLiked); + setLoading(false); + }); + }, [user, beerPost.id]); + + const handleLike = async () => { + const response = await fetch(`/api/beers/${beerPost.id}/like`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: '', + }); + + if (!response.ok) { + throw new Error('Something went wrong.'); + } + + const data = await response.json(); + + const parsed = APIResponseValidationSchema.safeParse(data); + + if (!parsed.success) { + throw new Error('Invalid API response.'); + } + + const { success, message } = parsed.data; + + setIsLiked(!isLiked); + console.log({ success, message }); + }; + return (