feat: add search component in directory

src/components/SearchField/SearchField.tsx

@@ -0,0 +1,22 @@
+import React, { FC, FormEvent } from 'react';
+
+import { Icon, TextField } from '@orfium/ictinus';
+
+interface Props {
+  placeholder: string;
+  onSearch: (term: string) => void;
+}
+
+const SearchField: FC<Props> = ({ onSearch, placeholder }) => {
+  return (
+    <TextField
+      data-testid="search-field"
+      styleType={'filled'}
+      placeholder={placeholder}
+      leftIcon={<Icon name={'search'} color={'black'} />}
+      onInput={(event: FormEvent<HTMLInputElement>) => onSearch(event?.currentTarget?.value)}
+    />
+  );
+};
+
+export default SearchField;

src/components/SearchField/index.ts

@@ -0,0 +1 @@
+export { default } from './SearchField';

src/hooks/api/userHooks.ts

@@ -19,7 +19,6 @@ export const useSignIn = () => {
 
   return useMutation<LoginResponse, AxiosError, LoginFormType>(
     (params) => {
-      console.log(params);
       const { request } = userAPI.single.signIn({
         username: params.username,
         password: params.password,

src/pages/Layout/Layout.tsx

@@ -1,20 +1,30 @@
 /** @jsxImportSource @emotion/react */
-import React from 'react';
+import React, { useState } from 'react';
 
 import { IconButton } from '@orfium/ictinus';
 import { TopBar } from 'App.style';
 import { useResponsiveLayout } from 'hooks/useResponsiveSidebar';
+import { debounce } from 'lodash';
+import { useHistory } from 'react-router';
 
 import Drawer from '../../components/Drawer';
+import SearchField from '../../components/SearchField';
 import { Header, Main, MainContainer, SideNav } from './Layout.style';
 
 interface Props {
   /** Component to load */
-  component?: React.FC;
+  component?: React.FC<{ searchTerm?: string }>;
 }
 
 const Layout: React.FC<Props> = ({ component: Component }) => {
   const { responsiveProps, expanded, setExpanded } = useResponsiveLayout();
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const history = useHistory();
+
+  const handleSearchTerm = (term: string) => {
+    setSearchTerm(term);
+  };
 
   return (
     <MainContainer {...responsiveProps}>
@@ -28,7 +38,12 @@ const Layout: React.FC<Props> = ({ component: Component }) => {
             type="primary"
             onClick={() => setExpanded((prevState) => !prevState)}
           />
-          <span>Tanzanian MHP Registry</span>
+          {history.location.pathname === '/patients' && (
+            <SearchField
+              placeholder={'Search by name, gender, patient ID...'}
+              onSearch={debounce(handleSearchTerm, 200)}
+            />
+          )}
         </TopBar>
       </Header>
       <SideNav>
@@ -57,7 +72,9 @@ const Layout: React.FC<Props> = ({ component: Component }) => {
           ]}
         />
       </SideNav>
-      <Main css={{ flexDirection: 'column' }}>{Component && <Component />}</Main>
+      <Main css={{ flexDirection: 'column' }}>
+        {Component && <Component searchTerm={searchTerm} />}
+      </Main>
     </MainContainer>
   );
 };

src/pages/PatientDirectory/PatientDirectory.tsx

@@ -20,9 +20,7 @@ import {
 } from './PatientDirectory.style';
 import { SortingOptionsType } from './types';
 
-const PatientDirectory: React.FC = () => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [searchTerm, setSearchTerm] = useState<string>('');
+const PatientDirectory: React.FC<{ searchTerm?: string }> = ({ searchTerm }) => {
   const [hospitalId, setHospitalId] = useState<number>();
 
   const [sortingOption, setSortingOption] = useState<SortingOptionsType>('name');