Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo, useState } from 'react';

import { Card, CardContent, CardHeader, List, Menu, SearchBar } from '@shared/components';

import { ConversationItem } from './ConversationItem';

export const ConversationsList = ({

  conversations = [],

  onSelectConversation,

  onStartConversation

}) => {

  const [search, setSearch] = useState('');

  const filteredConversations = useMemo(() => {

    return conversations.filter((conversation) =>

      conversation.name.toLowerCase().includes(search.toLowerCase())

    );

  }, [conversations, search]);

  return (

    <Card>

      <CardHeader

        title='Conversaciones'

        renderAction={() => (

          <Menu>

            <Menu.Item onClick={onStartConversation}>Iniciar conversación</Menu.Item>

          </Menu>

        )}

      />

      <CardContent styles={{ display: 'flex', flexDirection: 'column', gap: 1 }}>

        <SearchBar placeholder='Buscar conversación' onChange={setSearch} />

        <List

          styles={{ maxHeight: '400px', overflow: 'auto' }}

          items={filteredConversations}

          keyExtractor={(item) => item.uuid}

          emptyMessage='No hay conversaciones'

          renderItem={(conversation) => (

            <ConversationItem

              conversation={conversation}

              onSelectConversation={onSelectConversation}

            />

          )}

        />

      </CardContent>

    </Card>

  );

};