feat(#6): created blog posts page 💅

drizzle.config.ts

@@ -7,6 +7,7 @@ export default {
   dbCredentials: {
     connectionString: env.DATABASE_URL,
   },
+  verbose: true,
   driver: "pg",
   tablesFilter: ["kujo205-blog_*"],
   out: "./src/server/db",

package.json

@@ -55,6 +55,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.49.3",
+    "react-intersection-observer": "^9.10.2",
     "rehype-code-titles": "^1.2.0",
     "rehype-prism-plus": "^2.0.0",
     "remark-gfm": "3.0.0",

src/app/posts/_components/BlogPostCard.tsx

@@ -0,0 +1,58 @@
+import { type TBlogPost, type TTag } from "@/server/db/schema";
+import { Icons } from "@/components/icons";
+import Link from "next/link";
+const PLACEHOLDER_IMAGE_URL = "/placeholder-blogpost-img.png";
+
+export function BlogPostCard({
+  post,
+}: {
+  post: Omit<TBlogPost, "content"> & { tags: TTag[] };
+}) {
+  const updatedAt = new Date(post.updatedAt!).toLocaleDateString();
+
+  return (
+    <Link href={`/posts/${post.id}`}>
+      <article className="max-w-[512px] overflow-hidden rounded-2xl border border-gray-500  bg-slate-50">
+        <img
+          src={post.thumbnail ?? PLACEHOLDER_IMAGE_URL}
+          className="h-[280px] w-full object-cover"
+        />
+        <div className="flex flex-col gap-4 overflow-hidden p-4">
+          <div>
+            <h1 className="text-2xl font-bold text-violet-600">{post.title}</h1>
+            {/* actions */}
+            <div></div>
+          </div>
+          <p>{post.description}</p>
+          <div className="flex flex-wrap gap-2">
+            {post.tags.map((tag) => (
+              <span
+                key={tag.id}
+                className="text-purple-accent border-purple-accent rounded-[12px] border px-5 py-2"
+              >
+                {tag.name}
+              </span>
+            ))}
+          </div>
+          {/* meta information */}
+          <div className="flex justify-between">
+            <span className="text-gray-neutral flex gap-2">
+              <Icons.Eye />
+              {post.watched}
+            </span>
+            <span>
+              Last edited:
+              <span className="font-bold text-pink-500">
+                {formatISOString(updatedAt)}
+              </span>
+            </span>
+          </div>
+        </div>
+      </article>
+    </Link>
+  );
+}
+
+function formatISOString(date: string) {
+  return `  ${new Date(date).toLocaleDateString().toString()}`;
+}

src/app/posts/_components/PostSearch/index.tsx

@@ -2,7 +2,6 @@
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Search } from "lucide-react";
-import { SortOptionsSelect } from "./SortOptionsSelect";
 import { useMemo, type SetStateAction, type Dispatch } from "react";
 import { api } from "@/trpc/react";
 
@@ -41,7 +40,7 @@ function PostSearch({
   }
 
   return (
-    <div className="flex max-w-[1080px] flex-col gap-[16px] 0:w-full">
+    <div className="flex max-w-[1080px] flex-col gap-4 py-4 0:w-full">
       {/* search with select */}
       <div className=" flex justify-between rounded bg-gradient-to-r from-[#4F3ABA] to-[#D94E68] p-[16px] max-sm:flex-col max-sm:gap-[16px]">
         <div className="flex w-full flex-[.55] gap-[8px]">
@@ -53,7 +52,6 @@ function PostSearch({
             <Search onChange={() => onSearchBtnClick()} />
           </Button>
         </div>
-        <SortOptionsSelect className="w-full flex-[.2]" />
       </div>
 
       {/* tags */}

src/app/posts/page.tsx

@@ -1,9 +1,11 @@
 "use client";
-
+import { useInView } from "react-intersection-observer";
+import { BlogPostCard } from "./_components/BlogPostCard";
 import { api } from "@/trpc/react";
 import { PostSearch } from "./_components/PostSearch";
 import { useState } from "react";
 import { useDebounce } from "use-debounce";
+const PAGE_SIZE = 9;
 
 export default function Page() {
   const [selectedTagIds, setSelectedTagIds] = useState<number[]>([]);
@@ -13,26 +15,32 @@ export default function Page() {
   function handleSearchValueChange(value: string) {
     setSearch(value);
   }
+  const {
+    data: postsResponse,
+    refetch,
+    fetchNextPage,
+  } = api.post.getPosts.useInfiniteQuery(
+    {
+      pageSize: PAGE_SIZE,
+      search: debouncedSearch,
+      tagIds: selectedTagIds,
+    },
+    {
+      initialCursor: 0,
+      getNextPageParam: (lastPage) => {
+        const lastPost = lastPage.posts[lastPage.posts.length - 1];
+        return lastPost?.id;
+      },
+    },
+  );
 
-  const { data: postsResponse, refetch } = api.post.getPosts.useInfiniteQuery({
-    page: 0,
-    pageSize: 5,
-    search: debouncedSearch,
-    tagIds: selectedTagIds,
+  const { ref } = useInView({
+    /* Optional options */
+    threshold: 0,
+    onChange: () => {
+      fetchNextPage();
+    },
   });
-  //
-  // const { data: postsResponse, refetch } = api.post.getPosts.useQuery(
-  //   {
-  //     cursor: 0,
-  //     page: 0,
-  //     pageSize: 5,
-  //     search: debouncedSearch,
-  //     tagIds: selectedTagIds,
-  //   },
-  //   // {
-  //   //   getNextPageParam: (lastPage) =>
-  //   // },
-  // );
 
   return (
     <main className="flex flex-col items-center px-4 py-16">
@@ -44,9 +52,12 @@ export default function Page() {
         setSelectedTagIds={setSelectedTagIds}
         selectedTagIds={selectedTagIds}
       />
-      {JSON.stringify(postsResponse, undefined, 2)}
-      {/*{postsResponse.left}*/}
-      <h1>Working on it cap</h1>
+      <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {postsResponse?.pages.map((page) =>
+          page.posts.map((post) => <BlogPostCard key={post.id} post={post} />),
+        )}
+        <div ref={ref} />
+      </div>
     </main>
   );
 }

src/components/icons/index.ts

@@ -5,6 +5,7 @@ import {
   MousePointerClick,
   PlusIcon,
   Search,
+  Eye,
 } from "lucide-react";
 
 export const Icons = {
@@ -13,4 +14,5 @@ export const Icons = {
   MousePointerClick,
   Delete,
   PlusIcon,
+  Eye,
 };

src/server/api/routers/post.ts

@@ -27,23 +27,21 @@ export const postRouter = createTRPCRouter({
       z.object({
         cursor: z.number().optional(),
         search: z.string(),
-        page: z.number(),
         pageSize: z.number(),
         tagIds: z.array(z.number()),
       }),
     )
     .query(async ({ input, ctx }) => {
-      const { posts, pagesLeft } = await PostService.getSortedPosts(
+      const { posts } = await PostService.getSortedPosts(
         input.tagIds,
-        input.page,
         input.search,
         input.pageSize,
+        input.cursor!,
       );
 
       return {
         ...input,
         posts,
-        left: pagesLeft,
       };
     }),
 

src/server/api/services/Post.service.ts

@@ -1,63 +1,48 @@
 import { db } from "../../db";
-import { ilike, or } from "drizzle-orm";
-import { blogPosts } from "../../db/schema";
+import { ilike, or, and, inArray, gt } from "drizzle-orm";
+import { blogPosts, tagsToBlogPosts } from "../../db/schema";
 
 class PostService {
   public async getSortedPosts(
     tagIds: number[],
-    page: number,
     search: string,
     pageSize: number,
+    cursor: number,
   ) {
     const posts = await db.query.blogPosts.findMany({
-      where: or(
-        ilike(blogPosts.title, `%${search}%`),
-        ilike(blogPosts.content, `%${search}%`),
-        ilike(blogPosts.description, `%${search}%`),
+      limit: pageSize,
+      where: and(
+        cursor ? gt(blogPosts.id, cursor) : undefined,
+        or(
+          ilike(blogPosts.title, `%${search}%`),
+          ilike(blogPosts.content, `%${search}%`),
+          ilike(blogPosts.description, `%${search}%`),
+        ),
       ),
       columns: {
         content: false,
       },
       with: {
         tagsToBlogPosts: {
+          where:
+            tagIds.length > 0
+              ? inArray(tagsToBlogPosts.tagId, tagIds)
+              : undefined,
           with: {
             blogPostTags: true,
           },
         },
       },
     });
 
-    const postInputTagsSize = tagIds.length;
-
-    const postsSortedByTags = posts
-      .filter((post) => {
-        const tagIds = post.tagsToBlogPosts.map((tag) => tag.tagId);
-        if (postInputTagsSize === 0) return true;
-
-        return tagIds.some((tagId) => tagIds.includes(tagId));
-      })
-      .sort((postA, postB) => {
-        const aTagIds = postA.tagsToBlogPosts.map((tag) => tag.tagId);
-        const bTagIds = postB.tagsToBlogPosts.map((tag) => tag.tagId);
-
-        return (
-          this.countHowManyMatches(bTagIds, tagIds) -
-          this.countHowManyMatches(aTagIds, tagIds)
-        );
-
-        return 1;
-      });
-
-    const postsSlicedByPage = postsSortedByTags.slice(
-      page * pageSize,
-      (page + 1) * pageSize,
-    );
-
-    const pagesLeft = Math.ceil(postsSortedByTags.length / pageSize) - page;
+    const mappedPosts = posts.map((post) => ({
+      ...post,
+      tagsToBlogPosts: undefined,
+      tags: post.tagsToBlogPosts.map((tag) => tag.blogPostTags),
+    }));
 
     return {
-      posts: postsSlicedByPage,
-      pagesLeft,
+      posts: mappedPosts,
     };
   }
 

src/server/db/index.ts

@@ -7,4 +7,4 @@ export const connection = postgres(env.DATABASE_URL, {
   prepare: false,
 });
 
-export const db = drizzle(connection, { schema });
+export const db = drizzle(connection, { schema, logger: true });

src/server/db/schema.ts

@@ -148,3 +148,4 @@ export const messages = pgTable("message", {
 
 export type UserRole = typeof users.$inferSelect.role;
 export type TTag = typeof blogPostTags.$inferSelect;
+export type TBlogPost = typeof blogPosts.$inferSelect;

tailwind.config.ts

@@ -67,6 +67,8 @@ const config = {
           foreground: "hsl(var(--card-foreground))",
         },
         "font-accent": "var(--text-accent)",
+        "purple-accent": "#5D4B74",
+        "gray-neutral": "#7F7F7F",
       },
       borderRadius: {
         lg: "var(--radius)",