Replace autocomplete with normal text field (#1849)

bcgov · Jul 18, 2023 · 89bc074 · 89bc074
1 parent d4884a4
commit 89bc074
Showing 1 changed file with 15 additions and 62 deletions.
diff --git a/met-web/src/components/landing/LandingComponent.tsx b/met-web/src/components/landing/LandingComponent.tsx
@@ -1,11 +1,9 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import { Autocomplete, CircularProgress, Grid, MenuItem, TextField } from '@mui/material';
+import { Grid, MenuItem, TextField } from '@mui/material';
 import { Banner } from 'components/banner/Banner';
 import { MetHeader1, MetLabel, MetParagraph } from 'components/common';
 import TileBlock from './TileBlock';
-import { Engagement } from 'models/engagement';
 import { debounce } from 'lodash';
-import { getEngagements } from 'services/engagementService';
 import { EngagementDisplayStatus } from 'constants/engagementStatus';
 import { LandingContext } from './LandingContext';
 import { Container } from '@mui/system';
@@ -18,33 +16,18 @@ import { useAppDispatch } from 'hooks';
 
 const LandingComponent = () => {
     const { searchFilters, setSearchFilters, setPage, page } = useContext(LandingContext);
-    const [engagementOptionsLoading, setEngagementOptionsLoading] = useState(false);
-    const [engagementOptions, setEngagementOptions] = useState<Engagement[]>([]);
     const [tenant, setTenant] = useState<Tenant>();
     const [didMount, setDidMount] = useState(false);
     const dispatch = useAppDispatch();
     const { engagementProjectTypes } = AppConfig.constants;
 
-    const loadEngagementOptions = async (searchText: string) => {
-        if (!searchText) {
-            return;
-        }
-        try {
-            setEngagementOptionsLoading(true);
-            const response = await getEngagements({
-                search_text: searchText,
-            });
-            setEngagementOptions(response.items);
-            setEngagementOptionsLoading(false);
-        } catch (error) {
-            setEngagementOptionsLoading(false);
-        }
-    };
-
-    const debounceLoadEngagements = useRef(
+    const debounceSetSearchFilters = useRef(
         debounce((searchText: string) => {
-            loadEngagementOptions(searchText);
-        }, 1000),
+            setSearchFilters({
+                ...searchFilters,
+                name: searchText,
+            });
+        }, 300),
     ).current;
 
     const tileBlockRef = useRef<HTMLDivElement>(null);
@@ -144,46 +127,16 @@ const LandingComponent = () => {
                     >
                         <Grid item xs={12} sm={6} md={4} lg={4}>
                             <MetLabel sx={{ marginBottom: '2px', display: 'flex' }}>Engagement name</MetLabel>
-                            <Autocomplete
-                                options={engagementOptions || []}
-                                onInputChange={(_event, newInputValue) => {
-                                    debounceLoadEngagements(newInputValue);
+
+                            <TextField
+                                fullWidth
+                                placeholder="Type engagement's name..."
+                                InputLabelProps={{
+                                    shrink: false,
                                 }}
-                                renderInput={(params) => (
-                                    <TextField
-                                        {...params}
-                                        fullWidth
-                                        placeholder="Type engagement's name..."
-                                        InputLabelProps={{
-                                            shrink: false,
-                                        }}
-                                        InputProps={{
-                                            ...params.InputProps,
-                                            endAdornment: (
-                                                <>
-                                                    {engagementOptionsLoading ? (
-                                                        <CircularProgress
-                                                            color="primary"
-                                                            size={20}
-                                                            sx={{ marginRight: '2em' }}
-                                                        />
-                                                    ) : null}
-                                                    {params.InputProps.endAdornment}
-                                                </>
-                                            ),
-                                        }}
-                                    />
-                                )}
-                                onChange={(_, engagement) => {
-                                    setSearchFilters({
-                                        ...searchFilters,
-                                        name: engagement?.name || '',
-                                    });
-                                    setPage(1);
+                                onChange={(event) => {
+                                    debounceSetSearchFilters(event.target.value);
                                 }}
-                                getOptionLabel={(engagement: Engagement) => engagement.name}
-                                loading={false}
-                                size="small"
                             />
                         </Grid>
                         <Grid item xs={12} sm={6} md={4} lg={4}>