Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react';
import { Box } from '@mui/material';

import { useDebounce } from '@hooks';
import { useAlert, useApi } from '@shared/hooks';
import { searchUsers } from '@shared/services';

import { List, ListItem, SearchBar, Spinner } from '@shared/components';

export const SearchUserModal = ({ onSelect }) => {
  const [search, setSearch] = useState('');
  const debouncedSearch = useDebounce(search, 500);

  const { showError } = useAlert();

  const { data, loading, execute } = useApi(searchUsers, {
    onError: (error) => showError(error.message)
  });

  useEffect(() => {
    execute(debouncedSearch);
  }, [debouncedSearch]);

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
      <SearchBar
        label='Busca un usuario'
        placeholder='Escribe el nombre del usuario'
        onChange={setSearch}
        value={search}
      />
      {loading ? (
        <Spinner />
      ) : (
        <List
          items={data?.current?.items ?? []}
          keyExtractor={(item) => item.uuid}
          renderItem={(item) => (
            <ListItem title={item.name} image={item.image} onClick={() => onSelect(item)} />
          )}
          emptyMessage='No se encontraron usuarios'
        />
      )}
    </Box>
  );
};