Saya cuba mempelajari cara tindanan MERN berfungsi bersama dengan belajar dengan melakukan dan saya mengikuti tutorial ini untuk bezcoder: Node.js/Express/MongoDb (Kod keseluruhan Github) dan Reactjs (kod keseluruhan Github)

Contoh data daripada pelayan

[
  {
    "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
  }
]

Keadaan semasa Pada masa ini, bahagian hadapan apl mempunyai bar carian tempat saya boleh mencari dan menapis data mengikut "tajuk" tutorial (cth. "Mi" untuk mendapatkan yang pertama). Saya dapati ini dilakukan dengan coretan kod berikut:

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 (dalam Reactjs)

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

class TutorialDataService {

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

export default new TutorialDataService();

Apa yang saya ingin tahu ialah , bagaimana untuk menukar kod ini supaya saya boleh menapis mengikut perkataan dalam kotak carian "tajuk" dan "huraian" dan juga kotak pilihan published:true pass.

Jika bahagian hadapan kelihatan seperti ini:

Percubaan saya

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 (dalam 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();

Saya tidak pasti sama ada ini adalah penggunaan findByTitle yang betul dan cara melaksanakan fungsi ATAU dan DAN dengan betul.