commit
693b755b7a
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import { DRAWER_WIDTH } from './components/Sidebar/contants';
|
import { DRAWER_WIDTH } from './components/Sidebar/contants';
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
import { useLocation } from 'react-router-dom';
|
import { useLocation } from 'react-router-dom';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import { Route } from 'config/routing';
|
import { Route } from 'config/routing';
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import React from 'react';
|
|
||||||
import { useAuth } from 'libs/auth';
|
import { useAuth } from 'libs/auth';
|
||||||
|
|
||||||
import { Box, Typography } from '@material-ui/core';
|
import { Box, Typography } from '@material-ui/core';
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { Fragment, useState, memo } from 'react';
|
import { Fragment, useState, memo } from 'react';
|
||||||
import { useLocation, matchPath } from 'react-router-dom';
|
import { useLocation, matchPath } from 'react-router-dom';
|
||||||
import { Route } from './types';
|
import { Route } from './types';
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import React from 'react';
|
|
||||||
import { Route } from './types';
|
import { Route } from './types';
|
||||||
|
|
||||||
import { List } from '@material-ui/core';
|
import { List } from '@material-ui/core';
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import React from 'react';
|
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import { useAuth } from 'libs/auth';
|
import { useAuth } from 'libs/auth';
|
||||||
import { Route } from 'config/routing';
|
import { Route } from 'config/routing';
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useRef } from 'react';
|
import { useRef } from 'react';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
TextField,
|
TextField,
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { forwardRef, RefObject } from 'react';
|
import { forwardRef, RefObject } from 'react';
|
||||||
import {
|
import {
|
||||||
Link as RRDLink,
|
Link as RRDLink,
|
||||||
LinkProps as RRDLinkProps,
|
LinkProps as RRDLinkProps,
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import React from 'react';
|
|
||||||
import { validateRowsPerPage, isObjKey } from './helpers';
|
import { validateRowsPerPage, isObjKey } from './helpers';
|
||||||
import { Action, Column, OrderDirection } from './types';
|
import { Action, Column, OrderDirection } from './types';
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
import { TableRow, TableCell, Typography } from '@material-ui/core';
|
import { TableRow, TableCell, Typography } from '@material-ui/core';
|
||||||
|
|
||||||
function TableEmpty() {
|
function TableEmpty() {
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
TablePagination,
|
TablePagination,
|
||||||
TableRow,
|
TableRow,
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import React from 'react';
|
|
||||||
import { Column, OrderDirection } from './types';
|
import { Column, OrderDirection } from './types';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { Fragment } from 'react';
|
import { Fragment } from 'react';
|
||||||
|
|
||||||
import { TableRow, TableCell } from '@material-ui/core';
|
import { TableRow, TableCell } from '@material-ui/core';
|
||||||
import { Skeleton } from '@material-ui/lab';
|
import { Skeleton } from '@material-ui/lab';
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import React from 'react';
|
|
||||||
import { get, isString, isNumber } from 'lodash';
|
import { get, isString, isNumber } from 'lodash';
|
||||||
import { format } from 'date-fns';
|
import { format } from 'date-fns';
|
||||||
import formatNumber from 'utils/formatNumber';
|
import formatNumber from 'utils/formatNumber';
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import React from 'react';
|
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
|
|
||||||
import { makeStyles } from '@material-ui/core/styles';
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import React from 'react';
|
|
||||||
import { Route } from 'config/routing';
|
import { Route } from 'config/routing';
|
||||||
|
|
||||||
import { makeStyles } from '@material-ui/core/styles';
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
|
|
|
@ -9,6 +9,7 @@ import {
|
||||||
} from 'use-query-params';
|
} from 'use-query-params';
|
||||||
import { useSnackbar } from 'notistack';
|
import { useSnackbar } from 'notistack';
|
||||||
import SortParam, { decodeSort } from 'libs/serialize-query-params/SortParam';
|
import SortParam, { decodeSort } from 'libs/serialize-query-params/SortParam';
|
||||||
|
import { useScrollToElement } from 'libs/hooks';
|
||||||
import useProfessions from './ProfessionsPage.useProfessions';
|
import useProfessions from './ProfessionsPage.useProfessions';
|
||||||
import { validateRowsPerPage } from 'common/Table/helpers';
|
import { validateRowsPerPage } from 'common/Table/helpers';
|
||||||
import {
|
import {
|
||||||
|
@ -73,6 +74,8 @@ const ProfessionsPage = () => {
|
||||||
search
|
search
|
||||||
);
|
);
|
||||||
|
|
||||||
|
useScrollToElement(document.documentElement, [page, limit, sort, search]);
|
||||||
|
|
||||||
useUpdateEffect(() => {
|
useUpdateEffect(() => {
|
||||||
if (selectedProfessions.length > 0) {
|
if (selectedProfessions.length > 0) {
|
||||||
setSelectedProfessions([]);
|
setSelectedProfessions([]);
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { useMemo } from 'react';
|
||||||
import { useQuery } from '@apollo/client';
|
import { useQuery } from '@apollo/client';
|
||||||
import { QUERY_PROFESSIONS } from './queries';
|
import { QUERY_PROFESSIONS } from './queries';
|
||||||
import { Query, QueryProfessionsArgs } from 'libs/graphql/types';
|
import { Query, QueryProfessionsArgs } from 'libs/graphql/types';
|
||||||
|
@ -22,12 +23,11 @@ const useProfessions = (
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
const professions = useMemo(() => data?.professions.items ?? [], [data]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
professions: data?.professions.items ?? [],
|
professions,
|
||||||
get loading() {
|
loading: professions.length === 0 && loading,
|
||||||
return this.professions.length === 0 && loading;
|
|
||||||
},
|
|
||||||
total: data?.professions.total ?? 0,
|
total: data?.professions.total ?? 0,
|
||||||
refetch,
|
refetch,
|
||||||
};
|
};
|
||||||
|
|
|
@ -9,6 +9,7 @@ import {
|
||||||
} from 'use-query-params';
|
} from 'use-query-params';
|
||||||
import { useSnackbar } from 'notistack';
|
import { useSnackbar } from 'notistack';
|
||||||
import SortParam, { decodeSort } from 'libs/serialize-query-params/SortParam';
|
import SortParam, { decodeSort } from 'libs/serialize-query-params/SortParam';
|
||||||
|
import { useScrollToElement } from 'libs/hooks';
|
||||||
import useQualifications from './QualificationsPage.useQualifications';
|
import useQualifications from './QualificationsPage.useQualifications';
|
||||||
import { validateRowsPerPage } from 'common/Table/helpers';
|
import { validateRowsPerPage } from 'common/Table/helpers';
|
||||||
import {
|
import {
|
||||||
|
@ -73,6 +74,8 @@ const QualificationsPage = () => {
|
||||||
search
|
search
|
||||||
);
|
);
|
||||||
|
|
||||||
|
useScrollToElement(document.documentElement, [page, limit, sort, search]);
|
||||||
|
|
||||||
useUpdateEffect(() => {
|
useUpdateEffect(() => {
|
||||||
if (selectedQualifications.length > 0) {
|
if (selectedQualifications.length > 0) {
|
||||||
setSelectedQualifications([]);
|
setSelectedQualifications([]);
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { useMemo } from 'react';
|
||||||
import { useQuery } from '@apollo/client';
|
import { useQuery } from '@apollo/client';
|
||||||
import { QUERY_QUALIFICATIONS } from './queries';
|
import { QUERY_QUALIFICATIONS } from './queries';
|
||||||
import { Query, QueryQualificationsArgs } from 'libs/graphql/types';
|
import { Query, QueryQualificationsArgs } from 'libs/graphql/types';
|
||||||
|
@ -25,12 +26,13 @@ const useQualifications = (
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
const qualifications = useMemo(() => data?.qualifications.items ?? [], [
|
||||||
|
data,
|
||||||
|
]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
qualifications: data?.qualifications.items ?? [],
|
qualifications,
|
||||||
get loading() {
|
loading: qualifications.length === 0 && loading,
|
||||||
return this.qualifications.length === 0 && loading;
|
|
||||||
},
|
|
||||||
total: data?.qualifications.total ?? 0,
|
total: data?.qualifications.total ?? 0,
|
||||||
refetch,
|
refetch,
|
||||||
};
|
};
|
||||||
|
|
|
@ -97,9 +97,7 @@ const useProfessionAutocomplete = ({ qualificationID, control }: Options) => {
|
||||||
|
|
||||||
return {
|
return {
|
||||||
professions,
|
professions,
|
||||||
get loading() {
|
loading: professions.length === 0 && loading,
|
||||||
return this.professions.length === 0 && loading;
|
|
||||||
},
|
|
||||||
isLoadingSuggestions,
|
isLoadingSuggestions,
|
||||||
suggestions,
|
suggestions,
|
||||||
setSearch,
|
setSearch,
|
||||||
|
|
|
@ -9,6 +9,7 @@ import {
|
||||||
} from 'use-query-params';
|
} from 'use-query-params';
|
||||||
import { useSnackbar } from 'notistack';
|
import { useSnackbar } from 'notistack';
|
||||||
import SortParam, { decodeSort } from 'libs/serialize-query-params/SortParam';
|
import SortParam, { decodeSort } from 'libs/serialize-query-params/SortParam';
|
||||||
|
import { useScrollToElement } from 'libs/hooks';
|
||||||
import useQuestions from './QuestionsPage.useQuestions';
|
import useQuestions from './QuestionsPage.useQuestions';
|
||||||
import { validateRowsPerPage } from 'common/Table/helpers';
|
import { validateRowsPerPage } from 'common/Table/helpers';
|
||||||
import {
|
import {
|
||||||
|
@ -71,6 +72,8 @@ const QuestionsPage = () => {
|
||||||
search
|
search
|
||||||
);
|
);
|
||||||
|
|
||||||
|
useScrollToElement(document.documentElement, [page, limit, sort, search]);
|
||||||
|
|
||||||
useUpdateEffect(() => {
|
useUpdateEffect(() => {
|
||||||
if (selectedQuestions.length > 0) {
|
if (selectedQuestions.length > 0) {
|
||||||
setSelectedQuestions([]);
|
setSelectedQuestions([]);
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { useMemo } from 'react';
|
||||||
import { useQuery } from '@apollo/client';
|
import { useQuery } from '@apollo/client';
|
||||||
import { QUERY_QUESTIONS } from './queries';
|
import { QUERY_QUESTIONS } from './queries';
|
||||||
import { Query, QueryQuestionsArgs } from 'libs/graphql/types';
|
import { Query, QueryQuestionsArgs } from 'libs/graphql/types';
|
||||||
|
@ -22,12 +23,11 @@ const useQuestions = (
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
const questions = useMemo(() => data?.questions.items ?? [], [data]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
questions: data?.questions.items ?? [],
|
questions,
|
||||||
get loading() {
|
loading: questions.length === 0 && loading,
|
||||||
return this.questions.length === 0 && loading;
|
|
||||||
},
|
|
||||||
total: data?.questions.total ?? 0,
|
total: data?.questions.total ?? 0,
|
||||||
refetch,
|
refetch,
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { useMemo } from 'react';
|
||||||
import { useQuery } from '@apollo/client';
|
import { useQuery } from '@apollo/client';
|
||||||
import { QUERY_QUALIFICATIONS } from './queries';
|
import { QUERY_QUALIFICATIONS } from './queries';
|
||||||
import { Query, QueryQualificationsArgs } from 'libs/graphql/types';
|
import { Query, QueryQualificationsArgs } from 'libs/graphql/types';
|
||||||
|
@ -8,16 +9,14 @@ const useQualifications = () => {
|
||||||
QueryQualificationsArgs
|
QueryQualificationsArgs
|
||||||
>(QUERY_QUALIFICATIONS, {
|
>(QUERY_QUALIFICATIONS, {
|
||||||
fetchPolicy: 'cache-and-network',
|
fetchPolicy: 'cache-and-network',
|
||||||
variables: {
|
|
||||||
sort: ['id ASC'],
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
const qualifications = useMemo(() => data?.qualifications.items ?? [], [
|
||||||
|
data,
|
||||||
|
]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
qualifications: data?.qualifications.items ?? [],
|
qualifications,
|
||||||
get loading() {
|
loading: qualifications.length === 0 && loading,
|
||||||
return this.qualifications.length === 0 && loading;
|
|
||||||
},
|
|
||||||
total: data?.qualifications.total ?? 0,
|
total: data?.qualifications.total ?? 0,
|
||||||
refetch,
|
refetch,
|
||||||
};
|
};
|
||||||
|
|
|
@ -10,6 +10,7 @@ import {
|
||||||
import { useSnackbar } from 'notistack';
|
import { useSnackbar } from 'notistack';
|
||||||
import SortParam, { decodeSort } from 'libs/serialize-query-params/SortParam';
|
import SortParam, { decodeSort } from 'libs/serialize-query-params/SortParam';
|
||||||
import { useAuth } from 'libs/auth';
|
import { useAuth } from 'libs/auth';
|
||||||
|
import { useScrollToElement } from 'libs/hooks';
|
||||||
import useUsers from './UsersPage.useUsers';
|
import useUsers from './UsersPage.useUsers';
|
||||||
import { validateRowsPerPage } from 'common/Table/helpers';
|
import { validateRowsPerPage } from 'common/Table/helpers';
|
||||||
import {
|
import {
|
||||||
|
@ -77,6 +78,8 @@ const UsersPage = () => {
|
||||||
search
|
search
|
||||||
);
|
);
|
||||||
|
|
||||||
|
useScrollToElement(document.documentElement, [page, limit, sort, search]);
|
||||||
|
|
||||||
useUpdateEffect(() => {
|
useUpdateEffect(() => {
|
||||||
if (selectedUsers.length > 0) {
|
if (selectedUsers.length > 0) {
|
||||||
setSelectedUsers([]);
|
setSelectedUsers([]);
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import { useQuery } from '@apollo/client';
|
import { useQuery } from '@apollo/client';
|
||||||
import { QUERY_USERS } from './queries';
|
import { QUERY_USERS } from './queries';
|
||||||
import { Query, QueryUsersArgs } from 'libs/graphql/types';
|
import { Query, QueryUsersArgs } from 'libs/graphql/types';
|
||||||
|
import { useMemo } from 'react';
|
||||||
|
|
||||||
const useUsers = (
|
const useUsers = (
|
||||||
page: number,
|
page: number,
|
||||||
|
@ -25,12 +26,11 @@ const useUsers = (
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
const users = useMemo(() => data?.users.items ?? [], [data]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
users: data?.users.items ?? [],
|
users,
|
||||||
get loading() {
|
loading: users.length === 0 && loading,
|
||||||
return this.users.length === 0 && loading;
|
|
||||||
},
|
|
||||||
total: data?.users.total ?? 0,
|
total: data?.users.total ?? 0,
|
||||||
refetch,
|
refetch,
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import React from 'react';
|
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import { BrowserRouter, Route } from 'react-router-dom';
|
import { BrowserRouter, Route } from 'react-router-dom';
|
||||||
import { ApolloProvider } from '@apollo/client';
|
import { ApolloProvider } from '@apollo/client';
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useMemo, useState, useEffect } from 'react';
|
import { useMemo, useState, useEffect } from 'react';
|
||||||
import { useApolloClient } from '@apollo/client';
|
import { useApolloClient } from '@apollo/client';
|
||||||
import { isFunction } from 'lodash';
|
import { isFunction } from 'lodash';
|
||||||
import { context as Context } from './context';
|
import { context as Context } from './context';
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import React from 'react';
|
import { createContext, useContext } from 'react';
|
||||||
import { AuthContext } from './types';
|
import { AuthContext } from './types';
|
||||||
import TokenStorage from '../tokenstorage/TokenStorage';
|
import TokenStorage from '../tokenstorage/TokenStorage';
|
||||||
|
|
||||||
const ctx = React.createContext<AuthContext>({
|
const ctx = createContext<AuthContext>({
|
||||||
tokenStorage: new TokenStorage(),
|
tokenStorage: new TokenStorage(),
|
||||||
signIn: () => new Promise(resolve => resolve(null)),
|
signIn: () => new Promise(resolve => resolve(null)),
|
||||||
signOut: () => new Promise(resolve => resolve()),
|
signOut: () => new Promise(resolve => resolve()),
|
||||||
|
@ -12,7 +12,7 @@ const ctx = React.createContext<AuthContext>({
|
||||||
ctx.displayName = 'AuthContext';
|
ctx.displayName = 'AuthContext';
|
||||||
|
|
||||||
const useAuth = (): AuthContext => {
|
const useAuth = (): AuthContext => {
|
||||||
return React.useContext(ctx);
|
return useContext(ctx);
|
||||||
};
|
};
|
||||||
|
|
||||||
export { ctx as context, useAuth };
|
export { ctx as context, useAuth };
|
||||||
|
|
2
src/libs/hooks/index.ts
Normal file
2
src/libs/hooks/index.ts
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
export { default as useScrollToElement } from './useScrollToElement';
|
||||||
|
export type { UseScrollToElementOptions } from './useScrollToElement';
|
30
src/libs/hooks/useScrollToElement.ts
Normal file
30
src/libs/hooks/useScrollToElement.ts
Normal file
|
@ -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
Block a user