move vars, types and enums into separate files, change logic of filte…

…r function, create vars for 'magic values'

src/api.ts

@@ -1,84 +1,42 @@
+import { FilterType } from './types/FilterType';
 import { Person } from './types/Person';
-
-// eslint-disable-next-line max-len
-const API_URL = 'https://mate-academy.github.io/react_people-table/api/people.json';
-
-export const NOT_SET_VALUE = '-';
-
-export enum ColumnNames {
-  Name = 'Name',
-  Sex = 'Sex',
-  Born = 'Born',
-  Died = 'Died',
-}
-
-export enum PersonSex {
-  All = '',
-  Male = 'm',
-  Female = 'f',
-}
-
-export type FilterType = {
-  query: string | '';
-  centuries: string[];
-  sex: string | '';
-};
-
-export const CENTURIES = ['16', '17', '18', '19', '20'];
+import { SortParam } from './types/SortParam';
+import { getParent } from './utils/getParentHelper';
+import { API_URL, YEARS_IN_CENTURY } from './utils/variables';
 
 function wait(delay: number) {
   return new Promise(resolve => setTimeout(resolve, delay));
 }
 
 export async function getPeople(): Promise<Person[]> {
-  // keep this delay for testing purpose
   return wait(500)
     .then(() => fetch(API_URL))
     .then(response => response.json());
 }
 
-function getParent(people: Person[], parentName: string) {
-  return people.find(({ name }) => name === parentName);
-}
-
 export function addParent(people: Person[]) {
   return people.map(person => {
-    let mother;
-    let father;
-
-    if (person.motherName) {
-      mother = getParent(people, person.motherName);
-    }
-
-    if (person.fatherName) {
-      father = getParent(people, person.fatherName);
-    }
+    const { motherName, fatherName } = person;
 
     return {
       ...person,
-      mother,
-      father,
+      mother: motherName ? getParent(people, motherName) : undefined,
+      father: fatherName ? getParent(people, fatherName) : undefined,
     };
   });
 }
 
