diff --git a/src/main.jsx b/src/main.jsx
index fac175e..eff4b0a 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,12 +1,19 @@
import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { AuthProvider, useAuth } from "react-oidc-context";
import HomePage from "./pages/HomePage.tsx";
import TemplatePage from "./pages/TemplatePage.tsx";
import WizardPage from "./pages/WizardPage.tsx";
import PreferencesPage from "./pages/PreferencesPage.tsx";
+import { ReactKeycloakProvider } from "@react-keycloak/web";
+import { useKeycloak } from "@react-keycloak/web";
+
+import _kc from "./utils/keycloak.js";
+
import "./index.css";
+import { useEffect } from "react";
const router = createBrowserRouter(
[
@@ -16,7 +23,7 @@ const router = createBrowserRouter(
},
{
- path: "/template/:templateId",
+ path: "/template/:templateId/",
Component: TemplatePage,
},
{
@@ -28,11 +35,60 @@ const router = createBrowserRouter(
Component: PreferencesPage,
},
],
- { basename: "/templates" }
+ { basename: "/templates/" }
);
+const Main = () => {
+ const { keycloak } = useKeycloak();
+
+ useEffect(() => {
+ if (keycloak.authenticated) {
+ localStorage.setItem("refreshToken", keycloak.refreshToken);
+ localStorage.setItem("token", keycloak.token);
+ localStorage.setItem("username", keycloak.tokenParsed.preferred_username);
+ }
+ }, [keycloak.authenticated]);
+
+ const stored_token = localStorage.getItem("token");
+ const token = keycloak.token ? keycloak.token : stored_token;
+
+ const base_url = import.meta.env.PROD
+ ? "/templates/serviceWorker.js"
+ : "/serviceWorker.js";
+
+ const registerServiceWorker = async () => {
+ if ("serviceWorker" in navigator) {
+ try {
+ const registration = await navigator.serviceWorker.register(base_url, {
+ scope: "/templates/",
+ });
+
+ await registration.active.postMessage({
+ type: "TOKEN",
+ token: token,
+ });
+ } catch (error) {
+ console.log(`Registration failed with ${error}`);
+ }
+ }
+ };
+
+ registerServiceWorker();
+};
+
ReactDOM.createRoot(document.getElementById("root")).render(
-
-
-
+
+
+
+
+
+
);
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 8fda451..a0b6f7b 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -15,8 +15,6 @@ export default function HomePage() {
localStorage.getItem("projectID")
);
- // console.log("Home", prID, localStorage.getItem("projectID"));
-
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const uuidParams = queryParams.get("uuid");
diff --git a/src/ui/Select.tsx b/src/ui/Select.tsx
index 07b83c2..ad986e9 100644
--- a/src/ui/Select.tsx
+++ b/src/ui/Select.tsx
@@ -3,6 +3,7 @@ import "./Select.css";
import SearchIcon from "@/IconsComponents/SearchIcon";
import CloseIcon from "@/IconsComponents/CloseIcon";
import useSWR from "swr";
+import useFetch from "../utils/useFetch.jsx";
import { fetcher } from "@/lib/fetcher";
import { useSetProjectID } from "../store/store";
@@ -22,6 +23,7 @@ export default function Select({ url, setProjectName, projectName }) {
revalidateOnFocus: false,
revalidateOnReconnect: false,
});
+ // const { data, isLoading, error } = useFetch(`template`);
useEffect(
() =>
@@ -39,7 +41,6 @@ export default function Select({ url, setProjectName, projectName }) {
setProjectID("");
localStorage.setItem("project", "");
localStorage.setItem("projectID", "");
- localStorage.clear();
};
return (
diff --git a/src/utils/config.ts b/src/utils/config.ts
index 597a003..916d588 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -1,6 +1,7 @@
// config.ts
const config = {
apiUrl: "https://api-test.ramanchada.ideaconsult.net/template",
+ baseUrl: "https://api-test.ramanchada.ideaconsult.net/",
};
export default config;
diff --git a/src/utils/keycloak.js b/src/utils/keycloak.js
new file mode 100644
index 0000000..4c9f319
--- /dev/null
+++ b/src/utils/keycloak.js
@@ -0,0 +1,14 @@
+import Keycloak from "keycloak-js";
+
+const _kc = new Keycloak({
+ realm: "nano",
+ url: "https://iam.ideaconsult.net/auth",
+ "ssl-required": "external",
+ resource: "idea-ui",
+ "public-client": true,
+ "confidential-port": 0,
+ clientId: "idea-ui",
+ tokenStore: "localStorage ",
+});
+
+export default _kc;
diff --git a/src/utils/useFetch.jsx b/src/utils/useFetch.jsx
new file mode 100644
index 0000000..a133af3
--- /dev/null
+++ b/src/utils/useFetch.jsx
@@ -0,0 +1,61 @@
+import { useState, useEffect } from "react";
+import { useKeycloak } from "@react-keycloak/web";
+import axios from "axios";
+import config from "./config";
+
+function useFetch(url) {
+ const [data, setData] = useState(null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [accessToken, setAccessToken] = useState(null);
+ const [auth, setAuth] = useState(false);
+ const [error, setError] = useState(false);
+
+ const { keycloak } = useKeycloak();
+
+ const stored_token = localStorage.getItem("token");
+ const kc_token = keycloak.token ? keycloak.token : stored_token;
+
+ const axiosInstance = axios.create({
+ baseURL: `${config.baseUrl}`,
+ timeout: 1000,
+ headers: { "Content-Type": "application/json" },
+ });
+
+ axiosInstance.interceptors.request.use(
+ function (config) {
+ if (kc_token) {
+ config.headers.Authorization = `Bearer ${kc_token}`;
+ }
+ return config;
+ },
+ function (error) {
+ return Promise.reject(error);
+ }
+ );
+
+ useEffect(() => {
+ if (keycloak.authenticated) {
+ setAccessToken(keycloak.token);
+ setAuth(true);
+ }
+
+ if (kc_token) {
+ axiosInstance
+ .get(url)
+ .then((response) => {
+ setData(response.data);
+ })
+ .catch((error) => {
+ console.error("Error fetching data:", error);
+ setError(true);
+ })
+ .finally(() => {
+ setIsLoading(false);
+ });
+ }
+ }, [kc_token, url, keycloak]);
+
+ return { data, isLoading, error, auth };
+}
+
+export default useFetch;