From 9d0395e2a0db21e9c1afe0a99ec821548b3ae80d Mon Sep 17 00:00:00 2001
From: Jade Allen Cook <jadeallencook@gmail.com>
Date: Tue, 28 Nov 2023 02:24:15 -0800
Subject: [PATCH] feat: added search feature to filter requests

---
 interfaces/filters.ts                   |  1 +
 src/contexts/DashboardContext.tsx       |  1 +
 src/forms/AdvancedSearchForm/index.tsx  | 41 +++++++++++++++++++++++++
 src/forms/AdvancedSearchForm/style.ts   | 23 ++++++++++++++
 src/forms/FilterForm/index.tsx          |  3 --
 src/forms/FilterForm/style.ts           |  4 ---
 src/pages/Dashboard/AidRequestsPage.tsx |  5 +++
 src/pages/Dashboard/DonationsPage.tsx   |  1 +
 src/pages/RequestAidPage.tsx            |  6 ++--
 src/utils/filter-requests.ts            |  9 ++++--
 10 files changed, 82 insertions(+), 12 deletions(-)
 create mode 100644 src/forms/AdvancedSearchForm/index.tsx
 create mode 100644 src/forms/AdvancedSearchForm/style.ts

diff --git a/interfaces/filters.ts b/interfaces/filters.ts
index 81f438a..03bb20c 100644
--- a/interfaces/filters.ts
+++ b/interfaces/filters.ts
@@ -9,4 +9,5 @@ export interface FiltersInterface {
     driver: DriverKeyType | '';
     stage: StageKeyType | '';
     coordinator: string;
+    string: string;
 }
diff --git a/src/contexts/DashboardContext.tsx b/src/contexts/DashboardContext.tsx
index dd5ace2..9b4f9c1 100644
--- a/src/contexts/DashboardContext.tsx
+++ b/src/contexts/DashboardContext.tsx
@@ -71,6 +71,7 @@ const defaultFilters: FiltersInterface = {
     driver: '',
     stage: 'submitted',
     coordinator: '',
+    string: '',
 };
 
 export const log: (message: string) => void = (message) =>
diff --git a/src/forms/AdvancedSearchForm/index.tsx b/src/forms/AdvancedSearchForm/index.tsx
new file mode 100644
index 0000000..2f9a96c
--- /dev/null
+++ b/src/forms/AdvancedSearchForm/index.tsx
@@ -0,0 +1,41 @@
+import styled, { StyledComponent } from 'styled-components';
+import { Button, Form, InputGroup } from 'react-bootstrap';
+import { FiltersInterface } from '@interfaces/filters';
+import style from './style';
+import { useContext, useState } from 'react';
+import DashboardContext from '../../contexts/DashboardContext';
+
+const AdvancedSearchForm: StyledComponent = styled(
+    ({
+        className,
+        filters,
+        setFilters,
+    }: {
+        className: string;
+        filters: FiltersInterface;
+        setFilters: (value: FiltersInterface) => void;
+    }) => {
+        const [term, setTerm] = useState<string>('');
+        const handleSearch = (e) => {
+            setTerm(e.target.value);
+            setFilters({ ...filters, string: e.target.value });
+        };
+
+        return (
+            <Form className={className}>
+                <InputGroup>
+                    <Form.Control
+                        type="text"
+                        name="driver"
+                        value={term}
+                        size="sm"
+                        placeholder="Search by name or email"
+                        onChange={handleSearch}
+                    />
+                </InputGroup>
+            </Form>
+        );
+    }
+)(style);
+
+export default AdvancedSearchForm;
diff --git a/src/forms/AdvancedSearchForm/style.ts b/src/forms/AdvancedSearchForm/style.ts
new file mode 100644
index 0000000..12e4a39
--- /dev/null
+++ b/src/forms/AdvancedSearchForm/style.ts
@@ -0,0 +1,23 @@
+const style = () => ({
+    marginBottom: '15px',
+    'select, button, .form-check-input': {
+        cursor: 'pointer',
+    },
+    '.form-check-input': {
+        marginTop: 0,
+    },
+    '.form-check-input:checked': {
+        backgroundColor: 'var(--primary)',
+        borderColor: 'var(--primary)',
+    },
+    '.input-group-text': {
+        backgroundColor: 'var(--bs-gray-600)',
+        border: 'none',
+    },
+    'button.search-btn': {
+        backgroundColor: 'var(--black) !important',
+        border: 'none',
+    },
+});
+
+export default style;
diff --git a/src/forms/FilterForm/index.tsx b/src/forms/FilterForm/index.tsx
index 08bcafb..860fb00 100644
--- a/src/forms/FilterForm/index.tsx
+++ b/src/forms/FilterForm/index.tsx
@@ -127,9 +127,6 @@ const FilterForm: StyledComponent = styled(
                             });
                         }}
                     />
