Merge pull request #4 from zdam-egzamin-zawodowy/refactor

Refactor

src/common/AppLayout/AppLayout.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import clsx from 'clsx';
 import { DRAWER_WIDTH } from './components/Sidebar/contants';
 

src/common/AppLayout/components/Sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import clsx from 'clsx';
 import { Route } from 'config/routing';

src/common/AppLayout/components/Sidebar/components/CurrentUser/CurrentUser.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useAuth } from 'libs/auth';
 
 import { Box, Typography } from '@material-ui/core';

src/common/AppLayout/components/Sidebar/components/Nav/ListItem.tsx

@@ -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 { Route } from './types';
 

src/common/AppLayout/components/Sidebar/components/Nav/Nav.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Route } from './types';
 
 import { List } from '@material-ui/core';

src/common/AppLayout/components/TopBar/TopBar.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import clsx from 'clsx';
 import { useAuth } from 'libs/auth';
 import { Route } from 'config/routing';

src/common/Form/SearchInput.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
 import {
   TextField,

src/common/Link/Link.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, RefObject } from 'react';
+import { forwardRef, RefObject } from 'react';
 import {
   Link as RRDLink,
   LinkProps as RRDLinkProps,

src/common/Table/Table.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { validateRowsPerPage, isObjKey } from './helpers';
 import { Action, Column, OrderDirection } from './types';
 

src/common/Table/TableEmpty.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { TableRow, TableCell, Typography } from '@material-ui/core';
 
 function TableEmpty() {

src/common/Table/TableFooter.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   TablePagination,
   TableRow,

src/common/Table/TableHead.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Column, OrderDirection } from './types';
 
 import {

src/common/Table/TableLoading.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 
 import { TableRow, TableCell } from '@material-ui/core';
 import { Skeleton } from '@material-ui/lab';

src/common/Table/TableRow.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { get, isString, isNumber } from 'lodash';
 import { format } from 'date-fns';
 import formatNumber from 'utils/formatNumber';

src/common/Table/TableToolbar.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import clsx from 'clsx';
 
 import { makeStyles } from '@material-ui/core/styles';

src/features/NotFoundPage/NotFoundPage.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Route } from 'config/routing';
 
 import { makeStyles } from '@material-ui/core/styles';

src/features/ProfessionsPage/ProfessionsPage.tsx

@@ -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([]);

src/features/ProfessionsPage/ProfessionsPage.useProfessions.ts

@@ -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,
   };

src/features/QualificationsPage/QualificationsPage.tsx

@@ -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([]);

src/features/QualificationsPage/QualificationsPage.useQualifications.ts

@@ -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,
   };

src/features/QualificationsPage/components/FormDialog/FormDialog.useProfessionAutocomplete.js.ts

@@ -97,9 +97,7 @@ const useProfessionAutocomplete = ({ qualificationID, control }: Options) => {
 
   return {
     professions,
-    get loading() {
-      return this.professions.length === 0 && loading;
-    },
+    loading: professions.length === 0 && loading,
     isLoadingSuggestions,
     suggestions,
     setSearch,

src/features/QuestionsPage/QuestionsPage.tsx

@@ -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([]);

src/features/QuestionsPage/QuestionsPage.useQuestions.ts

@@ -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,
   };

src/features/QuestionsPage/components/FormDialog/FormDialog.useQualifications.ts

@@ -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';
@@ -8,16 +9,14 @@ const useQualifications = () => {
     QueryQualificationsArgs
   >(QUERY_QUALIFICATIONS, {
     fetchPolicy: 'cache-and-network',
-    variables: {
-      sort: ['id ASC'],
-    },
   });
+  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,
   };

src/features/UsersPage/UsersPage.tsx

@@ -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([]);

src/features/UsersPage/UsersPage.useUsers.ts

@@ -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,
   };

src/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter, Route } from 'react-router-dom';
 import { ApolloProvider } from '@apollo/client';

src/libs/auth/Provider.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 import { useApolloClient } from '@apollo/client';
 import { isFunction } from 'lodash';
 import { context as Context } from './context';

src/libs/auth/context.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import { createContext, useContext } from 'react';
 import { AuthContext } from './types';
 import TokenStorage from '../tokenstorage/TokenStorage';
 
-const ctx = React.createContext<AuthContext>({
+const ctx = createContext<AuthContext>({
   tokenStorage: new TokenStorage(),
   signIn: () => new Promise(resolve => resolve(null)),
   signOut: () => new Promise(resolve => resolve()),
@@ -12,7 +12,7 @@ const ctx = React.createContext<AuthContext>({
 ctx.displayName = 'AuthContext';
 
 const useAuth = (): AuthContext => {
-  return React.useContext(ctx);
+  return useContext(ctx);
 };
 
 export { ctx as context, useAuth };

src/libs/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useScrollToElement } from './useScrollToElement';
+export type { UseScrollToElementOptions } from './useScrollToElement';

src/libs/hooks/useScrollToElement.ts

@@ -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;