sort fixes

src/components/PeopleFilters.tsx

@@ -3,18 +3,13 @@ import { SetURLSearchParams } from 'react-router-dom';
 
 import { getSearchWith } from '../utils/searchHelper';
 import { SearchLink } from './SearchLink';
+import { SexValues } from '../types/SexValues';
 
 type Props = {
   searchParams: URLSearchParams,
   setSearchParams: SetURLSearchParams,
 };
 
-enum SexValues {
-  All = '',
-  Male = 'm',
-  Female = 'f',
-}
-
 const centuriesValues = ['16', '17', '18', '19', '20'];
 
 export const PeopleFilters: React.FC<Props> = ({

src/components/PeopleTable.tsx

@@ -26,18 +26,17 @@ export const PeopleTable: React.FC<Props> = ({ people, searchParams }) => {
         <tr>
           {Object.values(SortOrders).map(column => {
             const normalizedOrder = column[0].toUpperCase() + column.slice(1);
-            let newSort = null;
-            let newOrder = null;
+            const newSort = sort === column && order === 'desc'
+              ? null : column;
 
-            if (sort !== column && order !== 'desc') {
-              newSort = column;
-            }
+            let newOrder = null;
 
-            if (sort === column && order !== 'desc') {
-              newSort = column;
-              newOrder = 'desc';
-            } else {
-              newOrder = null;
+            if (sort === column) {
+              if (order !== 'desc') {
+                newOrder = 'desc';
+              } else {
+                newOrder = null;
+              }
             }
 
             return (

src/components/PersonLink.tsx

@@ -3,6 +3,7 @@ import cn from 'classnames';
 import { Link } from 'react-router-dom';
 
 import { Person } from '../types';
+import { SexValues } from '../types/SexValues';
 
 type Props = {
   person?: Person;
@@ -13,7 +14,7 @@ export const PersonLink: React.FC<Props> = ({ person }) => {
     <Link
       to={`${person?.slug}`}
       className={cn({
-        'has-text-danger': person?.sex === 'f',
+        'has-text-danger': person?.sex === SexValues.Female,
       })}
     >
       {person?.name}

src/helpers/queryHelpers.ts

@@ -0,0 +1,3 @@
+export const isQuery = (value: string | null, query: string) => {
+  return value?.toLowerCase().includes(query.trim());
+};

src/pages/PeoplePage.tsx

@@ -4,6 +4,7 @@ import { useSearchParams } from 'react-router-dom';
 import { Loader } from '../components/Loader';
 import { PeopleFilters } from '../components/PeopleFilters';
 import { PeopleTable } from '../components/PeopleTable';
+import { isQuery } from '../helpers/queryHelpers';
 import { Person } from '../types';
 import { SortOrders } from '../types/SortOrder';
 
@@ -27,12 +28,10 @@ const getFilteredPeople = ({
   let visiblePeople = [...people];
 
   if (query) {
-    const normalizedQuery = query.trim();
-
     visiblePeople = visiblePeople.filter(person => (
-      person.name.toLowerCase().includes(normalizedQuery)
-      || person.fatherName?.toLowerCase().includes(normalizedQuery)
-      || person.motherName?.toLowerCase().includes(normalizedQuery)
+      isQuery(person.name, query)
+        || isQuery(person.fatherName, query)
+        || isQuery(person.motherName, query)
     ));
   }
 

src/types/SexValues.ts

@@ -0,0 +1,5 @@
+export enum SexValues {
+  All = '',
+  Male = 'm',
+  Female = 'f',
+}