6a8a8f0728
* Add filter search logic WIP Filter search Implement filters test: fix sorts tests test: fix filter test feature: search person and display firstname in results feature: fix test for filter component test: mock search filters refactor: create a useSearch hook refactor: move debounce in useSearch and reset status of filter selection feature: debounce set filters refactor: remove useless setSorts feature: add where variable to people query feature: strongly type Filters feature: update WhereTemplate method feature: implement filtering on full name feature: type the useSearch hook feature: use where reducer refactor: create a type for readability feature: use query and mapper from filters feature: implement filter by company feature: search filter results on filter select feature: add loading and results to search results in filters refactor: move render search results in a function feature: display a LOADING when it loads feature: split search input and search filter for different debounce refactor: remove some warnings refactor: remove some warnings * Write test 1 * Write test 2 * test: useSearch is tested * test: update names of default people data * test: add a filter search * Test 3 * Fix tests --------- Co-authored-by: Charles Bochet <charles@twenty.com>
87 lines
2.0 KiB
TypeScript
87 lines
2.0 KiB
TypeScript
import { QueryResult, gql, useQuery } from '@apollo/client';
|
|
import { GraphqlQueryPerson } from '../../interfaces/person.interface';
|
|
import {
|
|
Order_By,
|
|
People_Bool_Exp,
|
|
People_Order_By,
|
|
} from '../../generated/graphql';
|
|
import {
|
|
SelectedFilterType,
|
|
SelectedSortType,
|
|
} from '../../components/table/table-header/interface';
|
|
|
|
export type OrderByFields = keyof People_Order_By | 'fullname' | 'company_name';
|
|
|
|
export type PeopleSelectedSortType = SelectedSortType<OrderByFields>;
|
|
|
|
const mapOrder = (order: 'asc' | 'desc'): Order_By => {
|
|
return order === 'asc' ? Order_By.Asc : Order_By.Desc;
|
|
};
|
|
|
|
export const reduceFiltersToWhere = <T>(
|
|
filters: Array<SelectedFilterType<T>>,
|
|
): T => {
|
|
const where = filters.reduce((acc, filter) => {
|
|
const { where } = filter;
|
|
return { ...acc, ...where };
|
|
}, {} as T);
|
|
return where;
|
|
};
|
|
|
|
export const reduceSortsToOrderBy = (
|
|
sorts: Array<PeopleSelectedSortType>,
|
|
): People_Order_By[] => {
|
|
const mappedSorts = sorts.reduce((acc, sort) => {
|
|
const id = sort.key;
|
|
const order = mapOrder(sort.order);
|
|
if (id === 'fullname') {
|
|
acc['firstname'] = order;
|
|
acc['lastname'] = order;
|
|
} else if (id === 'company_name') {
|
|
acc['company'] = { name: order };
|
|
} else {
|
|
acc[id] = order;
|
|
}
|
|
return acc;
|
|
}, {} as People_Order_By);
|
|
return [mappedSorts];
|
|
};
|
|
|
|
export const GET_PEOPLE = gql`
|
|
query GetPeople(
|
|
$orderBy: [people_order_by!]
|
|
$where: people_bool_exp
|
|
$limit: Int
|
|
) {
|
|
people(order_by: $orderBy, where: $where, limit: $limit) {
|
|
id
|
|
phone
|
|
email
|
|
city
|
|
firstname
|
|
lastname
|
|
created_at
|
|
company {
|
|
id
|
|
name
|
|
domain_name
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
export function usePeopleQuery(
|
|
orderBy: People_Order_By[],
|
|
where: People_Bool_Exp,
|
|
): QueryResult<{ people: GraphqlQueryPerson[] }> {
|
|
return useQuery<{ people: GraphqlQueryPerson[] }>(GET_PEOPLE, {
|
|
variables: { orderBy, where },
|
|
});
|
|
}
|
|
|
|
export const defaultOrderBy: People_Order_By[] = [
|
|
{
|
|
created_at: Order_By.Desc,
|
|
},
|
|
];
|