-export const sortPeople = (people: Person[], sortParam: string) => {
+export function sortPeople(people: Person[], sortParam: SortParam | string) {
   if (sortParam) {
     return [...people].sort((a, b) => {
       switch (sortParam) {
-        case ('name'): {
-          return a[sortParam].localeCompare(b[sortParam]);
-        }
-
-        case ('sex'): {
+        case (SortParam.Name):
+        case (SortParam.Sex): {
           return a[sortParam].localeCompare(b[sortParam]);
         }
 
-        case ('born'): {
-          return a[sortParam] - (b[sortParam]);
-        }
-
-        case ('died'): {
+        case (SortParam.Born):
+        case (SortParam.Died): {
           return a[sortParam] - (b[sortParam]);
         }
 
@@ -90,36 +48,33 @@ export const sortPeople = (people: Person[], sortParam: string) => {
   }
 
   return [...people];
-};
+}
 
-export const filterPeople = (
+export function filterPeople(
   filterOption: FilterType,
   people: Person[],
-) => {
-  return people
-    .filter(person => {
-      if (filterOption.sex) {
-        return person.sex === filterOption.sex;
-      }
-
-      return person;
-    })
-    .filter(person => {
-      if (filterOption.centuries.length) {
-        const personBirthCentury = Math.ceil(person.born / 100);
+) {
+  let filteredPeople = people;
 
-        return filterOption.centuries.includes(personBirthCentury.toString());
-      }
+  if (filterOption.sex) {
+    filteredPeople = filteredPeople
+      .filter(person => person.sex === filterOption.sex);
+  }
 
-      return person;
-    })
-    .filter(person => {
-      if (filterOption.query) {
-        return person.name.includes(filterOption.query)
-        || person.motherName?.includes(filterOption.query)
-        || person.fatherName?.includes(filterOption.query);
-      }
+  if (filterOption.centuries.length) {
+    filteredPeople = filteredPeople.filter(person => {
+      const personBirthCentury = Math.ceil(person.born / YEARS_IN_CENTURY);
 
-      return person;
+      return filterOption.centuries.includes(personBirthCentury.toString());
     });
-};
+  }
+
+  if (filterOption.query) {
+    filteredPeople = filteredPeople
+      .filter(person => person.name.includes(filterOption.query)
+    || person.motherName?.includes(filterOption.query)
+    || person.fatherName?.includes(filterOption.query));
+  }
+
+  return filteredPeople;
+}

src/components/ColumnNameItem/ColumnNameItem.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-import { ColumnNames } from '../../api';
 import { SearchLink } from '../SearchLink';
+import { ColumnNames } from '../../types';
 
 type Props = {
   value: keyof typeof ColumnNames,

src/components/FilterSexItem/FilterSexItem.tsx

@@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom';
 import cn from 'classnames';
 
 import { SearchLink } from '../SearchLink';
-import { PersonSex } from '../../api';
+import { PersonSex } from '../../types';
 
 type Props = {
   sexValue: keyof typeof PersonSex,

src/components/PeopleFilters/PeopleFilters.tsx

@@ -3,10 +3,11 @@ import { useSearchParams } from 'react-router-dom';
 import cn from 'classnames';
 
 import { CenturyItem } from '../FilterCenturyItem';
-import { CENTURIES, PersonSex } from '../../api';
 import { PersonSexItem } from '../FilterSexItem';
 import { SearchLink } from '../SearchLink';
 import { getSearchWith } from '../../utils/searchHelper';
+import { PersonSex } from '../../types';
+import { CENTURIES } from '../../utils/variables';
 
 export const PeopleFilters = () => {
   const [searchParams, setSearchParams] = useSearchParams();

src/components/PeopleTable/PeopleTable.tsx

@@ -4,14 +4,11 @@ import { Outlet, useParams, useSearchParams } from 'react-router-dom';
 import { PersonItem } from '../PersonItem';
 import { ColumnName } from '../ColumnNameItem';
 
-import {
-  ColumnNames,
-  FilterType,
-  filterPeople,
-  sortPeople,
-} from '../../api';
+import { filterPeople, sortPeople } from '../../api';
 
-import { Person } from '../../types';
+import { ColumnNames, FilterType, Person } from '../../types';
+import { SortParam } from '../../types/SortParam';
+import { DESC_SORT } from '../../utils/variables';
 
 type Props = {
   people: Person[],
@@ -30,7 +27,7 @@ export const PeopleTable: React.FC<Props> = ({
   const [sortedPeople, setSortedPeople] = useState(people);
 
   const [searchParams] = useSearchParams();
-  const sort = searchParams.get('sort') || '';
+  const sort: typeof SortParam | string = searchParams.get('sort') || '';
   const order = searchParams.get('order') || '';
   const query = searchParams.get('query') || '';
   const centuries = searchParams.getAll('centuries') || [];
@@ -50,7 +47,7 @@ export const PeopleTable: React.FC<Props> = ({
     setFilteredPeople(filterPeople(filters, sortedPeople));
   }, [query, centuries.length, sex, sortedPeople]);
 
-  if (order === 'desc') {
+  if (order === DESC_SORT) {
     filteredPeople.reverse();
   }
 

src/components/PersonItem/PersonItem.tsx

@@ -3,7 +3,7 @@ import cn from 'classnames';
 
 import { Person } from '../../types';
 import { PersonLink } from '../PersonLink';
-import { NOT_SET_VALUE } from '../../api';
+import { NOT_SET_VALUE } from '../../utils/variables';
 
 type Props = {
   person: Person;

src/components/PersonLink/PersonLink.tsx

@@ -3,16 +3,12 @@ import { Link, useSearchParams } from 'react-router-dom';
 import cn from 'classnames';
 
 import { Person } from '../../types';
+import { Sex } from '../../types/Sex';
 
 type Props = {
   person: Person,
 };
 
-enum Sex {
-  FEMALE = 'f',
-  MALE = 'm',
-}
-
 export const PersonLink: React.FC<Props> = ({ person }) => {
   const {
     name,

src/types/ColumnNames.ts

@@ -0,0 +1,6 @@
+export enum ColumnNames {
+  Name = 'Name',
+  Sex = 'Sex',
+  Born = 'Born',
+  Died = 'Died',
+}

src/types/FilterType.ts

@@ -0,0 +1,5 @@
+export type FilterType = {
+  query: string;
+  centuries: string[];
+  sex: string;
+};

src/types/PersonSex.ts

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

src/types/Sex.ts

@@ -0,0 +1,4 @@
+export enum Sex {
+  FEMALE = 'f',
+  MALE = 'm',
+}

src/types/SortParam.ts

@@ -0,0 +1,6 @@
+export enum SortParam {
+  Name = 'name',
+  Sex = 'sex',
+  Born = 'born',
+  Died = 'died',
+}

src/types/index.ts

@@ -1 +1,4 @@
 export * from './Person';
+export * from './ColumnNames';
+export * from './FilterType';
+export * from './PersonSex';

src/utils/getParentHelper.ts

@@ -0,0 +1,5 @@
+import { Person } from '../types';
+
+export function getParent(people: Person[], parentName: string) {
+  return people.find(({ name }) => name === parentName);
+}

src/utils/variables.ts

@@ -0,0 +1,10 @@
+export const NOT_SET_VALUE = '-';
+
+export const YEARS_IN_CENTURY = 100;
+
+export const DESC_SORT = 'desc';
+
+export const CENTURIES = ['16', '17', '18', '19', '20'];
+
+// eslint-disable-next-line max-len
+export const API_URL = 'https://mate-academy.github.io/react_people-table/api/people.json';