-                    <Button className="search-btn" size="sm" onClick={null}>
-                        More Filters
-                    </Button>
                     <Button size="sm" onClick={() => fetchRequests()}>
                         Refresh
                     </Button>
diff --git a/src/forms/FilterForm/style.ts b/src/forms/FilterForm/style.ts
index 12e4a39..a728cd1 100644
--- a/src/forms/FilterForm/style.ts
+++ b/src/forms/FilterForm/style.ts
@@ -14,10 +14,6 @@ const style = () => ({
         backgroundColor: 'var(--bs-gray-600)',
         border: 'none',
     },
-    'button.search-btn': {
-        backgroundColor: 'var(--black) !important',
-        border: 'none',
-    },
 });
 
 export default style;
diff --git a/src/pages/Dashboard/AidRequestsPage.tsx b/src/pages/Dashboard/AidRequestsPage.tsx
index 2212268..8bb73db 100644
--- a/src/pages/Dashboard/AidRequestsPage.tsx
+++ b/src/pages/Dashboard/AidRequestsPage.tsx
@@ -5,6 +5,7 @@ import { useContext, useState } from 'react';
 import DashboardContext from '../../contexts/DashboardContext';
 import Loading from '@components/Loading';
 import filterRequests from '@utils/filter-requests';
+import AdvancedSearchForm from '@forms/AdvancedSearchForm';
 
 const AidRequestsPage = () => {
     const { requests, isLoading, requestFilters, setRequestFilters, uid } =
@@ -24,6 +25,10 @@ const AidRequestsPage = () => {
                 filters={requestFilters}
                 setFilters={setRequestFilters}
             />
+            <AdvancedSearchForm
+                filters={requestFilters}
+                setFilters={setRequestFilters}
+            />
             {isLoading ? (
                 <Loading />
             ) : (
diff --git a/src/pages/Dashboard/DonationsPage.tsx b/src/pages/Dashboard/DonationsPage.tsx
index 8ef055b..2f17c84 100644
--- a/src/pages/Dashboard/DonationsPage.tsx
+++ b/src/pages/Dashboard/DonationsPage.tsx
@@ -21,6 +21,7 @@ const DonationsPage = () => {
         driver: '',
         stage: 'submitted',
         coordinator: '',
+        string: '',
     });
     const handler = (id?: string, shouldRefetch?: boolean): void => {
         setSelected(id);
diff --git a/src/pages/RequestAidPage.tsx b/src/pages/RequestAidPage.tsx
index d013adb..45390da 100644
--- a/src/pages/RequestAidPage.tsx
+++ b/src/pages/RequestAidPage.tsx
@@ -3,8 +3,8 @@ import { Container } from 'react-bootstrap';
 
 const RequestAidPage = () => (
     <Container>
-        {/* <RequestAidForm /> */}
-        <h1>Request Aid Form</h1>
+        <RequestAidForm />
+        {/* <h1>Request Aid Form</h1>
         <p>
             Due to an overwhelming response and limited volunteer capacity, we
             have temporarily taken down the request aid form. We want to ensure
@@ -21,7 +21,7 @@ const RequestAidPage = () => (
             <a href="mailto:support@communalists.org?subject=Mutual Aid Volunteer Request">
                 support@communalists.org
             </a>
-        </p>
+        </p> */}
     </Container>
 );
 
diff --git a/src/utils/filter-requests.ts b/src/utils/filter-requests.ts
index 10f99d7..a10e5de 100644
--- a/src/utils/filter-requests.ts
+++ b/src/utils/filter-requests.ts
@@ -4,13 +4,17 @@ import RequestAidInterface from '@interfaces/request-aid';
 const filterRequests = (
     requests: { [key: string]: RequestAidInterface },
     filters: FiltersInterface
-) =>
-    Object.entries(requests).reduce((object, [id, request]) => {
+) => {
+    return Object.entries(requests).reduce((object, [id, request]) => {
         const { stage, location, language, driver, coordinator } = filters;
+        const string = filters.string?.toLowerCase().trim();
         return stage !== request.stage ||
             (location && location !== request.location) ||
             (language && language !== request.language) ||
             (driver && driver !== request.driver) ||
+            (string &&
+                request.name.toLowerCase().trim().indexOf(string) &&
+                request.email.toLowerCase().trim().indexOf(string)) ||
             (coordinator && coordinator !== request.coordinator)
             ? object
             : {
@@ -18,5 +22,6 @@ const filterRequests = (
                   [id]: request,
               };
     }, {});
+};
 
 export default filterRequests;