AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 20:13:49 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Add like count and extracted like button out of parent

Browse Source
This commit is contained in:
Aaron William Po
2023-02-15 21:35:18 -05:00
parent 5561f209e9
commit d50ce7497b
6 changed files with 97 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
components/BeerById/BeerInfoHeader.tsx
View File

@@ -2,50 +2,29 @@ import Link from 'next/link';
import formatDistanceStrict from 'date-fns/formatDistanceStrict';
import format from 'date-fns/format';
import { FC, useContext, useEffect, useState } from 'react';
import { FaRegThumbsUp, FaThumbsUp } from 'react-icons/fa';
import BeerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
import UserContext from '@/contexts/userContext';
import sendCheckIfUserLikesBeerPostRequest from '@/requests/sendCheckIfUserLikesBeerPostRequest';
import sendLikeRequest from '../../requests/sendLikeRequest';
import BeerPostLikeButton from './BeerPostLikeButton';
const BeerInfoHeader: FC<{ beerPost: BeerPostQueryResult }> = ({ beerPost }) => {
const BeerInfoHeader: FC<{ beerPost: BeerPostQueryResult; initialLikeCount: number }> = ({
beerPost,
initialLikeCount,
}) => {
const createdAtDate = new Date(beerPost.createdAt);
const [timeDistance, setTimeDistance] = useState('');
const { user } = useContext(UserContext);
const [loading, setLoading] = useState(true);
const [isLiked, setIsLiked] = useState(false);
const [likeCount, setLikeCount] = useState(initialLikeCount);
useEffect(() => {
if (!user) {
setLoading(false);
return;
}
sendCheckIfUserLikesBeerPostRequest(beerPost.id)
.then((currentLikeStatus) => {
setIsLiked(currentLikeStatus);
setLoading(false);
})
.catch((e) => {
console.error(e);
setLoading(false);
});
}, [user, beerPost.id]);
setLikeCount(initialLikeCount);
}, [initialLikeCount]);
useEffect(() => {
setTimeDistance(formatDistanceStrict(new Date(beerPost.createdAt), new Date()));
}, [beerPost.createdAt]);
const handleLike = async () => {
try {
await sendLikeRequest(beerPost);
setIsLiked(!isLiked);
} catch (e) {
console.error(e);
}
};
return (
<div className="card flex flex-col justify-center bg-base-300">
<div className="card-body">
@@ -75,8 +54,8 @@ const BeerInfoHeader: FC<{ beerPost: BeerPostQueryResult }> = ({ beerPost }) =>
<p>{beerPost.description}</p>
<div className="mt-5 flex justify-between">
<div>
<div className="mb-1">
<div className="space-y-1">
<div>
<Link
className="link-hover link text-lg font-bold"
href={`/beers/types/${beerPost.type.id}`}
@@ -88,31 +67,13 @@ const BeerInfoHeader: FC<{ beerPost: BeerPostQueryResult }> = ({ beerPost }) =>
<span className="mr-4 text-lg font-medium">{beerPost.abv}% ABV</span>
<span className="text-lg font-medium">{beerPost.ibu} IBU</span>
</div>
<div>
<span>Liked by {likeCount} users</span>
</div>
</div>
<div className="card-actions">
<div className="card-actions items-end">
{user && (
<button
type="button"
className={`btn gap-2 rounded-2xl ${
!isLiked ? 'btn-ghost outline' : 'btn-primary'
}`}
onClick={() => {
handleLike();
}}
disabled={loading}
>
{isLiked ? (
<>
<FaThumbsUp className="text-2xl" />
<span>Liked</span>
</>
) : (
<>
<FaRegThumbsUp className="text-2xl" />
<span>Like</span>
</>
)}
</button>
<BeerPostLikeButton beerPostId={beerPost.id} setLikeCount={setLikeCount} />
)}
</div>
</div>