Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { useSelector } from 'react-redux';
import styled, { css } from 'styled-components';

import EmptySection from '../../../components/UI/EmptySection';

const ContactsContainer = styled.div`
  background-color: var(--bg-color);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-primary);
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.5rem;
  padding: 1rem 1rem !important;
  max-height: 80vh;
  flex-grow: 1;
`;

const ContactHeader = styled.div`
  position: relative;

  h1 {
    font-weight: 600;
    font-size: 1.3rem;
  }
`;

const ContactList = styled.ul`
  display: flex;
  flex-direction: column;
  overflow: auto;
`;

const ContactItem = styled.div`
  align-items: center;
  display: flex;
  height: auto;
  padding: 0.5rem 1rem;
  gap: 0.5rem;
  cursor: pointer;
  border-radius: var(--border-radius);

  ${(props) =>
    props.current &&
    css`
      background-color: #42b72a21;
    `}
`;

const ContactInfo = styled.div`
  display: flex;
  flex-direction: column;

  span {
    font-size: 0.9rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 20ch;
  }
`;

const Contacts = ({ children }) => {
  return <ContactsContainer>{children}</ContactsContainer>;
};

const Header = ({ children }) => {
  return <ContactHeader>{children}</ContactHeader>;
};

const List = ({ contacts = [], onChange = () => null, currentConversation }) => {
  const labels = useSelector(({ intl }) => intl.labels);

  return (
    <ContactList>
      {!contacts.length ? (
        <EmptySection message={labels.datatable_szerorecords} />
      ) : (
        contacts.map((contact) => {
          return (
            <li key={contact.id || contact.uuid}>
              <List.Item contact={contact} onClick={onChange} />
            </li>
          );
        })
      )}
    </ContactList>
  );
};

const Item = ({ contact, onClick, isCurrent }) => {
  return (
    <ContactItem onClick={() => onClick(contact)} current={isCurrent}>
      <ContactInfo>
        <span>{contact.jid}</span>
        <span>{contact.name}</span>
      </ContactInfo>
    </ContactItem>
  );
};

List.Item = Item;
Contacts.List = List;
Contacts.Header = Header;

export default Contacts;