Commit c4aafbf0 authored by Loic Huder's avatar Loic Huder

Extract Address header in its own component

parent f1faf67c
Pipeline #33825 passed with stage
in 3 minutes and 1 second
import React from 'react';
import styles from './MyAddressesSummary.module.css';
import { LinkContainer } from 'react-router-bootstrap';
import { Button, Glyphicon } from 'react-bootstrap';
function AddressHeaderWithActions(props) {
const { address, onDelete } = props;
return (
<div className={styles.header}>
<span className={styles.investigation}>{address.investigationName}</span>
<div className={styles.actions}>
<LinkContainer to={`/addresses?edit=${address._id}`}>
<Button bsSize="xsmall" bsStyle="link" aria-label="Edit">
<Glyphicon glyph="pencil" />
<span className={styles.actionLabel}> Edit</span>
</Button>
</LinkContainer>
<Button
bsSize="xsmall"
bsStyle="link"
aria-label="Remove"
onClick={() => onDelete(address)}
>
<Glyphicon glyph="trash" />
<span className={styles.actionLabel}> Remove</span>
</Button>
</div>
</div>
);
}
export default AddressHeaderWithActions;
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
.investigation {
font-weight: 600;
}
.actions {
display: flex;
justify-content: flex-end;
}
@media (max-width: 50em) {
.actionLabel {
display: none;
}
}
......@@ -17,6 +17,7 @@ import { useHistory } from 'react-router';
import AddressPanel from './AddressPanel';
import AddressFormModal from './AddressFormModal';
import ModalLoadingBoundary from '../ModalLoadingBoundary';
import AddressHeaderWithActions from './AddressHeaderWithActions';
function MyAddressesSummary() {
const [alert, setAlert] = useState();
......@@ -60,42 +61,17 @@ function MyAddressesSummary() {
handleCloseModal();
}
function renderPanelHeader(address) {
return (
<div className={styles.addressHeading}>
<span className={styles.investigation}>
{address.investigationName}
</span>
<div className={styles.actions}>
<LinkContainer to={`/addresses?edit=${address._id}`}>
<Button bsSize="xsmall" bsStyle="link" aria-label="Edit">
<Glyphicon glyph="pencil" />
<span className={styles.actionLabel}> Edit</span>
</Button>
</LinkContainer>
<Button
bsSize="xsmall"
bsStyle="link"
aria-label="Remove"
onClick={async () => {
try {
await deleteAddress(address);
setAlert({
style: 'success',
message: 'Address was removed !',
});
} catch (error) {
setAlert({ type: 'danger', message: `An error occurred.` });
console.log(error);
}
}}
>
<Glyphicon glyph="trash" />
<span className={styles.actionLabel}> Remove</span>
</Button>
</div>
</div>
);
async function handleDelete(address) {
try {
await deleteAddress(address);
setAlert({
style: 'success',
message: 'Address was removed !',
});
} catch (error) {
setAlert({ type: 'danger', message: `An error occurred.` });
console.log(error);
}
}
return (
......@@ -131,7 +107,12 @@ function MyAddressesSummary() {
addresses.map((address) => (
<Col key={address._id} sm={6} md={3}>
<AddressPanel
header={renderPanelHeader(address)}
header={
<AddressHeaderWithActions
address={address}
onDelete={handleDelete}
/>
}
address={address}
/>
</Col>
......
.actions {
display: flex;
justify-content: flex-end;
}
.investigation {
font-weight: 600;
}
.addressHeading {
display: flex;
justify-content: space-between;
align-items: center;
}
.heading {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
@media (max-width: 50em) {
.actionLabel {
display: none;
}
}
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