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
-
-
-
-
-
-
- Name
-
-
- Position
-
-
- Level
-
-
- Action
-
-
-
-
- {recordList()}
-
-
-
-
-
- );
+ // 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)}
+ />
+
+
+
+
+
+
+
+ Name
+
+
+ Position
+
+
+ Level
+
+
+ Action
+
+
+
+
+ {recordList()}
+
+
+
+
+
+ );
}
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;