IO-2261 Sample open search replacement.

client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx

@@ -2,7 +2,7 @@ import { SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Input, Space, Table, Typography } from "antd";
 import _ from "lodash";
 import queryString from "query-string";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useHistory, useLocation } from "react-router-dom";
@@ -11,6 +11,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import axios from "axios";
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
@@ -21,6 +22,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
   const search = queryString.parse(useLocation().search);
+  const [openSearchResults, setOpenSearchResults] = useState([]);
   const { page, sortcolumn, sortorder } = search;
   const history = useHistory();
 
@@ -193,6 +195,28 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
     history.push({ search: queryString.stringify(search) });
   };
 
+  useEffect(() => {
+    if (search.search && search.search.trim() !== "") {
+      //  setLoading(true);
+      searchJobs();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  async function searchJobs(value) {
+    try {
+      const searchData = await axios.post("/search", {
+        search: value || search.search,
+        index: "jobs",
+      });
+
+      setOpenSearchResults(searchData.data.hits.hits.map((s) => s._source));
+    } catch (error) {
+    } finally {
+      //setLoading(false)
+    }
+  }
+
   return (
     <Card
       extra={
@@ -220,6 +244,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
             onSearch={(value) => {
               search.search = value;
               history.push({ search: queryString.stringify(search) });
+              searchJobs(value);
             }}
             enterButton
           />
@@ -228,16 +253,20 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
     >
       <Table
         loading={loading}
-        pagination={{
-          position: "top",
-          pageSize: 25,
-          current: parseInt(page || 1),
-          total: total,
-          showSizeChanger: false,
-        }}
+        pagination={
+          search?.search
+            ? { pageSize: 25 }
+            : {
+                position: "top",
+                pageSize: 25,
+                current: parseInt(page || 1),
+                total: total,
+                showSizeChanger: false,
+              }
+        }
         columns={columns}
         rowKey="id"
-        dataSource={jobs}
+        dataSource={search?.search ? openSearchResults : jobs}
         onChange={handleTableChange}
       />
     </Card>