add searchbar functionality

Author: smatthies

@types/generated/contentful.d.ts

@@ -193,12 +193,14 @@ export interface ICoachFields {
 /** Die Coaches */
 
 export interface ICoach extends Entry<ICoachFields> {
+  fields: ICoachFields
   sys: {
     id: string;
     type: string;
     createdAt: string;
     updatedAt: string;
     locale: string;
+
     contentType: {
       sys: {
         id: "coach";

app/components/CoachSearch.tsx

@@ -0,0 +1,12 @@
+import SearchBar from "./SearchBar";
+
+
+function CoachSearch() { 
+     return (
+         <div className="flex flex-row-reverse py-5 max-w-7xl mx-auto">
+             <SearchBar />
+         </div>
+     );
+}
+
+export default CoachSearch;

app/components/SearchBar.tsx

@@ -1,39 +1,30 @@
 import { Form } from "@remix-run/react";
-import React, { useState }  from 'react';
+import React, { RefObject, useRef, useState }  from 'react';
 import SearchIcon from "./icons/SearchIcon";
 
-interface SearchBarProps {
-    onSearch: (searchTerm: string) => void;
-}
 
-const SearchBar: React.FC<SearchBarProps> = ({ onSearch }) => {
+const SearchBar = () => {
 
     const [searchTerm, setSearchTerm] = useState('');
-
-    const handleSearch = () => {
-        onSearch(searchTerm);
-    };
-
     return (
-        <div className="inline-flex gap-2 mx-24">
-            <Form>
+        <div className="inline-flex gap-2">
                 <input
+                    name="search"
                     type="text"
                     placeholder="Suche..."
                     className="text-[1rem] px-2 py-1 rounded-full hover:text-vsp-900 border border-vsp-400 active:border-vsp-900 focus:border-vsp-900 disabled:border-vsp-200"
                     value={searchTerm}
                     onChange={(e) => setSearchTerm(e.target.value)}
                 > 
                 </input>
-            </Form>
-            <button
-                className="py-1 px-4 font-inherit inline-flex items-center justify-center rounded-full bg-vsp-400 text-vsp-900 hover:text-white no-underline transition-opacity duration-300 hover:bg-vsp-900 focus:opacity-90 active:opacity-90 disabled:pointer-events-none disabled:bg-vsp-200 md:text-lg"
-                type="submit"
+            {/* <button
+                className="py-2 px-2  font-inherit inline-flex items-center justify-center rounded-full  text-vsp-900 hover:text-white no-underline transition-opacity duration-300 hover:bg-vsp-900 focus:opacity-90 active:opacity-90 disabled:pointer-events-none "
+                type="button"
                 disabled={!searchTerm}
-                onClick={handleSearch}
+                onClick={()=>{setSearchTerm('')}}
             >
-                <SearchIcon />
-            </button>
+                CLEAR
+            </button> */}
         </div>
     );
 };

app/components/Searching.tsx

@@ -14,7 +14,7 @@ import ContentBlocks from "./ContentBlocks";
 import ArrowDown from "./icons/ArrowDown";
 import FilterIcon from "./icons/FilterIcon";
 import Spinner from "./icons/Spinner";
-import Searching from "./Searching";
+import CoachSearch from "./CoachSearch";
 import CoachCard from "./CoachCard";
 import ContentfulRichText from "./ContentfulRichText";
 import type { EmailTemplate } from "~/utils/contentful";
@@ -53,6 +53,7 @@ export default function SpeakingTimeContent({
   const submit = useSubmit();
   const formRef = useRef<HTMLFormElement>(null);
   const { t } = useTranslation("searchingCoach");
+  const [isActive, setIsActive] = useState(false);
 
   const handleChange = () => {
     if (formRef) {
@@ -61,7 +62,7 @@ export default function SpeakingTimeContent({
   };
   const state = useNavigation();
 
-  const [isActive, setIsActive] = useState(false);
+
   // sort tags to ensure the "quick response" one is always the first in the array
   tags.unshift(
     tags.splice(
@@ -77,8 +78,14 @@ export default function SpeakingTimeContent({
   return (
     <div>
       <ContentBlocks content={page.fields.content} locale={locale} />
-      <Searching />
-      <details open={true} className="mx-auto max-w-7xl py-8 px-4">
+      <Form
+          onChange={handleChange}
+          ref={formRef}
+          method="get"
+          id="filter-form"
+          className=""
+        >
+      <details open={false} className="mx-auto max-w-7xl py-8 px-4">
         <summary
           className="inline-flex  cursor-pointer items-center hover:text-vsp-500"
           onClick={() => setIsActive(!isActive)}
@@ -96,13 +103,7 @@ export default function SpeakingTimeContent({
           </div>
         </summary>
 
-        <Form
-          onChange={handleChange}
-          ref={formRef}
-          method="get"
-          id="filter-form"
-          className="flex flex-col gap-2"
-        >
+
           <fieldset className="mt-8">
             <legend className="mb-4 inline-block text-xl">
               {t("filter.language")}
@@ -180,11 +181,14 @@ export default function SpeakingTimeContent({
               </button>
             </noscript>
           </div>
-        </Form>
       </details>
+      <CoachSearch />
+      </Form>
+
       <div className="text-m mx-auto max-w-7xl py-4 px-4 font-semibold text-slate-700">
         {coachesAmount ? `${coachesAmount} ${t("result")}` : t("noResult")}
       </div>
+
       <div className="relative">
         {state.state === "loading" && (
           <div className="absolute inset-0 z-50 flex items-start justify-center bg-white bg-opacity-50">

app/components/SpeakingTimeContent.tsx

@@ -0,0 +1,85 @@
+import { expect, test } from 'vitest'
+import { documentContentToSimpleString } from './documentToSimpleString'
+const exampleDescription = {
+    "data": {},
+    "content": [
+        {
+            "data": {},
+            "content": [
+                {
+                    "data": {},
+                    "content": [
+                        {
+                            "data": {},
+                            "content": [
+                                {
+                                    "data": {},
+                                    "marks": [],
+                                    "value": "A",
+                                    "nodeType": "text"
+                                }
+                            ],
+                            "nodeType": "paragraph"
+                        }
+                    ],
+                    "nodeType": "list-item"
+                },
+                {
+                    "data": {},
+                    "content": [
+                        {
+                            "data": {},
+                            "content": [
+                                {
+                                    "data": {},
+                                    "marks": [],
+                                    "value": "B",
+                                    "nodeType": "text"
+                                }
+                            ],
+                            "nodeType": "paragraph"
+                        }
+                    ],
+                    "nodeType": "list-item"
+                },
+                {
+                    "data": {},
+                    "content": [
+                        {
+                            "data": {},
+                            "content": [
+                                {
+                                    "data": {},
+                                    "marks": [],
+                                    "value": "C",
+                                    "nodeType": "text"
+                                }
+                            ],
+                            "nodeType": "paragraph"
+                        }
+                    ],
+                    "nodeType": "list-item"
+                }
+            ],
+            "nodeType": "unordered-list"
+        },
+        {
+            "data": {},
+            "content": [
+                {
+                    "data": {},
+                    "marks": [],
+                    "value": "",
+                    "nodeType": "text"
+                }
+            ],
+            "nodeType": "paragraph"
+        }
+    ],
+    "nodeType": "document"
+}
+
+test('get simple string from Document object', () => {
+    const simpleText = documentContentToSimpleString(exampleDescription.content);
+    expect(simpleText).toEqual("ABC");
+})

app/components/icons/CancelIcon.tsx

@@ -0,0 +1,30 @@
+  // This function processes each individual node of the Rich Text document
+  export function documentContentToSimpleString(nodes: any) {
+    // Initialize an empty string to hold the result
+    let result = '';
+
+    // Loop through each node in the input content array
+    nodes.forEach((node :any) => {
+        // If the node type is 'text', we append its value to the result
+        if (node.nodeType === 'text' && node.value) {
+            result += node.value;
+        }
+        
+        // If the node type is a list or list-item, recurse into its content
+        else if (node.nodeType === 'unordered-list' || node.nodeType === 'list-item') {
+            if (node.content) {
+                // Recursively process the content of the list or list-item node
+                result += documentContentToSimpleString(node.content);
+            }
+        }
+        
+        // If the node type is paragraph, recurse into its content
+        else if (node.nodeType === 'paragraph' && node.content) {
+            result += documentContentToSimpleString(node.content);
+        }
+    });
+
+    // Return the concatenated string
+    return result;
+}
+  

app/utils/documentToSimpleString.spec.tsx

@@ -9,6 +9,7 @@ import {
 } from "~/utils/contentful";
 import pageIds from "~/utils/pageIds";
 import type { ICoachtag, LOCALE_CODE } from "../../@types/generated/contentful";
+import { documentContentToSimpleString } from "./documentToSimpleString";
 
 export const getSearchPageContents = async (
   request: Request,
@@ -21,6 +22,9 @@ export const getSearchPageContents = async (
 
   const checkedGender = searchParams.getAll("gender");
 
+  const searchTerm = searchParams.getAll("search");
+  console.log(searchTerm);
+
   const [page, coaches, languages, gender, tags, navigation, emailTemplate] =
     await Promise.all([
       getPageById(pageIds.SEARCH_HELP, locale),
@@ -40,6 +44,7 @@ export const getSearchPageContents = async (
   if (!navigation) {
     throw new Response("Could not load navigation", { status: 404 });
   }
+  
 
   const filteredCoaches = coaches
     .filter((coach) => {
@@ -65,7 +70,15 @@ export const getSearchPageContents = async (
         !!coachGenders &&
         coachGenders.some((gender) => checkedGender.includes(gender))
       );
-    });
+    })
+    .filter((coach) => {
+      if(searchTerm[0] && searchTerm[0] != '') {
+      const description = documentContentToSimpleString(coach.fields.description?.content);
+      return `${coach.fields.name} ${description}`.includes(searchTerm[0])
+      } else {
+        return true
+      }
+    })
 
   // get available tags from all coaches
 
@@ -85,9 +98,8 @@ export const getSearchPageContents = async (
     checkedTags,
     checkedGender,
     locale,
-    currentLang: lang,
-    coachesAmount: filteredCoaches?.length || 0,
-    availableTagIDs,
+    currentLang: lang,    
+    coachesAmount: filteredCoaches?.length || 0,    availableTagIDs,
     emailTemplate,
   };
 };