Simple filter options for articles (#205)

NiallJoeMaher · web-flow · commit f285a7882b81 · 2023-03-21T08:53:42.000Z
* Simple filter options for articles
diff --git a/pages/articles/index.tsx b/pages/articles/index.tsx
@@ -1,17 +1,33 @@
 import { Children, Fragment, useEffect } from "react";
-
 import Head from "next/head";
 import ArticlePreview from "../../components/ArticlePreview/ArticlePreview";
 import ArticleLoading from "../../components/ArticlePreview/ArticleLoading";
 import Layout from "../../components/Layout/Layout";
-import PageHeading from "../../components/PageHeading/PageHeading";
 import { trpc } from "../../utils/trpc";
 import { useInView } from "react-intersection-observer";
+import { useRouter } from "next/router";
 
 const ArticlesPage = () => {
+  const router = useRouter();
+
+  const { filter } = router.query;
+
+  type Filter = "newest" | "oldest" | "top";
+  const filters: Filter[] = ["newest", "oldest", "top"];
+
+  const getSortBy = () => {
+    if (typeof filter === "string") {
+      const hasFilter = filters.some((f) => f === filter);
+      if (hasFilter) return filter as Filter;
+    }
+    return "newest";
+  };
+
+  const selectedSortFilter = getSortBy();
+
   const { status, data, isFetchingNextPage, fetchNextPage, hasNextPage } =
     trpc.post.all.useInfiniteQuery(
-      { limit: 15 },
+      { limit: 15, sort: selectedSortFilter },
       {
         getNextPageParam: (lastPage) => lastPage.nextCursor,
       }
@@ -28,7 +44,7 @@ const ArticlesPage = () => {
   return (
     <>
       <Head>
-        <title>Codú | Articles - View our latest web developer articles</title>
+        <title>{`Codú - View our ${selectedSortFilter} web developer articles`}</title>
         <meta name="description" content="Codú | Web Developer Community" />
         <link rel="icon" href="/favicon.ico" />
         <link rel="manifest" href="site.webmanifest" />
@@ -40,7 +56,7 @@ const ArticlesPage = () => {
         <link rel="alternate" type="application/rss+xml" href="/feed.xml" />
         <meta
           property="og:image"
-          content="/images/og/home-og.png"
+          content="https://codu.co/images/og/home-og.png"
           key="og:image"
         />
         <meta property="og:type" content="website" />
@@ -49,7 +65,29 @@ const ArticlesPage = () => {
       <Layout>
         <div className="border-t border-white">
           <div className="relative sm:mx-auto max-w-2xl mx-4">
-            <PageHeading>Articles</PageHeading>
+            <div className="my-8 border-b-2 pb-4 flex justify-between items-center">
+              <h1 className="text-3xl tracking-tight font-extrabold text-gray-50 sm:text-4xl ">
+                Articles
+              </h1>
+              <div>
+                <label htmlFor="filter" className="sr-only">
+                  Location
+                </label>
+                <select
+                  id="filter"
+                  name="filter"
+                  className="capitalize mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10  ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-pink-600 sm:text-sm sm:leading-6 "
+                  onChange={(e) => {
+                    router.push(`/articles?filter=${e.target.value}`);
+                  }}
+                  value={selectedSortFilter}
+                >
+                  <option>newest</option>
+                  <option>oldest</option>
+                  <option>top</option>
+                </select>
+              </div>
+            </div>
             <section>
               {status === "error" && (
                 <div>Something went wrong... Please refresh your page.</div>
diff --git a/schema/post.ts b/schema/post.ts
@@ -58,6 +58,7 @@ export const GetPostsSchema = z.object({
   userId: z.string().optional(),
   limit: z.number().min(1).max(100).nullish(),
   cursor: z.string().nullish(),
+  sort: z.enum(["newest", "oldest", "top"]),
 });
 
 export type SavePostInput = z.TypeOf<typeof SavePostSchema>;
diff --git a/server/trpc/router/post.ts b/server/trpc/router/post.ts
@@ -14,6 +14,7 @@ import {
   GetByIdSchema,
 } from "../../../schema/post";
 import { removeMarkdown } from "../../../utils/removeMarkdown";
+import { Prisma } from "@prisma/client";
 
 export const postRouter = router({
   create: protectedProcedure
@@ -239,7 +240,22 @@ export const postRouter = router({
   all: publicProcedure.input(GetPostsSchema).query(async ({ ctx, input }) => {
     const userId = ctx.session?.user?.id;
     const limit = input?.limit ?? 50;
-    const { cursor } = input;
+    const { cursor, sort } = input;
+    const orderMapping = {
+      newest: {
+        published: "desc" as Prisma.SortOrder,
+      },
+      oldest: {
+        published: "asc" as Prisma.SortOrder,
+      },
+      top: {
+        likes: {
+          _count: "desc" as Prisma.SortOrder,
+        },
+      },
+    };
+    const orderBy = orderMapping[sort] || orderMapping["newest"];
+
     const response = await ctx.prisma.post.findMany({
       take: limit + 1,
       where: {
@@ -264,9 +280,7 @@ export const postRouter = router({
       },
       cursor: cursor ? { id: cursor } : undefined,
       skip: cursor ? 1 : 0,
-      orderBy: {
-        published: "desc",
-      },
+      orderBy,
     });
 
     const cleaned = response.map((post) => {
