Commit 1c05fa5f authored by Jiawen Lyu's avatar Jiawen Lyu

add modal

parent cc4aaedf
......@@ -6,6 +6,8 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
......
......@@ -60,6 +60,11 @@ class App extends Component {
})
}
showDeleteModal = (event) => {
event.preventDefault();
}
render() {
const { currentTimeFormatState, messages, logins } = this.state;
return (
......
import React, { useState } from 'react'
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
export default (props) => {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<button
type="button"
class="close"
aria-label="Close"
onClick={(e) => {
e.preventDefault();
handleShow()
}}
>
<span aria-hidden="true">&times;</span>
</button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
</Modal.Header>
<Modal.Body>Comfirmer à supprimer</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Annuler
</Button>
<Button
variant="primary"
onClick={(e) => {
props.handleClick(props.login)
handleClose()
}}
>
Yes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
\ No newline at end of file
import React from 'react';
import ButtonWithModal from './ButtonWithModal';
export const StudentsList = (props) => {
const { logins } = props
......@@ -8,30 +9,23 @@ export const StudentsList = (props) => {
<ul class="list-group" id="studentList">
{
logins.map(login => (
<div class="row">
<div class="row" key={login}>
<li
class="list-group-item"
key={login}
>
{
login
}
</li>
<button
type="button"
class="close"
aria-label="Close"
onClick={(e) => {
e.preventDefault();
props.handleClick(login)
}}
>
<span aria-hidden="true">&times;</span>
</button>
<ButtonWithModal
login={login}
handleClick={props.handleClick}
/>
</div>
))
}
</ul>
</ul >
</>
)
else return (
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment