mirror of
https://github.com/aaronpo97/the-biergarten-app.git
synced 2026-02-16 10:42:08 +00:00
Refactor: only load like count span when no longer loading
This commit is contained in:
@@ -9,7 +9,7 @@ import BeerPostLikeButton from '../BeerById/BeerPostLikeButton';
|
|||||||
|
|
||||||
const BeerCard: FC<{ post: z.infer<typeof beerPostQueryResult> }> = ({ post }) => {
|
const BeerCard: FC<{ post: z.infer<typeof beerPostQueryResult> }> = ({ post }) => {
|
||||||
const { user } = useContext(UserContext);
|
const { user } = useContext(UserContext);
|
||||||
const { mutate, likeCount } = useGetBeerPostLikeCount(post.id);
|
const { mutate, likeCount, isLoading } = useGetBeerPostLikeCount(post.id);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="card card-compact bg-base-300" key={post.id}>
|
<div className="card card-compact bg-base-300" key={post.id}>
|
||||||
@@ -44,12 +44,14 @@ const BeerCard: FC<{ post: z.infer<typeof beerPostQueryResult> }> = ({ post }) =
|
|||||||
<span className="text-sm lg:text-lg">{post.abv}% ABV</span>
|
<span className="text-sm lg:text-lg">{post.abv}% ABV</span>
|
||||||
<span className="text-sm lg:text-lg">{post.ibu} IBU</span>
|
<span className="text-sm lg:text-lg">{post.ibu} IBU</span>
|
||||||
</div>
|
</div>
|
||||||
|
{!isLoading && (
|
||||||
<span>
|
<span>
|
||||||
liked by {likeCount} user{likeCount === 1 ? '' : 's'}
|
liked by {likeCount} user{likeCount === 1 ? '' : 's'}
|
||||||
</span>
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
{user && <BeerPostLikeButton beerPostId={post.id} mutateCount={mutate} />}
|
{!!user && <BeerPostLikeButton beerPostId={post.id} mutateCount={mutate} />}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ const BreweryCard: FC<{ brewery: z.infer<typeof BreweryPostQueryResult> }> = ({
|
|||||||
brewery,
|
brewery,
|
||||||
}) => {
|
}) => {
|
||||||
const { user } = useContext(UserContext);
|
const { user } = useContext(UserContext);
|
||||||
const { likeCount, mutate } = useGetBreweryPostLikeCount(brewery.id);
|
const { likeCount, mutate, isLoading } = useGetBreweryPostLikeCount(brewery.id);
|
||||||
return (
|
return (
|
||||||
<div className="card" key={brewery.id}>
|
<div className="card" key={brewery.id}>
|
||||||
<figure className="card-image h-96">
|
<figure className="card-image h-96">
|
||||||
@@ -40,7 +40,7 @@ const BreweryCard: FC<{ brewery: z.infer<typeof BreweryPostQueryResult> }> = ({
|
|||||||
</h4>
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<span>liked by {likeCount} users</span>
|
{!isLoading && <span>liked by {likeCount} users</span>}
|
||||||
{user && (
|
{user && (
|
||||||
<BreweryPostLikeButton breweryPostId={brewery.id} mutateCount={mutate} />
|
<BreweryPostLikeButton breweryPostId={brewery.id} mutateCount={mutate} />
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user