Поиск по нескольким моделям данных Node.js, React.js, Sequelize ORM

const Ship = sequelize.define('ship', {
    id: { type: DataTypes.INTEGER, primaryKey: true, autoIncrement: true },
    number: { type: DataTypes.STRING, unique: true, allowNull: false },
    name: { type: DataTypes.STRING, allowNull: false },
    length: { type: DataTypes.INTEGER, allowNull: false },
    priceSummer: { type: DataTypes.INTEGER, allowNull: false },
    priceWinter: { type: DataTypes.INTEGER, allowNull: false },
    parkingNumber: { type: DataTypes.INTEGER, allowNull: false },
   
});
const Client = sequelize.define('client', {
    id: { type: DataTypes.INTEGER, primaryKey: true, autoIncrement: true },
    surname: { type: DataTypes.STRING, allowNull: false },
    name: { type: DataTypes.STRING, allowNull: false },
    fathersName: { type: DataTypes.STRING, allowNull: false },
    email: { type: DataTypes.STRING, unique: true, allowNull: false },
    phoneNumber: { type: DataTypes.STRING, allowNull: false },
    comment: { type: DataTypes.TEXT, allowNull: true },
    hasPaid:{ type: DataTypes.BOOLEAN, allowNull: true , defaultValue: true},
    debtAmount: { type: DataTypes.FLOAT, allowNull: false, defaultValue: 0 },
});

const { Op } = require('sequelize');
const { Client, Ship } = require('../models/models');
const apiError = require('../error/apiError');
class searchController {
    async searchAll(req, res, next) {
      try {
        const { query } = req.query;
        const searchResult = await Promise.all([
          Client.findAll({
            where: {
              [Op.or]: [
                { surname: { [Op.like]: `%${query}%` } },
                { name: { [Op.like]: `%${query}%` } },
                { fathersName: { [Op.like]: `%${query}%` } },
                { phoneNumber: { [Op.like]: `%${query}%` } }
              ]
            }
          }),
          Ship.findAll({
            where: {
              [Op.or]: [
                { number: { [Op.like]: `%${query}%` } },
                { name: { [Op.like]: `%${query}%` } },
              ]
            }
          })
        ]);
 
        const [clientResults, shipResults] = searchResult;
        const results = [...clientResults, ...shipResults];
  
        return res.json(results);
      } catch (e) {
        next(apiError.badRequest(e.message));
      }
    }
  }
  
module.exports = new searchController();

export const searchAll = async (query) => {
    try {
        const { data } = await $authHost.get("api/search", {
            params: {
                query,
            },
        });
        return data;
    } catch (error) {
        console.error(error);
        throw error;
    }
};

import React, { useContext, useState, useEffect } from 'react';
import { Context } from '../..';
import { Search } from 'react-bootstrap-icons';
import { Button, Container, Form, Navbar, Row, Col } from 'react-bootstrap';
import { useNavigate } from 'react-router-dom';
import { searchAll } from '../../http/searchAPI';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { observer } from 'mobx-react-lite';
import CreateClient from '../modals/CreateClient';
import { CLIENT_ROUTE } from '../../utils/consts';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import { v4 as uuidv4 } from 'uuid';
 
const NavBar = observer(() => {
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const [selectedItem, setSelectedItem] = useState(null);
  const { client, ship } = useContext(Context);
  const [clientVisible, setClientVisible] = useState(false);
 
  const navigate = useNavigate();
 
  const handleAddClient = async () => {
    try {
      setClientVisible(true);
    } catch (e) {
      console.log(e);
    }
  };
 
  const handleCloseModal = () => {
    setClientVisible(false);
  };
 
  const fetchData = async () => {
    try {
      const searchData = await searchAll(searchQuery);
      setSearchResults(searchData);
      setSelectedItem(null);
      if (client) {
        client.setClients(searchData);
      }
      if (ship) {
        ship.setShips(searchData);
      }
    } catch (error) {
      console.error(error);
    }
  };
 
  useEffect(() => {
    fetchData();
  }, [searchQuery]);
 
  const handleItemClick = (itemId) => {
    navigate(CLIENT_ROUTE + '/' + itemId);
  };
 
  const getLabel = (item) => {
    if (item.name && item.number) {
      return `${item.surname} ${item.name} ${item.fathersName}`;
    } else if (item.name) {
      return `${item.surname} ${item.name} ${item.fathersName}`;
    } else if (item.number) {
      return `${item.number}`;
    }
    return '';
  };
 
  return (
    <Navbar className="mb-3 mt-3">
      <Container>
        <Row className="w-100">
          <Col md={9}>
            <Form className="d-flex w-100" onSubmit={(e) => e.preventDefault()}>
              <Autocomplete
                freeSolo
                style={{ backgroundColor: '#EAF1FB', borderRadius: '50px' }}
                options={searchResults.map((item) => ({
                  label: getLabel(item),
                  value: item,
                  key: uuidv4(),
                  id:item.id
                }))}
                value={selectedItem}
                onChange={(event, value) => {
                  if (value && value.id) {
                    handleItemClick(value.id);
                  } else {
                    setSelectedItem(null);
                  }
                }}
                onInputChange={(e, value) => setSearchQuery(value)}
                renderInput={(params) => (
                  <ThemeProvider theme={theme}>
                    <TextField
                      {...params}
                      label=""
                      InputLabelProps={{
                        shrink: true,
                        style: { display: 'none' },
                      }}
                      placeholder="Найти клиента, судно"
                      style={{
                        width: '40vw',
                        backgroundColor: '#EAF1FB',
                        borderRadius: '50px',
                        border: 'none',
                      }}
                      InputProps={{
                        ...params.InputProps,
                        startAdornment: (
                          <>
                            <Search style={{ marginRight: '0.5rem' }} />
                            {params.InputProps.startAdornment}
                          </>
                        ),
                        classes: {
                          notchedOutline: 'no-border',
                        },
                        onClick: (event) => {
                          if (selectedItem) {
                            event.stopPropagation();
                          }
                        },
                      }}
                    />
                  </ThemeProvider>
                )}
              />
            </Form>
          </Col>
          <Col md={3} className="d-flex justify-content-end">
            <Button variant="primary" onClick={handleAddClient}>
              Добавить клиента
            </Button>
            <CreateClient show={clientVisible} onHide={handleCloseModal} />
          </Col>
        </Row>
      </Container>
    </Navbar>
  );
});
 
const theme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          border: 'none',
          '& .no-border': {
            border: 'none',
          },
        },
      },
    },
  },
});
 
export default NavBar;