Proyectos de Subversion LeadersLinked - SPA

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

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, execute]);

  return (
    <>
      <SearchBar
        label='Busca un usuario'
        placeholder='Escribe el nombre del usuario'
        onChange={setSearch}
        value={search}
      />
      {loading && <Spinner />}
      <List
        items={data}
        keyExtractor={(item) => item.uuid}
        renderItem={(item) => (
          <ListItem title={item.name} image={item.image} onClick={() => onSelect(item)} />
        )}
      />
    </>
  );
};