Add map centuries

mate-academy · Oct 10, 2023 · 7a848de · 7a848de
1 parent e859a84
commit 7a848de
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 53 deletions.
diff --git a/src/components/People/PeopleFilters.tsx b/src/components/People/PeopleFilters.tsx
@@ -8,6 +8,7 @@ export const PeopleFilters = () => {
 
   const allCenturies = searchParams.getAll('centuries');
   const sex = searchParams.get('sex');
+  const possibleCenturies = ['16', '17', '18', '19', '20'];
 
   const setSexFilterActiveClass = (selectedSex: string) => {
     return classNames(
@@ -93,45 +94,15 @@ export const PeopleFilters = () => {
       <div className="panel-block">
         <div className="level is-flex-grow-1 is-mobile" data-cy="CenturyFilter">
           <div className="level-left">
-            <SearchLink
-              data-cy="century"
-              className={setSearchCenturyClass('16')}
-              params={{ centuries: setCenturyValues('16') }}
-            >
-              16
-            </SearchLink>
-
-            <SearchLink
-              data-cy="century"
-              className={setSearchCenturyClass('17')}
-              params={{ centuries: setCenturyValues('17') }}
-            >
-              17
-            </SearchLink>
-
-            <SearchLink
-              data-cy="century"
-              className={setSearchCenturyClass('18')}
-              params={{ centuries: setCenturyValues('18') }}
-            >
-              18
-            </SearchLink>
-
-            <SearchLink
-              data-cy="century"
-              className={setSearchCenturyClass('19')}
-              params={{ centuries: setCenturyValues('19') }}
-            >
-              19
-            </SearchLink>
-
-            <SearchLink
-              data-cy="century"
-              className={setSearchCenturyClass('20')}
-              params={{ centuries: setCenturyValues('20') }}
-            >
-              20
-            </SearchLink>
+            {possibleCenturies.map(century => (
+              <SearchLink
+                data-cy="century"
+                className={setSearchCenturyClass(century)}
+                params={{ centuries: setCenturyValues(century) }}
+              >
+                {century}
+              </SearchLink>
+            ))}
           </div>
 
           <div className="level-right ml-4">

diff --git a/src/components/People/PeoplePage.tsx b/src/components/People/PeoplePage.tsx
@@ -11,8 +11,8 @@ export const PeoplePage = () => {
   const [people, setPeople] = useState<Person[] | null>(null);
   const [isError, setIsError] = useState(false);
 
-  const showLoader = people === null && !isError;
-  const peopleLoaded = people && people.length > 0;
+  const showLoader = !people && !isError;
+  const peopleLoaded = !!people?.length;
 
   useEffect(() => {
     getPeople()
@@ -42,7 +42,7 @@ export const PeoplePage = () => {
                 <p data-cy="peopleLoadingError">Something went wrong</p>
               )}
 
-              {people && people.length === 0 && (
+              {people && !people.length && (
                 <p data-cy="noPeopleMessage">
                   There are no people on the server
                 </p>

diff --git a/src/components/People/PeopleTable.tsx b/src/components/People/PeopleTable.tsx
@@ -23,17 +23,16 @@ export const PeopleTable = (
   const order = searchParams.get('order');
   let displayedPeople = [...people];
 
-  if (query && query !== null) {
-    displayedPeople = displayedPeople.filter(person => {
-      const personName = person.name.toLowerCase();
-      const motherName = person.motherName?.toLowerCase();
-      const fatherName = person.fatherName?.toLowerCase();
-      const personMatch = personName.includes(query);
-      const motherMatch = motherName?.includes(query);
-      const fatherMatch = fatherName?.includes(query);
-
-      return personMatch || motherMatch || fatherMatch;
-    });
+  const checkMatchQuery = (checkedName: string | null) => {
+    return query && checkedName?.toLowerCase().includes(query);
+  };
+
+  if (query) {
+    displayedPeople = displayedPeople.filter(person => (
+      checkMatchQuery(person.name)
+        || checkMatchQuery(person.motherName)
+        || checkMatchQuery(person.fatherName)
+    ));
   }
 
   if (centuries.length > 0) {