TestRun list. Next/Prev buttons ignores sorting (#224)

* TestRun list. Next/Prev buttons ignores sorting

closes Visual-Regression-Tracker/Visual-Regression-Tracker#286

* Update Header.spec.tsx

Author: pashidlos

package-lock.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.2",
-    "@material-ui/data-grid": "^4.0.0-alpha.34",
+    "@material-ui/data-grid": "^4.0.0-alpha.35",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@testing-library/jest-dom": "^5.11.1",

package.json

@@ -3,7 +3,7 @@ import { SnackbarProvider } from "notistack";
 import { Box } from "@material-ui/core";
 import Header from "./components/Header";
 import {
-  AuthProvider,
+  UserProvider,
   ProjectProvider,
   BuildProvider,
   TestRunProvider,
@@ -14,7 +14,7 @@ import Router from "./Router";
 function App() {
   return (
     <SnackbarProvider maxSnack={3}>
-      <AuthProvider>
+      <UserProvider>
         <ProjectProvider>
           <BuildProvider>
             <TestRunProvider>
@@ -29,7 +29,7 @@ function App() {
             </TestRunProvider>
           </BuildProvider>
         </ProjectProvider>
-      </AuthProvider>
+      </UserProvider>
     </SnackbarProvider>
   );
 }

src/App.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { mount } from "@cypress/react";
 import {
   ProjectProvider,
-  AuthProvider,
+  UserProvider,
   BuildProvider,
   TestRunProvider,
 } from "../contexts";
@@ -23,13 +23,13 @@ export const mountVrtComponent = ({
     <MemoryRouter {...memoryRouterProps}>
       <Route path={path}>
         <SnackbarProvider>
-          <AuthProvider>
+          <UserProvider>
             <ProjectProvider>
               <BuildProvider>
                 <TestRunProvider>{component}</TestRunProvider>
               </BuildProvider>
             </ProjectProvider>
-          </AuthProvider>
+          </UserProvider>
         </SnackbarProvider>
       </Route>
     </MemoryRouter>,

src/_test/test.moun.helper.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 import { mount } from "@cypress/react";
 import Header from "./Header";
-import { AuthProvider } from "../contexts";
+import { UserProvider } from "../contexts";
 import { BrowserRouter } from "react-router-dom";
 import { haveUserLogged } from "../_test/precondition.helper";
 import { TEST_USER } from "../_test/test.data.helper";
@@ -13,9 +13,9 @@ describe("Header", () => {
       localStorage.clear();
       mount(
         <BrowserRouter>
-          <AuthProvider>
+          <UserProvider>
             <Header />
-          </AuthProvider>
+          </UserProvider>
         </BrowserRouter>
       );
 
@@ -26,9 +26,9 @@ describe("Header", () => {
       haveUserLogged(TEST_USER);
       mount(
         <BrowserRouter>
-          <AuthProvider>
+          <UserProvider>
             <Header />
-          </AuthProvider>
+          </UserProvider>
         </BrowserRouter>
       );
 

src/components/Header.spec.tsx

@@ -9,15 +9,14 @@ import {
   MenuItem,
 } from "@material-ui/core";
 import { Link } from "react-router-dom";
-import { useAuthState, useAuthDispatch, logout } from "../contexts";
+import { useUserDispatch, useUserState, logout } from "../contexts";
 import { routes } from "../constants";
 import logo from "../static/logo.png";
-import { Role } from "../types";
 
 const Header: FunctionComponent = () => {
   const [menuRef, setMenuRef] = React.useState<null | HTMLElement>(null);
-  const { loggedIn, user } = useAuthState();
-  const authDispatch = useAuthDispatch();
+  const { loggedIn, user } = useUserState();
+  const authDispatch = useUserDispatch();
 
   const handleMenuClose = () => {
     setMenuRef(null);
@@ -33,7 +32,7 @@ const Header: FunctionComponent = () => {
       open={!!menuRef}
       onClose={handleMenuClose}
     >
-      {user?.role === Role.admin && (
+      {user?.role === "admin" && (
         <MenuItem
           component={Link}
           to={routes.USER_LIST_PAGE}

src/components/Header.tsx

@@ -8,7 +8,7 @@ import {
   CardActions,
   Typography,
 } from "@material-ui/core";
-import { useAuthDispatch, login } from "../contexts";
+import { useUserDispatch, login } from "../contexts";
 import { routes } from "../constants";
 import { useSnackbar } from "notistack";
 import { TextValidator, ValidatorForm } from "react-material-ui-form-validator";
@@ -17,7 +17,7 @@ const LoginForm = () => {
   const { enqueueSnackbar } = useSnackbar();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const dispatch = useAuthDispatch();
+  const dispatch = useUserDispatch();
 
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault();

src/components/LoginForm.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { Redirect, Route, RouteProps } from "react-router-dom";
-import { useAuthState } from "../contexts";
+import { useUserState } from "../contexts";
 import { routes } from "../constants";
 
 const PrivateRoute: React.FunctionComponent<RouteProps> = ({
   component: Component,
   ...rest
 }) => {
-  const { loggedIn } = useAuthState();
+  const { loggedIn } = useUserState();
   if (!Component) {
     return null;
   }

src/components/PrivateRoute.tsx

@@ -6,7 +6,7 @@ import {
   CardContent,
   CardActions,
 } from "@material-ui/core";
-import { useAuthDispatch, login } from "../contexts";
+import { useUserDispatch, login } from "../contexts";
 import { usersService } from "../services";
 import { useSnackbar } from "notistack";
 import { TextValidator, ValidatorForm } from "react-material-ui-form-validator";
@@ -17,7 +17,7 @@ const RegisterForm = () => {
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
   const [password, setPassword] = useState("");
-  const dispatch = useAuthDispatch();
+  const dispatch = useUserDispatch();
 
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault();

src/components/RegisterForm.tsx

@@ -2,8 +2,8 @@ import { IconButton, makeStyles, Tooltip } from "@material-ui/core";
 import { NavigateNext, NavigateBefore } from "@material-ui/icons";
 import React from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import { useTestRunDispatch, selectTestRun } from "../contexts";
-import { TestRun } from "../types";
+import { useTestRunDispatch, selectTestRun } from "../../contexts";
+import { TestRun } from "../../types";
 
 const useStyles = makeStyles((theme) => ({
   button: {