From 0efe8c73be6cde455f621cc3416e239ef8835ce9 Mon Sep 17 00:00:00 2001 From: Nebs Date: Wed, 20 Jul 2022 15:36:59 +0200 Subject: [PATCH 1/3] move user table params to the recoil state --- packages/frontend/src/model/users.ts | 37 +++++++++++++ .../src/pages/Users/components/UsersTable.tsx | 52 +++++++++++++------ 2 files changed, 73 insertions(+), 16 deletions(-) diff --git a/packages/frontend/src/model/users.ts b/packages/frontend/src/model/users.ts index 85c25e0ea..4bea81142 100644 --- a/packages/frontend/src/model/users.ts +++ b/packages/frontend/src/model/users.ts @@ -20,6 +20,18 @@ import { import { ActiveTokenSet } from './auth'; import { AllPeriods } from './periods'; +interface roleOptionsProps { + value: string; + label: string; +} + +const roleOptions = [ + { label: 'All users', value: UserRole.USER }, + { label: 'Admins', value: UserRole.ADMIN }, + { label: 'Forwarders', value: UserRole.FORWARDER }, + { label: 'Quantifiers', value: UserRole.QUANTIFIER }, +]; + const AllUsersQuery = selector({ key: 'AllUsersQuery', get: ({ get }) => { @@ -39,6 +51,31 @@ export const AllUsers = atom({ default: undefined, }); +export const UsersTableData = atom({ + key: 'UsersTableData', + default: undefined, +}); + +export const UsersTableSelectedRole = atom({ + key: 'UsersTableSelectedRole', + default: roleOptions[0], +}); + +export const UsersTableFilter = atom({ + key: 'UsersTableFilter', + default: '', +}); + +export const UsersTablePage = atom({ + key: 'UsersTablePage', + default: 1, +}); + +export const UsersTableLastPage = atom({ + key: 'UsersTableLastPage', + default: 0, +}); + export const AllAdminUsers = selector({ key: 'AllAdminUsers', get: ({ get }) => { diff --git a/packages/frontend/src/pages/Users/components/UsersTable.tsx b/packages/frontend/src/pages/Users/components/UsersTable.tsx index 8ec91b2d6..a4872f834 100644 --- a/packages/frontend/src/pages/Users/components/UsersTable.tsx +++ b/packages/frontend/src/pages/Users/components/UsersTable.tsx @@ -1,21 +1,25 @@ import React from 'react'; -import { useRecoilValue } from 'recoil'; +import { useRecoilValue, useRecoilState } from 'recoil'; import { UserDto, UserRole } from 'api/dist/user/types'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { + faCircleXmark, + faMagnifyingGlass, +} from '@fortawesome/free-solid-svg-icons'; import { AllAdminUsers, AllForwarderUsers, AllQuantifierUsers, AllUsers, + UsersTableData, + UsersTableSelectedRole, + UsersTableFilter, } from '@/model/users'; import { SearchInput } from '@/components/form/SearchInput'; import { SelectInput } from '@/components/form/SelectInput'; import { UsersTableRow } from './UsersTableRow'; import { UsersTablePagination } from './UsersTablePagination'; - -interface roleOptionsProps { - value: string; - label: string; -} +import { UsersTablePage, UsersTableLastPage } from '../../../model/users'; const roleOptions = [ { label: 'All users', value: UserRole.USER }, @@ -31,13 +35,14 @@ export const UsersTable = (): JSX.Element => { const allForwarderUsers = useRecoilValue(AllForwarderUsers); const allQuantifierUsers = useRecoilValue(AllQuantifierUsers); const allUsers = useRecoilValue(AllUsers); - const [tableData, setTableData] = React.useState(); - const [selectedRole, setSelectedRole] = React.useState( - roleOptions[0] + + const [tableData, setTableData] = useRecoilState(UsersTableData); + const [selectedRole, setSelectedRole] = useRecoilState( + UsersTableSelectedRole ); - const [filter, setFilter] = React.useState(''); - const [page, setPage] = React.useState(1); - const [lastPage, setLastPage] = React.useState(0); + const [filter, setFilter] = useRecoilState(UsersTableFilter); + const [page, setPage] = useRecoilState(UsersTablePage); + const [lastPage, setLastPage] = useRecoilState(UsersTableLastPage); const applyFilter = React.useCallback( (data: UserDto[] | undefined): UserDto[] => { @@ -62,7 +67,7 @@ export const UsersTable = (): JSX.Element => { if (allUsers) { setTableData(allUsers); } - }, [allUsers]); + }, [allUsers, setTableData]); React.useEffect(() => { switch (selectedRole.value) { @@ -79,18 +84,22 @@ export const UsersTable = (): JSX.Element => { setTableData(allQuantifierUsers); break; } - setFilter(''); }, [ selectedRole, allUsers, allAdminUsers, allForwarderUsers, allQuantifierUsers, + setTableData, + setFilter, ]); React.useEffect(() => { if (tableData) { - setPage(1); + if (page > lastPage) { + setPage(1); + } + const filteredData = applyFilter(tableData); if (filteredData.length % USERS_PER_PAGE === 0) { @@ -99,7 +108,7 @@ export const UsersTable = (): JSX.Element => { setLastPage(Math.trunc(filteredData.length / USERS_PER_PAGE) + 1); } } - }, [tableData, filter, applyFilter]); + }, [tableData, filter, applyFilter, setLastPage, page, lastPage, setPage]); return ( <> @@ -110,6 +119,17 @@ export const UsersTable = (): JSX.Element => { options={roleOptions} /> + {filter !== '' && ( + + )}
From 576f393f3b632ba2ecd8988237cb146736e77d2e Mon Sep 17 00:00:00 2001 From: Nebs Date: Thu, 21 Jul 2022 10:10:25 +0200 Subject: [PATCH 2/3] fix build errors --- .../frontend/src/pages/Users/components/UsersTable.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/frontend/src/pages/Users/components/UsersTable.tsx b/packages/frontend/src/pages/Users/components/UsersTable.tsx index a4872f834..c6ac9605c 100644 --- a/packages/frontend/src/pages/Users/components/UsersTable.tsx +++ b/packages/frontend/src/pages/Users/components/UsersTable.tsx @@ -2,10 +2,7 @@ import React from 'react'; import { useRecoilValue, useRecoilState } from 'recoil'; import { UserDto, UserRole } from 'api/dist/user/types'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { - faCircleXmark, - faMagnifyingGlass, -} from '@fortawesome/free-solid-svg-icons'; +import { faCircleXmark } from '@fortawesome/free-solid-svg-icons'; import { AllAdminUsers, AllForwarderUsers, @@ -14,12 +11,13 @@ import { UsersTableData, UsersTableSelectedRole, UsersTableFilter, + UsersTablePage, + UsersTableLastPage, } from '@/model/users'; import { SearchInput } from '@/components/form/SearchInput'; import { SelectInput } from '@/components/form/SelectInput'; import { UsersTableRow } from './UsersTableRow'; import { UsersTablePagination } from './UsersTablePagination'; -import { UsersTablePage, UsersTableLastPage } from '../../../model/users'; const roleOptions = [ { label: 'All users', value: UserRole.USER }, From 8de624aa670fd203a1c0208413ca6c92446add3e Mon Sep 17 00:00:00 2001 From: Nebs Date: Tue, 26 Jul 2022 11:07:54 +0200 Subject: [PATCH 3/3] moved search clear icon inside input field, added it on other pages that use search input --- .../src/components/form/SearchInput.tsx | 21 ++++++++++++++- packages/frontend/src/model/users.ts | 2 +- .../src/pages/EventLogs/EventLogsPage.tsx | 1 + .../components/QuantifyTable.tsx | 6 ++--- .../src/pages/Users/components/UsersTable.tsx | 27 +++++-------------- 5 files changed, 31 insertions(+), 26 deletions(-) diff --git a/packages/frontend/src/components/form/SearchInput.tsx b/packages/frontend/src/components/form/SearchInput.tsx index 332215d41..1a1b5eb26 100644 --- a/packages/frontend/src/components/form/SearchInput.tsx +++ b/packages/frontend/src/components/form/SearchInput.tsx @@ -1,16 +1,22 @@ -import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'; +import { + faMagnifyingGlass, + faCircleXmark, +} from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import React from 'react'; interface SearchInputProps { handleChange: (element) => void; value?: string; placeholder?: string; + handleClear?: (element) => void; } export const SearchInput = ({ handleChange, value, placeholder = 'Search', + handleClear, }: SearchInputProps): JSX.Element => { return (
@@ -33,6 +39,19 @@ export const SearchInput = ({ handleChange(e.target.value) } /> + {value !== '' && handleClear && ( +
+ +
+ )}
); }; diff --git a/packages/frontend/src/model/users.ts b/packages/frontend/src/model/users.ts index 4bea81142..7903f6968 100644 --- a/packages/frontend/src/model/users.ts +++ b/packages/frontend/src/model/users.ts @@ -25,7 +25,7 @@ interface roleOptionsProps { label: string; } -const roleOptions = [ +export const roleOptions = [ { label: 'All users', value: UserRole.USER }, { label: 'Admins', value: UserRole.ADMIN }, { label: 'Forwarders', value: UserRole.FORWARDER }, diff --git a/packages/frontend/src/pages/EventLogs/EventLogsPage.tsx b/packages/frontend/src/pages/EventLogs/EventLogsPage.tsx index 639efaf89..cbcd7be70 100644 --- a/packages/frontend/src/pages/EventLogs/EventLogsPage.tsx +++ b/packages/frontend/src/pages/EventLogs/EventLogsPage.tsx @@ -116,6 +116,7 @@ const EventLogsPage = (): JSX.Element => { setPage(1); }} value={searchValue} + handleClear={(): void => setSearchValue('')} />
diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx index 73054d929..512966323 100644 --- a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx +++ b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx @@ -32,9 +32,7 @@ export const QuantifyTable = ({ periodId, receiverId, }: Props): JSX.Element | null => { - const [searchValue, setSearchValue] = React.useState( - undefined - ); + const [searchValue, setSearchValue] = React.useState(''); const data = useRecoilValue( PeriodQuantifierReceiverPraise({ periodId, receiverId }) @@ -207,6 +205,8 @@ export const QuantifyTable = ({ handleSearchInput(e)} placeholder="Filter" + value={searchValue} + handleClear={(): void => handleSearchInput('')} /> diff --git a/packages/frontend/src/pages/Users/components/UsersTable.tsx b/packages/frontend/src/pages/Users/components/UsersTable.tsx index c6ac9605c..cc6ceba64 100644 --- a/packages/frontend/src/pages/Users/components/UsersTable.tsx +++ b/packages/frontend/src/pages/Users/components/UsersTable.tsx @@ -1,8 +1,6 @@ import React from 'react'; import { useRecoilValue, useRecoilState } from 'recoil'; import { UserDto, UserRole } from 'api/dist/user/types'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faCircleXmark } from '@fortawesome/free-solid-svg-icons'; import { AllAdminUsers, AllForwarderUsers, @@ -13,19 +11,13 @@ import { UsersTableFilter, UsersTablePage, UsersTableLastPage, + roleOptions, } from '@/model/users'; import { SearchInput } from '@/components/form/SearchInput'; import { SelectInput } from '@/components/form/SelectInput'; import { UsersTableRow } from './UsersTableRow'; import { UsersTablePagination } from './UsersTablePagination'; -const roleOptions = [ - { label: 'All users', value: UserRole.USER }, - { label: 'Admins', value: UserRole.ADMIN }, - { label: 'Forwarders', value: UserRole.FORWARDER }, - { label: 'Quantifiers', value: UserRole.QUANTIFIER }, -]; - const USERS_PER_PAGE = 10; export const UsersTable = (): JSX.Element => { @@ -116,18 +108,11 @@ export const UsersTable = (): JSX.Element => { selected={selectedRole} options={roleOptions} /> - - {filter !== '' && ( - - )} + setFilter('')} + />