admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feature: keep callbacks between two renders

Browse Source
This commit is contained in:
Sammy Teillet
2023-04-24 14:49:40 +02:00
parent 2acd98370d
commit a5909bd6ff
2 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
front/src/components/table/table-header/TableHeader.tsx
View File

@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import DropdownButton from './DropdownButton'; import DropdownButton from './DropdownButton';
import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { IconProp } from '@fortawesome/fontawesome-svg-core';
import SortAndFilterBar, { SortType } from './SortAndFilterBar'; import SortAndFilterBar, { SortType } from './SortAndFilterBar';
import { useState } from 'react'; import { useCallback, useState } from 'react';
type OwnProps = { type OwnProps = {
viewName: string; viewName: string;
@ -52,23 +52,29 @@ function TableHeader({
}: OwnProps) { }: OwnProps) {
const [sorts, setSorts] = useState([] as Array<SortType>); const [sorts, setSorts] = useState([] as Array<SortType>);
const onSortItemSelect = (sortId: string) => { const onSortItemSelect = useCallback(
const newSorts = [ (sortId: string) => {
{ const newSorts = [
label: 'Created at', {
order: 'asc', label: 'Created at',
id: sortId, order: 'asc',
} as SortType, id: sortId,
]; } as SortType,
setSorts(newSorts); ];
onSortsUpdate && onSortsUpdate(newSorts); setSorts(newSorts);
}; onSortsUpdate && onSortsUpdate(newSorts);
},
[onSortsUpdate],
);
const onSortItemUnSelect = (sortId: string) => { const onSortItemUnSelect = useCallback(
const newSorts = [] as SortType[]; (sortId: string) => {
setSorts(newSorts); const newSorts = [] as SortType[];
onSortsUpdate && onSortsUpdate(newSorts); setSorts(newSorts);
}; onSortsUpdate && onSortsUpdate(newSorts);
},
[onSortsUpdate],
);
return ( return (
<StyledContainer> <StyledContainer>

6
front/src/pages/people/People.tsx
View File

@ -4,7 +4,7 @@ import Table from '../../components/table/Table';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { peopleColumns } from './people-table'; import { peopleColumns } from './people-table';
import { GraphqlPerson, mapPerson } from '../../interfaces/person.interface'; import { GraphqlPerson, mapPerson } from '../../interfaces/person.interface';
import { useState } from 'react'; import { useCallback, useState } from 'react';
import { SortType } from '../../components/table/table-header/SortAndFilterBar'; import { SortType } from '../../components/table/table-header/SortAndFilterBar';
import { OrderBy, usePeopleQuery } from '../../services/people'; import { OrderBy, usePeopleQuery } from '../../services/people';
@ -31,10 +31,10 @@ function People() {
const [, setSorts] = useState([] as Array<SortType>); const [, setSorts] = useState([] as Array<SortType>);
const [orderBy, setOrderBy] = useState(defaultOrderBy); const [orderBy, setOrderBy] = useState(defaultOrderBy);
const updateSorts = (sorts: Array<SortType>) => { const updateSorts = useCallback((sorts: Array<SortType>) => {
setSorts(sorts); setSorts(sorts);
setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy); setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
}; }, []);
const { data } = usePeopleQuery(orderBy); const { data } = usePeopleQuery(orderBy);