From 3a7b6e8f9e8766ce3c47dfd8e80f8a6079b0648c Mon Sep 17 00:00:00 2001
From: sergesoroka <sergesoroka@gmail.com>
Date: Wed, 13 Nov 2024 11:49:17 +0200
Subject: [PATCH] Update token when request is made

---
 components/UploadFile/UploadFile.jsx | 13 ++++++++++
 public/serviceWorker.js              |  1 +
 src/App.jsx                          | 36 ++++++++++++++--------------
 src/main.jsx                         |  5 ++--
 utils/useFetch.jsx                   | 20 ++++++++++++++++
 5 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/components/UploadFile/UploadFile.jsx b/components/UploadFile/UploadFile.jsx
index 7560b14..cc8d8ab 100755
--- a/components/UploadFile/UploadFile.jsx
+++ b/components/UploadFile/UploadFile.jsx
@@ -3,6 +3,8 @@ import { useEffect, useState } from "react";
 import Close from "../Icons/Close";
 import Spinner from "../Icons/Spinner";
 
+import { useKeycloak } from "@react-keycloak/web";
+
 // eslint-disable-next-line react/prop-types
 export default function UploadFile({ setImageData, setType, file, setFile }) {
   const fileQuery = `${import.meta.env.VITE_BaseURL}db/download?what=knnquery`;
@@ -10,10 +12,21 @@ export default function UploadFile({ setImageData, setType, file, setFile }) {
   const [isNotRightFile, setIsNotRightFile] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
+  const { keycloak } = useKeycloak();
+
   useEffect(() => {
     async function fetchDate() {
+      try {
+        await keycloak.updateToken(30);
+        console.log("Upload file Comp: UPDATED");
+        localStorage.setItem("token", keycloak.token);
+      } catch (error) {
+        console.error("Upload file Comp: Failed to refresh token:", error);
+      }
+
       const formData = new FormData();
       formData.append("files", file);
+
       const response = await fetch(fileQuery, {
         method: "POST",
         body: formData,
diff --git a/public/serviceWorker.js b/public/serviceWorker.js
index a8390c0..1d0c71e 100644
--- a/public/serviceWorker.js
+++ b/public/serviceWorker.js
@@ -11,6 +11,7 @@ self.addEventListener("activate", (event) => {
 self.addEventListener("message", (event) => {
   if (event.data && event.data.type === "TOKEN") {
     accessToken = event.data.token;
+    console.log(accessToken);
   }
 });
 
diff --git a/src/App.jsx b/src/App.jsx
index 610e55f..acb8700 100755
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -31,25 +31,25 @@ function App() {
     }
   }, [keycloak.authenticated]);
 
-  useEffect(() => {
-    const interval = setInterval(() => {
-      keycloak
-        .updateToken(30)
-        .then((refreshed) => {
-          if (refreshed) {
-            console.log("app: Token refreshed and updated in localStorage.");
-            localStorage.setItem("token", keycloak.token);
-          } else {
-            console.log("app: Token is still valid.");
-          }
-        })
-        .catch(() => {
-          console.error("app: Failed to refresh token.");
-        });
-    }, 10000);
+  // useEffect(() => {
+  //   const interval = setInterval(() => {
+  // keycloak
+  //   .updateToken(30)
+  //   .then((refreshed) => {
+  //     if (refreshed) {
+  //       console.log("app: Token refreshed and updated in localStorage.");
+  //       localStorage.setItem("token", keycloak.token);
+  //     } else {
+  //       console.log("app: Token is still valid.");
+  //     }
+  //   })
+  //   .catch(() => {
+  //     console.error("app: Failed to refresh token.");
+  //   });
+  //   }, 10000);
 
-    return () => clearInterval(interval);
-  }, []);
+  //   return () => clearInterval(interval);
+  // }, []);
 
   return (
     <>
diff --git a/src/main.jsx b/src/main.jsx
index 5809baa..3054f84 100755
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -44,8 +44,9 @@ const Main = () => {
       }
     }
   };
-
-  registerServiceWorker();
+  useEffect(() => {
+    registerServiceWorker();
+  }, [token]);
   return <></>;
 };
 
diff --git a/utils/useFetch.jsx b/utils/useFetch.jsx
index 8fe2226..d98b65d 100644
--- a/utils/useFetch.jsx
+++ b/utils/useFetch.jsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { useKeycloak } from "@react-keycloak/web";
 import axios from "axios";
+import { useNavigate } from "react-router-dom";
 
 function useFetch(url) {
   const [data, setData] = useState(null);
@@ -9,6 +10,7 @@ function useFetch(url) {
   const [auth, setAuth] = useState(false);
 
   const { keycloak } = useKeycloak();
+  const navigate = useNavigate();
 
   const stored_token = localStorage.getItem("token");
   const kc_token = keycloak.token ? keycloak.token : stored_token;
@@ -23,6 +25,7 @@ function useFetch(url) {
     function (config) {
       if (kc_token) {
         config.headers.Authorization = `Bearer ${kc_token}`;
+        console.log("axios interseption");
       }
       return config;
     },
@@ -38,12 +41,29 @@ function useFetch(url) {
     }
 
     if (kc_token) {
+      keycloak
+        .updateToken(30)
+        .then((refreshed) => {
+          if (refreshed) {
+            console.log(
+              "useFetch: Token refreshed and updated in localStorage."
+            );
+            localStorage.setItem("token", keycloak.token);
+          } else {
+            console.log("useFetch: Token is still valid.");
+          }
+        })
+        .catch(() => {
+          console.error("useFetch: Failed to refresh token.");
+        });
       axiosInstance
         .get(url)
         .then((response) => {
           setData(response.data);
         })
         .catch((error) => {
+          // navigate("/");
+          // keycloak.login();
           console.error("Error fetching data:", error);
         })
         .finally(() => {