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

Refactor: only load like count span when no longer loading

Browse Source
This commit is contained in:
Aaron William Po
2023-05-08 21:10:26 -04:00
parent b20ba91b3a
commit ab393ee49e
2 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/BeerIndex/BeerCard.tsx
View File

@@ -9,7 +9,7 @@ import BeerPostLikeButton from '../BeerById/BeerPostLikeButton';
const BeerCard: FC<{ post: z.infer<typeof beerPostQueryResult> }> = ({ post }) => {
const { user } = useContext(UserContext);
const { mutate, likeCount } = useGetBeerPostLikeCount(post.id);
const { mutate, likeCount, isLoading } = useGetBeerPostLikeCount(post.id);
return (
<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.ibu} IBU</span>
</div>
{!isLoading && (
<span>
liked by {likeCount} user{likeCount === 1 ? '' : 's'}
</span>
)}
</div>
<div>
{user && <BeerPostLikeButton beerPostId={post.id} mutateCount={mutate} />}
{!!user && <BeerPostLikeButton beerPostId={post.id} mutateCount={mutate} />}
</div>
</div>
</div>

4
src/components/BreweryIndex/BreweryCard.tsx
View File

@@ -11,7 +11,7 @@ const BreweryCard: FC<{ brewery: z.infer<typeof BreweryPostQueryResult> }> = ({
brewery,
}) => {
const { user } = useContext(UserContext);
const { likeCount, mutate } = useGetBreweryPostLikeCount(brewery.id);
const { likeCount, mutate, isLoading } = useGetBreweryPostLikeCount(brewery.id);
return (
<div className="card" key={brewery.id}>
<figure className="card-image h-96">
@@ -40,7 +40,7 @@ const BreweryCard: FC<{ brewery: z.infer<typeof BreweryPostQueryResult> }> = ({
</h4>
</div>
<div className="flex justify-between">
<span>liked by {likeCount} users</span>
{!isLoading && <span>liked by {likeCount} users</span>}
{user && (
<BreweryPostLikeButton breweryPostId={brewery.id} mutateCount={mutate} />
)}