i have a react crud project with node, express, and mysql. Before user go to homepage, user will have to register and then login with an account. I have 3 routes in this project (Home, input form, and profile).
In the homepage there are table with id, created, updated, an action. In this table user can see their inputted data(if the user login with example@example.comand then submit a form using that email, only that user can see the data) if another user login as test@test.com, that user cant see.
In the input form page, just like the name user will input their data such as email, date, phone number, and attachments.
The problem is i want to create an admin account(lets call the email admin@admin.com). If the user logged in with admin email, that user will see all the data from other user as well.
We go to mysql : i have 2 tables, mahalkita(data inputted user form form), user(email and password). https://cdn.discordapp.com/attachments/755260290450587661/1022880655996108930/unknown.png https://cdn.discordapp.com/attachments/755260290450587661/1022880862947250226/unknown.png
Currently the code for displaying data in home page is(im using session) :
app.get("/registration", (req, res) => {
const sqlSelect= `SELECT mahalkita.CompanyName, mahalkita.Address, mahalkita.PhoneNumber, mahalkita.PresidentName, mahalkita.AccountManagerEmail, mahalkita.AccountManagerPhone,
mahalkita.PICEmail, mahalkita.PICPhone, mahalkita.EstablishedDate, mahalkita.MainBusiness, mahalkita.EmployeeNumber, mahalkita.NumberOfCustomer, mahalkita.Attachments,
mahalkita.id, mahalkita.SKAny, mahalkita.SKValid, mahalkita.NPWPAny, mahalkita.NPWPValid, mahalkita.SIUPAny, mahalkita.SIUPValid, mahalkita.TDPAny, mahalkita.TDPValid,
mahalkita.DomisiliAny, mahalkita.DomisiliValid, mahalkita.SPKPAny, mahalkita.SPKPValid, mahalkita.AuditAny, mahalkita.AuditValid, mahalkita.TaxAny, mahalkita.TaxValid,
mahalkita.BankAny, mahalkita.BankValid, mahalkita.Created_At, mahalkita.Updated_At, mahalkita.Status, mahalkita.Submitted
from mahalkita INNER JOIN user ON mahalkita.email = user.email WHERE user.email = "${req.session.email[0].email}" ORDER BY mahalkita.id DESC`
db.query(sqlSelect, (err, result)=>{
res.send(result)
});
});
homepage.js
const deleteReportData = (id) => {
Axios.delete(`http://localhost:3001/deleteReport/${id}`).then((response) => {
setDataList(dataList.filter((val) => {
return val.id != id;
}));
setOpen(false);
});
};
const getData = () => {
Axios.get(`http://localhost:3001/registration`).then((response) => {
setDataList(response.data)
});
};
<div>
<Stack spacing={2} sx={{ width: '100%' }}>
<Snackbar open={showSuccess} autoHideDuration={6000} onClose={handleNotShowSuccess}>
<Alert onClose={handleNotShowSuccess} severity="success" sx={{ width: '100%' }}>
Email sent succesfully
</Alert>
</Snackbar>
</Stack>
<div className='textReport'>
<h3>Report History</h3>
</div>
<div style={{display: "flex", justifyContent : "center"}}>
<Button variant='contained' onClick={submitEmail}>Test</Button>
</div>
<div className='tableHistory'>
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Created</th>
<th scope="col">Updated</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{dataList.map((val, index) => {
return(
<>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
PaperProps={{
style: {
boxShadow: 'none',
},
}}
>
<DialogTitle id="alert-dialog-title">
{"Are you sure want to delete this data ? "}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
The data that deleted cannot be restored.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Disagree</Button>
<Button onClick={() => {
deleteReportData(val.id)
}} autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
<tr key={index}>
<td>{val.id}</td>
<td>{moment(val.Created_At).format('MMMM Do YYYY, h:mm:ss a')}</td>
<td>{moment(val.Updated_At).format('MMMM Do YYYY, h:mm:ss a')}</td>
<td>
<div className='linkHistory'>
{val.Status.length ?
<>
{val.Status === "Approved" ?
<div className='link-item-1'>
<Link to={`/reportdetail/${val.id}`}>
<Button style={{backgroundColor : "#DFF6FF", color : "black", width: "120px"}} variant="contained" startIcon={<DoneIcon />}>
{val.Status}
</Button>
</Link>
</div>
:
<div className='link-item-1'>
<Link to={`/reportdetail/${val.id}`}>
<Button style={{backgroundColor : "#DFF6FF", color : "black", width: "120px"}} variant="contained" startIcon={<CloseIcon />}>
{val.Status}
</Button>
</Link>
</div>
}
</>
:
<>
{val.Submitted.length <= 0 ?
<div className='link-item-1'>
<Link to={`/reportdetail/${val.id}`}>
<Button style={{backgroundColor : "#DFF6FF", color : "black", width: "120px"}} variant="contained" startIcon={<DraftsIcon />}>
Draft
</Button>
</Link>
</div>
:
<div className='link-item-1'>
<Link to={`/reportdetail/${val.id}`}>
<Button style={{backgroundColor : "#DFF6FF", color : "black", width: "120px"}} variant="contained" startIcon={<AccessTimeIcon />}>
{val.Submitted}
</Button>
</Link>
</div>
}
</>
}
<div className='link-item-2'>
<Button style={{backgroundColor : "#DFF6FF", color: "black", width: "120px"}} variant="contained" startIcon={<DeleteIcon />} onClick={handleClickOpen}>
Delete
</Button>
</div>
</div>
</td>
</tr>
</>
)})}
</tbody>
</table>
</div>
</div>