Develop

[kseniia-chepur]

DEMO LINK

[lerastarynets]

Pls see the checklist on how sorting should work and fix your project becuase now it doesn't work

[lerastarynets]

pls consider moving long ternaries to separate consts with consistent names

[VitaliyBodnar]

let's make a code little bit cleaner

Suggested change

	const [searchParams, setSearchParams] = useSearchParams();
	const query = searchParams.get('query') || '';
	const sex = searchParams.get('sex') || null;
	const centuryParams = searchParams.getAll('centuries') || [];
	const [searchParams, setSearchParams] = useSearchParams();
	const query = searchParams.get('query') || '';
	const sex = searchParams.get('sex') || null;
	const centuryParams = searchParams.getAll('centuries') || [];

[VitaliyBodnar]

m is a 'magic word'
Consider will be better if you create a enum for magic words and use it everywhere

[VitaliyBodnar]

Suggested change

	const [people, setPeople] = useState<Person[]>([]);
	const [isLoading, setIsLoading] = useState(false);
	const [hasError, setHasError] = useState(false);
	const [searchParams] = useSearchParams();
	const query = searchParams.get('query') || '';
	const sex = searchParams.get('sex') || null;
	const centuryParams = searchParams.getAll('centuries') || [];
	const [people, setPeople] = useState<Person[]>([]);
	const [isLoading, setIsLoading] = useState(false);
	const [hasError, setHasError] = useState(false);
	const [searchParams] = useSearchParams();
	const query = searchParams.get('query') || '';
	const sex = searchParams.get('sex') || null;
	const centuryParams = searchParams.getAll('centuries') || [];

[VitaliyBodnar]

Suggested change

	.then(peopleData => setPeople(peopleData))
	.then(setPeople)

[VitaliyBodnar]

Suggested change

	{!!people.length && !!filteredPeople.length && (
	<PeopleTable people={filteredPeople} />
	)}
	{!!people.length && !!filteredPeople.length && (
	<PeopleTable people={filteredPeople} />
	)}

[VitaliyBodnar]

let's make a code readable

Suggested change

	filteredPeople
	= filteredPeople.filter(person => person.name.toLowerCase()
	.includes(query))
	|| filteredPeople.filter(person => person.motherName?.toLowerCase()
	.includes(normalizedQuery))
	|| filteredPeople.filter(person => person.fatherName?.toLowerCase()
	.includes(normalizedQuery));
	}
	filteredPeople
	= filteredPeople.filter(person => {
	return person.name.toLowerCase().includes(query);
	})
	|| filteredPeople.filter(person => {
	return person.motherName?.toLowerCase().includes(normalizedQuery);
	})
	|| filteredPeople.filter(person => {
	return person.fatherName?.toLowerCase().includes(normalizedQuery)
	});
	}

[loralevitska]

Well done)