feat: added search feature to filter requests

jadeallencook · Nov 28, 2023 · 9d0395e · 9d0395e
1 parent 25eab4f
commit 9d0395e
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -4,19 +4,24 @@ 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
             : {
                   ...object,
                   [id]: request,
               };
     }, {});
+};
 
 export default filterRequests;