Hello all i am working on a project where i am able to register and login after the these two steps user have to fill one more form i.e. display below and then after submitting these form data is going to database but when i click on show on the next page it is displaying all the records. I want the records of current user filled in but it is showing all the records from sql database. Main.js
import { useState } from 'react'
import axios from 'axios';
import {useHistory} from 'react-router-dom';
import { useEffect } from 'react';
const Main = () => {
const [formStep, setFormStep] = useState(0);
const history=useHistory();
const [firstname,setfirstname]=useState('');
const [lastname,setlastname]=useState('');
const [email,setemail]=useState('');
const [mobile,setmobile]=useState('');
const [address,setaddress]=useState('');
const [city,setcity]=useState('');
const [pincode,setpincode]=useState('');
const [conference,setconference]=useState('');
const [seminar,setseminar]=useState('');
const [paper,setpaper]=useState('');
const [loginstatus,setlogin]=useState('');
const completeFormStep = () => {
setFormStep(step => step + 1)
}
const backFormStep = () => {
setFormStep(step => step - 1)
}
const handlesubmit = () => {
axios.post("http://localhost:3001/add",{
firstname:firstname,
lastname:lastname,
email:email,
mobile:mobile,
address:address,
city:city,
pincode:pincode,
conference:conference,
seminar:seminar,
paper:paper
}).then((res)=>{
console.log("success");
})
history.push("/view")
};
useEffect(() => {
axios.get("http://localhost:3001/login").then((res)=>{
console.log(res)
if(res.data.loggedIn===true){
setlogin(res.data.user[0].email)
}
})
}, []);
return (
<div className="create">
<form method="POST">
{formStep === 0 && (
<section>
<h1>{"Welcome" + loginstatus}</h1>
<h2>Names</h2>
<label>First Name</label>
<input
type="text"
required
onChange={(e)=>{
setfirstname(e.target.value);
}}
/>
<br />
<label>Last Name</label>
<input
type="text"
required
onChange={(e)=>{
setlastname(e.target.value);
}}
/>
<br />
<button type="button" onClick={completeFormStep}>Next</button>
</section>)}
<div className="step2">
{formStep === 1 && (
<section>
<h2>Contact</h2>
<label>Email ID</label>
<input
type="email"
required
onChange={(e)=>{
setemail(e.target.value);
}}
/>
<br />
<label>Mobile No.</label>
<input
type="text"
required
onChange={(e)=>{
setmobile(e.target.value);
}}
/>
<br />
<button type="button" onClick={backFormStep}>Back</button>
<button type="button" onClick={completeFormStep}>Next</button>
</section>)}
</div>
<div className="step3">
{formStep === 2 && (
<section>
<h2>Address</h2>
<label>Address</label>
<textarea onChange={(e)=>{
setaddress(e.target.value);
}}>
</textarea>
<br />
<label>City</label>
<input
type="text"
required
onChange={(e)=>{
setcity(e.target.value);
}}
/>
<br />
<label>Pincode</label>
<input
type="text"
required
onChange={(e)=>{
setpincode(e.target.value);
}}
/>
<br />
<button type="button" onClick={backFormStep}>Back</button>
<button type="button" onClick={completeFormStep}>Next</button>
</section>)}
</div>
<div className="step4">
{formStep === 3 && (
<section>
<h2>Conferences attended,seminar and paper presented</h2>
<label>Conferences name</label>
<textarea placeholder="conferences names" onChange={(e)=>{
setconference(e.target.value);
}}></textarea>
<br />
<label>Seminar attended</label>
<textarea placeholder="seminar names"onChange={(e)=>{
setseminar(e.target.value);
}}></textarea>
<br />
<label>Paper presented</label>
<textarea placeholder="paper names" onChange={(e)=>{
setpaper(e.target.value);
}}></textarea>
<br />
<button type="button" onClick={backFormStep}>Back</button>
<button type="submit" onClick={handlesubmit}>Submit</button>
</section>)}
<div>
</div>
</div>
</form>
</div>
);
}
export default Main
Below the code where i want the details of current user by clicking on show
import React from 'react';
import axios from 'axios';
import { useState } from 'react';
//import { Link } from 'react-router-dom';
export const View = () => {
const [teacherList, setteacherList] = useState([]);
const showdata = () => {
axios.get("http://localhost:3001/teachersdata").then((response) => {
console.log(response)
setteacherList(response.data);
});
};
return(
<div>
{/* <Link to="/teacherdata/:emailId" onClick={showdata}>Show</Link> */}
<button type="submit" onClick={showdata}>Show</button>
{teacherList.map((val,key)=>{
return <div className='teacher'>
<h3>Name: {val.firstname}</h3>
<h3>Lastname: {val.lastname}</h3>
<h3>Email: {val.email}</h3>
<h3>Mobile: {val.mobile}</h3>
<h3>Address: {val.address}</h3>
<h3>City: {val.city}</h3>
<h3>Pincode: {val.pincode}</h3>
<h3>Conference: {val.conference}</h3>
<h3>Seminar: {val.seminar}</h3>
<h3>Paper Presented: {val.paper}</h3>
</div>
})}
<button>Download PDF</button>
</div>
)
}
This is my server side code i have use nodejs express js
onst express = require("express");
const app = express();
const cors = require('cors');
const mysql = require("mysql");
const cookie=require("cookie-parser");
const session=require("express-session");
const bodyparser=require("body-parser");
//const sessionteacher = require('express-mysql-session')(session);
app.use(cors({
origin:("http://localhost:3000"),
methods:("GET","POST"),
credentials:true
}));
app.use(cookie());
app.use(bodyparser.urlencoded({extended:true}));
app.use(session({
//teacher:sessionteacher,
key:"userid",
resave:false,
saveUninitialized:false,
secret:"userinfo",
cookie:{
expires:60*60*24,
},
}))
app.use(express.json());
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'typroject'
});
db.connect((err) => {
if (err) {
throw err;
}
else {
console.log("Mysql Connected");
}
})
app.post('/register', (req, res) => {
const email = req.body.email;
const password = req.body.password;
const cpassword = req.body.cpassword;
db.query("SELECT FROM registration WHERE email='"+email+"';", [email], (err, result) => {
if(result){
res.send({message:"User already exists"})
}
else{
db.query("INSERT INTO registration (email,password,cpassword) VALUES(?,?,?)", [email, password, cpassword], (err, result) => {
if(err){
res.send(err);
}
else{
res.send({message:"Registered Successful"})
}
})
}
})
})
app.post("/login", (req, res) => {
const email = req.body.email;
const password = req.body.password;
db.query("SELECT * FROM registration WHERE email='"+email+"' AND password='"+password+"';", [email,password], (err, result) => {
if(err){
res.send({err:err});
}
if(result.length>0){
req.session.user=result;
console.log( req.session.user)
res.send(result);
}
else{
res.send({message:"Wrong username/passsword"})
}
})
app.get("/login",(req,res)=>{
if(req.session.user){
res.send({loggedIn:true,user:req.session.user})
}
else{
res.send({loggedIn:false});
}
})
app.post('/add', (req, res) => {
const firstname=req.body.firstname;
const lastname=req.body.lastname;
const email=req.body.email;
const mobile=req.body.mobile;
const address=req.body.address;
const city=req.body.city;
const pincode=req.body.pincode;
const conference=req.body.conference;
const seminar=req.body.seminar;
const paper=req.body.paper;
if(firstname==""||lastname==""||email==""||mobile==""||address==""||city==""||pincode==""||conference==""||seminar==""||paper=="")
{
return res.status(422).json({error:"Please Fill the form correctly"});
}
db.query("INSERT INTO teacher (firstname,lastname,email,mobile,address,city,pincode,conference,seminar,paper) VALUES(?,?,?,?,?,?,?,?,?,?)", [firstname,lastname,email,mobile,address,city,pincode,conference,seminar,paper], (err, result) => {
console.log(err);
})
})
app.get("/teachersdata", (req, res) => {
db.query("SELECT * FROM teacher", (err, result) => {
if (err) {
console.log(err);
} else {
res.send(result);
}
});
});
app.get("/logout",(req,res)=>{
console.log("logout page");
//req.logout()
console.log( req.session.user)
res.clearCookie("userid")
//res.redirect("/login")
req.session.destroy((err) => {
res.redirect('/login') // will always fire after session is destroyed
})
})
})
app.listen(3001)
Thank you in advance
