Merge pull request stakwork#4 from YLeight/fix/1408-people-search-on-…

…person-page

Fix/1408 people search on person page

src/hooks/__tests__/usePeopleSearchHandler.spec.tsx

@@ -0,0 +1,22 @@
+import { mainStore } from 'store/main';
+import { uiStore } from 'store/ui';
+import { usePeopleSearchHandler } from 'hooks';
+import { act, renderHook } from '@testing-library/react-hooks';
+
+jest.mock('store/ui');
+jest.mock('store/main');
+
+describe('People Search Handler Hook', () => {
+  test('Handler should pass his argument to `ui.setSearchText` method and call `main.getPeople` method', async () => {
+    await act(async () => {
+      const { result } = renderHook(() => usePeopleSearchHandler());
+      const handleSearchChange = result.current;
+
+      handleSearchChange('Y');
+
+      expect(uiStore.setSearchText).toBeCalledWith('Y');
+
+      expect(mainStore.getPeople).toBeCalledTimes(1);
+    });
+  });
+});

src/hooks/index.ts

@@ -3,3 +3,4 @@ export * from './useScroll';
 export * from './uiHooks';
 export * from './usePerson';
 export * from './useInViewport';
+export * from './usePeopleSearchHandler';

src/hooks/usePeopleSearchHandler.ts

@@ -0,0 +1,11 @@
+import { useStores } from 'store';
+
+export function usePeopleSearchHandler() {
+  const { ui, main } = useStores();
+
+  return (newSearchText: string) => {
+    ui.setSearchText(newSearchText);
+
+    main.getPeople({ page: 1, resetPage: true });
+  };
+}

src/pages/people/peopleList/PeopleList.tsx

@@ -1,5 +1,5 @@
 import { Button, SearchTextInput } from 'components/common';
-import { usePageScroll } from 'hooks';
+import { usePageScroll, usePeopleSearchHandler } from 'hooks';
 import NoResults from 'people/utils/NoResults';
 import PageLoadSpinner from 'people/utils/PageLoadSpinner';
 import React from 'react';
@@ -68,6 +68,7 @@ export const PeopleList = observer(() => {
   const { peoplePageNumber } = ui || {};
   const history = useHistory();
   const personId = ui.selectedPerson;
+  const handleSearchChange = usePeopleSearchHandler();
 
   async function loadMorePeople(direction: number) {
     let newPage = peoplePageNumber + direction;
@@ -113,9 +114,7 @@ export const PeopleList = observer(() => {
             border: '1px solid #DDE1E5',
             background: '#fff'
           }}
-          onChange={(e: any) => {
-            ui.setSearchText(e);
-          }}
+          onChange={handleSearchChange}
         />
       </DBack>