add a new hook: useScrollElement, memoize items in most of the hooks
This commit is contained in:
parent
590add5070
commit
a78ddf3ca2
|
@ -9,6 +9,7 @@ import {
|
|||
} from 'use-query-params';
|
||||
import { useSnackbar } from 'notistack';
|
||||
import SortParam, { decodeSort } from 'libs/serialize-query-params/SortParam';
|
||||
import { useScrollToElement } from 'libs/hooks';
|
||||
import useProfessions from './ProfessionsPage.useProfessions';
|
||||
import { validateRowsPerPage } from 'common/Table/helpers';
|
||||
import {
|
||||
|
@ -73,6 +74,8 @@ const ProfessionsPage = () => {
|
|||
search
|
||||
);
|
||||
|
||||
useScrollToElement(document.documentElement, [page, limit, sort, search]);
|
||||
|
||||
useUpdateEffect(() => {
|
||||
if (selectedProfessions.length > 0) {
|
||||
setSelectedProfessions([]);
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { useMemo } from 'react';
|
||||
import { useQuery } from '@apollo/client';
|
||||
import { QUERY_PROFESSIONS } from './queries';
|
||||
import { Query, QueryProfessionsArgs } from 'libs/graphql/types';
|
||||
|
@ -22,12 +23,11 @@ const useProfessions = (
|
|||
},
|
||||
},
|
||||
});
|
||||
const professions = useMemo(() => data?.professions.items ?? [], [data]);
|
||||
|
||||
return {
|
||||
professions: data?.professions.items ?? [],
|
||||
get loading() {
|
||||
return this.professions.length === 0 && loading;
|
||||
},
|
||||
professions,
|
||||
loading: professions.length === 0 && loading,
|
||||
total: data?.professions.total ?? 0,
|
||||
refetch,
|
||||
};
|
||||
|
|
|
@ -9,6 +9,7 @@ import {
|
|||
} from 'use-query-params';
|
||||
import { useSnackbar } from 'notistack';
|
||||
import SortParam, { decodeSort } from 'libs/serialize-query-params/SortParam';
|
||||
import { useScrollToElement } from 'libs/hooks';
|
||||
import useQualifications from './QualificationsPage.useQualifications';
|
||||
import { validateRowsPerPage } from 'common/Table/helpers';
|
||||
import {
|
||||
|
@ -73,6 +74,8 @@ const QualificationsPage = () => {
|
|||
search
|
||||
);
|
||||
|
||||
useScrollToElement(document.documentElement, [page, limit, sort, search]);
|
||||
|
||||
useUpdateEffect(() => {
|
||||
if (selectedQualifications.length > 0) {
|
||||
setSelectedQualifications([]);
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { useMemo } from 'react';
|
||||
import { useQuery } from '@apollo/client';
|
||||
import { QUERY_QUALIFICATIONS } from './queries';
|
||||
import { Query, QueryQualificationsArgs } from 'libs/graphql/types';
|
||||
|
@ -25,12 +26,13 @@ const useQualifications = (
|
|||
},
|
||||
},
|
||||
});
|
||||
const qualifications = useMemo(() => data?.qualifications.items ?? [], [
|
||||
data,
|
||||
]);
|
||||
|
||||
return {
|
||||
qualifications: data?.qualifications.items ?? [],
|
||||
get loading() {
|
||||
return this.qualifications.length === 0 && loading;
|
||||
},
|
||||
qualifications,
|
||||
loading: qualifications.length === 0 && loading,
|
||||
total: data?.qualifications.total ?? 0,
|
||||
refetch,
|
||||
};
|
||||
|
|
|
@ -9,6 +9,7 @@ import {
|
|||
} from 'use-query-params';
|
||||
import { useSnackbar } from 'notistack';
|
||||
import SortParam, { decodeSort } from 'libs/serialize-query-params/SortParam';
|
||||
import { useScrollToElement } from 'libs/hooks';
|
||||
import useQuestions from './QuestionsPage.useQuestions';
|
||||
import { validateRowsPerPage } from 'common/Table/helpers';
|
||||
import {
|
||||
|
@ -71,6 +72,8 @@ const QuestionsPage = () => {
|
|||
search
|
||||
);
|
||||
|
||||
useScrollToElement(document.documentElement, [page, limit, sort, search]);
|
||||
|
||||
useUpdateEffect(() => {
|
||||
if (selectedQuestions.length > 0) {
|
||||
setSelectedQuestions([]);
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { useMemo } from 'react';
|
||||
import { useQuery } from '@apollo/client';
|
||||
import { QUERY_QUESTIONS } from './queries';
|
||||
import { Query, QueryQuestionsArgs } from 'libs/graphql/types';
|
||||
|
@ -22,12 +23,11 @@ const useQuestions = (
|
|||
},
|
||||
},
|
||||
});
|
||||
const questions = useMemo(() => data?.questions.items ?? [], [data]);
|
||||
|
||||
return {
|
||||
questions: data?.questions.items ?? [],
|
||||
get loading() {
|
||||
return this.questions.length === 0 && loading;
|
||||
},
|
||||
questions,
|
||||
loading: questions.length === 0 && loading,
|
||||
total: data?.questions.total ?? 0,
|
||||
refetch,
|
||||
};
|
||||
|
|
|
@ -10,6 +10,7 @@ import {
|
|||
import { useSnackbar } from 'notistack';
|
||||
import SortParam, { decodeSort } from 'libs/serialize-query-params/SortParam';
|
||||
import { useAuth } from 'libs/auth';
|
||||
import { useScrollToElement } from 'libs/hooks';
|
||||
import useUsers from './UsersPage.useUsers';
|
||||
import { validateRowsPerPage } from 'common/Table/helpers';
|
||||
import {
|
||||
|
@ -77,6 +78,8 @@ const UsersPage = () => {
|
|||
search
|
||||
);
|
||||
|
||||
useScrollToElement(document.documentElement, [page, limit, sort, search]);
|
||||
|
||||
useUpdateEffect(() => {
|
||||
if (selectedUsers.length > 0) {
|
||||
setSelectedUsers([]);
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { useQuery } from '@apollo/client';
|
||||
import { QUERY_USERS } from './queries';
|
||||
import { Query, QueryUsersArgs } from 'libs/graphql/types';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
const useUsers = (
|
||||
page: number,
|
||||
|
@ -25,12 +26,11 @@ const useUsers = (
|
|||
},
|
||||
},
|
||||
});
|
||||
const users = useMemo(() => data?.users.items ?? [], [data]);
|
||||
|
||||
return {
|
||||
users: data?.users.items ?? [],
|
||||
get loading() {
|
||||
return this.users.length === 0 && loading;
|
||||
},
|
||||
users,
|
||||
loading: users.length === 0 && loading,
|
||||
total: data?.users.total ?? 0,
|
||||
refetch,
|
||||
};
|
||||
|
|
|
@ -0,0 +1,2 @@
|
|||
export { default as useScrollToElement } from './useScrollToElement';
|
||||
export type { UseScrollToElementOptions } from './useScrollToElement';
|
|
@ -0,0 +1,30 @@
|
|||
import { DependencyList, useRef } from 'react';
|
||||
import { useUpdateEffect } from 'react-use';
|
||||
|
||||
export interface UseScrollToElementOptions extends ScrollIntoViewOptions {
|
||||
skip?: boolean;
|
||||
}
|
||||
|
||||
const useScrollToElement = (
|
||||
element: HTMLElement,
|
||||
deps: DependencyList,
|
||||
opts: UseScrollToElementOptions = {
|
||||
behavior: 'auto',
|
||||
block: 'start',
|
||||
skip: false,
|
||||
}
|
||||
) => {
|
||||
const skip = useRef(opts.skip);
|
||||
|
||||
useUpdateEffect(() => {
|
||||
skip.current = opts.skip;
|
||||
}, [opts.skip]);
|
||||
|
||||
useUpdateEffect(() => {
|
||||
if (!skip.current) {
|
||||
element.scrollIntoView(opts);
|
||||
}
|
||||
}, deps);
|
||||
};
|
||||
|
||||
export default useScrollToElement;
|
Reference in New Issue