165 lines
3.5 KiB
JavaScript
165 lines
3.5 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { bindActionCreators } from 'redux';
|
|
import { connect } from 'react-redux';
|
|
import styled from 'styled-components';
|
|
import THead from './THead';
|
|
import TBody from './TBody';
|
|
import TableOptions from './TableOptions';
|
|
import { deleteShortUrl, getUrlsList } from '../../actions';
|
|
import Modal from '../Modal';
|
|
|
|
const Wrapper = styled.div`
|
|
width: 1200px;
|
|
max-width: 95%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 40px 0 120px;
|
|
`;
|
|
|
|
const Title = styled.h2`
|
|
font-size: 24px;
|
|
font-weight: 300;
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
font-size: 18px;
|
|
}
|
|
`;
|
|
|
|
const TableWrapper = styled.table`
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
background-color: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 6px 30px rgba(50, 50, 50, 0.2);
|
|
|
|
tr {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
padding: 0 24px;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #eaeaea;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
position: relative;
|
|
display: flex;
|
|
padding: 16px 0;
|
|
align-items: center;
|
|
}
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
font-size: 13px;
|
|
}
|
|
|
|
@media only screen and (max-width: 510px) {
|
|
tr {
|
|
padding: 0 16px;
|
|
}
|
|
th,
|
|
td {
|
|
padding: 12px 0;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const TFoot = styled.tfoot`
|
|
background-color: #f1f1f1;
|
|
border-bottom-right-radius: 12px;
|
|
border-bottom-left-radius: 12px;
|
|
`;
|
|
|
|
class Table extends Component {
|
|
constructor() {
|
|
super();
|
|
this.state = {
|
|
copiedIndex: -1,
|
|
modalUrlId: '',
|
|
modalUrlDomain: '',
|
|
showModal: false,
|
|
};
|
|
this.handleCopy = this.handleCopy.bind(this);
|
|
this.showModal = this.showModal.bind(this);
|
|
this.closeModal = this.closeModal.bind(this);
|
|
this.deleteUrl = this.deleteUrl.bind(this);
|
|
}
|
|
|
|
handleCopy(index) {
|
|
this.setState({ copiedIndex: index });
|
|
setTimeout(() => {
|
|
this.setState({ copiedIndex: -1 });
|
|
}, 1500);
|
|
}
|
|
|
|
showModal(url) {
|
|
return e => {
|
|
e.preventDefault();
|
|
this.setState({
|
|
modalUrlId: url.address,
|
|
modalUrlDomain: url.domain,
|
|
showModal: true,
|
|
});
|
|
}
|
|
}
|
|
|
|
closeModal() {
|
|
this.setState({
|
|
modalUrlId: '',
|
|
modalUrlDomain: '',
|
|
showModal: false,
|
|
});
|
|
}
|
|
|
|
deleteUrl() {
|
|
this.closeModal();
|
|
const { modalUrlId, modalUrlDomain } = this.state;
|
|
this.props.deleteShortUrl({ id: modalUrlId, domain: modalUrlDomain });
|
|
}
|
|
|
|
render() {
|
|
const { copiedIndex } = this.state;
|
|
const { url } = this.props;
|
|
return (
|
|
<Wrapper>
|
|
<Title>Recent shortened links.</Title>
|
|
<TableWrapper>
|
|
<THead />
|
|
<TBody
|
|
copiedIndex={copiedIndex}
|
|
handleCopy={this.handleCopy}
|
|
urls={url.list}
|
|
showModal={this.showModal}
|
|
/>
|
|
<TFoot>
|
|
<TableOptions nosearch />
|
|
</TFoot>
|
|
</TableWrapper>
|
|
<Modal show={this.state.showModal} handler={this.deleteUrl} close={this.closeModal}>
|
|
Are you sure do you want to delete the short URL and its stats?
|
|
</Modal>
|
|
</Wrapper>
|
|
);
|
|
}
|
|
}
|
|
|
|
Table.propTypes = {
|
|
deleteShortUrl: PropTypes.func.isRequired,
|
|
url: PropTypes.shape({
|
|
list: PropTypes.array.isRequired,
|
|
}).isRequired,
|
|
};
|
|
|
|
const mapStateToProps = ({ url }) => ({ url });
|
|
|
|
const mapDispatchToProps = dispatch => ({
|
|
deleteShortUrl: bindActionCreators(deleteShortUrl, dispatch),
|
|
getUrlsList: bindActionCreators(getUrlsList, dispatch),
|
|
});
|
|
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(Table);
|