replace ROUTE object with enum, add link to ProfessionsPage to AppLayout

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

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import clsx from 'clsx';
-import { ROUTE } from 'config/routing';
-import { Route } from './components/Nav/types';
+import { Route } from 'config/routing';
+import { Route as NavRoute } from './components/Nav/types';
 import { useTheme } from '@material-ui/core/styles';
 
 import {
@@ -15,6 +15,7 @@ import useStyles from './useStyles';
 import {
   Dashboard as DashboardIcon,
   Group as GroupIcon,
+  Work as WorkIcon,
 } from '@material-ui/icons';
 import Nav from './components/Nav/Nav';
 import CurrentUser from './components/CurrentUser/CurrentUser';
@@ -31,19 +32,25 @@ const Sidebar = ({ className, open, variant, onClose, onOpen }: Props) => {
   const classes = useStyles();
   const theme = useTheme();
   const { pathname } = useLocation();
-  const routes: Route[] = [
+  const routes: NavRoute[] = [
     {
       name: 'Dashboard',
-      to: ROUTE.DASHBOARD_PAGE,
+      to: Route.DashboardPage,
       Icon: <DashboardIcon color="inherit" />,
       exact: true,
     },
     {
       name: 'Użytkownicy',
-      to: ROUTE.USERS_PAGE,
+      to: Route.UsersPage,
       exact: true,
       Icon: <GroupIcon color="inherit" />,
     },
+    {
+      name: 'Zawody',
+      to: Route.ProfessionsPage,
+      exact: true,
+      Icon: <WorkIcon color="inherit" />,
+    },
   ];
 
   useEffect(() => {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import { useAuth } from 'libs/auth';
-import { ROUTE } from 'config/routing';
+import { Route } from 'config/routing';
 
 import { makeStyles } from '@material-ui/core/styles';
 import {
@@ -37,7 +37,7 @@ const TopBar = ({ className, openSidebar }: Props) => {
             </Hidden>
             <Hidden xsDown>
               <Typography variant="h4">
-                <Link color="inherit" to={ROUTE.DASHBOARD_PAGE}>
+                <Link color="inherit" to={Route.DashboardPage}>
                   Zdam Egzamin Zawodowy
                 </Link>
               </Typography>

src/common/Table/Table.tsx

@@ -94,7 +94,7 @@ function Table<T>({
               );
             }
           }}
-          allSelected={selected?.length === data.length}
+          allSelected={selected?.length === data.length && data.length > 0}
         />
         <TableBody>
           {loading ? (

src/config/routing.ts

@@ -1,11 +1,11 @@
-export const ROUTE = {
-  SIGN_IN_PAGE: '/',
-  DASHBOARD_PAGE: '/dashboard',
-  USERS_PAGE: '/users',
-  PROFESSIONS_PAGE: '/professions',
-};
+export enum Route {
+  SignInPage = '/',
+  DashboardPage = '/dashboard',
+  UsersPage = '/users',
+  ProfessionsPage = '/professions',
+}
 
-export const PUBLIC_ROUTES = [ROUTE.SIGN_IN_PAGE];
-export const ADMIN_ROUTES = Object.values(ROUTE).filter(
-  route => !PUBLIC_ROUTES.includes(route)
+export const PUBLIC_ROUTES = [Route.SignInPage];
+export const ADMIN_ROUTES = Object.values(Route).filter(
+  route => !PUBLIC_ROUTES.includes(route as Route)
 );

src/features/AdminRoutes.tsx

@@ -1,5 +1,5 @@
-import { Switch, Route } from 'react-router-dom';
-import { ROUTE } from '../config/routing';
+import { Switch, Route as RRDRoute } from 'react-router-dom';
+import { Route } from '../config/routing';
 import AppLayout from 'common/AppLayout/AppLayout';
 import DashboardPage from './DashboardPage/DashboardPage';
 import UsersPage from './UsersPage/UsersPage';
@@ -9,15 +9,15 @@ function AdminRoutes() {
   return (
     <AppLayout>
       <Switch>
-        <Route exact path={ROUTE.DASHBOARD_PAGE}>
+        <RRDRoute exact path={Route.DashboardPage}>
           <DashboardPage />
-        </Route>
-        <Route exact path={ROUTE.USERS_PAGE}>
+        </RRDRoute>
+        <RRDRoute exact path={Route.UsersPage}>
           <UsersPage />
-        </Route>{' '}
-        <Route exact path={ROUTE.PROFESSIONS_PAGE}>
+        </RRDRoute>
+        <RRDRoute exact path={Route.ProfessionsPage}>
           <ProfessionsPage />
-        </Route>
+        </RRDRoute>
       </Switch>
     </AppLayout>
   );

src/features/App.tsx

@@ -1,25 +1,25 @@
-import { Route, Switch } from 'react-router-dom';
+import { Route as RRDRoute, Switch } from 'react-router-dom';
 import PublicRoute from '../libs/router/PublicRoute';
 import AdminRoute from '../libs/router/AdminRoute';
 import AppLoading from './AppLoading';
 import SignInPage from './SignInPage/SignInPage';
 import NotFoundPage from './NotFoundPage/NotFoundPage';
 import AdminRoutes from './AdminRoutes';
-import { ROUTE, ADMIN_ROUTES } from '../config/routing';
+import { Route, ADMIN_ROUTES } from '../config/routing';
 
 function App() {
   return (
     <AppLoading>
       <Switch>
-        <PublicRoute exact path={ROUTE.SIGN_IN_PAGE}>
+        <PublicRoute exact path={Route.SignInPage}>
           <SignInPage />
         </PublicRoute>
         <AdminRoute exact path={ADMIN_ROUTES}>
           <AdminRoutes />
         </AdminRoute>
-        <Route path="*">
+        <RRDRoute path="*">
           <NotFoundPage />
-        </Route>
+        </RRDRoute>
       </Switch>
     </AppLoading>
   );

src/features/NotFoundPage/NotFoundPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ROUTE } from 'config/routing';
+import { Route } from 'config/routing';
 
 import { makeStyles } from '@material-ui/core/styles';
 import { Container, Typography } from '@material-ui/core';
@@ -19,7 +19,7 @@ const NotFoundPage = () => {
           który nie istnieje.
         </Typography>
         <Typography variant="h4">
-          <Link to={ROUTE.SIGN_IN_PAGE}>Wróć na stronę główną</Link>
+          <Link to={Route.SignInPage}>Wróć na stronę główną</Link>
         </Typography>
       </Container>
     </main>

src/features/ProfessionsPage/ProfessionsPage.tsx

@@ -108,7 +108,7 @@ const ProfessionsPage = () => {
   };
 
   const handleDeleteProfessions = async () => {
-    if (!window.confirm('Czy na pewno chcesz usunąć wybranych zawody?')) {
+    if (!window.confirm('Czy na pewno chcesz usunąć wybrane zawody?')) {
       return;
     }
     try {

src/libs/router/AdminRoute.tsx

@@ -1,19 +1,19 @@
-import { Route, Redirect, RouteProps } from 'react-router-dom';
+import { Route as RRDRoute, Redirect, RouteProps } from 'react-router-dom';
 import { isNil } from 'lodash';
 import { useAuth } from '../auth';
 import { Role } from '../graphql/types';
-import { ROUTE } from 'config/routing';
+import { Route } from 'config/routing';
 
 const AdminRoute = ({ children, ...rest }: RouteProps) => {
   const { user } = useAuth();
   return (
-    <Route {...rest}>
+    <RRDRoute {...rest}>
       {!isNil(user) && user.role === Role.Admin ? (
         children
       ) : (
-        <Redirect to={ROUTE.SIGN_IN_PAGE} />
+        <Redirect to={Route.SignInPage} />
       )}
-    </Route>
+    </RRDRoute>
   );
 };
 

src/libs/router/PublicRoute.tsx

@@ -1,19 +1,19 @@
-import { Redirect, Route, RouteProps } from 'react-router-dom';
+import { Redirect, Route as RRDRoute, RouteProps } from 'react-router-dom';
 import { isNil } from 'lodash';
 import { useAuth } from '../auth';
-import { ROUTE } from '../../config/routing';
+import { Route } from '../../config/routing';
 import { Role } from '../graphql/types';
 
 const PublicRoute = ({ children, ...rest }: RouteProps) => {
   const { user } = useAuth();
   return (
-    <Route {...rest}>
+    <RRDRoute {...rest}>
       {isNil(user) || user.role !== Role.Admin ? (
         children
       ) : (
-        <Redirect to={ROUTE.DASHBOARD_PAGE} />
+        <Redirect to={Route.DashboardPage} />
       )}
-    </Route>
+    </RRDRoute>
   );
 };