From 8cf22566c575861c264f777adcf8476d7868aad8 Mon Sep 17 00:00:00 2001 From: Parshwa Shah Date: Wed, 11 Sep 2024 12:31:39 -0400 Subject: [PATCH 1/2] Added Search Feature to Search in Name or Position --- mern/client/src/components/RecordList.jsx | 215 ++++++++++++---------- 1 file changed, 117 insertions(+), 98 deletions(-) diff --git a/mern/client/src/components/RecordList.jsx b/mern/client/src/components/RecordList.jsx index 06309f5..53e3db4 100644 --- a/mern/client/src/components/RecordList.jsx +++ b/mern/client/src/components/RecordList.jsx @@ -2,109 +2,128 @@ import { useEffect, useState } from "react"; import { Link } from "react-router-dom"; const Record = (props) => ( - - - {props.record.name} - - - {props.record.position} - - - {props.record.level} - - -
- - Edit - - -
- - + + + {props.record.name} + + + {props.record.position} + + + {props.record.level} + + +
+ + Edit + + +
+ + ); export default function RecordList() { - const [records, setRecords] = useState([]); + const [records, setRecords] = useState([]); + const [search, setSearch] = useState(""); + const [debouncedSearch, setDebouncedSearch] = useState(""); - // This method fetches the records from the database. - useEffect(() => { - async function getRecords() { - const response = await fetch(`http://localhost:5050/record/`); - if (!response.ok) { - const message = `An error occurred: ${response.statusText}`; - console.error(message); - return; - } - const records = await response.json(); - setRecords(records); - } - getRecords(); - return; - }, [records.length]); + // This method fetches the records from the database. + useEffect(() => { + async function getRecords() { + const response = await fetch( + `http://localhost:5050/record?search=${debouncedSearch}` + ); + if (!response.ok) { + const message = `An error occurred: ${response.statusText}`; + console.error(message); + return; + } + const records = await response.json(); + setRecords(records); + } + getRecords(); + return; + }, [records.length, debouncedSearch]); - // This method will delete a record - async function deleteRecord(id) { - await fetch(`http://localhost:5050/record/${id}`, { - method: "DELETE", - }); - const newRecords = records.filter((el) => el._id !== id); - setRecords(newRecords); - } + useEffect(() => { + const timeout = setTimeout(() => { + setDebouncedSearch(search); + }, 300); + return () => clearTimeout(timeout); + }, [search]); - // This method will map out the records on the table - function recordList() { - return records.map((record) => { - return ( - deleteRecord(record._id)} - key={record._id} - /> - ); - }); - } + // This method will delete a record + async function deleteRecord(id) { + await fetch(`http://localhost:5050/record/${id}`, { + method: "DELETE", + }); + const newRecords = records.filter((el) => el._id !== id); + setRecords(newRecords); + } - // This following section will display the table with the records of individuals. - return ( - <> -

Employee Records

-
-
- - - - - - - - - - - {recordList()} - -
- Name - - Position - - Level - - Action -
-
-
- - ); + // This method will map out the records on the table + function recordList() { + return records.map((record) => { + return ( + deleteRecord(record._id)} + key={record._id} + /> + ); + }); + } + + // This following section will display the table with the records of individuals. + return ( + <> +

Employee Records

+
+ setSearch(e.target.value)} + /> +
+
+
+ + + + + + + + + + + {recordList()} + +
+ Name + + Position + + Level + + Action +
+
+
+ + ); } From f4d5a1d2b09154caff0c4884a31001418bbc27e0 Mon Sep 17 00:00:00 2001 From: Parshwa Shah Date: Wed, 11 Sep 2024 12:32:06 -0400 Subject: [PATCH 2/2] Added Search Feature to Search in Name or Position --- mern/server/routes/record.js | 106 ++++++++++++++++++++--------------- 1 file changed, 60 insertions(+), 46 deletions(-) diff --git a/mern/server/routes/record.js b/mern/server/routes/record.js index c492c96..7f98002 100644 --- a/mern/server/routes/record.js +++ b/mern/server/routes/record.js @@ -13,72 +13,86 @@ const router = express.Router(); // This section will help you get a list of all the records. router.get("/", async (req, res) => { - let collection = await db.collection("records"); - let results = await collection.find({}).toArray(); - res.send(results).status(200); + let collection = await db.collection("records"); + let searchQuery = req.query.search; + let results = []; + if (searchQuery) { + // Search among 2 parameters Name or Position + results = await collection + .find({ + $or: [ + { name: { $regex: searchQuery, $options: "i" } }, + { position: { $regex: searchQuery, $options: "i" } }, + ], + }) + .toArray(); + } else { + results = await collection.find({}).toArray(); + } + res.send(results).status(200); }); // This section will help you get a single record by id router.get("/:id", async (req, res) => { - let collection = await db.collection("records"); - let query = { _id: new ObjectId(req.params.id) }; - let result = await collection.findOne(query); + let collection = await db.collection("records"); + let query = { _id: new ObjectId(req.params.id) }; + let result = await collection.findOne(query); - if (!result) res.send("Not found").status(404); - else res.send(result).status(200); + if (!result) res.send("Not found").status(404); + else res.send(result).status(200); }); // This section will help you create a new record. router.post("/", async (req, res) => { - try { - let newDocument = { - name: req.body.name, - position: req.body.position, - level: req.body.level, - }; - let collection = await db.collection("records"); - let result = await collection.insertOne(newDocument); - res.send(result).status(204); - } catch (err) { - console.error(err); - res.status(500).send("Error adding record"); - } + try { + let newDocument = { + name: req.body.name, + position: req.body.position, + level: req.body.level, + }; + let collection = await db.collection("records"); + let result = await collection.insertOne(newDocument); + res.send(result).status(204); + } catch (err) { + console.error(err); + res.status(500).send("Error adding record"); + } }); // This section will help you update a record by id. router.patch("/:id", async (req, res) => { - try { - const query = { _id: new ObjectId(req.params.id) }; - const updates = { - $set: { - name: req.body.name, - position: req.body.position, - level: req.body.level, - }, - }; + try { + const query = { _id: new ObjectId(req.params.id) }; + const updates = { + $set: { + name: req.body.name, + position: req.body.position, + level: req.body.level, + }, + }; - let collection = await db.collection("records"); - let result = await collection.updateOne(query, updates); - res.send(result).status(200); - } catch (err) { - console.error(err); - res.status(500).send("Error updating record"); - } + let collection = await db.collection("records"); + let result = await collection.updateOne(query, updates); + res.send(result).status(200); + } catch (err) { + console.error(err); + res.status(500).send("Error updating record"); + } }); // This section will help you delete a record router.delete("/:id", async (req, res) => { - try { - const query = { _id: new ObjectId(req.params.id) }; + try { + const query = { _id: new ObjectId(req.params.id) }; - const collection = db.collection("records"); - let result = await collection.deleteOne(query); + const collection = db.collection("records"); + let result = await collection.deleteOne(query); - res.send(result).status(200); - } catch (err) { - console.error(err); - res.status(500).send("Error deleting record"); - } + res.send(result).status(200); + } catch (err) { + console.error(err); + res.status(500).send("Error deleting record"); + } }); export default router;