mbenjamin/CRUD-React
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Confirmation for the Delete button

Browse Source
This commit is contained in:
Toni
2024-05-24 10:25:50 +08:00
parent b45d4172b6
commit 06734c95ff
1 changed files with 23 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Lists.js
View File

@@ -1,13 +1,16 @@
import React, { useState,useEffect } from 'react'; import React, { useState,useEffect } from 'react';
import { Button, Table } from '@mantine/core'; import { Dialog, Button, Table, Text, Group } from '@mantine/core';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import {http} from "../middleware/axiosConfig"; import {http} from "../middleware/axiosConfig";
import { useDisclosure } from '@mantine/hooks';
const List = () => { const List = () => {
// Initialize state for user data // Initialize state for user data
const [ userData, setUserData] = useState([]); const [ userData, setUserData] = useState([]);
const [opened, { toggle, close }] = useDisclosure(false);
//useEffect hook - //useEffect hook -
useEffect(() => { useEffect(() => {
fetchData(); fetchData();
@@ -60,14 +63,30 @@ const List = () => {
<Table.Td> <Table.Td>
{/* Action.View Button - triggers the View module */} {/* Action.View Button - triggers the View module */}
<Link to={`/view/${users.id}`}> <Link to={`/view/${users.id}`}>
<Button style={{ marginRight: '10px' }} variant="filled" color="rgba(81, 194, 52, 1)">View</Button> <Button style={{ marginRight: '10px' }} variant="outline" color="rgba(81, 194, 52, 1)">View</Button>
</Link> </Link>
{/* Action.Edit Button - triggers the Edit module */} {/* Action.Edit Button - triggers the Edit module */}
<Link to={`/edit/${users.id}`}> <Link to={`/edit/${users.id}`}>
<Button style={{ marginRight: '10px' }} variant="filled">Edit</Button> <Button style={{ marginRight: '10px' }} variant="outline">Edit</Button>
</Link> </Link>
{/* Delete Button - triggers the handleDelete function */} {/* Delete Button - triggers the handleDelete function */}
<Button onClick={()=>handleDelete(users.id)} style={{ marginRight: '10px' }} variant="filled" color="rgba(227, 9, 9, 1)">Delete</Button> {/* <Button onClick={()=>handleDelete(users.id)} style={{ marginRight: '10px' }} variant="filled" color="rgba(227, 9, 9, 1)">Delete</Button> */}
<Button onClick={toggle} style={{ marginRight: '10px' }} variant="outline" color="rgba(227, 9, 9, 1)">Delete</Button>
<Dialog
position={{ top: 200, left: 500 }} opened={opened}
shadow="xl"
onclose={close}
size="lg"
radius="md"
withBorder
style={{ backgroundColor: 'lightblue' }} >
<Text size="sm" mb="xs" fw={500} align="center">
Are you sure you want to Delete this account? </Text>
<Group algin="flex-end">
<Button onClick={close} style={{ marginLeft: '90px', marginTop: '10px' }} variant="filled" color="rgba(5, 66, 1, 1)">Cancel</Button>
<Button onClick={()=>handleDelete(users.id)} style={{ marginRight: '45px', marginTop: '10px' }} variant="filled" color="rgba(227, 9, 9, 1)">Delete</Button>
</Group>
</Dialog>
</Table.Td> </Table.Td>
</Table.Tr> </Table.Tr>
)}) )})