modified the search functionality

AmirKakavand · Aug 4, 2024 · 0766c12 · 0766c12
1 parent 1af5da4
commit 0766c12
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 28 deletions.
diff --git a/app/components/CharacterCard.tsx b/app/components/CharacterCard.tsx
@@ -22,8 +22,8 @@ export const CharacterCard = (props: IProps) => {
     //   {error && <p>Something went wrong</p>}
     //   {character && <p>Character Name: {character.name}</p>}
     // </>
-    <article className="character-card h-full mx-2 sm:m-6 shadow-neutral-300/25 rounded-xl flex flex-col justify-around items-center  bg-cardBgColor">
-      <header className="text-center">
+    <article className="character-card h-full pb-4 mx-2 sm:m-6 shadow-neutral-300/25 rounded-xl flex flex-col justify-around items-center bg-cardBgColor">
+      <header className="text-center my-2">
         <h2 className="text-3xl">{character?.name}</h2>
       </header>
 

diff --git a/app/components/PageNavigation.tsx b/app/components/PageNavigation.tsx
@@ -11,14 +11,7 @@ const PageNavigation = (props: IProps) => {
   const [tempPageNo, setTempPageNo] = useState<number | string>(1);
   const [originalPage, setOriginalPage] = useState<number | string>(tempPageNo);
   return (
-    <nav
-      className="flex flex-row justify-between py-2 px-2 md:px-8 mt-10 mb-5 max-w-xl mx-auto rounded-xl bg-[#F9F4DA] text-[#231F20] shadow-[10px_10px_#231F20,11px_11px_#F9F4DA] border-2 border-[#F9F4DA] text-shadow-[
-  -1px_-1px_0_#666,
-  1px_-1px_0_#666,
-  -1px_1px_0_#666,
-  1px_1px_0_#666
-]"
-    >
+    <nav className="flex flex-row justify-between py-2 px-2 md:px-8 mt-10 mb-5 max-w-xl mx-auto rounded-xl bg-[#F9F4DA] text-[#231F20] shadow-[10px_10px_#231F20,11px_11px_#F9F4DA] border-2 border-[#F9F4DA]">
       <button
         className="text-sm md:text-2xl px-2 md:px-4 py-1 rounded-md text-cardBgColor font-semibold"
         onClick={() => {
@@ -31,7 +24,7 @@ const PageNavigation = (props: IProps) => {
         Prev
       </button>
       <div className="text-md md:text-2xl">
-        <span>
+        <span className="font-extrabold">
           Page{" "}
           <input
             type="text"

diff --git a/app/globals.css b/app/globals.css
@@ -12,11 +12,11 @@
 body {
   color: rgb(var(--foreground-rgb));
   background-color: #231F20;
-  text-shadow: 
+  /* text-shadow: 
     -1px -1px 0 #000,
      1px -1px 0 #000,
     -1px  1px 0 #000,
-     1px  1px 0 #000;
+     1px  1px 0 #000; */
 }
 
 .character-card {

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { CharactersPage } from "./components/CharactersPage";
 import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { handleSearch } from "./utils/handleSearch";
@@ -9,6 +9,8 @@ export default function Home() {
   const [name, setName] = useState<string>("");
   const [searchQuery, setSearchQuery] = useState<string>("");
   const [mouseHover, setMouseHover] = useState<boolean>(false);
+
+  useEffect (() => handleSearch({ name, setSearchQuery, setPageNo }), [name])
   return (
     <main className={mainClass}>
       <header className="flex flex-col md:flex-row justify-around">
@@ -19,11 +21,10 @@ export default function Home() {
             className={searchBarClass}
             placeholder="Search by name"
             value={name}
-            onChange={(event) => setName(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") {
-                handleSearch({ name, setName, setSearchQuery, setPageNo });
-              }
+            onChange={(event) => {
+              setName((prevName) => {
+                return event.target.value;
+              })
             }}
           />
           <div className= "hidden md:inline text-slate-600 inset-y-auto right-0.5 md:right-4 absolute">

diff --git a/app/utils/handleSearch.ts b/app/utils/handleSearch.ts
@@ -2,18 +2,19 @@ import {Dispatch, SetStateAction} from "react";
 
 interface IProps {
     name: string,
-    setName: Dispatch<SetStateAction<string>>,
     setSearchQuery: Dispatch<SetStateAction<string>>,
     setPageNo: Dispatch<SetStateAction<number>>
 }
 
-export const handleSearch = ({name, setName, setSearchQuery, setPageNo}: IProps) => {
+export const handleSearch = ({name, setSearchQuery, setPageNo}: IProps) => {
+  setSearchQuery((prevSearchQuery) => {
+    console.log("we got to handleSearch now")
     if (name !== "") {
-        setSearchQuery(name);
-        setPageNo(1);
-      } else {
-        setName("");
-        setSearchQuery("");
-        setPageNo(1);
-      }
+      setPageNo(1);
+      return name;
+    } else {
+      setPageNo(1);
+      return "";
+    }
+  });
 }