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)} />

        )}

      />

    </>

  );

};