Begin work on infinite beer scroll

src/components/BeerById/BeerPostLikeButton.tsx

@@ -20,8 +20,8 @@ const BeerPostLikeButton: FC<{
     try {
       setLoading(true);
       await sendLikeRequest(beerPostId);
-      await mutateCount();
-      await mutateLikeStatus();
+
+      await Promise.all([mutateCount(), mutateLikeStatus()]);
       setLoading(false);
     } catch (e) {
       setLoading(false);

src/components/BeerIndex/BeerCard.tsx

@@ -1,13 +1,19 @@
 import Link from 'next/link';
-import { FC } from 'react';
+import { FC, useContext } from 'react';
 import Image from 'next/image';
 import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import { z } from 'zod';
+import UserContext from '@/contexts/userContext';
+import useGetLikeCount from '@/hooks/useGetLikeCount';
+import BeerPostLikeButton from '../BeerById/BeerPostLikeButton';
 
 const BeerCard: FC<{ post: z.infer<typeof beerPostQueryResult> }> = ({ post }) => {
+  const { user } = useContext(UserContext);
+  const { mutate, likeCount } = useGetLikeCount(post.id);
+
   return (
-    <div className="card bg-base-300" key={post.id}>
-      <figure className="card-image h-96">
+    <div className="card card-compact bg-base-300" key={post.id}>
+      <figure className="h-96">
         {post.beerImages.length > 0 && (
           <Image
             src={post.beerImages[0].path}
@@ -18,12 +24,31 @@ const BeerCard: FC<{ post: z.infer<typeof beerPostQueryResult> }> = ({ post }) =
         )}
       </figure>
 
-      <div className="card-body space-y-3">
+      <div className="card-body justify-between">
+        <div className="space-y-1">
+          <Link href={`/beers/${post.id}`}>
+            <h2 className="link-hover link truncate text-2xl font-bold lg:text-3xl">
+              {post.name}
+            </h2>
+          </Link>
+          <Link href={`/breweries/${post.brewery.id}`}>
+            <h3 className="text-md link-hover link truncate lg:text-xl">
+              {post.brewery.name}
+            </h3>
+          </Link>
+        </div>
         <div>
-          <h2 className="text-3xl font-bold">
-            <Link href={`/beers/${post.id}`}>{post.name}</Link>
-          </h2>
-          <h3 className="text-xl font-semibold">{post.brewery.name}</h3>
+          <div>
+            <p className="text-md lg:text-xl">{post.type.name}</p>
+            <div className="space-x-3">
+              <span className="text-sm lg:text-lg">{post.abv}% ABV</span>
+              <span className="text-sm lg:text-lg">{post.ibu} IBU</span>
+            </div>
+          </div>
+          <div className="flex justify-between">
+            liked by {likeCount} users
+            {user && <BeerPostLikeButton beerPostId={post.id} mutateCount={mutate} />}
+          </div>
         </div>
       </div>
     </div>

src/components/BeerIndex/BeerPostLoadingCard.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+
+const BeerPostLoadingCard: FC = () => {
+  return (
+    <div className="card bg-base-300">
+      <figure className="h-96 border-8 border-base-300 bg-base-300">
+        <div className="h-full w-full animate-pulse rounded-md bg-base-100" />
+      </figure>
+      <div className="card-body h-52">
+        <div className="flex animate-pulse space-x-4">
+          <div className="flex-1 space-y-4 py-1">
+            <div className="h-4 w-3/4 rounded bg-base-100" />
+            <div className="space-y-2">
+              <div className="h-4 rounded bg-base-100" />
+              <div className="h-4 w-5/6 rounded bg-base-100" />
+              <div className="h-4 w-5/6 rounded bg-base-100" />
+              <div className="h-4 rounded bg-base-100" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BeerPostLoadingCard;