upgrade

package.json

@@ -4,19 +4,19 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
-    "@fortawesome/free-solid-svg-icons": "^5.11.2",
+    "@fortawesome/free-solid-svg-icons": "^6.0.0",
     "@fortawesome/react-fontawesome": "^0.1.7",
-    "axios": "^0.19.0",
-    "bulma": "^0.8.0",
+    "axios": "^0.26.0",
+    "bulma": "^0.9.3",
     "moment": "^2.24.0",
-    "node-sass": "^4.13.0",
+    "node-sass": "^7.0.1",
     "rbx": "^2.2.0",
-    "react": "^16.11.0",
-    "react-burger-menu": "^2.6.12",
-    "react-dom": "^16.11.0",
+    "react": "^17.0.2",
+    "react-burger-menu": "^3.0.6",
+    "react-dom": "^17.0.2",
     "react-quill": "^1.3.3",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.2.0"
+    "react-router-dom": "^6.2.2",
+    "react-scripts": "5.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/auth/login_form/index.js

@@ -1,6 +1,6 @@
 import React, { Fragment, useState } from 'react';
 import { Button, Field, Control, Input, Column, Section, Help, Label } from "rbx";
-import { Redirect } from "react-router-dom";
+import { Navigate } from "react-router-dom";
 import UsersService from '../../../services/users';
 
 function LoginForm() {
@@ -22,9 +22,9 @@ function LoginForm() {
   }
 
   if(redirectToRegister)
-    return <Redirect to={{pathname: "/register"}}/>
+    return <Navigate replace to="/register" />
   else if(redirectToNotes)
-    return <Redirect to={{pathname: "/notes"}}/>
+    return <Navigate replace to="/notes" />
 
   return (
     <Fragment>
@@ -77,4 +77,4 @@ function LoginForm() {
   )
 }
 
-export default LoginForm;
+export default LoginForm;

src/components/auth/private_router/index.js

@@ -1,12 +1,8 @@
 import React from 'react';
-import { Route, Redirect } from 'react-router-dom';
+import { Route, Navigate } from 'react-router-dom';
 
-const privateRoute = ({ component: Component, ...rest }) => (
-  <Route {...rest} render={props => (
-    localStorage.getItem('user')
-    ? <Component {...props} />
-    : <Redirect to={{ pathname: '/login' }} />
-  )}/>
+const privateRoute = ({ children }) => (
+localStorage.getItem('user') ? children : <Navigate replace to="/login" />
 )
 
-export default privateRoute;
+export default privateRoute;

src/components/auth/register_form/index.js

@@ -1,6 +1,6 @@
 import React, { Fragment, useState } from 'react';
 import { Button, Field, Control, Input, Column, Section, Help, Label } from "rbx";
-import { Redirect } from "react-router-dom";
+import { Navigate } from "react-router-dom";
 import UsersService from '../../../services/users';
 
 
@@ -23,7 +23,7 @@ function RegisterForm() {
 
 
   if(redirectToLogin)
-    return <Redirect to={{pathname: "/login"}}/>
+    return <Navigate replace to="/login" />
 
   return (
     <Fragment>
@@ -88,4 +88,4 @@ function RegisterForm() {
   )
 }
 
-export default RegisterForm;
+export default RegisterForm;

src/components/header_logged/index.js

@@ -3,7 +3,7 @@ import { Navbar, Container, Column, Button, Dropdown } from 'rbx';
 import logoImage from '../../assets/images/logo-white.png';
 import "../../styles/header.scss";
 import UsersService from '../../services/users';
-import { Redirect, Link } from "react-router-dom";
+import { Navigate, Link } from "react-router-dom";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faList } from '@fortawesome/free-solid-svg-icons'
 
@@ -17,7 +17,7 @@ function HeaderLogged(props) {
   }
 
   if (redirectToHome == true)
-    return <Redirect to={{ pathname: "/" }} />
+    return <Navigate replace to="/" />
 
   return (
     <Navbar color="custom-purple" className="navbar-logged">
@@ -79,4 +79,4 @@ function HeaderLogged(props) {
   )
 }
 
-export default HeaderLogged;
+export default HeaderLogged;

src/components/users/user_delete/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Button } from "rbx";
 import UsersService from '../../../services/users';
-import { Redirect } from "react-router-dom";
+import { Navigate } from "react-router-dom";
 
 function UsersDelete() {
   const [redirectToHome, setRedirectToHome] = useState(false);
@@ -14,7 +14,7 @@ function UsersDelete() {
   }
 
   if(redirectToHome)
-    return <Redirect to={{pathname: "/"}}/>
+    return <Navigate replace to="/" />
 
   return(
     <Button color="danger" onClick={() => deleteUser()}>
@@ -23,4 +23,4 @@ function UsersDelete() {
   )
 }
 
-export default UsersDelete;
+export default UsersDelete;

src/routes.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import HomeScreen from './screens/home';
 import RegisterScreen from './screens/auth/register'
 import LoginScreen from './screens/auth/login'
@@ -8,16 +8,15 @@ import UserEditScreen from './screens/users/edit'
 
 import PrivateRouter from './components/auth/private_router';
 
-const Routes = () => (
-  <BrowserRouter>
-    <Switch>
-      <Route exact path="/" component={HomeScreen} />
-      <Route exact path='/register' component={RegisterScreen} />
-      <Route exact path='/login' component={LoginScreen} />
-      <PrivateRouter exact path='/notes' component={NotesIndexScreen} />
-      <PrivateRouter exact path='/users/edit' component={UserEditScreen} />
-    </Switch>
-  </BrowserRouter>
+const Routes2 = () => (
+<BrowserRouter>
+<Routes>
+<Route path="/" element={<HomeScreen />} />
+<Route path='/register' element={<RegisterScreen />} />
+<Route path='/login' element={<LoginScreen />}/>
+<Route path='/notes' element={<PrivateRouter> <NotesIndexScreen /> </PrivateRouter>} />
+<Route path='/users/edit' element={<PrivateRouter> <UserEditScreen /> </PrivateRouter>} />
+</Routes>
+</BrowserRouter>
 )
-
-export default Routes;
+export default Routes2;