Update some packages, move from history to navigate

Author: Mykyta-Petrov

package-lock.json

@@ -3,15 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@babel/core": "^7.24.3",
-    "@testing-library/react": "^14.2.2",
+    "@babel/core": "^7.24.4",
+    "@testing-library/react": "^14.3.1",
     "axios": "^1.6.8",
     "bootstrap": "^4.6.2",
     "bootstrap-icons": "^1.11.3",
     "chokidar": "^3.6.0",
     "history": "^4.10.1",
     "html-react-parser": "^4.2.10",
-    "i18next": "^23.10.1",
+    "i18next": "^23.11.2",
     "i18next-xhr-backend": "^3.2.2",
     "jquery": "^3.7.1",
     "node-sass": "^9.0.0",

package.json

@@ -5,12 +5,12 @@ chardet==5.2.0
 click==8.1.7
 cryptography==42.0.5
 docusign-esign==3.25.1
-Flask==3.0.2
+Flask==3.0.3
 Flask-Cors==4.0.0
 Flask-Session==0.8.0
 Flask-WTF==1.2.1
-idna==3.6
-itsdangerous==2.1.2
+idna==3.7
+itsdangerous==2.2.0
 Jinja2==3.1.3
 MarkupSafe==2.1.5
 nose==1.3.7

requirements.txt

@@ -1,5 +1,4 @@
 import { handleError } from "./apiHelper";
-import history from "./history";
 import axios from './interceptors';
 
 export async function codeGrantAuth(redirectUrl) {
@@ -13,7 +12,7 @@ export async function codeGrantAuth(redirectUrl) {
     }
 }
 
-export async function callback() {
+export async function callback(navigate) {
     try {
         const urlParams = new URLSearchParams(window.location.search);
         const code = urlParams.get('code');
@@ -28,7 +27,7 @@ export async function callback() {
         );
         return response.data.message
     } catch (error) {
-        history.push("/");
+        navigate("/");
         handleError(error);
     }
 }
@@ -45,7 +44,6 @@ export async function logOut() {
             }
         );
     } catch (error) {
-        history.push('/');
         handleError(error);
     }
 }
@@ -65,7 +63,7 @@ export async function getStatus(setStatus, setAuthType) {
     }
 }
 
-export async function jwtAuth() {
+export async function jwtAuth(navigate) {
     try {
         await axios.get(
             process.env.REACT_APP_API_BASE_URL + "/jwt_auth",
@@ -74,37 +72,37 @@ export async function jwtAuth() {
             }
         );
     } catch (error){
-        history.push('/');
+        navigate('/');
         handleError(error);
     }
 }
 
-export async function checkUnlogged(logged, setStatus, setAuthType) {
+export async function checkUnlogged(logged, setStatus, setAuthType, navigate) {
     if (!logged) {
-        await jwtAuth();
+        await jwtAuth(navigate);
         await getStatus(setStatus, setAuthType)
     }
 }
 
-export async function completeCallback(setShowAlert, setStatus, setAuthType, setShowJWTModal) {
+export async function completeCallback(setShowAlert, setStatus, setAuthType, setShowJWTModal, navigate) {
     try {
-        const message = await callback();
+        const message = await callback(navigate);
         const redirectUrl = localStorage.getItem("redirectUrl")
 
         await getStatus(setStatus, setAuthType);
         if (message === "Logged in with JWT") {
             setShowAlert(true);
         }
         else if (redirectUrl === '/byNewInsurance') {
-            await checkPayment(setShowJWTModal);
+            await checkPayment(setShowJWTModal, navigate);
         }
-        history.push(redirectUrl);
+        navigate(redirectUrl);
     } catch (error){
         handleError(error, setShowJWTModal)
     }
 }
 
-export async function checkPayment(setShowJWTModal) {
+export async function checkPayment(setShowJWTModal, navigate) {
     try {
         const response = await axios.get(
             process.env.REACT_APP_API_BASE_URL + "/check_payment",
@@ -114,7 +112,7 @@ export async function checkPayment(setShowJWTModal) {
         );
         return response;
     } catch (error){
-        history.push('/');
+        navigate("/");
         handleError(error, setShowJWTModal);
     }
 }

src/api/auth.js

@@ -1,11 +1,13 @@
 import React, { useEffect, useContext } from "react";
 import { completeCallback } from "../api/auth";
 import LoggedUserContext from "../contexts/logged-user/logged-user.context";
+import { useNavigate } from "react-router-dom";
 
 export const Callback = () => {
     const { setShowAlert, setLogged, setAuthType, setShowJWTModal } = useContext(LoggedUserContext); 
+    const navigate = useNavigate();
     useEffect(() => {
-        completeCallback(setShowAlert, setLogged, setAuthType, setShowJWTModal);
+        completeCallback(setShowAlert, setLogged, setAuthType, setShowJWTModal, navigate);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 

src/components/Callback.js

@@ -3,9 +3,9 @@ import { Modal, Container, Button } from "react-bootstrap";
 import { InputRadio } from "./InputRadio";
 import { useTranslation } from "react-i18next";
 import { codeGrantAuth, jwtAuth, getStatus } from "../api/auth";
-import history from "../api/history";
 import parse from "html-react-parser";
 import LoggedUserContext from "../contexts/logged-user/logged-user.context";
+import { useNavigate } from "react-router-dom";
 
 
 const initialState = {
@@ -22,6 +22,7 @@ export const Login = (props) => {
     const { redirectUrl, setLogged, setAuthType } = useContext(LoggedUserContext);
     const { t } = useTranslation("Modal");
     const loginOptions = t("LoginOptions", { returnObjects: true });
+    const navigate = useNavigate();
 
 
     function handleChange(event) {
@@ -46,9 +47,9 @@ export const Login = (props) => {
             if (request.loginOption === loginOptions[0]) {
                 await codeGrantAuth(redirectUrl);
             } else if (request.loginOption === loginOptions[1]){
-                await jwtAuth();
+                await jwtAuth(navigate);
                 await getStatus(setLogged, setAuthType);
-                history.push(redirectUrl);
+                navigate(redirectUrl);
                 handleClose();
             }
         } catch(error) {

src/components/Modal.js

@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import image1 from "../../assets/img/img-01.svg";
 import image2 from "../../assets/img/img-02.svg";
 import image3 from "../../assets/img/img-03.svg";
@@ -9,12 +9,12 @@ import parse from "html-react-parser";
 import LoggedUserContext from "../../contexts/logged-user/logged-user.context";
 import ModalContext from "../../contexts/modal/modal.context";
 import { checkPayment } from "../../api/auth";
-import history from "../../api/history";
 
 export const Home = () => {
   const { t } = useTranslation("Home");
   const { logged, setRedirectUrl, setShowJWTModal, authType } = useContext(LoggedUserContext);
   const { setModalShow } = useContext(ModalContext);
+  const navigate = useNavigate();
 
   function handleClick(event, redirectUrl) {
     event.preventDefault();
@@ -25,12 +25,12 @@ export const Home = () => {
   async function handlePayment(event, redirectUrl) {
     event.preventDefault()
     if (authType === "code_grant"){
-      const response = await checkPayment(setShowJWTModal)
+      const response = await checkPayment(setShowJWTModal, navigate)
       if (response.status === 200) {
-        history.push(redirectUrl);
+        navigate(redirectUrl);
       }
     } else {
-      history.push(redirectUrl);
+      navigate(redirectUrl);
     }
   }