Getting a specific user from MYSQL with axios Get - mysql

Question

I'm at the very end of my project, I'm using react js frontend and express and mysql, I have everything working but the last step, I have a input field that is suppose to allow a user to enter a email or phone number and hit search, It's suppose to search the database and display that user's info, I have it when you hit search it displays all the data from the database, I need it to search and find the data the user is requesting, I can't find any documentation. here is my front end code.
import React, { useState, useEffect } from "react";
import "./Home.css";
import BattleAxe from "./battleaxes.png";
import { Link } from "react-router-dom";
import axios from "axios";
export default function Home() {
const [searchResults, setSearchResults] = useState([]);
const handleSubmit = (e) => {
e.preventDefault();
axios.get("http://localhost:3001/api/get").then((response) => {
setSearchResults(response.data);
});
};
return (
<div className="home-container">
<img src={BattleAxe} alt="" className="axe-image" />
<div>
<h2 className="heading"> Welcome to Battle Axes!</h2>
</div>
<div className="split">
<div className="newc">
<p className="info1">
<strong>First Timer?</strong>
</p>
<p className="info3">
Click the 'New Customer'
<br />
button to get started.
</p>
<Link to="/NewCustomer">
<button className="new-customer">New Customer</button>
</Link>
</div>
<div className="returnc">
<h3 className="info2">Returning Customer?</h3>
<p className="info4">
Enter your Email or Phone
<br />
below to find your acount.
</p>
<form onSubmit={handleSubmit}>
<input type="text" className="text-field" />
<button className="search-btn">Search</button>
</form>
</div>
</div>
<div className="search-results">
{searchResults.map((val) => {
return (
<p className="srlist">
{val.firstName} | {val.lastName}
<br />
<br />
{val.email}
<br />
<br />
{val.phone}
<Link to="/WaiverForm">
<button className="sel-btn">Select</button>
</Link>
</p>
);
})}
</div>
</div>
);
}
here is my backend.
const express = require("express");
const app = express();
const mysql = require("mysql");
const bodyParser = require("body-parser");
const cors = require("cors");
const { response } = require("express");
const db = mysql.createConnection({
host: "localhost",
user: "root",
password: "Killer12!",
database: "cloneDataBase",
});
app.use(cors());
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.get("/api/get", (req, res) => {
const sqlGet = "SELECT * FROM customer_registration";
db.query(sqlGet, (error, result) => {
res.send(result);
});
});
app.post("/api/post", (req, res) => {
const { firstName, lastName, email, phone, nickName } = req.body;
const sqlInsert =
"INSERT INTO customer_registration (firstName, lastName, email, phone, nickName) VALUES (?,?,?,?,?)";
db.query(
sqlInsert,
[firstName, lastName, email, phone, nickName],
(error, result) => {
if (error) {
console.log(error);
res.send("False");
}
}
);
res.send("Customer created");
});
app.post("/api/waiver", (req, res) => {
const userSignature = req.body.userSignature;
const sqlInsert = "INSERT INTO waiver_signature (userSignature) VALUES (?)";
db.query(sqlInsert, userSignature, (err, result) => {
if (err) {
console.log(err);
}
});
res.send("Signature created");
});
app.listen(3001, () => {
console.log("running on port 3001");
});

Answer 1

You can create an endpoint where you are receving query params either email or phone number
app.get("/api/get", (req, res) => {
let email = req.query.email ?? '';
let phone = req.query.phone ?? '';
const sqlGet = "SELECT * FROM customer_registration WHERE email = ? OR phone = ?";
db.query(sqlGet, [email, phone], (error, result) => {
res.send(result);
});
});
In your frontend, you can send data in query params, You can plug in your email and phone like this below
axios.get("http://localhost:3001/api/get", { params: { email: email, phone: phone} })