added no match result for search and fixed click on people

src/api.ts

@@ -7,7 +7,7 @@ function wait(delay: number) {
   return new Promise(resolve => setTimeout(resolve, delay));
 }
 
-export function getPeople(): Promise<Person[]> {
+export async function getPeople(): Promise<Person[]> {
   // keep this delay for testing purpose
   return wait(500)
     .then(() => fetch(API_URL))

src/components/Navbar.tsx

@@ -1,13 +1,15 @@
 import classNames from 'classnames';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useSearchParams } from 'react-router-dom';
 
-export const NavBar = () => {
+export const Navbar = () => {
   const getLinkClass = (
     { isActive }: { isActive: boolean },
   ) => classNames('navbar-item', {
     'has-background-grey-lighter': isActive,
   });
 
+  const [params] = useSearchParams();
+
   return (
     <nav
       data-cy="nav"
@@ -26,7 +28,7 @@ export const NavBar = () => {
 
           <NavLink
             className={getLinkClass}
-            to="/people"
+            to={`./people?${params.toString()}`}
           >
             People
           </NavLink>

src/components/PageContent.tsx

@@ -1,10 +1,10 @@
 import { Outlet } from 'react-router-dom';
-import { NavBar } from './NavBar';
+import { Navbar } from './Navbar';
 
 export const PageContent = () => {
   return (
     <>
-      <NavBar />
+      <Navbar />
 
       <main className="section">
         <div className="container">

src/components/PeopleList.tsx

@@ -55,7 +55,7 @@ export const PeopleList:React.FC<Props> = ({ people }) => {
     order ? -1 : 1,
   );
 
-  return (
+  return sortedPeople.length ? (
     <table
       data-cy="peopleTable"
       className="
@@ -106,5 +106,7 @@ export const PeopleList:React.FC<Props> = ({ people }) => {
         ))}
       </tbody>
     </table>
+  ) : (
+    <p>There are no people matching the current search criteria</p>
   );
 };