fix(people): sync filtration and searching with usePeopleFilters hook

Fix: #1
stakwork · Jan 25, 2024 · d4cb4d4 · d4cb4d4
1 parent 5816a01
commit d4cb4d4
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 58 deletions.
diff --git a/src/people/interfaces.ts b/src/people/interfaces.ts
@@ -204,7 +204,7 @@ export interface SvgMaskProps {
 }
 
 export interface PersonProps extends Person {
-  hideActions: boolean;
+  hideActions?: boolean;
   small: boolean;
   id: number;
   img: string;

diff --git a/src/people/main/Body.tsx b/src/people/main/Body.tsx
@@ -2,15 +2,15 @@ import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
 import styled from 'styled-components';
-import { EuiLoadingSpinner, EuiGlobalToastList } from '@elastic/eui';
+import { EuiGlobalToastList } from '@elastic/eui';
 import PeopleHeader from 'people/widgetViews/PeopleHeader';
-import { Person as PersonType } from 'store/main';
-import filterByCodingLanguage from 'people/utils/filterPeople';
+import type { Person } from 'store/main';
+import usePeopleFilters from 'hooks/usePeopleFilters';
 import { SearchTextInput } from '../../components/common';
 import { colors } from '../../config/colors';
-import { useFuse, useIsMobile, usePageScroll, useScreenWidth } from '../../hooks';
+import { useIsMobile, usePageScroll, useScreenWidth } from '../../hooks';
 import { useStores } from '../../store';
-import Person from '../../pages/people/Person';
+import PersonCard from '../../pages/people/Person';
 import NoResults from '../utils/NoResults';
 import PageLoadSpinner from '../utils/PageLoadSpinner';
 import StartUpModal from '../utils/StartUpModal';
@@ -51,16 +51,13 @@ export const Spacer = styled.div`
 
 function BodyComponent() {
   const { main, ui } = useStores();
-  const [loading, setLoading] = useState(true);
   const screenWidth = useScreenWidth();
   const [openStartUpModel, setOpenStartUpModel] = useState<boolean>(false);
-  const [checkboxIdToSelectedMapLanguage, setCheckboxIdToSelectedMapLanguage] = useState({});
-  const [filterResult, setFilterResult] = useState<PersonType[]>(main.people);
+  const { codingLanguageFilter, handleCodingLanguageFilterChange, people } = usePeopleFilters();
   const closeModal = () => setOpenStartUpModel(false);
   const { peoplePageNumber } = ui;
   const history = useHistory();
   const isMobile = useIsMobile();
-  const people = useFuse(main.people, ['owner_alias']).filter((f: any) => !f.hide) || [];
   async function loadMore(direction: number) {
     let currentPage = 1;
     currentPage = peoplePageNumber;
@@ -77,16 +74,6 @@ function BodyComponent() {
   const loadBackwardFunc = () => loadMore(-1);
   const { loadingBottom, handleScroll } = usePageScroll(loadForwardFunc, loadBackwardFunc);
 
-  const onChangeLanguage = (optionId: any) => {
-    const newCheckboxIdToSelectedMapLanguage = {
-      ...checkboxIdToSelectedMapLanguage,
-      ...{
-        [optionId]: !checkboxIdToSelectedMapLanguage[optionId]
-      }
-    };
-    setCheckboxIdToSelectedMapLanguage(newCheckboxIdToSelectedMapLanguage);
-  };
-
   const toastsEl = (
     <EuiGlobalToastList
       toasts={ui.toasts}
@@ -101,33 +88,13 @@ function BodyComponent() {
     }
   }, [main, ui.meInfo]);
 
-  useEffect(() => {
-    setFilterResult(filterByCodingLanguage(main.people, checkboxIdToSelectedMapLanguage));
-  }, [checkboxIdToSelectedMapLanguage]);
-
-  // update search
-  useEffect(() => {
-    (async () => {
-      await main.getPeople({ page: 1, resetPage: true });
-      setLoading(false);
-    })();
-  }, [ui.searchText, ui.selectingPerson, main]);
-
   function selectPerson(id: number, unique_name: string, pubkey: string) {
     ui.setSelectedPerson(id);
     ui.setSelectingPerson(id);
 
     history.push(`/p/${pubkey}`);
   }
 
-  if (loading) {
-    return (
-      <Body isMobile={isMobile} style={{ justifyContent: 'center', alignItems: 'center' }}>
-        <EuiLoadingSpinner size="xl" />
-      </Body>
-    );
-  }
-
   return (
     <Body
       isMobile={isMobile}
@@ -137,8 +104,8 @@ function BodyComponent() {
     >
       <div className="header">
         <PeopleHeader
-          onChangeLanguage={onChangeLanguage}
-          checkboxIdToSelectedMapLanguage={checkboxIdToSelectedMapLanguage}
+          onChangeLanguage={handleCodingLanguageFilterChange}
+          checkboxIdToSelectedMapLanguage={codingLanguageFilter}
         />
 
         <SearchTextInput
@@ -154,22 +121,24 @@ function BodyComponent() {
             background: color.grayish.G600
           }}
           onChange={(e: any) => {
+            // @TODO usePeopleSearchHandler
             ui.setSearchText(e);
+            main.getPeople({ page: 1, resetPage: true });
           }}
         />
       </div>
       <div className="content">
-        {(ui.searchText ? people : filterResult).map((t: any) => (
-          <Person
-            {...t}
-            key={t.id}
+        {people.map((p: Person) => (
+          <PersonCard
+            {...p}
+            key={p.id}
             small={isMobile}
             squeeze={screenWidth < 1420}
-            selected={ui.selectedPerson === t.id}
+            selected={ui.selectedPerson === p.id}
             select={selectPerson}
           />
         ))}
-        {!(ui.searchText ? people : filterResult)?.length && <NoResults />}
+        {!people.length && <NoResults />}
         <PageLoadSpinner noAnimate show={loadingBottom} />
       </div>
 

diff --git a/src/people/utils/__test__/filterValidation.spec.ts b/src/people/utils/__test__/filterValidation.spec.ts
@@ -1,3 +1,4 @@
+import { CodingLanguageFilter } from 'hooks/usePeopleFilters';
 import { bountyHeaderFilter, bountyHeaderLanguageFilter } from '../filterValidation';
 import filterByCodingLanguage from '../filterPeople';
 import { users } from '../__test__/__mockData__/users';
@@ -51,19 +52,27 @@ describe('testing filters', () => {
   });
   describe('peopleHeaderCodingLanguageFilters', () => {
     test('match', () => {
-      expect(filterByCodingLanguage(users, { Typescript: true })).toStrictEqual([users[0]]);
+      expect(
+        filterByCodingLanguage(users, { Typescript: true } as CodingLanguageFilter)
+      ).toStrictEqual([users[0]]);
     });
     test('no_match', () => {
-      expect(filterByCodingLanguage(users, { Rust: true })).toStrictEqual([]);
+      expect(filterByCodingLanguage(users, { Rust: true } as CodingLanguageFilter)).toStrictEqual(
+        []
+      );
     });
     test('no filters', () => {
-      expect(filterByCodingLanguage(users, {})).toEqual(users);
+      expect(filterByCodingLanguage(users, {} as CodingLanguageFilter)).toEqual(users);
     });
     test('false filters', () => {
-      expect(filterByCodingLanguage(users, { PHP: false, MySQL: false })).toStrictEqual(users);
+      expect(
+        filterByCodingLanguage(users, { PHP: false, MySQL: false } as CodingLanguageFilter)
+      ).toStrictEqual(users);
     });
     test('no users', () => {
-      expect(filterByCodingLanguage([], { Typescript: true })).toStrictEqual([]);
+      expect(
+        filterByCodingLanguage([], { Typescript: true } as CodingLanguageFilter)
+      ).toStrictEqual([]);
     });
   });
 });
diff --git a/src/people/utils/filterPeople.ts b/src/people/utils/filterPeople.ts
@@ -1,10 +1,7 @@
+import { CodingLanguageFilter } from 'hooks/usePeopleFilters';
 import { Person } from 'store/main';
 
-interface CodingLanguage {
-  [language: string]: boolean;
-}
-
-const filterByCodingLanguage = (users: Person[], codingLanguages: CodingLanguage) => {
+const filterByCodingLanguage = (users: Person[], codingLanguages: CodingLanguageFilter) => {
   const requiredLanguages = Object.keys(codingLanguages).filter(
     (key: string) => codingLanguages[key]
   );