Kutt/client/components/Table.tsx

import React, { Component, FC, useState } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import styled from "styled-components";
import { Flex } from "reflexbox/styled-components";

import THead from "./Table/THead";
import TBody from "./Table/TBody";
import TableOptions from "./TableOptions";
import { deleteShortUrl, getUrlsList } from "../actions";
import Modal from "./Modal";

interface Props {
  deleteShortUrl: any; // TODO: types
  url: {
    list: any[]; // TODO: types
  };
}

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;
`;

const defualtModal = {
  id: "",
  domain: "",
  show: false
};

const Table: FC<Props> = ({ deleteShortUrl, url }) => {
  const [copiedIndex, setCopiedIndex] = useState(-1);
  const [modal, setModal] = useState(defualtModal);

  function handleCopy(index) {
    setCopiedIndex(index);
    setTimeout(() => {
      setCopiedIndex(-1);
    }, 1500);
  }

  function showModal(url) {
    return e => {
      e.preventDefault();
      setModal({
        id: url.address,
        domain: url.domain,
        show: true
      });
    };
  }

  const closeModal = () => setModal(defualtModal);

  function deleteUrl() {
    closeModal();
    deleteShortUrl({ id: modal.id, domain: modal.domain });
  }

  return (
    <Flex
      width={1200}
      maxWidth="95%"
      flexDirection="column"
      margin="40px 0 120px"
    >
      <Title>Recent shortened links.</Title>
      <TableWrapper>
        <THead />
        <TBody
          copiedIndex={copiedIndex}
          handleCopy={handleCopy}
          urls={url.list}
          showModal={showModal}
        />
        <TFoot>
          <TableOptions nosearch />
        </TFoot>
      </TableWrapper>
      <Modal show={modal.show}>
        Are you sure do you want to delete the short URL and its stats?
      </Modal>
    </Flex>
  );
};

const mapStateToProps = ({ url }) => ({ url });

const mapDispatchToProps = dispatch => ({
  deleteShortUrl: bindActionCreators(deleteShortUrl, dispatch),
  getUrlsList: bindActionCreators(getUrlsList, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(Table);