matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: further lists migrations

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-07-28 08:14:56 +02:00
parent 822fff36f8
commit 18e67aec72
5 changed files with 30 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
packages/pl-fe/src/modals/list-editor-modal/components/search.tsx
View File

@@ -2,39 +2,36 @@ import clsx from 'clsx';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from 'pl-fe/actions/lists';
import Icon from 'pl-fe/components/icon';
import Button from 'pl-fe/components/ui/button';
import Form from 'pl-fe/components/ui/form';
import HStack from 'pl-fe/components/ui/hstack';
import Input from 'pl-fe/components/ui/input';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
const messages = defineMessages({
search: { id: 'lists.search', defaultMessage: 'Search among people you follow' },
searchTitle: { id: 'tabs_bar.search', defaultMessage: 'Search' },
});
const Search = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
interface ISearch {
value: string;
onSubmit: (value: string) => void;
}
const value = useAppSelector((state) => state.listEditor.suggestions.value);
const Search: React.FC<ISearch> = ({ value, onSubmit }) => {
const intl = useIntl();
const [searchValue, setSearchValue] = React.useState(value);
const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {
dispatch(changeListSuggestions(e.target.value));
setSearchValue(e.target.value);
};
const handleSubmit = () => {
dispatch(fetchListSuggestions(value));
onSubmit(searchValue);
};
const handleClear = () => {
dispatch(clearListSuggestions());
};
const hasValue = value.length > 0;
const hasValue = searchValue.length > 0;
return (
<Form onSubmit={handleSubmit}>
@@ -44,11 +41,19 @@ const Search = () => {
<Input
type='text'
value={value}
value={searchValue}
onChange={handleChange}
placeholder={intl.formatMessage(messages.search)}
/>
<div role='button' tabIndex={0} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto' onClick={handleClear}>
<div
role='button'
tabIndex={0}
className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto'
onClick={() => {
setSearchValue('');
onSubmit('');
}}
>
<Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('size-5 text-gray-600', { hidden: !hasValue })} />
</div>
</label>

7
packages/pl-fe/src/modals/list-editor-modal/index.tsx
View File

@@ -5,8 +5,8 @@ import { setupListEditor, resetListEditor } from 'pl-fe/actions/lists';
import { CardHeader, CardTitle } from 'pl-fe/components/ui/card';
import Modal from 'pl-fe/components/ui/modal';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
import { useListAccounts } from 'pl-fe/queries/accounts/use-lists';
import { useAccountSearch } from 'pl-fe/queries/search/use-search-accounts';
import Account from './components/account';
import EditListForm from './components/edit-list-form';
@@ -29,9 +29,10 @@ const ListEditorModal: React.FC<BaseModalProps & ListEditorModalProps> = ({ list
const dispatch = useAppDispatch();
const [tab, setTab] = useState<'info' | 'members'>('info');
const [searchValue, setSearchValue] = useState('');
const { data: accountIds = [] } = useListAccounts(listId);
const searchAccountIds = useAppSelector((state) => state.listEditor.suggestions.items);
const { data: searchAccountIds = [] } = useAccountSearch(searchValue, { following: true, limit: 5 });
useEffect(() => {
dispatch(setupListEditor(listId));
@@ -72,7 +73,7 @@ const ListEditorModal: React.FC<BaseModalProps & ListEditorModalProps> = ({ list
<CardHeader>
<CardTitle title={intl.formatMessage(messages.addToList)} />
</CardHeader>
<Search />
<Search value={searchValue} onSubmit={setSearchValue} />
<div className='max-h-48 overflow-y-auto'>
{searchAccountIds.map(accountId => <Account key={accountId} listId={listId} accountId={accountId} added={accountIds.includes(accountId)} />)}
</div>