search feature in category details

src/components/category-details/CategoryDetails.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from './CategoryDetails.module.scss';
 import { useLocation } from 'react-router';
 import queryString from 'query-string';
@@ -10,11 +10,25 @@ import { ReactComponent as PlusCircledIcon } from '../../assets/icons/plus-circl
 import { userProfileData } from "../home/Home";
 import { CircularProgressbar } from "react-circular-progressbar";
 import { NavLink } from "react-router-dom";
+import { IShelf } from "../../structure/shelf";
 
 export const CategoryDetails: React.FC = () => {
     const location = useLocation();
     const category_id: any = queryString.parse(location.pathname)['/category-details/category_id'];
     const shelfCount: number = userProfileData.categories[category_id].shelves.length;
+    const [shelfResult, setShelfResult] = useState<Array<IShelf>>(userProfileData.categories[category_id].shelves);
+
+    const searchShelf = (text: string) => {
+        if (text.length > 0) {
+            let result = shelfResult.filter(shelf => {
+                return shelf.name.toLowerCase().includes(text.toLowerCase());
+            });
+    
+            setShelfResult(result);
+        } else {
+            setShelfResult(userProfileData.categories[category_id].shelves);
+        }
+    }
 
     return <section className="modalPage">
         <header className={styles.navHeader}>
@@ -45,7 +59,7 @@ export const CategoryDetails: React.FC = () => {
         
         <section className={styles.searchHolder}>
             <div className={styles.searchBar}>
-                <input type="text" placeholder={'Search Shelves'} />
+                <input type="text" placeholder={'Search Shelves'} onInput={(event) => searchShelf(event.currentTarget.value)} />
                 <SearchIcon />
             </div>
         </section>
@@ -56,7 +70,7 @@ export const CategoryDetails: React.FC = () => {
 
         <section className={styles.Shelf}>
             <ul>
-                { userProfileData.categories[Number(category_id)].shelves.map(shelf => {
+                { shelfResult.map(shelf => {
                     return <li key={shelf.name}>
                         <div className={styles.progress}>
                             <CircularProgressbar value={shelf.words.length > 0 ? (shelf.revisedWords.length * 100/ shelf.words.length) : 0} strokeWidth={7}