Ich versuche durch Learning by Doing zu lernen, wie der MERN-Stack zusammenarbeitet, und folge diesen Tutorials für Bezcoder: Node.js/Express/MongoDb (Github-Gesamtcode) und Reactjs (Github-Gesamtcode)

Beispieldaten vom Server

[
  {
    "id": "5f9bdace778082303c859248",
    "title": "How to cook noodles",
    "description": "This is a tutorial about how to cook noodles in under 10 minutes.",
    "published": false
  },
  {
    "id": "5f9bdae3778082303c859249",
    "title": "How to bake a chocolate cake",
    "description": "This is a tutorial about how to bake chocolate cake using cocoa powder.",
    "published": true
  }
]

Aktuelle Situation Derzeit verfügt das Frontend der App über eine Suchleiste, in der ich die Daten nach dem „Titel“ des Tutorials suchen und filtern kann (z. B. „Nudeln“, um das erste zu erhalten). Ich habe herausgefunden, dass dies mit dem folgenden Codeausschnitt geschieht:

1. tutorial.controller.js

exports.findAll = (req, res) => {
  const title = req.query.title;
  var condition = title ? { title: { $regex: new RegExp(title), $options: "i" } } : {};

  Tutorial.find(condition)
    .then(data => {
      res.send(data);
    })
    .catch(err => {
      res.status(500).send({
        message:
          err.message || "Some error occurred while retrieving tutorials."
      });
    });
};

2. services/tutorial.service.js (in Reactjs)

import http from "../http-common";

class TutorialDataService {

...
  
  findByTitle(title) {
    return http.get(`/tutorials?title=${title}`);
  }
}

export default new TutorialDataService();

Was ich wissen möchte ist, wie ich diese Codes ändern kann, damit ich nach Wörtern im Suchfeld „Titel“ und „Beschreibung“ und auch im Kontrollkästchen „Published:True“ filtern kann.

Wenn das Frontend so aussieht:

Mein Versuch

1. tutorial.controller.js

exports.findAll = (req, res) => {
  const title = req.query.title || "";
  const description = req.query.description || "";
  const published = req.query.published;

  Tutorial.find(
    {
    $or: [
        {title: { $regex: new RegExp(title), $options: "i"}}, {description: { $regex: new RegExp(description), $options: "i"}}
    ],
    $and: [
        .... and here if checked, then only show published, else show all ....
    ]

}

  )
    .then(data => {
      res.send(data);
    })
    .catch(err => {
      res.status(500).send({
        message:
          err.message || "Some error occurred while retrieving tutorials."
      });
    });
};

2. services/tutorial.service.js (in Reactjs)

import http from "../http-common";

class TutorialDataService {

...
  
  findByTitle(title, description, published) {
    return http.get(`/tutorials?title=${title}`, `/tutorials?description=${description}`, `/tutorials?published=${published}`);
  }
}

export default new TutorialDataService();

Ich bin mir nicht sicher, ob dies die richtige Verwendung von findByTitle ist und wie man die OR- und AND-Funktionen richtig implementiert.