move user table params to the recoil state

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 (
     <div className="relative flex items-center border border-warm-gray-400 h-10">
@@ -33,6 +39,19 @@ export const SearchInput = ({
           handleChange(e.target.value)
         }
       />
+      {value !== '' && handleClear && (
+        <div className="absolute inset-y-0 right-6 flex items-center pl-3">
+          <button onClick={handleClear}>
+            <span className="text-warm-gray-800 dark:text-white">
+              <FontAwesomeIcon
+                icon={faCircleXmark}
+                size="lg"
+                className="absolute transform -translate-y-1/2 top-1/2 left-3"
+              />
+            </span>
+          </button>
+        </div>
+      )}
     </div>
   );
 };

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;
+}
+
+export 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<UserDto[] | undefined>({
   default: undefined,
 });
 
+export const UsersTableData = atom<UserDto[] | undefined>({
+  key: 'UsersTableData',
+  default: undefined,
+});
+
+export const UsersTableSelectedRole = atom<roleOptionsProps>({
+  key: 'UsersTableSelectedRole',
+  default: roleOptions[0],
+});
+
+export const UsersTableFilter = atom<string>({
+  key: 'UsersTableFilter',
+  default: '',
+});
+
+export const UsersTablePage = atom<number>({
+  key: 'UsersTablePage',
+  default: 1,
+});
+
+export const UsersTableLastPage = atom<number>({
+  key: 'UsersTableLastPage',
+  default: 0,
+});
+
 export const AllAdminUsers = selector({
   key: 'AllAdminUsers',
   get: ({ get }) => {

packages/frontend/src/pages/EventLogs/EventLogsPage.tsx

@@ -116,6 +116,7 @@ const EventLogsPage = (): JSX.Element => {
                 setPage(1);
               }}
               value={searchValue}
+              handleClear={(): void => setSearchValue('')}
             />
           </div>
 

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<string | undefined>(
-    undefined
-  );
+  const [searchValue, setSearchValue] = React.useState<string>('');
 
   const data = useRecoilValue(
     PeriodQuantifierReceiverPraise({ periodId, receiverId })
@@ -207,6 +205,8 @@ export const QuantifyTable = ({
               <SearchInput
                 handleChange={(e): void => handleSearchInput(e)}
                 placeholder="Filter"
+                value={searchValue}
+                handleClear={(): void => handleSearchInput('')}
               />
             </div>
           </div>

packages/frontend/src/pages/Users/components/UsersTable.tsx

@@ -1,43 +1,38 @@
 import React from 'react';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValue, useRecoilState } from 'recoil';
 import { UserDto, UserRole } from 'api/dist/user/types';
 import {
   AllAdminUsers,
   AllForwarderUsers,
   AllQuantifierUsers,
   AllUsers,
+  UsersTableData,
+  UsersTableSelectedRole,
+  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';
 
-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 USERS_PER_PAGE = 10;
 
 export const UsersTable = (): JSX.Element => {
   const allAdminUsers = useRecoilValue(AllAdminUsers);
   const allForwarderUsers = useRecoilValue(AllForwarderUsers);
   const allQuantifierUsers = useRecoilValue(AllQuantifierUsers);
   const allUsers = useRecoilValue(AllUsers);
-  const [tableData, setTableData] = React.useState<UserDto[]>();
-  const [selectedRole, setSelectedRole] = React.useState<roleOptionsProps>(
-    roleOptions[0]
+
+  const [tableData, setTableData] = useRecoilState(UsersTableData);
+  const [selectedRole, setSelectedRole] = useRecoilState(
+    UsersTableSelectedRole
   );
-  const [filter, setFilter] = React.useState<string>('');
-  const [page, setPage] = React.useState<number>(1);
-  const [lastPage, setLastPage] = React.useState<number>(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 +57,7 @@ export const UsersTable = (): JSX.Element => {
     if (allUsers) {
       setTableData(allUsers);
     }
-  }, [allUsers]);
+  }, [allUsers, setTableData]);
 
   React.useEffect(() => {
     switch (selectedRole.value) {
@@ -79,18 +74,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 +98,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 (
     <>
@@ -109,7 +108,11 @@ export const UsersTable = (): JSX.Element => {
           selected={selectedRole}
           options={roleOptions}
         />
-        <SearchInput handleChange={setFilter} value={filter} />
+        <SearchInput
+          handleChange={setFilter}
+          value={filter}
+          handleClear={(): void => setFilter('')}
+        />
       </div>
 
       <div className="flex justify-between px-5 mb-2">