Fishamble feature #393 article search (#449)

John-Paul-Larkin · web-flow · commit 6e5c9e59c739 · 2023-10-01T11:46:26.000+01:00
* Implement search feature
* made search bar responsive
diff --git a/components/ArticleSearch/SearchBar.tsx b/components/ArticleSearch/SearchBar.tsx
@@ -0,0 +1,28 @@
+
+interface Props {
+  searchTerm: string;
+  setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const SearchBar = (props: Props) => {
+  const { searchTerm, setSearchTerm } = props;
+
+  console.log(searchTerm);
+
+  return (
+    <div className='flex grow justify-end'>
+      <label htmlFor="searchInput" aria-label="Enter search term"></label>
+      <input
+        onChange={(e) => setSearchTerm(e.target.value)}
+        type="text"
+        value={searchTerm}
+        placeholder="search"
+        id="searchInput"
+        name="searchInput"
+        className="max-w-56 w-56 max-[500px]:w-full sm:text-sm sm:leading-6 ml-2 mr-2 mt-2 block rounded-md border-0 p-1.5  ring-1 ring-inset ring-neutral-300 focus:ring-2 focus:ring-pink-600"
+      />
+    </div>
+  );
+};
+
+export default SearchBar;
diff --git a/pages/articles/index.tsx b/pages/articles/index.tsx
@@ -1,4 +1,4 @@
-import { Children, Fragment, useEffect } from "react";
+import { Children, Fragment, useEffect, useState } from "react";
 import Head from "next/head";
 import { TagIcon } from "@heroicons/react/outline";
 import ArticlePreview from "../../components/ArticlePreview/ArticlePreview";
@@ -10,6 +10,7 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 import Image from "next/image";
 import challenge from "../../public/images/announcements/challenge.png";
+import SearchBar from "../../components/ArticleSearch/SearchBar";
 
 // Needs to be added to DB but testing with hardcoding
 const tagsToShow = [
@@ -29,7 +30,7 @@ const ArticlesPage = () => {
 
   const { filter, tag: dirtyTag } = router.query;
   const tag = typeof dirtyTag === "string" ? dirtyTag.toLowerCase() : null;
-
+  const [searchTerm, setSearchTerm] = useState("");
   type Filter = "newest" | "oldest" | "top";
   const filters: Filter[] = ["newest", "oldest", "top"];
 
@@ -45,7 +46,7 @@ const ArticlesPage = () => {
 
   const { status, data, isFetchingNextPage, fetchNextPage, hasNextPage } =
     trpc.post.all.useInfiniteQuery(
-      { limit: 15, sort: selectedSortFilter, tag },
+      { limit: 15, sort: selectedSortFilter, tag, searchTerm },
       {
         getNextPageParam: (lastPage) => lastPage.nextCursor,
       }
@@ -97,7 +98,8 @@ const ArticlesPage = () => {
                 "Articles"
               )}
             </h1>
-            <div>
+            <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm}/>    
+            <div className='min-w-fit'>
               <label htmlFor="filter" className="sr-only">
                 Location
               </label>
diff --git a/schema/post.ts b/schema/post.ts
@@ -61,6 +61,7 @@ export const GetPostsSchema = z.object({
   cursor: z.string().nullish(),
   sort: z.enum(["newest", "oldest", "top"]),
   tag: z.string().nullish(),
+  searchTerm: z.string().nullish(),
 });
 
 export type SavePostInput = z.TypeOf<typeof SavePostSchema>;
diff --git a/server/trpc/router/post.ts b/server/trpc/router/post.ts
@@ -251,7 +251,7 @@ 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, sort, tag } = input;
+    const { cursor, sort, tag, searchTerm } = input;
 
     const orderMapping = {
       newest: {
@@ -287,6 +287,32 @@ export const postRouter = router({
               },
             }
           : {}),
+          ...(searchTerm
+            ? {
+                OR: [
+                  {
+                    user: {
+                      name: {
+                        contains: searchTerm || "",
+                        mode: "insensitive",
+                      },
+                    },
+                  },
+                  {
+                    title: {
+                      contains: searchTerm || "",
+                      mode: "insensitive",
+                    },
+                  },
+                  {
+                    excerpt: {
+                      contains: searchTerm || "",
+                      mode: "insensitive",
+                    },
+                  },
+                ],
+              }
+            : {}),
       },
       select: {
         id: true,
