Merge branch 'chat-search-pagination' into 'develop'
Improve Chats search See merge request soapbox-pub/soapbox!1993
This commit is contained in:
Alex Gleason
commit
90513f1807
18 changed files with 286 additions and 237 deletions
|
|
@ -5,7 +5,6 @@ import { defineMessages, useIntl } from 'react-intl';
|
|||
import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input';
|
||||
|
||||
import SvgIcon from './ui/icon/svg-icon';
|
||||
import { InputThemes } from './ui/input/input';
|
||||
|
||||
const messages = defineMessages({
|
||||
placeholder: { id: 'account_search.placeholder', defaultMessage: 'Search for an account' },
|
||||
|
|
@ -16,20 +15,10 @@ interface IAccountSearch {
|
|||
onSelected: (accountId: string) => void,
|
||||
/** Override the default placeholder of the input. */
|
||||
placeholder?: string,
|
||||
/** Position of results relative to the input. */
|
||||
resultsPosition?: 'above' | 'below',
|
||||
/** Optional class for the input */
|
||||
className?: string,
|
||||
autoFocus?: boolean,
|
||||
hidePortal?: boolean,
|
||||
theme?: InputThemes,
|
||||
showButtons?: boolean,
|
||||
/** Search only among people who follow you (TruthSocial). */
|
||||
followers?: boolean,
|
||||
}
|
||||
|
||||
/** Input to search for accounts. */
|
||||
const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, className, showButtons = true, ...rest }) => {
|
||||
const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const [value, setValue] = useState('');
|
||||
|
|
@ -71,7 +60,7 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, className, showBu
|
|||
|
||||
<div className='relative'>
|
||||
<AutosuggestAccountInput
|
||||
className={classNames('rounded-full', className)}
|
||||
className='rounded-full'
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
|
|
@ -80,25 +69,23 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, className, showBu
|
|||
{...rest}
|
||||
/>
|
||||
|
||||
{showButtons && (
|
||||
<div
|
||||
role='button'
|
||||
tabIndex={0}
|
||||
className='absolute inset-y-0 right-0 px-3 flex items-center cursor-pointer'
|
||||
onClick={handleClear}
|
||||
>
|
||||
<SvgIcon
|
||||
src={require('@tabler/icons/search.svg')}
|
||||
className={classNames('h-4 w-4 text-gray-400', { hidden: !isEmpty() })}
|
||||
/>
|
||||
<div
|
||||
role='button'
|
||||
tabIndex={0}
|
||||
className='absolute inset-y-0 right-0 px-3 flex items-center cursor-pointer'
|
||||
onClick={handleClear}
|
||||
>
|
||||
<SvgIcon
|
||||
src={require('@tabler/icons/search.svg')}
|
||||
className={classNames('h-4 w-4 text-gray-400', { hidden: !isEmpty() })}
|
||||
/>
|
||||
|
||||
<SvgIcon
|
||||
src={require('@tabler/icons/x.svg')}
|
||||
className={classNames('h-4 w-4 text-gray-400', { hidden: isEmpty() })}
|
||||
aria-label={intl.formatMessage(messages.placeholder)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<SvgIcon
|
||||
src={require('@tabler/icons/x.svg')}
|
||||
className={classNames('h-4 w-4 text-gray-400', { hidden: isEmpty() })}
|
||||
aria-label={intl.formatMessage(messages.placeholder)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -22,8 +22,6 @@ interface IAutosuggestAccountInput {
|
|||
menu?: Menu,
|
||||
onKeyDown?: React.KeyboardEventHandler,
|
||||
theme?: InputThemes,
|
||||
/** Search only among people who follow you (TruthSocial). */
|
||||
followers?: boolean,
|
||||
}
|
||||
|
||||
const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
|
||||
|
|
@ -31,7 +29,6 @@ const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
|
|||
onSelected,
|
||||
value = '',
|
||||
limit = 4,
|
||||
followers = false,
|
||||
...rest
|
||||
}) => {
|
||||
const dispatch = useAppDispatch();
|
||||
|
|
@ -48,7 +45,7 @@ const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
|
|||
};
|
||||
|
||||
const handleAccountSearch = useCallback(throttle(q => {
|
||||
const params = { q, limit, followers, resolve: false };
|
||||
const params = { q, limit, resolve: false };
|
||||
|
||||
dispatch(accountSearch(params, controller.current.signal))
|
||||
.then((accounts: { id: string }[]) => {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@ export interface IAutosuggestInput extends Pick<React.HTMLAttributes<HTMLInputEl
|
|||
searchTokens: string[],
|
||||
maxLength?: number,
|
||||
menu?: Menu,
|
||||
resultsPosition: string,
|
||||
renderSuggestion?: React.FC<{ id: string }>,
|
||||
hidePortal?: boolean,
|
||||
theme?: InputThemes,
|
||||
|
|
@ -43,7 +42,6 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
|
|||
autoFocus: false,
|
||||
autoSelect: true,
|
||||
searchTokens: ImmutableList(['@', ':', '#']),
|
||||
resultsPosition: 'below',
|
||||
};
|
||||
|
||||
getFirstIndex = () => {
|
||||
|
|
@ -260,19 +258,15 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
|
|||
|
||||
const { top, height, left, width } = this.input.getBoundingClientRect();
|
||||
|
||||
if (this.props.resultsPosition === 'below') {
|
||||
return { left, width, top: top + height };
|
||||
}
|
||||
|
||||
return { left, width, top, transform: 'translate(0, -100%)' };
|
||||
return { left, width, top: top + height };
|
||||
}
|
||||
|
||||
render() {
|
||||
const { hidePortal, value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, theme } = this.props;
|
||||
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, theme } = this.props;
|
||||
const { suggestionsHidden } = this.state;
|
||||
const style: React.CSSProperties = { direction: 'ltr' };
|
||||
|
||||
const visible = !hidePortal && !suggestionsHidden && (!suggestions.isEmpty() || (menu && value));
|
||||
const visible = !suggestionsHidden && (!suggestions.isEmpty() || (menu && value));
|
||||
|
||||
if (isRtl(value)) {
|
||||
style.direction = 'rtl';
|
||||
|
|
|
|||
|
|
@ -151,6 +151,9 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
|
|||
|
||||
return (
|
||||
<div className='mt-auto px-4 shadow-3xl'>
|
||||
{/* Spacer */}
|
||||
<div className='h-5' />
|
||||
|
||||
<HStack alignItems='stretch' justifyContent='between' space={4}>
|
||||
{features.chatsMedia && (
|
||||
<Stack justifyContent='end' alignItems='center' className='w-10 mb-1.5'>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
|
|||
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
import RelativeTimestamp from 'soapbox/components/relative-timestamp';
|
||||
import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
|
||||
import { Avatar, HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
|
||||
import VerificationBadge from 'soapbox/components/verification-badge';
|
||||
import DropdownMenuContainer from 'soapbox/containers/dropdown-menu-container';
|
||||
import { useChatContext } from 'soapbox/contexts/chat-context';
|
||||
|
|
@ -115,12 +115,14 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
|
|||
<HStack alignItems='center' space={2}>
|
||||
{features.chatsDelete && (
|
||||
<div className='text-gray-600 hidden group-hover:block hover:text-gray-100'>
|
||||
{/* TODO: fix nested buttons here */}
|
||||
<DropdownMenuContainer
|
||||
items={menu}
|
||||
src={require('@tabler/icons/dots.svg')}
|
||||
title='Settings'
|
||||
/>
|
||||
<DropdownMenuContainer items={menu}>
|
||||
<IconButton
|
||||
src={require('@tabler/icons/dots.svg')}
|
||||
title='Settings'
|
||||
className='text-gray-600 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
|
||||
iconClassName='w-4 h-4'
|
||||
/>
|
||||
</DropdownMenuContainer>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -63,8 +63,7 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, s
|
|||
<div className='px-2'>
|
||||
<ChatListItem chat={chat} onClick={onClickChat} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)}
|
||||
components={{
|
||||
ScrollSeekPlaceholder: () => <PlaceholderChat />,
|
||||
Footer: () => hasNextPage ? <Spinner withText={false} /> : null,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { Components, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
|
|||
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
import { initReport } from 'soapbox/actions/reports';
|
||||
import { Avatar, Button, Divider, HStack, Icon, Spinner, Stack, Text } from 'soapbox/components/ui';
|
||||
import { Avatar, Button, Divider, HStack, Icon, IconButton, Spinner, Stack, Text } from 'soapbox/components/ui';
|
||||
import DropdownMenuContainer from 'soapbox/containers/dropdown-menu-container';
|
||||
import emojify from 'soapbox/features/emoji/emoji';
|
||||
import PlaceholderChatMessage from 'soapbox/features/placeholder/components/placeholder-chat-message';
|
||||
|
|
@ -286,11 +286,14 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
|
|||
})}
|
||||
data-testid='chat-message-menu'
|
||||
>
|
||||
<DropdownMenuContainer
|
||||
items={menu}
|
||||
src={require('@tabler/icons/dots.svg')}
|
||||
title={intl.formatMessage(messages.more)}
|
||||
/>
|
||||
<DropdownMenuContainer items={menu}>
|
||||
<IconButton
|
||||
src={require('@tabler/icons/dots.svg')}
|
||||
title={intl.formatMessage(messages.more)}
|
||||
className='text-gray-600 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
|
||||
iconClassName='w-4 h-4'
|
||||
/>
|
||||
</DropdownMenuContainer>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -447,7 +450,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
|
|||
|
||||
return (
|
||||
<div className='h-full flex flex-col flex-grow space-y-6'>
|
||||
<div className='flex-grow flex flex-col justify-end pb-2'>
|
||||
<div className='flex-grow flex flex-col justify-end'>
|
||||
<Virtuoso
|
||||
ref={node}
|
||||
alignToBottom
|
||||
|
|
|
|||
|
|
@ -183,11 +183,6 @@ const ChatPageMain = () => {
|
|||
label={intl.formatMessage(messages.autoDeleteLabel)}
|
||||
hint={intl.formatMessage(messages.autoDeleteHint)}
|
||||
/>
|
||||
<ListItem
|
||||
label={intl.formatMessage(messages.autoDelete2Minutes)}
|
||||
onSelect={() => handleUpdateChat(MessageExpirationValues.TWO_MINUTES)}
|
||||
isSelected={chat.message_expiration === MessageExpirationValues.TWO_MINUTES}
|
||||
/>
|
||||
<ListItem
|
||||
label={intl.formatMessage(messages.autoDelete7Days)}
|
||||
onSelect={() => handleUpdateChat(MessageExpirationValues.SEVEN)}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import AccountSearch from 'soapbox/components/account-search';
|
||||
import { CardTitle, HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
|
||||
import { ChatKeys, useChats } from 'soapbox/queries/chats';
|
||||
import { queryClient } from 'soapbox/queries/client';
|
||||
import { CardTitle, HStack, IconButton, Stack } from 'soapbox/components/ui';
|
||||
|
||||
import ChatSearch from '../../chat-search/chat-search';
|
||||
|
||||
interface IChatPageNew {
|
||||
}
|
||||
|
|
@ -13,17 +11,10 @@ interface IChatPageNew {
|
|||
/** New message form to create a chat. */
|
||||
const ChatPageNew: React.FC<IChatPageNew> = () => {
|
||||
const history = useHistory();
|
||||
const { getOrCreateChatByAccountId } = useChats();
|
||||
|
||||
const handleAccountSelected = async (accountId: string) => {
|
||||
const { data } = await getOrCreateChatByAccountId(accountId);
|
||||
history.push(`/chats/${data.id}`);
|
||||
queryClient.invalidateQueries(ChatKeys.chatSearch());
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack className='h-full'>
|
||||
<Stack className='flex-grow py-6 px-4 sm:p-6 space-y-4'>
|
||||
<Stack className='h-full space-y-4'>
|
||||
<Stack className='flex-grow pt-6 px-4 sm:px-6'>
|
||||
<HStack alignItems='center'>
|
||||
<IconButton
|
||||
src={require('@tabler/icons/arrow-left.svg')}
|
||||
|
|
@ -33,26 +24,9 @@ const ChatPageNew: React.FC<IChatPageNew> = () => {
|
|||
|
||||
<CardTitle title='New Message' />
|
||||
</HStack>
|
||||
|
||||
<HStack space={2} alignItems='center'>
|
||||
<Text>
|
||||
<FormattedMessage
|
||||
id='chats.new.to'
|
||||
defaultMessage='To:'
|
||||
/>
|
||||
</Text>
|
||||
|
||||
<AccountSearch
|
||||
onSelected={handleAccountSelected}
|
||||
placeholder='Type a name'
|
||||
theme='search'
|
||||
showButtons={false}
|
||||
autoFocus
|
||||
className='mb-0.5'
|
||||
followers
|
||||
/>
|
||||
</HStack>
|
||||
</Stack>
|
||||
|
||||
<ChatSearch isMainPage />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import ChatSearch from '../chat-search/chat-search';
|
|||
import EmptyResultsBlankslate from '../chat-search/empty-results-blankslate';
|
||||
import ChatPaneHeader from '../chat-widget/chat-pane-header';
|
||||
import ChatWindow from '../chat-widget/chat-window';
|
||||
import ChatSearchHeader from '../chat-widget/headers/chat-search-header';
|
||||
import { Pane } from '../ui';
|
||||
|
||||
import Blankslate from './blankslate';
|
||||
|
|
@ -86,7 +87,13 @@ const ChatPane = () => {
|
|||
}
|
||||
|
||||
if (screen === ChatWidgetScreens.SEARCH) {
|
||||
return <ChatSearch />;
|
||||
return (
|
||||
<Pane isOpen={isOpen} index={0} main>
|
||||
<ChatSearchHeader />
|
||||
|
||||
{isOpen ? <ChatSearch /> : null}
|
||||
</Pane>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ const ChatSearchInput: React.FC<IChatSearchInput> = ({ value, onChange, onClear
|
|||
className='rounded-full'
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
outerClassName='mt-0'
|
||||
theme='search'
|
||||
append={
|
||||
<button onClick={onClear}>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import userEvent from '@testing-library/user-event';
|
||||
import React from 'react';
|
||||
import { VirtuosoMockContext } from 'react-virtuoso';
|
||||
|
||||
import { __stub } from 'soapbox/api';
|
||||
import { ChatProvider } from 'soapbox/contexts/chat-context';
|
||||
|
|
@ -8,36 +9,24 @@ import { render, screen, waitFor } from '../../../../../jest/test-helpers';
|
|||
import ChatSearch from '../chat-search';
|
||||
|
||||
const renderComponent = () => render(
|
||||
<ChatProvider>
|
||||
<ChatSearch />
|
||||
</ChatProvider>,
|
||||
<VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 100 }}>
|
||||
<ChatProvider>
|
||||
<ChatSearch />
|
||||
</ChatProvider>,
|
||||
</VirtuosoMockContext.Provider>,
|
||||
);
|
||||
|
||||
describe('<ChatSearch />', () => {
|
||||
it('renders correctly', () => {
|
||||
beforeEach(async() => {
|
||||
renderComponent();
|
||||
|
||||
expect(screen.getByTestId('pane-header')).toHaveTextContent('Messages');
|
||||
});
|
||||
|
||||
describe('when the pane is closed', () => {
|
||||
it('does not render the search input', () => {
|
||||
renderComponent();
|
||||
expect(screen.queryAllByTestId('search')).toHaveLength(0);
|
||||
});
|
||||
it('renders the search input', () => {
|
||||
expect(screen.getByTestId('search')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
describe('when the pane is open', () => {
|
||||
beforeEach(async() => {
|
||||
renderComponent();
|
||||
await userEvent.click(screen.getByTestId('icon-button'));
|
||||
});
|
||||
|
||||
it('renders the search input', () => {
|
||||
expect(screen.getByTestId('search')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
describe('when searching', () => {
|
||||
describe('when searching', () => {
|
||||
describe('with results', () => {
|
||||
beforeEach(() => {
|
||||
__stub((mock) => {
|
||||
mock.onGet('/api/v1/accounts/search').reply(200, [{
|
||||
|
|
@ -51,8 +40,6 @@ describe('<ChatSearch />', () => {
|
|||
});
|
||||
|
||||
it('renders accounts', async() => {
|
||||
renderComponent();
|
||||
|
||||
const user = userEvent.setup();
|
||||
await user.type(screen.getByTestId('search'), 'ste');
|
||||
|
||||
|
|
@ -61,5 +48,22 @@ describe('<ChatSearch />', () => {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('without results', () => {
|
||||
beforeEach(() => {
|
||||
__stub((mock) => {
|
||||
mock.onGet('/api/v1/accounts/search').reply(200, []);
|
||||
});
|
||||
});
|
||||
|
||||
it('renders accounts', async() => {
|
||||
const user = userEvent.setup();
|
||||
await user.type(screen.getByTestId('search'), 'ste');
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('no-results')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { useMutation } from '@tanstack/react-query';
|
||||
import { AxiosError } from 'axios';
|
||||
import React, { useState } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import snackbar from 'soapbox/actions/snackbar';
|
||||
import { HStack, Icon, Input, Stack, Text } from 'soapbox/components/ui';
|
||||
import { Icon, Input, Stack } from 'soapbox/components/ui';
|
||||
import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context';
|
||||
import { useAppDispatch, useDebounce } from 'soapbox/hooks';
|
||||
import { useChats } from 'soapbox/queries/chats';
|
||||
|
|
@ -12,29 +12,30 @@ import { queryClient } from 'soapbox/queries/client';
|
|||
import useAccountSearch from 'soapbox/queries/search';
|
||||
|
||||
import { ChatKeys } from '../../../../queries/chats';
|
||||
import ChatPaneHeader from '../chat-widget/chat-pane-header';
|
||||
import { Pane } from '../ui';
|
||||
|
||||
import Blankslate from './blankslate';
|
||||
import EmptyResultsBlankslate from './empty-results-blankslate';
|
||||
import Results from './results';
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'chat_search.title', defaultMessage: 'Messages' },
|
||||
});
|
||||
interface IChatSearch {
|
||||
isMainPage?: boolean
|
||||
}
|
||||
|
||||
const ChatSearch = (props: IChatSearch) => {
|
||||
const { isMainPage = false } = props;
|
||||
|
||||
const ChatSearch = () => {
|
||||
const debounce = useDebounce;
|
||||
const dispatch = useAppDispatch();
|
||||
const intl = useIntl();
|
||||
const history = useHistory();
|
||||
|
||||
const { isOpen, changeScreen, toggleChatPane } = useChatContext();
|
||||
const { changeScreen } = useChatContext();
|
||||
const { getOrCreateChatByAccountId } = useChats();
|
||||
|
||||
const [value, setValue] = useState<string>('');
|
||||
const debouncedValue = debounce(value as string, 300);
|
||||
|
||||
const { data: accounts, isFetching } = useAccountSearch(debouncedValue);
|
||||
const accountSearchResult = useAccountSearch(debouncedValue);
|
||||
const { data: accounts, isFetching } = accountSearchResult;
|
||||
|
||||
const hasSearchValue = debouncedValue && debouncedValue.length > 0;
|
||||
const hasSearchResults = (accounts || []).length > 0;
|
||||
|
|
@ -47,7 +48,12 @@ const ChatSearch = () => {
|
|||
dispatch(snackbar.error(data?.error));
|
||||
},
|
||||
onSuccess: (response) => {
|
||||
changeScreen(ChatWidgetScreens.CHAT, response.data.id);
|
||||
if (isMainPage) {
|
||||
history.push(`/chats/${response.data.id}`);
|
||||
} else {
|
||||
changeScreen(ChatWidgetScreens.CHAT, response.data.id);
|
||||
}
|
||||
|
||||
queryClient.invalidateQueries(ChatKeys.chatSearch());
|
||||
},
|
||||
});
|
||||
|
|
@ -56,7 +62,7 @@ const ChatSearch = () => {
|
|||
if (hasSearchResults) {
|
||||
return (
|
||||
<Results
|
||||
accounts={accounts}
|
||||
accountSearchResult={accountSearchResult}
|
||||
onSelect={(id) => {
|
||||
handleClickOnSearchResult.mutate(id);
|
||||
clearValue();
|
||||
|
|
@ -77,62 +83,33 @@ const ChatSearch = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<Pane isOpen={isOpen} index={0} main>
|
||||
<ChatPaneHeader
|
||||
data-testid='pane-header'
|
||||
title={
|
||||
<HStack alignItems='center' space={2}>
|
||||
<button
|
||||
onClick={() => {
|
||||
changeScreen(ChatWidgetScreens.INBOX);
|
||||
}}
|
||||
>
|
||||
<Stack space={4} className='flex-grow h-full'>
|
||||
<div className='px-4'>
|
||||
<Input
|
||||
data-testid='search'
|
||||
type='text'
|
||||
autoFocus
|
||||
placeholder='Type a name'
|
||||
value={value || ''}
|
||||
onChange={(event) => setValue(event.target.value)}
|
||||
outerClassName='mt-0'
|
||||
theme='search'
|
||||
append={
|
||||
<button onClick={clearValue}>
|
||||
<Icon
|
||||
src={require('@tabler/icons/arrow-left.svg')}
|
||||
className='h-6 w-6 text-gray-600 dark:text-gray-400'
|
||||
src={hasSearchValue ? require('@tabler/icons/x.svg') : require('@tabler/icons/search.svg')}
|
||||
className='h-4 w-4 text-gray-700 dark:text-gray-600'
|
||||
aria-hidden='true'
|
||||
/>
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Text size='sm' weight='bold' truncate>
|
||||
{intl.formatMessage(messages.title)}
|
||||
</Text>
|
||||
</HStack>
|
||||
}
|
||||
isOpen={isOpen}
|
||||
isToggleable={false}
|
||||
onToggle={toggleChatPane}
|
||||
/>
|
||||
|
||||
{isOpen ? (
|
||||
<Stack space={4} className='flex-grow h-full'>
|
||||
<div className='px-4'>
|
||||
<Input
|
||||
data-testid='search'
|
||||
type='text'
|
||||
autoFocus
|
||||
placeholder='Type a name'
|
||||
className='rounded-full'
|
||||
value={value || ''}
|
||||
onChange={(event) => setValue(event.target.value)}
|
||||
theme='search'
|
||||
append={
|
||||
<button onClick={clearValue}>
|
||||
<Icon
|
||||
src={hasSearchValue ? require('@tabler/icons/x.svg') : require('@tabler/icons/search.svg')}
|
||||
className='h-4 w-4 text-gray-700 dark:text-gray-600'
|
||||
aria-hidden='true'
|
||||
/>
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Stack className='overflow-y-scroll flex-grow h-full' space={2}>
|
||||
{renderBody()}
|
||||
</Stack>
|
||||
</Stack>
|
||||
) : null}
|
||||
</Pane>
|
||||
<Stack className='flex-grow'>
|
||||
{renderBody()}
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const EmptyResultsBlankslate = () => {
|
|||
|
||||
return (
|
||||
<Stack justifyContent='center' alignItems='center' space={2} className='h-full w-2/3 mx-auto'>
|
||||
<Text weight='bold' size='lg' align='center'>
|
||||
<Text weight='bold' size='lg' align='center' data-testid='no-results'>
|
||||
{intl.formatMessage(messages.title)}
|
||||
</Text>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,43 +1,80 @@
|
|||
import React from 'react';
|
||||
import classNames from 'clsx';
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { Virtuoso } from 'react-virtuoso';
|
||||
|
||||
import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
|
||||
import VerificationBadge from 'soapbox/components/verification-badge';
|
||||
import useAccountSearch from 'soapbox/queries/search';
|
||||
|
||||
interface IResults {
|
||||
accounts: {
|
||||
display_name: string
|
||||
acct: string
|
||||
id: string
|
||||
avatar: string
|
||||
verified: boolean
|
||||
}[]
|
||||
accountSearchResult: ReturnType<typeof useAccountSearch>
|
||||
onSelect(id: string): void
|
||||
}
|
||||
|
||||
const Results = ({ accounts, onSelect }: IResults) => (
|
||||
<>
|
||||
{(accounts || []).map((account: any) => (
|
||||
<button
|
||||
key={account.id}
|
||||
type='button'
|
||||
className='px-4 py-2 w-full flex flex-col hover:bg-gray-100 dark:hover:bg-gray-800'
|
||||
onClick={() => onSelect(account.id)}
|
||||
data-testid='account'
|
||||
>
|
||||
<HStack alignItems='center' space={2}>
|
||||
<Avatar src={account.avatar} size={40} />
|
||||
const Results = ({ accountSearchResult, onSelect }: IResults) => {
|
||||
const { data: accounts, isFetching, hasNextPage, fetchNextPage } = accountSearchResult;
|
||||
|
||||
<Stack alignItems='start'>
|
||||
<div className='flex items-center space-x-1 flex-grow'>
|
||||
<Text weight='bold' size='sm' truncate>{account.display_name}</Text>
|
||||
{account.verified && <VerificationBadge />}
|
||||
</div>
|
||||
<Text size='sm' weight='medium' theme='muted' truncate>@{account.acct}</Text>
|
||||
</Stack>
|
||||
</HStack>
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
const [isNearBottom, setNearBottom] = useState<boolean>(false);
|
||||
const [isNearTop, setNearTop] = useState<boolean>(true);
|
||||
|
||||
export default Results;
|
||||
const handleLoadMore = () => {
|
||||
if (hasNextPage && !isFetching) {
|
||||
fetchNextPage();
|
||||
}
|
||||
};
|
||||
|
||||
const renderAccount = useCallback((_index, account) => (
|
||||
<button
|
||||
key={account.id}
|
||||
type='button'
|
||||
className='px-2 py-3 w-full rounded-lg flex flex-col hover:bg-gray-100 dark:hover:bg-gray-800'
|
||||
onClick={() => onSelect(account.id)}
|
||||
data-testid='account'
|
||||
>
|
||||
<HStack alignItems='center' space={2}>
|
||||
<Avatar src={account.avatar} size={40} />
|
||||
|
||||
<Stack alignItems='start'>
|
||||
<div className='flex items-center space-x-1 flex-grow'>
|
||||
<Text weight='bold' size='sm' truncate>{account.display_name}</Text>
|
||||
{account.verified && <VerificationBadge />}
|
||||
</div>
|
||||
<Text size='sm' weight='medium' theme='muted' truncate>@{account.acct}</Text>
|
||||
</Stack>
|
||||
</HStack>
|
||||
</button>
|
||||
), []);
|
||||
|
||||
return (
|
||||
<div className='relative flex-grow'>
|
||||
<Virtuoso
|
||||
data={accounts}
|
||||
itemContent={(index, chat) => (
|
||||
<div className='px-2'>
|
||||
{renderAccount(index, chat)}
|
||||
</div>
|
||||
)}
|
||||
endReached={handleLoadMore}
|
||||
atTopStateChange={(atTop) => setNearTop(atTop)}
|
||||
atBottomStateChange={(atBottom) => setNearBottom(atBottom)}
|
||||
/>
|
||||
|
||||
<>
|
||||
<div
|
||||
className={classNames('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white to-transparent pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
|
||||
'opacity-0': isNearTop,
|
||||
'opacity-100': !isNearTop,
|
||||
})}
|
||||
/>
|
||||
<div
|
||||
className={classNames('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white to-transparent pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
|
||||
'opacity-0': isNearBottom,
|
||||
'opacity-100': !isNearBottom,
|
||||
})}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Results;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { HStack, Icon, Text } from 'soapbox/components/ui';
|
||||
import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context';
|
||||
|
||||
import ChatPaneHeader from '../chat-pane-header';
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'chat_search.title', defaultMessage: 'Messages' },
|
||||
});
|
||||
|
||||
const ChatSearchHeader = () => {
|
||||
const intl = useIntl();
|
||||
|
||||
const { changeScreen, isOpen, toggleChatPane } = useChatContext();
|
||||
|
||||
return (
|
||||
<ChatPaneHeader
|
||||
data-testid='pane-header'
|
||||
title={
|
||||
<HStack alignItems='center' space={2}>
|
||||
<button
|
||||
onClick={() => {
|
||||
changeScreen(ChatWidgetScreens.INBOX);
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
src={require('@tabler/icons/arrow-left.svg')}
|
||||
className='h-6 w-6 text-gray-600 dark:text-gray-400'
|
||||
/>
|
||||
</button>
|
||||
|
||||
<Text size='sm' weight='bold' truncate>
|
||||
{intl.formatMessage(messages.title)}
|
||||
</Text>
|
||||
</HStack>
|
||||
}
|
||||
isOpen={isOpen}
|
||||
isToggleable={false}
|
||||
onToggle={toggleChatPane}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatSearchHeader;
|
||||
|
|
@ -15,14 +15,13 @@ import { useFetchRelationships } from './relationships';
|
|||
|
||||
import type { IAccount } from './accounts';
|
||||
|
||||
export const messageExpirationOptions = [120, 604800, 1209600, 2592000, 7776000];
|
||||
export const messageExpirationOptions = [604800, 1209600, 2592000, 7776000];
|
||||
|
||||
export enum MessageExpirationValues {
|
||||
'TWO_MINUTES' = messageExpirationOptions[0],
|
||||
'SEVEN' = messageExpirationOptions[1],
|
||||
'FOURTEEN' = messageExpirationOptions[2],
|
||||
'THIRTY' = messageExpirationOptions[3],
|
||||
'NINETY' = messageExpirationOptions[4]
|
||||
'SEVEN' = messageExpirationOptions[0],
|
||||
'FOURTEEN' = messageExpirationOptions[1],
|
||||
'THIRTY' = messageExpirationOptions[2],
|
||||
'NINETY' = messageExpirationOptions[3]
|
||||
}
|
||||
|
||||
export interface IChat {
|
||||
|
|
|
|||
|
|
@ -1,27 +1,51 @@
|
|||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||
|
||||
import { getNextLink } from 'soapbox/api';
|
||||
import { useApi } from 'soapbox/hooks';
|
||||
import { Account } from 'soapbox/types/entities';
|
||||
import { flattenPages, PaginatedResult } from 'soapbox/utils/queries';
|
||||
|
||||
export default function useAccountSearch(q: string) {
|
||||
const api = useApi();
|
||||
|
||||
const getAccountSearch = async(q: string) => {
|
||||
if (typeof q === 'undefined') {
|
||||
return null;
|
||||
}
|
||||
const getAccountSearch = async(q: string, pageParam: { link?: string }): Promise<PaginatedResult<Account>> => {
|
||||
const nextPageLink = pageParam?.link;
|
||||
const uri = nextPageLink || '/api/v1/accounts/search';
|
||||
|
||||
const { data } = await api.get('/api/v1/accounts/search', {
|
||||
const response = await api.get(uri, {
|
||||
params: {
|
||||
q,
|
||||
limit: 10,
|
||||
followers: true,
|
||||
},
|
||||
});
|
||||
const { data } = response;
|
||||
|
||||
return data;
|
||||
const link = getNextLink(response);
|
||||
const hasMore = !!link;
|
||||
|
||||
return {
|
||||
result: data,
|
||||
link,
|
||||
hasMore,
|
||||
};
|
||||
};
|
||||
|
||||
return useQuery(['search', 'accounts', q], () => getAccountSearch(q), {
|
||||
const queryInfo = useInfiniteQuery(['search', 'accounts', q], ({ pageParam }) => getAccountSearch(q, pageParam), {
|
||||
keepPreviousData: true,
|
||||
placeholderData: [],
|
||||
getNextPageParam: (config) => {
|
||||
if (config.hasMore) {
|
||||
return { link: config.link };
|
||||
}
|
||||
|
||||
return undefined;
|
||||
},
|
||||
});
|
||||
|
||||
const data = flattenPages(queryInfo.data);
|
||||
|
||||
return {
|
||||
...queryInfo,
|
||||
data,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue