filter by from and to

src/components/search-filter/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useRef } from "react";
 import { classNames } from "@jambonz/ui-kit";
 
 import { Icons } from "src/components/icons";
@@ -7,14 +7,18 @@ import "./styles.scss";
 
 type SearchFilterProps = JSX.IntrinsicElements["input"] & {
   filter: [string, React.Dispatch<React.SetStateAction<string>>];
+  delay?: number | null;
 };
 
 export const SearchFilter = ({
   placeholder,
   filter: [filterValue, setFilterValue],
+  delay,
 }: SearchFilterProps) => {
   const [focus, setFocus] = useState(false);
+  const [tmpFilterValue, setTmpFilterValue] = useState(filterValue);
   const [appearance, setAppearance] = useState(false);
+  const typingTimeoutRef = useRef<number | null>(null);
   const classes = {
     "search-filter": true,
     focused: focus,
@@ -23,7 +27,18 @@ export const SearchFilter = ({
 
   const handleChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      setFilterValue(e.target.value.toLowerCase());
+      setTmpFilterValue(e.target.value.toLowerCase());
+      if (delay) {
+        if (typingTimeoutRef.current) {
+          clearTimeout(typingTimeoutRef.current);
+        }
+
+        typingTimeoutRef.current = setTimeout(() => {
+          setFilterValue(e.target.value.toLowerCase());
+        }, delay);
+      } else {
+        setFilterValue(e.target.value.toLowerCase());
+      }
 
       if (e.target.value) {
         setAppearance(true);
@@ -51,7 +66,7 @@ export const SearchFilter = ({
         type="search"
         name="search_filter"
         placeholder={placeholder}
-        value={filterValue}
+        value={tmpFilterValue}
         onChange={handleChange}
         onFocus={() => {
           setFocus(true);

src/containers/internal/views/recent-calls/index.tsx

@@ -15,6 +15,7 @@ import {
   Spinner,
   Pagination,
   SelectFilter,
+  SearchFilter,
 } from "src/components";
 import { hasLength, hasValue } from "src/utils";
 import { DetailsItem } from "./details";
@@ -47,6 +48,8 @@ export const RecentCalls = () => {
   const [dateFilter, setDateFilter] = useState("today");
   const [directionFilter, setDirectionFilter] = useState("io");
   const [statusFilter, setStatusFilter] = useState("all");
+  const [fromFilter, setFromFilter] = useState("");
+  const [toFilter, setToFilter] = useState("");
 
   const [pageNumber, setPageNumber] = useState(1);
   const [perPageFilter, setPerPageFilter] = useState("25");
@@ -64,6 +67,8 @@ export const RecentCalls = () => {
         : { days: Number(dateFilter) }),
       ...(statusFilter !== "all" && { answered: statusFilter }),
       ...(directionFilter !== "io" && { direction: directionFilter }),
+      ...(fromFilter && { from: fromFilter }),
+      ...(toFilter && { to: toFilter }),
     };
 
     getRecentCalls(accountSid, payload)
@@ -94,7 +99,15 @@ export const RecentCalls = () => {
     if (accountSid) {
       handleFilterChange();
     }
-  }, [accountSid, pageNumber, dateFilter, directionFilter, statusFilter]);
+  }, [
+    accountSid,
+    pageNumber,
+    dateFilter,
+    directionFilter,
+    statusFilter,
+    fromFilter,
+    toFilter,
+  ]);
 
   /** Reset page number when filters change */
   useEffect(() => {
@@ -136,6 +149,16 @@ export const RecentCalls = () => {
           filter={[statusFilter, setStatusFilter]}
           options={statusSelection}
         />
+        <SearchFilter
+          placeholder="Filter From"
+          filter={[fromFilter, setFromFilter]}
+          delay={1000}
+        />
+        <SearchFilter
+          placeholder="Filter To"
+          filter={[toFilter, setToFilter]}
+          delay={1000}
+        />
       </section>
       <Section {...(hasLength(calls) && { slim: true })}>
         <div className="list">