From 9aa135bad044a9bb2587a6a3e69e7a1ac45fdab8 Mon Sep 17 00:00:00 2001
From: punpunkeshin05 <97283645+punpunkeshin05@users.noreply.github.com>
Date: Thu, 22 Feb 2024 16:55:30 +0700
Subject: [PATCH 1/5] feat: filter on home page

---
 src/app/home/page.tsx          | 23 ++++++++++---
 src/components/Main/Filter.tsx | 62 ++++++++++++++++++++++++----------
 2 files changed, 63 insertions(+), 22 deletions(-)

diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index ba3bad39..35c95f14 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -9,15 +9,28 @@ import Search from "@/components/Search/PetSearch";
 import { usePetsQuery } from "@/hooks/queries/usePetsQuery";
 import MainLayout from "@/layouts/MainLayout";
 import { useNavigate } from "react-router-dom";
-
+import { filterState } from "@/types/filter";
+import { useState } from "react";
 import PetList from "@/components/Main/CardList/PetList";
 import PetSuggestionList from "@/components/Main/CardList/PetSuggestionList";
 
 // Page
 const MainPage = () => {
   const navigate = useNavigate();
-
-  const { data, isLoading } = usePetsQuery();
+  
+  const [filters, setFilters] = useState<filterState>({
+    dog: false,
+    cat: false,
+    male: false,
+    female: false,
+    white: false,
+    black: false,
+    brown: false,
+    blonde: false,
+    minAge: 0,
+    maxAge: 30,
+  });
+  const { data, isLoading } = usePetsQuery(filters);
 
   return (
     <>
@@ -32,7 +45,7 @@ const MainPage = () => {
             <Heading onSearch quantity={data?.metadata.total} />
           </div>
           <Search variant="green" />
-          <Filter />
+          <Filter filters = {filters} setFilters = {setFilters}/>
         </div>
       </Container>
       <Container className="flex items-center justify-center md:hidden">
@@ -51,7 +64,7 @@ const MainPage = () => {
           <div className="col-span-2">
             <PetSuggestionList
               isLoading={isLoading}
-              data={data?.pets.slice(0, 8)}
+              data={data?.pets?.slice(0, 8)}
             />
           </div>
         </div>
diff --git a/src/components/Main/Filter.tsx b/src/components/Main/Filter.tsx
index ad11f85d..c7d95316 100644
--- a/src/components/Main/Filter.tsx
+++ b/src/components/Main/Filter.tsx
@@ -1,43 +1,71 @@
 import Button from "@/components/Button";
-import { useState } from "react";
+import { filterState } from "@/types/filter";
+import { all } from "node_modules/axios/index.d.cts";
 
-const Filter = () => {
-  // There are 3 states for filtering in home search (all, dog, cat)
-  const [filter, setFilter] = useState<string>("all");
+interface FilterProps {
+  filters: filterState;
+  setFilters: (filters: filterState) => void;
+}
+
+const Filter: React.FC<FilterProps> = ({filters, setFilters}) => {
+  
+  const allSelected = filters.dog && filters.cat;
+  const catSelected = filters.cat && !filters.dog;
+  const dogSelected = filters.dog && !filters.cat;
 
   return (
     <div className="flex space-x-3">
       <Button
         text={"สัตว์เลี้ยงทั้งหมด"}
-        variant={filter === "all" ? "primary" : "white"}
+        variant={allSelected ? "primary" : "white"}
         className={`flex items-center justify-center py-3 shadow transition-all duration-500
             ${
-              filter === "all"
+              allSelected
                 ? "flex-row bg-primary px-6 text-white"
                 : "flex-col bg-white px-2.5 text-xs text-accent-gray"
             } shrink-0`}
         rounded="2xl"
-        onClick={() => setFilter("all")}
+        onClick={() => setFilters(
+          {
+            ...filters,
+            dog: !allSelected,
+            cat: !allSelected,
+          }
+        )}
       />
       <Button
-        text={filter == "cat" ? "แมว" : ""}
-        variant={filter === "cat" ? "primary" : "white"}
-        icon={filter === "cat" ? "custom:md:cat-green" : "custom:md:cat-gray"}
+        text={catSelected? "แมว" : ""}
+        variant={catSelected? "primary" : "white"}
+        icon={catSelected? "custom:md:cat-green" : "custom:md:cat-gray"}
         className={`flex items-center justify-center space-x-2.5 py-3 shadow transition-all duration-500
-            ${filter === "cat" ? "bg-primary px-12" : "bg-white pl-6 pr-4"}
+            ${catSelected ? "bg-primary px-12" : "bg-white pl-6 pr-4"}
           `}
         rounded="2xl"
-        onClick={() => setFilter("cat")}
+        onClick={() => setFilters({
+          ...filters,
+          dog: false,
+          cat: !catSelected,
+        }
+        )}
       />
       <Button
-        text={filter == "dog" ? "สุนัข" : ""}
-        variant={filter === "dog" ? "primary" : "white"}
-        icon={filter === "dog" ? "custom:md:dog-white" : "custom:md:dog-gray"}
+        text={
+          dogSelected? "สุนัข" : ""}
+        variant={
+          dogSelected? "primary" : "white"}
+        icon={
+          dogSelected? "custom:md:dog-white" : "custom:md:dog-gray"}
         className={`flex items-center justify-center space-x-2.5 py-3 shadow transition-all duration-500 
-          ${filter === "dog" ? "bg-primary px-12" : "bg-white pl-6 pr-4"}
+          ${
+            dogSelected? "bg-primary px-12" : "bg-white pl-6 pr-4"}
           `}
         rounded="2xl"
-        onClick={() => setFilter("dog")}
+        onClick={() => setFilters(
+          { ...filters,
+            dog: !dogSelected,
+            cat: false,
+          }
+        )}
       />
     </div>
   );

From b68105ed379c75a305338a80eafdc77e7bab6fa3 Mon Sep 17 00:00:00 2001
From: punpunkeshin05 <97283645+punpunkeshin05@users.noreply.github.com>
Date: Thu, 22 Feb 2024 17:16:40 +0700
Subject: [PATCH 2/5] fix: linter

---
 src/app/home/page.tsx          | 11 +++----
 src/components/Main/Filter.tsx | 53 +++++++++++++++-------------------
 2 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index 35c95f14..0af4d6af 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -3,21 +3,21 @@ import Button from "@/components/Button";
 import Container from "@/components/Container";
 import Divider from "@/components/Divider";
 import Banner from "@/components/Main/Banner";
+import PetList from "@/components/Main/CardList/PetList";
+import PetSuggestionList from "@/components/Main/CardList/PetSuggestionList";
 import Filter from "@/components/Main/Filter";
 import Heading from "@/components/Pets/Heading";
 import Search from "@/components/Search/PetSearch";
 import { usePetsQuery } from "@/hooks/queries/usePetsQuery";
 import MainLayout from "@/layouts/MainLayout";
-import { useNavigate } from "react-router-dom";
 import { filterState } from "@/types/filter";
 import { useState } from "react";
-import PetList from "@/components/Main/CardList/PetList";
-import PetSuggestionList from "@/components/Main/CardList/PetSuggestionList";
+import { useNavigate } from "react-router-dom";
 
 // Page
 const MainPage = () => {
   const navigate = useNavigate();
-  
+
   const [filters, setFilters] = useState<filterState>({
     dog: false,
     cat: false,
@@ -30,6 +30,7 @@ const MainPage = () => {
     minAge: 0,
     maxAge: 30,
   });
+
   const { data, isLoading } = usePetsQuery(filters);
 
   return (
@@ -45,7 +46,7 @@ const MainPage = () => {
             <Heading onSearch quantity={data?.metadata.total} />
           </div>
           <Search variant="green" />
-          <Filter filters = {filters} setFilters = {setFilters}/>
+          <Filter filters={filters} setFilters={setFilters} />
         </div>
       </Container>
       <Container className="flex items-center justify-center md:hidden">
diff --git a/src/components/Main/Filter.tsx b/src/components/Main/Filter.tsx
index c7d95316..e76f5793 100644
--- a/src/components/Main/Filter.tsx
+++ b/src/components/Main/Filter.tsx
@@ -1,14 +1,15 @@
 import Button from "@/components/Button";
 import { filterState } from "@/types/filter";
-import { all } from "node_modules/axios/index.d.cts";
 
 interface FilterProps {
   filters: filterState;
   setFilters: (filters: filterState) => void;
 }
 
-const Filter: React.FC<FilterProps> = ({filters, setFilters}) => {
-  
+const Filter: React.FC<FilterProps> = ({
+  filters,
+  setFilters,
+}: FilterProps) => {
   const allSelected = filters.dog && filters.cat;
   const catSelected = filters.cat && !filters.dog;
   const dogSelected = filters.dog && !filters.cat;
@@ -25,47 +26,41 @@ const Filter: React.FC<FilterProps> = ({filters, setFilters}) => {
                 : "flex-col bg-white px-2.5 text-xs text-accent-gray"
             } shrink-0`}
         rounded="2xl"
-        onClick={() => setFilters(
-          {
+        onClick={() =>
+          setFilters({
             ...filters,
             dog: !allSelected,
             cat: !allSelected,
-          }
-        )}
+          })
+        }
       />
       <Button
-        text={catSelected? "แมว" : ""}
-        variant={catSelected? "primary" : "white"}
-        icon={catSelected? "custom:md:cat-green" : "custom:md:cat-gray"}
+        text={catSelected ? "แมว" : ""}
+        variant={catSelected ? "primary" : "white"}
+        icon={catSelected ? "custom:md:cat-green" : "custom:md:cat-gray"}
         className={`flex items-center justify-center space-x-2.5 py-3 shadow transition-all duration-500
             ${catSelected ? "bg-primary px-12" : "bg-white pl-6 pr-4"}
           `}
         rounded="2xl"
-        onClick={() => setFilters({
-          ...filters,
-          dog: false,
-          cat: !catSelected,
+        onClick={() =>
+          setFilters({
+            ...filters,
+            dog: false,
+            cat: !catSelected,
+          })
         }
-        )}
       />
       <Button
-        text={
-          dogSelected? "สุนัข" : ""}
-        variant={
-          dogSelected? "primary" : "white"}
-        icon={
-          dogSelected? "custom:md:dog-white" : "custom:md:dog-gray"}
+        text={dogSelected ? "สุนัข" : ""}
+        variant={dogSelected ? "primary" : "white"}
+        icon={dogSelected ? "custom:md:dog-white" : "custom:md:dog-gray"}
         className={`flex items-center justify-center space-x-2.5 py-3 shadow transition-all duration-500 
-          ${
-            dogSelected? "bg-primary px-12" : "bg-white pl-6 pr-4"}
+          ${dogSelected ? "bg-primary px-12" : "bg-white pl-6 pr-4"}
           `}
         rounded="2xl"
-        onClick={() => setFilters(
-          { ...filters,
-            dog: !dogSelected,
-            cat: false,
-          }
-        )}
+        onClick={() =>
+          setFilters({ ...filters, dog: !dogSelected, cat: false })
+        }
       />
     </div>
   );

From ccd567d8b420bca4505a0389de0407b5bd8105cd Mon Sep 17 00:00:00 2001
From: punpunkeshin05 <97283645+punpunkeshin05@users.noreply.github.com>
Date: Fri, 23 Feb 2024 23:28:56 +0700
Subject: [PATCH 3/5] feat: add search function

---
 src/api/pets.ts                     |  1 +
 src/app/admin/pets/page.tsx         |  3 ++-
 src/app/home/page.tsx               |  7 +++----
 src/app/pets/page.tsx               |  3 ++-
 src/components/Search/PetSearch.tsx | 24 ++++++++++++++++++++++--
 src/types/filter.ts                 |  1 +
 src/utils/convertFiltertoParams.ts  |  4 ++++
 7 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/api/pets.ts b/src/api/pets.ts
index be2613b3..3505f909 100644
--- a/src/api/pets.ts
+++ b/src/api/pets.ts
@@ -22,6 +22,7 @@ const getPet = async (id: string): Promise<Pet> => {
 };
 
 const getPets = async (filters?: filterState) => {
+  console.log(filters);
   const params = convertFiltertoParams(filters);
   const response = await axios.get<PetsResponse>(
     `${import.meta.env.VITE_API_URL}/pets?${params}`
diff --git a/src/app/admin/pets/page.tsx b/src/app/admin/pets/page.tsx
index c505c2a0..ea406c94 100644
--- a/src/app/admin/pets/page.tsx
+++ b/src/app/admin/pets/page.tsx
@@ -24,6 +24,7 @@ const Pets = () => {
   }, []);
 
   const [filters, setFilters] = useState<filterState>({
+    search: "",
     dog: false,
     cat: false,
     male: false,
@@ -51,7 +52,7 @@ const Pets = () => {
       </Container>
       <Container className="flex flex-col items-center space-y-6">
         <div className="flex w-full flex-row gap-x-4">
-          <PetSearch variant="red" />
+          <PetSearch variant="red" filter={filters} setFilters={setFilters}/>
           <div className="relative">
             <PetIcon
               isOpen={isOpenFilterPanel}
diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index 0af4d6af..c7acf5da 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -17,8 +17,9 @@ import { useNavigate } from "react-router-dom";
 // Page
 const MainPage = () => {
   const navigate = useNavigate();
-
+  
   const [filters, setFilters] = useState<filterState>({
+    search: "",
     dog: false,
     cat: false,
     male: false,
@@ -30,9 +31,7 @@ const MainPage = () => {
     minAge: 0,
     maxAge: 30,
   });
-
   const { data, isLoading } = usePetsQuery(filters);
-
   return (
     <>
       <Container className="grid grid-cols-1 items-center md:grid-cols-2 md:gap-9 lg:grid-cols-3">
@@ -45,7 +44,7 @@ const MainPage = () => {
           <div className="hidden md:flex">
             <Heading onSearch quantity={data?.metadata.total} />
           </div>
-          <Search variant="green" />
+          <Search variant="green" filter={filters} setFilters={setFilters} />
           <Filter filters={filters} setFilters={setFilters} />
         </div>
       </Container>
diff --git a/src/app/pets/page.tsx b/src/app/pets/page.tsx
index 3b26f42a..719ec520 100644
--- a/src/app/pets/page.tsx
+++ b/src/app/pets/page.tsx
@@ -20,6 +20,7 @@ const Pets = () => {
   }, []);
 
   const [filters, setFilters] = useState<filterState>({
+    search: "",
     dog: false,
     cat: false,
     male: false,
@@ -41,7 +42,7 @@ const Pets = () => {
         <Heading onSearch quantity={data?.metadata.total} />
       </Container>
       <Container className="flex flex-row gap-x-4">
-        <PetSearch variant="red" />
+        <PetSearch variant="red" filter = {filters} setFilters={setFilters}/>
         <div className="relative">
           <PetIcon
             isOpen={isOpenFilterPanel}
diff --git a/src/components/Search/PetSearch.tsx b/src/components/Search/PetSearch.tsx
index 9358b55c..766c9fd4 100644
--- a/src/components/Search/PetSearch.tsx
+++ b/src/components/Search/PetSearch.tsx
@@ -1,14 +1,32 @@
+import { filterState } from "@/types/filter";
 import { Icon } from "@iconify/react";
-import React from "react";
+import React, { useEffect } from "react";
 /*
   for pets page use : @custom:md:bubble-red
   for home page use: @custom:md:bubble-green
 */
 interface PetSearchProps {
   variant: "red" | "green";
+  filter: filterState;
+  setFilters: React.Dispatch<React.SetStateAction<filterState>>
 }
 
-const PetSearch: React.FC<PetSearchProps> = ({ variant }) => {
+const PetSearch: React.FC<PetSearchProps> = ({
+  variant,
+  filter,
+  setFilters,
+}) => {
+
+  const [inputValue, setInputValue] = React.useState<string>(filter.search || "");
+
+  // add debouce time for delay 
+  useEffect(() => {
+    const delayDebounce = setTimeout(() => {
+      setFilters({ ...filter, search: inputValue });
+    }, 500);
+    return () => clearTimeout(delayDebounce);
+  }, [inputValue, setFilters, filter]);
+
   return (
     <div className="flex w-full flex-row items-center justify-start gap-3 rounded-full bg-white px-6 py-3 shadow">
       <div>
@@ -18,6 +36,8 @@ const PetSearch: React.FC<PetSearchProps> = ({ variant }) => {
         type="text"
         placeholder="ค้นหาสัตว์เลี้ยง"
         className="w-full py-0 outline-none"
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
       />
     </div>
   );
diff --git a/src/types/filter.ts b/src/types/filter.ts
index 8d1a0376..963b37a2 100644
--- a/src/types/filter.ts
+++ b/src/types/filter.ts
@@ -1,4 +1,5 @@
 interface filterState {
+  search: string;
   dog: boolean;
   cat: boolean;
   male: boolean;
diff --git a/src/utils/convertFiltertoParams.ts b/src/utils/convertFiltertoParams.ts
index 61349548..73c0c9b6 100644
--- a/src/utils/convertFiltertoParams.ts
+++ b/src/utils/convertFiltertoParams.ts
@@ -21,6 +21,10 @@ const convertFiltertoParams = (filters?: filterState) => {
   }
   const params: Record<string, string | number> = {};
 
+  if (filters.search) {
+    params.search = filters.search;
+  }
+
   if (filters.dog && filters.cat) {
     // skip
   } else if (filters.dog) {

From 2a135e063ac5d83574379378cef268a5d4b39a5f Mon Sep 17 00:00:00 2001
From: punpunkeshin05 <97283645+punpunkeshin05@users.noreply.github.com>
Date: Fri, 23 Feb 2024 23:31:40 +0700
Subject: [PATCH 4/5] fix: linter

---
 src/app/admin/pets/page.tsx         | 2 +-
 src/app/home/page.tsx               | 2 +-
 src/app/pets/page.tsx               | 2 +-
 src/components/Search/PetSearch.tsx | 9 +++++----
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/app/admin/pets/page.tsx b/src/app/admin/pets/page.tsx
index ea406c94..b42ed2d6 100644
--- a/src/app/admin/pets/page.tsx
+++ b/src/app/admin/pets/page.tsx
@@ -52,7 +52,7 @@ const Pets = () => {
       </Container>
       <Container className="flex flex-col items-center space-y-6">
         <div className="flex w-full flex-row gap-x-4">
-          <PetSearch variant="red" filter={filters} setFilters={setFilters}/>
+          <PetSearch variant="red" filter={filters} setFilters={setFilters} />
           <div className="relative">
             <PetIcon
               isOpen={isOpenFilterPanel}
diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index c7acf5da..28313297 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -17,7 +17,7 @@ import { useNavigate } from "react-router-dom";
 // Page
 const MainPage = () => {
   const navigate = useNavigate();
-  
+
   const [filters, setFilters] = useState<filterState>({
     search: "",
     dog: false,
diff --git a/src/app/pets/page.tsx b/src/app/pets/page.tsx
index 719ec520..38388599 100644
--- a/src/app/pets/page.tsx
+++ b/src/app/pets/page.tsx
@@ -42,7 +42,7 @@ const Pets = () => {
         <Heading onSearch quantity={data?.metadata.total} />
       </Container>
       <Container className="flex flex-row gap-x-4">
-        <PetSearch variant="red" filter = {filters} setFilters={setFilters}/>
+        <PetSearch variant="red" filter={filters} setFilters={setFilters} />
         <div className="relative">
           <PetIcon
             isOpen={isOpenFilterPanel}
diff --git a/src/components/Search/PetSearch.tsx b/src/components/Search/PetSearch.tsx
index 766c9fd4..c7b821eb 100644
--- a/src/components/Search/PetSearch.tsx
+++ b/src/components/Search/PetSearch.tsx
@@ -8,7 +8,7 @@ import React, { useEffect } from "react";
 interface PetSearchProps {
   variant: "red" | "green";
   filter: filterState;
-  setFilters: React.Dispatch<React.SetStateAction<filterState>>
+  setFilters: React.Dispatch<React.SetStateAction<filterState>>;
 }
 
 const PetSearch: React.FC<PetSearchProps> = ({
@@ -16,10 +16,11 @@ const PetSearch: React.FC<PetSearchProps> = ({
   filter,
   setFilters,
 }) => {
+  const [inputValue, setInputValue] = React.useState<string>(
+    filter.search || ""
+  );
 
-  const [inputValue, setInputValue] = React.useState<string>(filter.search || "");
-
-  // add debouce time for delay 
+  // add debouce time for delay
   useEffect(() => {
     const delayDebounce = setTimeout(() => {
       setFilters({ ...filter, search: inputValue });

From 56d8692ca56b37e6a6bad60e291be937586d5ad6 Mon Sep 17 00:00:00 2001
From: punpunkeshin05 <97283645+punpunkeshin05@users.noreply.github.com>
Date: Fri, 23 Feb 2024 23:34:32 +0700
Subject: [PATCH 5/5] refactor: remove debug console.log

---
 src/api/pets.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/api/pets.ts b/src/api/pets.ts
index 3505f909..be2613b3 100644
--- a/src/api/pets.ts
+++ b/src/api/pets.ts
@@ -22,7 +22,6 @@ const getPet = async (id: string): Promise<Pet> => {
 };
 
 const getPets = async (filters?: filterState) => {
-  console.log(filters);
   const params = convertFiltertoParams(filters);
   const response = await axios.get<PetsResponse>(
     `${import.meta.env.VITE_API_URL}/pets?${params}`