Fix positive and monitoring case selection search

src/scenes/ContactInvestigationFormStep1/index.tsx

@@ -51,6 +51,11 @@ const ContactInvestigationFormStep1 = () => {
     fetchCases(page);
   }, [page]);
 
+  useEffect(() => {
+    const timeout = setTimeout(() => handleFilter(), 500);
+    return () => clearTimeout(timeout);
+  }, [searchQuery]);
+
   const fetchCases = async (pageNumber: number) => {
     setIsLoading(true);
     const resp = await global.services.main.listPositiveCases(pageNumber);
@@ -76,7 +81,7 @@ const ContactInvestigationFormStep1 = () => {
 
   const handleFilter = async () => {
     setIsLoading(true);
-    const resp = await global.services.main.filterPositiveCase(searchQuery);
+    const resp = await global.services.main.searchPositiveCase(searchQuery);
     if (resp.status === 200) {
       const data = resp.data;
       setNext(data.next);
@@ -102,19 +107,11 @@ const ContactInvestigationFormStep1 = () => {
           </ModalContainer>
         </Modal>
         <Box>
-          <Box style={{width: '65%'}}>
-            <Field
-              name="Cari Nama"
-              placeholder="Cari.."
-              updateValue={setSearchQuery}
-            />
-          </Box>
-          <Gap axis={1} gap={10} />
-          <Box style={{height: '40%', marginTop:15}}>
-            <Button type={Button.Type.Outline} onPress={handleFilter}>
-              Cari
-            </Button>
-          </Box>
+          <Field
+            name="Cari Kasus"
+            placeholder="Cari.."
+            updateValue={setSearchQuery}
+          />
         </Box>
         <Table
           onChange={handleSelect}

src/scenes/MonitoringSelection/index.tsx

@@ -109,6 +109,11 @@ const MonitoringSelection = () => {
     fetchCases(page);
   }, [page]);
 
+  useEffect(() => {
+    const timeout = setTimeout(() => handleFilter(), 500);
+    return () => clearTimeout(timeout);
+  }, [searchQuery]);
+
   const fetchCases = async (pageNumber: number) => {
     setIsLoading(true);
     const resp = await main.listMonitoringCases(pageNumber);
@@ -141,9 +146,8 @@ const MonitoringSelection = () => {
   };
 
   const handleFilter = async () => {
-    console.log('hehe')
     setIsLoading(true);
-    const resp = await main.filterMonitoringCase(searchQuery);
+    const resp = await main.searchMonitoringCase(searchQuery);
     if (resp.status === 200) {
       const data = resp.data;
       setNext(data.next);
@@ -186,19 +190,11 @@ const MonitoringSelection = () => {
         <Header headerText="Pilih Obyek Pemantauan" />
         <ContainerContent>
           <Box>
-            <Box style={{width: '65%'}}>
-              <Field
-                name="Cari Nama"
-                placeholder="Cari..."
-                updateValue={setSearchQuery}
-              />
-            </Box>
-            <Gap axis={1} gap={10} />
-            <Box style={{height: '40%', marginTop: 15}}>
-              <Button type={Button.Type.Outline} onPress={handleFilter}>
-                Cari
-              </Button>
-            </Box>
+            <Field
+              name="Cari Nama"
+              placeholder="Cari..."
+              updateValue={setSearchQuery}
+            />
           </Box>
           <ChoiceSpan>
             <MonitoringCaseChoices onChange={handleSelect} data={masterData} />

src/services/hooks/useMainService/index.tsx

@@ -188,6 +188,14 @@ export default function useMainService(token: string) {
     return fetchWithAuthentication(endpoint.slice(0, -1), Method.GET);
   }
 
+  async function searchPositiveCase(searchQuery: string) {
+    const endpoint = END_POINTS.LIST_POSITIVE_CASES([
+      null,
+      `?search=${searchQuery}`,
+    ]);
+    return fetchWithAuthentication(endpoint.slice(0, -1), Method.GET);
+  }
+
   async function createMonitoringCase(body: object) {
     const endPoint = END_POINTS.MONITORING_CASES([
       null,
@@ -220,6 +228,14 @@ export default function useMainService(token: string) {
     return fetchWithAuthentication(endpoint.slice(0, -1), Method.GET);
   }
 
+  async function searchMonitoringCase(searchQuery: string) {
+    const endpoint = END_POINTS.MONITORING_CASES([
+      null,
+      `?search=${searchQuery}`,
+    ]);
+    return fetchWithAuthentication(endpoint.slice(0, -1), Method.GET);
+  }
+
   async function updateMonitoringCase(body: object, id: string) {
     const endpoint = END_POINTS.MONITORING_CASES([
       null,
@@ -244,10 +260,12 @@ export default function useMainService(token: string) {
     // Positive Case
     listPositiveCases,
     filterPositiveCase,
+    searchPositiveCase,
     // Monitoring Case
     createMonitoringCase,
     listMonitoringCases,
     filterMonitoringCase,
     updateMonitoringCase,
+    searchMonitoringCase,
   };
 }