chore: upgrade react and packages dependencies

.eslintrc.json

@@ -17,7 +17,6 @@
     "linebreak-style": ["error", "unix"],
     "import/no-named-as-default": 1,
     "quotes": ["error", "single"],
-    "semi": ["error", "always"],
     "class-methods-use-this": ["off"],
     "complexity": ["off", 11],
     "no-magic-numbers": [
@@ -62,7 +61,6 @@
     "react/jsx-fragments": ["error"],
     "react/jsx-max-depth": ["error", { "max": 8 }],
     "react/jsx-no-useless-fragment": ["error"],
-    "react/jsx-curly-spacing": ["error", { "when": "always" }],
     "react/jsx-equals-spacing": ["error", "never"],
     "react/jsx-first-prop-new-line": ["error", "multiline"],
     "react/jsx-indent": [

package.json

@@ -3,38 +3,30 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
-    "axios": "^0.20.0",
+    "axios": "^1.3.4",
     "bootstrap": "^5.0.2",
     "bootswatch": "^4.5.2",
-    "react": "^16.13.1",
-    "react-bootstrap": "^2.0.0-beta.4",
-    "react-dom": "^16.13.1",
-    "react-icons": "^4.1.0",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.7.2",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
+    "react-router-dom": "^6.8.2",
+    "react-scripts": "^5.0.1"
   },
   "devDependencies": {
-    "@pact-foundation/pact": "^9.15.5",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.34.0",
     "eslint": "^6.1.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-airbnb-base": "^14.2.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.0",
     "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^2.3.0",
-    "jest": "^24.9.0",
-    "mocha": "^7.0.1",
-    "typescript": ">=2.8.0"
+    "eslint-plugin-react-hooks": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "test:unit": "jest",
     "eject": "react-scripts eject",
     "lint": "eslint --no-inline-config --no-error-on-unmatched-pattern -c .eslintrc.json .",
     "test:contract": "jest contract"

src/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Router, Switch, Route } from 'react-router-dom';
-import history from './services/history';
+import {
+  Routes, Route,
+} from 'react-router-dom';
 import CadastroUsuario from './views/registerUser';
 import Home from './views/admin/home';
 import HomeClient from './views/client/home';
@@ -13,28 +14,26 @@ import Login from './views/login';
 import 'bootswatch/dist/minty/bootstrap.min.css';
 import ListCart from './views/client/ListCart';
 import Checkout from './views/client/checkout';
-import ProductDetails from '../src/views/client/productDetail';
+import ProductDetails from './views/client/productDetail';
 
 function App() {
   return (
     <div className="App">
-      <Router history={ history }>
-        <Switch>
-          <Route exact path="/admin/home" component={ Home } />
-          <Route exact path="/admin/cadastrarusuarios" component={ RegisterUser } />
-          <Route exact path="/admin/cadastrarprodutos" component={ RegisterProducts } />
-          <Route exact path="/admin/listarusuarios" component={ ShowUsers } />
-          <Route exact path="/admin/listarprodutos" component={ ShowProducts } />
-          <Route exact path="/admin/relatorios" component={ Report } />
-          <Route exact path="/home" component={ HomeClient } />
-          <Route exact path="/cadastrarusuarios" component={ CadastroUsuario } />
-          <Route exact path="/login" component={ Login } />
-          <Route exact path="/" render={ () => history.push('/login') } />
-          <Route path="/minhaListaDeProdutos" component={ ListCart } />
-          <Route path="/carrinho" component={ Checkout } />
-          <Route path="/detalhesProduto/:id" render={ (props) => <ProductDetails { ...props } /> } />
-        </Switch>
-      </Router>
+      <Routes>
+        <Route exact path="/admin/home" element={<Home />} />
+        <Route exact path="/admin/cadastrarusuarios" element={<RegisterUser />} />
+        <Route exact path="/admin/cadastrarprodutos" element={<RegisterProducts />} />
+        <Route exact path="/admin/listarusuarios" element={<ShowUsers />} />
+        <Route exact path="/admin/listarprodutos" element={<ShowProducts />} />
+        <Route exact path="/admin/relatorios" element={<Report />} />
+        <Route exact path="/home" element={<HomeClient />} />
+        <Route exact path="/cadastrarusuarios" element={<CadastroUsuario />} />
+        <Route exact path="/login" element={<Login />} />
+        <Route exact path="/" element={<Login />} />
+        <Route path="/minhaListaDeProdutos" element={<ListCart />} />
+        <Route path="/carrinho" element={<Checkout />} />
+        <Route path="/detalhesProduto/:id" render={(routeProps) => <ProductDetails routeProps={routeProps} />} />
+      </Routes>
     </div>
   );
 }

src/component/AddToCartButton.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import Cart from '../services/cart';
 import { Link } from 'react-router-dom';
+import Cart from '../services/cart';
 import '../styles/addToCartButton.css'
 
 class AddToCartButton extends React.Component {
@@ -26,13 +25,3 @@ class AddToCartButton extends React.Component {
 }
 
 export default AddToCartButton;
-
-AddToCartButton.propTypes = {
-  product: PropTypes.shape({
-    nome: PropTypes.string,
-    imagem: PropTypes.string,
-    preco: PropTypes.number,
-    _id: PropTypes.string,
-    descricao: PropTypes.string,
-  }).isRequired,
-};

src/component/CardList.js

@@ -4,7 +4,7 @@ import Cart from '../services/cart';
 import NoSearching from './NoSearching';
 import Loading from './Loading';
 import { BsSearch } from "react-icons/bs";
-import { validateToken } from '../services/validateUser';
+import { ValidateToken } from '../services/validateUser';
 import { getAllProducts, getProductsFromCategoryAndQuery } from '../services/products';
 
 class CardList extends React.Component {
@@ -24,7 +24,7 @@ class CardList extends React.Component {
   }
 
   componentDidMount() {
-    validateToken();
+    ValidateToken();
 
     getAllProducts()
     .then((response) => {

src/component/buttonLink.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import history from '../services/history';
-
-const redirectPage = (route) => history.push(route);
+import { useNavigate } from 'react-router-dom';
 
 export default function ButtonLink(props) {
+  const history = useNavigate();
+  const redirectPage = (route) => history(route);
+
   return (
     <a data-testid={ props.dataTestId } type="button" className="btn text-light" onClick={ () => redirectPage(props.route) }>
       { props.text }

src/component/cart.js

@@ -3,7 +3,7 @@ import axios from 'axios';
 import Navbar from '../../component/navbarClient';
 import { BsArrowDown, BsArrowUp} from "react-icons/bs";
 import ShoppingCartButton from '../../component/cartButton';
-import { validateToken } from '../../services/validateUser';
+import { ValidateToken } from '../../services/validateUser';
 import '../../App.css';
 import imagemSemFoto from '../../imagens/semimagem.jpeg'
 

src/component/navbarAdmin.js

@@ -1,14 +1,16 @@
+import { useNavigate } from 'react-router-dom';
 import React from 'react';
 import ButtonLink from './buttonLink';
-import history from '../services/history';
 import '../styles/navbar.css';
 import logo1 from '../imagens/serverestlogo1branco.png'
 
 export default function NavbarAdmin() {
+  const history = useNavigate();
+  const redirectPage = (route) => history(route);
 
   const submitHandler = e => {
     localStorage.clear();
-    history.push('/login');
+    redirectPage('/login');
   }
 
   return (

src/component/navbarClient.js

@@ -1,14 +1,16 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import ButtonLink from './buttonLink';
-import history from '../services/history';
 import '../styles/navbar.css';
 import logo1 from '../imagens/serverestlogo1branco.png'
 
-export default function navbarClient() {
+export default function NavbarClient() {
+  const history = useNavigate();
+  const redirectPage = (route) => history(route);
 
   const submitHandler = e => {
     localStorage.clear();
-    history.push('/login');
+    redirectPage('/login');
   }
 
   return (

src/index.js

@@ -1,10 +1,12 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(
-  <React.StrictMode>
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
+  <BrowserRouter>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root'),
+  </BrowserRouter>,
 );

src/services/validateUser.js

@@ -1,8 +1,10 @@
 import axios from 'axios';
-import history from './history';
+import { useNavigate } from 'react-router-dom';
 import Utils from './utils';
 
 export function validateLogin(emaill) {
+  const navigate = useNavigate()
+
   axios
     .get(`${Utils.getBaseUrl()}/usuarios`)
     .then((response) => {
@@ -11,18 +13,18 @@ export function validateLogin(emaill) {
         if (element.email === emaill) {
           if (element.administrador === 'true') {
             localStorage.setItem('serverest/userNome', element.nome);
-            history.push('/admin/home');
+            navigate('/admin/home');
           } else {
-            history.push('/home');
+            navigate('/home');
           }
         }
       });
     });
 }
 
-export function validateToken() {
+export function ValidateToken() {
   const token = localStorage.getItem('serverest/userToken');
-  if (token === null) { history.push('/login'); }
+  if (token === null) { navigate('/login'); }
 }
 
 export function login(email, password) {

src/views/admin/home.js

@@ -1,10 +1,8 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import Navbar from '../../component/navbarAdmin';
-import history from '../../services/history';
 import 'bootswatch/dist/minty/bootstrap.min.css';
-import { validateToken } from '../../services/validateUser';
-
-const redirectPage = (route) => history.push(route);
+import { ValidateToken } from '../../services/validateUser';
 
 class Home extends React.Component {
   constructor(props) {
@@ -16,18 +14,23 @@ class Home extends React.Component {
   }
 
   componentDidMount() {
-    validateToken();
+    ValidateToken();
     this.setState({ nome: localStorage.getItem('serverest/userNome') });
   }
 
   render() {
+    const history = useNavigate();
+    const redirectPage = (route) => history(route);
+
     const { nome } = this.state;
     return (
       <>
         <Navbar />
         <div className="jumbotron">
           <h1>
-            Bem Vindo  {nome}
+            Bem Vindo
+            {' '}
+            {nome}
           </h1>
           <p className="lead">Este é seu sistema para administrar seu ecommerce.</p>
           <hr className="my-4" />

src/views/admin/registerProducts.js

@@ -1,8 +1,8 @@
-import Navbar from '../../component/navbarAdmin';
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import Navbar from '../../component/navbarAdmin';
 import ErrorAlert from '../../component/errorAlert';
-import {validateToken} from '../../services/validateUser';
-import history from '../../services/history';
+import {ValidateToken} from '../../services/validateUser';
 import {registerProduct, registerProductWithImage} from '../../services/products';
 import {Button, Container, Form, Row} from "react-bootstrap";
 
@@ -23,7 +23,7 @@ class RegisterProducts extends React.Component {
   }
 
   componentDidMount() {
-    validateToken();
+    ValidateToken();
   }
 
   getDisplay = (display, type) => {
@@ -58,6 +58,9 @@ class RegisterProducts extends React.Component {
   }
 
   submitHandler = e => {
+    const history = useNavigate();
+    const redirectPage = (route) => history(route);
+
     e.preventDefault();
     if (this.state.imagem == '' || null || undefined) {
       registerProduct({
@@ -66,7 +69,7 @@ class RegisterProducts extends React.Component {
         descricao: this.state.formData.description,
         quantidade: this.state.formData.quantity,
       }).then((response) => {
-        history.push('/admin/listarprodutos');
+        redirectPage('/admin/listarprodutos');
       }).catch(error => {
         this.setState({
           nomeError: error.response.data.nome,
@@ -85,7 +88,7 @@ class RegisterProducts extends React.Component {
         quantidade: this.state.formData.quantity,
         imagem: this.state.formData.imagem,
       }).then((response) => {
-        history.push('/admin/listarprodutos');
+        redirectPage('/admin/listarprodutos');
       }).catch(error => {
         this.setState({
           nomeError: error.response.data.nome,