Proyectos de Subversion LeadersLinked - SPA

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

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

import { Box } from '@mui/material';

import { Box } from '@mui/material';

import { useDebounce } from '@hooks';

import { useDebounce } from '@hooks';

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

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

import { searchUsers } from '@shared/services';

import { searchUsers } from '@shared/services';

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

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

export const SearchUserModal = ({ onSelect }) => {

export const SearchUserModal = ({ onSelect }) => {

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

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

  const debouncedSearch = useDebounce(search, 500);

  const debouncedSearch = useDebounce(search, 500);

  const { showError } = useAlert();

  const { showError } = useAlert();

  const { data, loading, execute } = useApi(searchUsers, {

  const { data, loading, execute } = useApi(searchUsers, {

    onError: (error) => showError(error.message)

    onError: (error) => showError(error.message)

  });

  });

  useEffect(() => {

  useEffect(() => {

    execute(debouncedSearch);

    execute(debouncedSearch);

  }, [debouncedSearch]);

  }, [debouncedSearch]);

  return (

  return (

    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>

    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>

      <SearchBar

      <SearchBar

        label='Busca un usuario'

        label='Busca un usuario'

        placeholder='Escribe el nombre del usuario'

        placeholder='Escribe el nombre del usuario'

        onChange={setSearch}

        onChange={setSearch}

        value={search}

        value={search}

      />

      />

      {loading ? (

      {loading ? (

        <Spinner />

        <Spinner />

      ) : (

      ) : (

        <List

        <List

          items={data?.current?.items ?? []}

          items={data?.current?.items ?? []}

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

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

          renderItem={(item) => (

          renderItem={(item) => (

            <ListItem title={item.name} image={item.image} onClick={() => onSelect(item)} />

            <ListItem title={item.name} image={item.image} onClick={() => onSelect(item)} />

          )}

          )}

          emptyMessage='No se encontraron usuarios'

          emptyMessage='No se encontraron usuarios'

        />

        />

      )}

      )}

    </Box>

    </Box>

  );

  );

};

};