diff --git a/apps/crn-frontend/src/analytics/leadership/Leadership.tsx b/apps/crn-frontend/src/analytics/leadership/Leadership.tsx index c83aca1adf..678e02ee40 100644 --- a/apps/crn-frontend/src/analytics/leadership/Leadership.tsx +++ b/apps/crn-frontend/src/analytics/leadership/Leadership.tsx @@ -8,7 +8,7 @@ import { analytics } from '@asap-hub/routing'; import { FC, useState } from 'react'; import { useHistory, useParams } from 'react-router-dom'; -import { usePagination, usePaginationParams } from '../../hooks'; +import { usePagination, usePaginationParams, useSearch } from '../../hooks'; import { useAnalyticsLeadership } from './state'; type MetricResponse = { @@ -66,11 +66,12 @@ const Leadership: FC> = () => { const { currentPage, pageSize } = usePaginationParams(); + const { debouncedSearchQuery, searchQuery, setSearchQuery } = useSearch(); const { items, total } = useAnalyticsLeadership({ sort, currentPage, pageSize, - searchQuery: '', + searchQuery: debouncedSearchQuery, filters: new Set(), }); @@ -80,6 +81,8 @@ const Leadership: FC> = () => { ; total: number } | Error | undefined, - Pick + Pick >({ key: 'analyticsLeadershipIndex', default: undefined, @@ -34,7 +34,7 @@ export const analyticsLeadershipListState = atomFamily< export const analyticsLeadershipState = selectorFamily< ListAnalyticsTeamLeadershipResponse | Error | undefined, - Pick + Pick >({ key: 'teams', get: diff --git a/packages/react-components/src/templates/AnalyticsLeadershipPageBody.tsx b/packages/react-components/src/templates/AnalyticsLeadershipPageBody.tsx index 80dfbf051d..52cd0f5f5f 100644 --- a/packages/react-components/src/templates/AnalyticsLeadershipPageBody.tsx +++ b/packages/react-components/src/templates/AnalyticsLeadershipPageBody.tsx @@ -4,10 +4,10 @@ import { } from '@asap-hub/model'; import { css } from '@emotion/react'; import { ComponentProps } from 'react'; -import { PageControls } from '..'; +import { PageControls, SearchField } from '..'; import { Dropdown, Headline3, Paragraph, Subtitle } from '../atoms'; import { LeadershipMembershipTable } from '../organisms'; -import { perRem } from '../pixels'; +import { rem } from '../pixels'; type MetricOption = 'working-group' | 'interest-group'; type MetricData = { @@ -41,20 +41,33 @@ type LeadershipAndMembershipAnalyticsProps = ComponentProps< setSortingDirection: React.Dispatch< React.SetStateAction >; + searchQuery: string; + onChangeSearch: (newSearchQuery: string) => void; }; const metricDropdownStyles = css({ - marginBottom: `${48 / perRem}em`, + marginBottom: rem(48), }); const tableHeaderStyles = css({ - paddingBottom: `${24 / perRem}em`, + paddingBottom: rem(24), }); const pageControlsStyles = css({ justifySelf: 'center', - paddingTop: `${36 / perRem}em`, - paddingBottom: `${36 / perRem}em`, + paddingTop: rem(36), + paddingBottom: rem(36), +}); + +const searchContainerStyles = css({ + display: 'flex', + gap: rem(18), + alignItems: 'center', + paddingBottom: rem(33), +}); + +const searchStyles = css({ + flexGrow: 1, }); const LeadershipPageBody: React.FC = ({ @@ -65,6 +78,8 @@ const LeadershipPageBody: React.FC = ({ metric, setMetric, data, + searchQuery, + onChangeSearch, ...pageControlProps }) => (
@@ -84,6 +99,16 @@ const LeadershipPageBody: React.FC = ({ membership role within a Working Group. +
+ Teams: + + + +
{ setSort: jest.fn(), sortingDirection: initialSortingDirection, setSortingDirection: jest.fn(), + searchQuery: '', + onChangeSearch: jest.fn(), }; it('renders interest group tab', () => { const { getAllByText } = render( diff --git a/packages/react-components/src/templates/__tests__/LeadershipPageBody.test.tsx b/packages/react-components/src/templates/__tests__/LeadershipPageBody.test.tsx index 7792d197b2..12276729e4 100644 --- a/packages/react-components/src/templates/__tests__/LeadershipPageBody.test.tsx +++ b/packages/react-components/src/templates/__tests__/LeadershipPageBody.test.tsx @@ -12,6 +12,8 @@ const pageControlProps = { it('renders the selected metric', () => { render( {}}