Skip to content

Commit

Permalink
feature: search on enter key press (PalisadoesFoundation#1184)
Browse files Browse the repository at this point in the history 
* feat: search on enter press

* fixed: test cases for search on enter

* fixed test cases & removed debounce.ts
  • Loading branch information
@racky7
racky7 authored Dec 15, 2023
1 parent 4d1819c commit 8d2c0ed
Show file tree
Hide file tree
Showing 12 changed files with 132 additions and 130 deletions.
24 changes: 18 additions & 6 deletions src/components/UsersTableItem/UserTableItem.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -370,20 +370,26 @@ describe('Testing User Table Item', () => {
expect(screen.getByTestId(`changeRoleInOrgdef`)).toHaveValue('USER?def');

// Search for Joined Organization 1
fireEvent.change(inputBox, { target: { value: 'Joined Organization 1' } });
fireEvent.keyUp(inputBox, {
key: 'Enter',
target: { value: 'Joined Organization 1' },
});
expect(screen.getByText(/Joined Organization 1/i)).toBeInTheDocument();
expect(
screen.queryByText(/Joined Organization 2/i)
).not.toBeInTheDocument();

// Search for an Organization which does not exist
fireEvent.change(inputBox, { target: { value: 'Joined Organization 3' } });
fireEvent.keyUp(inputBox, {
key: 'Enter',
target: { value: 'Joined Organization 3' },
});
expect(
screen.getByText(`No results found for "Joined Organization 3"`)
).toBeInTheDocument();

// Now clear the search box
fireEvent.change(inputBox, { target: { value: '' } });
fireEvent.keyUp(inputBox, { key: 'Enter', target: { value: '' } });

// Click on Creator Link
fireEvent.click(screen.getByTestId(`creatorabc`));
Expand Down Expand Up @@ -541,20 +547,26 @@ describe('Testing User Table Item', () => {
expect(toast.success).toBeCalledWith('Profile Page Coming Soon !');

// Search for Blocked Organization 1
fireEvent.change(inputBox, { target: { value: 'Blocked Organization 1' } });
fireEvent.keyUp(inputBox, {
key: 'Enter',
target: { value: 'Blocked Organization 1' },
});
expect(screen.getByText(/Blocked Organization 1/i)).toBeInTheDocument();
expect(
screen.queryByText(/Blocked Organization 2/i)
).not.toBeInTheDocument();

// Search for an Organization which does not exist
fireEvent.change(inputBox, { target: { value: 'Blocked Organization 3' } });
fireEvent.keyUp(inputBox, {
key: 'Enter',
target: { value: 'Blocked Organization 3' },
});
expect(
screen.getByText(`No results found for "Blocked Organization 3"`)
).toBeInTheDocument();

// Now clear the search box
fireEvent.change(inputBox, { target: { value: '' } });
fireEvent.keyUp(inputBox, { key: 'Enter', target: { value: '' } });

// Click on Organization Link
fireEvent.click(screen.getByText(/Blocked Organization 1/i));
Expand Down
44 changes: 24 additions & 20 deletions src/components/UsersTableItem/UsersTableItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,27 +128,31 @@ const UsersTableItem = (props: Props): JSX.Element => {
toast.success('Profile Page Coming Soon !');
}
function handleSearchJoinedOrgs(e: any): void {
const { value } = e.target;
setSearchByNameJoinedOrgs(value);
if (value == '') {
setJoinedOrgs(user.joinedOrganizations);
} else {
const filteredOrgs = user.joinedOrganizations.filter((org) =>
org.name.toLowerCase().includes(value.toLowerCase())
);
setJoinedOrgs(filteredOrgs);
if (e.key === 'Enter') {
const { value } = e.target;
setSearchByNameJoinedOrgs(value);
if (value == '') {
setJoinedOrgs(user.joinedOrganizations);
} else {
const filteredOrgs = user.joinedOrganizations.filter((org) =>
org.name.toLowerCase().includes(value.toLowerCase())
);
setJoinedOrgs(filteredOrgs);
}
}
}
function handleSearcgByOrgsBlockedBy(e: any): void {
const { value } = e.target;
setSearchByNameOrgsBlockedBy(value);
if (value == '') {
setOrgsBlockedBy(user.organizationsBlockedBy);
} else {
const filteredOrgs = user.organizationsBlockedBy.filter((org) =>
org.name.toLowerCase().includes(value.toLowerCase())
);
setOrgsBlockedBy(filteredOrgs);
if (e.key === 'Enter') {
const { value } = e.target;
setSearchByNameOrgsBlockedBy(value);
if (value == '') {
setOrgsBlockedBy(user.organizationsBlockedBy);
} else {
const filteredOrgs = user.organizationsBlockedBy.filter((org) =>
org.name.toLowerCase().includes(value.toLowerCase())
);
setOrgsBlockedBy(filteredOrgs);
}
}
}

Expand Down Expand Up @@ -225,7 +229,7 @@ const UsersTableItem = (props: Props): JSX.Element => {
placeholder={t('searchByOrgName')}
data-testid="searchByNameJoinedOrgs"
autoComplete="off"
onChange={handleSearchJoinedOrgs}
onKeyUp={handleSearchJoinedOrgs}
/>
<Button
tabIndex={-1}
Expand Down Expand Up @@ -398,7 +402,7 @@ const UsersTableItem = (props: Props): JSX.Element => {
placeholder={t('searchByOrgName')}
data-testid="searchByNameOrgsBlockedBy"
autoComplete="off"
onChange={handleSearcgByOrgsBlockedBy}
onKeyUp={handleSearcgByOrgsBlockedBy}
/>
<Button
tabIndex={-1}
Expand Down
8 changes: 4 additions & 4 deletions src/screens/BlockUser/BlockUser.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -430,14 +430,14 @@ describe('Testing Block/Unblock user screen', () => {
expect(screen.getByText('John Doe')).toBeInTheDocument();
expect(screen.getByText('Sam Smith')).toBeInTheDocument();

const firstNameInput = screen.getByPlaceholderText(/Search by First Name/i);
// Open Dropdown
await act(async () => {
userEvent.click(screen.getByTestId('nameFilter'));
});
// Select option and enter first name
userEvent.click(screen.getByTestId('searchByFirstName'));
userEvent.type(firstNameInput, 'john');
const firstNameInput = screen.getByPlaceholderText(/Search by First Name/i);
userEvent.type(firstNameInput, 'john{enter}');

await wait(700);

Expand Down Expand Up @@ -474,7 +474,7 @@ describe('Testing Block/Unblock user screen', () => {
// Select option and enter last name
userEvent.click(screen.getByTestId('searchByLastName'));
const lastNameInput = screen.getByPlaceholderText(/Search by Last Name/i);
userEvent.type(lastNameInput, 'doe');
userEvent.type(lastNameInput, 'doe{enter}');

await wait(700);

Expand Down Expand Up @@ -601,7 +601,7 @@ describe('Testing Block/Unblock user screen', () => {

const input = screen.getByPlaceholderText('Search By First Name');
await act(async () => {
userEvent.type(input, 'Peter');
userEvent.type(input, 'Peter{enter}');
});
await wait(700);
expect(
Expand Down
20 changes: 10 additions & 10 deletions src/screens/BlockUser/BlockUser.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { BLOCK_PAGE_MEMBER_LIST } from 'GraphQl/Queries/Queries';
import OrganizationScreen from 'components/OrganizationScreen/OrganizationScreen';
import TableLoader from 'components/TableLoader/TableLoader';
import { useTranslation } from 'react-i18next';
import debounce from 'utils/debounce';
import { errorHandler } from 'utils/errorHandler';
import styles from './BlockUser.module.css';

Expand Down Expand Up @@ -119,16 +118,17 @@ const Requests = (): JSX.Element => {
}

const handleSearch = (e: any): void => {
const { value } = e.target;
setSearchByName(value);
memberRefetch({
orgId: currentUrl,
firstName_contains: searchByFirstName ? value : '',
lastName_contains: searchByFirstName ? '' : value,
});
if (e.key === 'Enter') {
const { value } = e.target;
setSearchByName(value);
memberRefetch({
orgId: currentUrl,
firstName_contains: searchByFirstName ? value : '',
lastName_contains: searchByFirstName ? '' : value,
});
}
};

const handleSearchDebounced = debounce(handleSearch);
const headerTitles: string[] = [
'#',
t('name'),
Expand All @@ -154,7 +154,7 @@ const Requests = (): JSX.Element => {
data-testid="searchByName"
autoComplete="off"
required
onChange={handleSearchDebounced}
onKeyUp={handleSearch}
/>
<Button
tabIndex={-1}
Expand Down
22 changes: 11 additions & 11 deletions src/screens/OrgList/OrgList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import InfiniteScroll from 'react-infinite-scroll-component';
import { Link } from 'react-router-dom';
import { toast } from 'react-toastify';
import convertToBase64 from 'utils/convertToBase64';
import debounce from 'utils/debounce';
import { errorHandler } from 'utils/errorHandler';
import type {
InterfaceOrgConnectionInfoType,
Expand Down Expand Up @@ -219,15 +218,17 @@ function orgList(): JSX.Element {

/* istanbul ignore next */
const handleSearchByName = (e: any): void => {
const { value } = e.target;
setSearchByName(value);
if (value == '') {
resetAllParams();
return;
if (e.key === 'Enter') {
const { value } = e.target;
setSearchByName(value);
if (value == '') {
resetAllParams();
return;
}
refetchOrgs({
filter: value,
});
}
refetchOrgs({
filter: value,
});
};

/* istanbul ignore next */
Expand Down Expand Up @@ -267,7 +268,6 @@ function orgList(): JSX.Element {
});
};

const debouncedHandleSearchByName = debounce(handleSearchByName);
return (
<>
<SuperAdminScreen title={t('organizations')} screenName="Organizations">
Expand All @@ -282,7 +282,7 @@ function orgList(): JSX.Element {
data-testid="searchByName"
autoComplete="off"
required
onChange={debouncedHandleSearchByName}
onKeyUp={handleSearchByName}
/>
<Button
tabIndex={-1}
Expand Down
2 changes: 1 addition & 1 deletion src/screens/OrgPost/OrgPost.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ describe('Organisation Post Page', () => {
});
}
await debounceWait();
userEvent.type(screen.getByPlaceholderText(/Search By/i), 'postone');
userEvent.type(screen.getByPlaceholderText(/Search By/i), 'postone{enter}');
await debounceWait();
const sortDropdown = screen.getByTestId('sort');
userEvent.click(sortDropdown);
Expand Down
21 changes: 10 additions & 11 deletions src/screens/OrgPost/OrgPost.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import styles from './OrgPost.module.css';
import OrgPostCard from 'components/OrgPostCard/OrgPostCard';
import { ORGANIZATION_POST_CONNECTION_LIST } from 'GraphQl/Queries/Queries';
import { CREATE_POST_MUTATION } from 'GraphQl/Mutations/mutations';
import debounce from 'utils/debounce';
import convertToBase64 from 'utils/convertToBase64';
import NotFound from 'components/NotFound/NotFound';
import { errorHandler } from 'utils/errorHandler';
Expand Down Expand Up @@ -141,17 +140,17 @@ function orgPost(): JSX.Element {
}

const handleSearch = (e: any): void => {
const { value } = e.target;
const filterData = {
id: currentUrl,
title_contains: showTitle ? value : null,
text_contains: !showTitle ? value : null,
};
refetch(filterData);
if (e.key === 'Enter') {
const { value } = e.target;
const filterData = {
id: currentUrl,
title_contains: showTitle ? value : null,
text_contains: !showTitle ? value : null,
};
refetch(filterData);
}
};

const debouncedHandleSearch = debounce(handleSearch);

const handleSorting = (option: string): void => {
setSortingOption(option);
};
Expand Down Expand Up @@ -202,7 +201,7 @@ function orgPost(): JSX.Element {
placeholder={showTitle ? t('searchTitle') : t('searchText')}
data-testid="searchByName"
autoComplete="off"
onChange={debouncedHandleSearch}
onKeyUp={handleSearch}
required
/>
<Button
Expand Down
55 changes: 26 additions & 29 deletions src/screens/OrganizationPeople/OrganizationPeople.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import OrganizationScreen from 'components/OrganizationScreen/OrganizationScreen
import PaginationList from 'components/PaginationList/PaginationList';
import UserListCard from 'components/UserListCard/UserListCard';
import { useTranslation } from 'react-i18next';
import debounce from 'utils/debounce';
import styles from './OrganizationPeople.module.css';

import { toast } from 'react-toastify';
Expand Down Expand Up @@ -113,33 +112,34 @@ function organizationPeople(): JSX.Element {
toast.error(error?.message);
}

/* istanbul ignore next */
const handleFullNameSearchChange = (fullName: string): void => {
const handleFullNameSearchChange = (e: any): void => {
/* istanbul ignore next */
const [firstName, lastName] = fullName.split(' ');
if (e.key === 'Enter') {
const [firstName, lastName] = fullName.split(' ');

const newFilterData = {
firstName_contains: firstName ?? '',
lastName_contains: lastName ?? '',
};
const newFilterData = {
firstName_contains: firstName ?? '',
lastName_contains: lastName ?? '',
};

setFilterData(newFilterData);
setFilterData(newFilterData);

if (state === 0) {
memberRefetch({
...newFilterData,
orgId: currentUrl,
});
} else if (state === 1) {
adminRefetch({
...newFilterData,
orgId: currentUrl,
admin_for: currentUrl,
});
} else {
usersRefetch({
...newFilterData,
});
if (state === 0) {
memberRefetch({
...newFilterData,
orgId: currentUrl,
});
} else if (state === 1) {
adminRefetch({
...newFilterData,
orgId: currentUrl,
admin_for: currentUrl,
});
} else {
usersRefetch({
...newFilterData,
});
}
}
};

Expand All @@ -159,10 +159,6 @@ function organizationPeople(): JSX.Element {
setPage(0);
};

const debouncedHandleFullNameSearchChange = debounce(
handleFullNameSearchChange
);

return (
<>
<OrganizationScreen screenName="People" title={t('title')}>
Expand All @@ -181,8 +177,9 @@ function organizationPeople(): JSX.Element {
onChange={(e): void => {
const { value } = e.target;
setFullName(value);
debouncedHandleFullNameSearchChange(value);
// handleFullNameSearchChange(value);
}}
onKeyUp={handleFullNameSearchChange}
/>
<div
className={styles.radio_buttons}
Expand Down
Loading

0 comments on commit 8d2c0ed

Please sign in to comment.