From d077c06d6316715085c928f58ef4aba42c3c7a09 Mon Sep 17 00:00:00 2001
From: Anton Herasymov <antonherasymov2002@gmail.com>
Date: Tue, 10 Oct 2023 04:20:29 +0300
Subject: [PATCH] added no match result for search and fixed click on people

---
 src/api.ts                     | 2 +-
 src/components/Navbar.tsx      | 8 +++++---
 src/components/PageContent.tsx | 4 ++--
 src/components/PeopleList.tsx  | 4 +++-
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/api.ts b/src/api.ts
index 03bd2e428..c799527b8 100644
--- a/src/api.ts
+++ b/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))
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 60670b466..ef4e67eff 100644
--- a/src/components/Navbar.tsx
+++ b/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>
diff --git a/src/components/PageContent.tsx b/src/components/PageContent.tsx
index 504174b95..eff4cad04 100644
--- a/src/components/PageContent.tsx
+++ b/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">
diff --git a/src/components/PeopleList.tsx b/src/components/PeopleList.tsx
index 274f819c6..5762fd1a4 100644
--- a/src/components/PeopleList.tsx
+++ b/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>
   );
 };