@canmingir/link 1.2.53 → 1.2.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.53",
+  "version": "1.2.55",
   "type": "module",
   "bin": {
     "link-server": "./server/server.ts"
@@ -41,7 +41,6 @@
     "autosuggest-highlight": "^3.3.4",
     "aws-amplify": "^6.16.0",
     "axios": "^1.10.0",
-    "axios-auth-refresh": "^3.3.6",
     "axios-retry": "^4.4.1",
     "cypress": "^15.3.0",
     "date-fns": "^3.6.0",
@@ -60,10 +59,10 @@
     "react-apexcharts": "^1.4.1",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
-    "react-is": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.52.1",
+    "react-is": "^18.3.1",
     "react-lazy-load-image-component": "^1.6.2",
     "react-map-gl": "^7.1.7",
     "react-markdown": "^9.0.1",

package/src/components/logo/logo.jsx

@@ -1,66 +1,30 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useState } from "react";
 
 import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
 import { RouterLink } from "../../routes/components";
 import config from "../../config/config";
 
-const resolvedDimensions = {};
-
 const Logo = ({ disabledLink = false, sx, maxSize = 65, isLogin = false }) => {
   const { icon } = config().template.login;
-  const key = `${icon}_${maxSize}_${isLogin}`;
-
-  const [dimensions, setDimensions] = useState(
-    resolvedDimensions[key] || { width: maxSize, height: maxSize },
-  );
-
-  useEffect(() => {
-    if (!icon || resolvedDimensions[key]) return;
 
-    const img = new Image();
-    img.onload = () => {
-      const { naturalWidth, naturalHeight } = img;
-      const isSquare = naturalWidth === naturalHeight;
-      let newDimensions;
-
-      if (naturalWidth > maxSize || naturalHeight > maxSize) {
-        if (isSquare) {
-          newDimensions = {
-            width: isLogin ? maxSize : 40,
-            height: isLogin ? maxSize : 40,
-          };
-        } else {
-          const aspectRatio = naturalWidth / naturalHeight;
-          if (naturalWidth >= naturalHeight) {
-            newDimensions = {
-              width: maxSize,
-              height: Math.round(maxSize / aspectRatio),
-            };
-          } else {
-            newDimensions = {
-              width: Math.round(maxSize * aspectRatio),
-              height: maxSize,
-            };
-          }
-        }
-      } else {
-        newDimensions = { width: naturalWidth, height: naturalHeight };
-      }
-
-      resolvedDimensions[key] = newDimensions;
-      setDimensions(newDimensions);
-    };
-    img.src = icon;
-  }, [icon, maxSize, key]);
+  const [isSquare, setIsSquare] = useState(false);
+  const squareCap = isSquare && !isLogin ? 40 : maxSize;
 
   const logo = (
     <Box
       component="img"
       src={icon}
+      onLoad={(e) => {
+        const { naturalWidth, naturalHeight } = e.currentTarget;
+        setIsSquare(naturalWidth === naturalHeight);
+      }}
       sx={{
-        width: dimensions.width,
-        height: dimensions.height,
+        maxWidth: squareCap,
+        maxHeight: squareCap,
+        width: "auto",
+        height: "auto",
+        objectFit: "contain",
         cursor: "pointer",
         ...sx,
       }}

package/src/http/index.js

@@ -1,7 +1,5 @@
 import axios from "axios";
 import config from "../config/config";
-import createAuthRefreshInterceptor from "axios-auth-refresh";
-import { jwtDecode } from "jwt-decode";
 import oauth from "./oauth";
 import { publish } from "@nucleoidai/react-event";
 import { storage } from "@nucleoidjs/webstorage";
@@ -29,6 +27,40 @@ instance.interceptors.request.use((request) => {
   return request;
 });
 
+let isRefreshing = false;
+let failedQueue = [];
+
+function processQueue(error, token = null) {
+  failedQueue.forEach(({ resolve, reject }) => {
+    if (error) reject(error);
+    else resolve(token);
+  });
+  failedQueue = [];
+}
+
+async function doRefresh() {
+  const { appId } = config();
+  const projectId = storage.get("projectId");
+  const identityProvider = storage.get("link", "identityProvider");
+
+  const { data } = await oauth.post("/oauth", {
+    refreshToken: storage.get("link", "refreshToken"),
+    appId,
+    projectId,
+    identityProvider,
+    ...(identityProvider === "DEMO" && {
+      username: "admin",
+      password: "admin",
+    }),
+  });
+
+  storage.set("link", "accessToken", data.accessToken);
+  if (data.refreshToken) {
+    storage.set("link", "refreshToken", data.refreshToken);
+  }
+  return data.accessToken;
+}
+
 instance.interceptors.response.use(
   (response) => {
     if (response.headers["content-type"] === "application/json") {
@@ -39,17 +71,48 @@ instance.interceptors.response.use(
   },
   async (error) => {
     publish("LOADED", { loading: false });
+    const originalRequest = error.config;
     const statusCode = error.response?.status;
 
-    if (statusCode === 500) {
-      const token = storage.get("link", "accessToken");
+    if (statusCode === 401 && !originalRequest._retried) {
+      originalRequest._retried = true;
+
+      const usedToken = originalRequest.headers["Authorization"]?.replace(
+        "Bearer ",
+        ""
+      );
+      const storedToken = storage.get("link", "accessToken");
+
+      if (storedToken && storedToken !== usedToken) {
+        originalRequest.headers["Authorization"] = `Bearer ${storedToken}`;
+        return instance(originalRequest);
+      }
+
+      if (isRefreshing) {
+        return new Promise((resolve, reject) => {
+          failedQueue.push({ resolve, reject });
+        }).then((token) => {
+          originalRequest.headers["Authorization"] = `Bearer ${token}`;
+          return instance(originalRequest);
+        });
+      }
+
+      isRefreshing = true;
+
       try {
-        const decodedToken = jwtDecode(token);
-        if (decodedToken.exp * 1000 < Date.now()) {
-          return Promise.reject(error);
-        }
-      } catch (_) {
-        return Promise.reject(error);
+        const token = await doRefresh();
+        processQueue(null, token);
+        originalRequest.headers["Authorization"] = `Bearer ${token}`;
+        return instance(originalRequest);
+      } catch (refreshError) {
+        processQueue(refreshError, null);
+        const { base } = config();
+        storage.remove("link", "accessToken");
+        storage.remove("link", "refreshToken");
+        window.location.href = `${window.location.origin}${base}/login`;
+        return Promise.reject(refreshError);
+      } finally {
+        isRefreshing = false;
       }
     }
 
@@ -91,95 +154,9 @@ instance.interceptors.response.use(
         break;
     }
     return Promise.reject(error);
-  },
+  }
 );
 
 export const fetcher = (url) => instance.get(url).then((res) => res.data);
 
-const refreshAuthLogic = async (failedRequest) => {
-  try {
-    const { appId } = config();
-    const projectId = storage.get("projectId");
-    const identityProvider = storage.get("link", "identityProvider");
-
-    const { data } = await oauth.post("/oauth", {
-      refreshToken: storage.get("link", "refreshToken"),
-      appId,
-      projectId,
-      identityProvider,
-      ...(identityProvider === "DEMO" && {
-        username: "admin",
-        password: "admin",
-      }),
-    });
-
-    const { accessToken, refreshToken } = data;
-
-    failedRequest.response.config.headers["Authorization"] =
-      "Bearer " + accessToken;
-
-    storage.set("link", "accessToken", accessToken);
-    if (refreshToken) {
-      storage.set("link", "refreshToken", refreshToken);
-    }
-
-    return Promise.resolve();
-  } catch (error) {
-    const { base } = config();
-
-    storage.remove("link", "accessToken");
-    storage.remove("link", "refreshToken");
-
-    window.location.href = `${window.location.origin}${base}/login`;
-    return Promise.reject(error);
-  }
-};
-
-const refreshInterceptor =
-  typeof createAuthRefreshInterceptor === "function"
-    ? createAuthRefreshInterceptor
-    : createAuthRefreshInterceptor.default;
-
-refreshInterceptor(instance, refreshAuthLogic, {
-  statusCodes: [401, 403, 500],
-  pauseInstanceWhileRefreshing: true,
-  shouldRefresh: (error) => {
-    const { base } = config();
-    const token = storage.get("link", "accessToken");
-    const identityProvider = storage.get("link", "identityProvider");
-    const statusCode = error.response?.status;
-
-    if (!token) {
-      window.location.href = `${window.location.origin}${base}/login`;
-      return false;
-    }
-
-    if (identityProvider === "DEMO") {
-      if (statusCode !== 500) {
-        return true;
-      }
-
-      try {
-        const decodedToken = jwtDecode(token);
-        return decodedToken.exp * 1000 < Date.now();
-      } catch (_) {
-        // If we can't decode, attempt refresh once.
-        return true;
-      }
-    }
-
-    try {
-      const decodedToken = jwtDecode(token);
-      if (decodedToken.exp * 1000 < Date.now()) {
-        return true;
-      }
-    } catch (err) {
-      window.location.href = `${window.location.origin}${base}/login`;
-      return false;
-    }
-
-    return false;
-  },
-});
-
 export default instance;

package/src/http/oauth.js

@@ -1,7 +1,6 @@
 import axios from "axios";
 import axiosRetry from "axios-retry";
 import config from "../config/config.js";
-import qs from "qs";
 
 const instance = axios.create({
   baseURL: config().api,
@@ -12,16 +11,6 @@ const instance = axios.create({
   },
 });
 
-axiosRetry(instance, { retries: 3 });
-
-instance.interceptors.response.use(
-  (response) => {
-    response.data = qs.parse(response.data);
-    return response;
-  },
-  (error) => {
-    return Promise.reject(error);
-  }
-);
+axiosRetry(instance, { retries: 2 });
 
 export default instance;

package/src/http/user.js

@@ -2,7 +2,6 @@ import axios from "axios";
 import config from "../config/config.js";
 import http from "./index";
 import { jwtDecode } from "jwt-decode";
-import oauth from "./oauth";
 import { storage } from "@nucleoidjs/webstorage";
 
 const instance = axios.create({
@@ -23,51 +22,9 @@ instance.interceptors.request.use(async (request) => {
 
 instance.getUserDetails = async () => {
   try {
-    const refreshToken = await storage.get("link", "refreshToken");
+    const refreshToken = storage.get("link", "refreshToken");
 
     if (!refreshToken) {
-      console.log("No refresh token found");
-      return null;
-    }
-
-    let accessToken = await storage.get("link", "accessToken");
-
-    if (!accessToken) {
-      console.log("No access token found");
-      return null;
-    }
-
-    try {
-      const decodedToken = jwtDecode(accessToken);
-      const isExpired = decodedToken.exp * 1000 < Date.now();
-
-      if (isExpired) {
-        console.log(
-          "Access token expired, refreshing before fetching user details...",
-        );
-        const { appId } = config();
-        const projectId = storage.get("projectId");
-        const identityProvider = storage.get("link", "identityProvider");
-
-        const { data } = await oauth.post("/oauth", {
-          refreshToken,
-          appId,
-          projectId,
-          identityProvider,
-          ...(identityProvider === "DEMO" && {
-            username: "admin",
-            password: "admin",
-          }),
-        });
-
-        accessToken = data.accessToken;
-        storage.set("link", "accessToken", accessToken);
-        console.log(
-          "Access token refreshed successfully, now fetching user details",
-        );
-      }
-    } catch (error) {
-      console.error("Error checking or refreshing token:", error);
       return null;
     }
 
@@ -81,7 +38,6 @@ instance.getUserDetails = async () => {
       return response.data.user;
     }
 
-    console.log("No user data received from server");
     return null;
   } catch (error) {
     console.error("Error fetching user details from server:", error);
@@ -100,7 +56,7 @@ instance.getPermittedUsers = async () => {
     ...new Set(
       response.data
         .filter((p) => p.appId === appId && p.projectId === projectId)
-        .map((p) => p.userId),
+        .map((p) => p.userId)
     ),
   ];
 
@@ -122,7 +78,7 @@ instance.getPermittedUsers = async () => {
         }
         const { data } = await axios.get(
           `https://api.github.com/user/${userId}`,
-          { headers: { Accept: "application/vnd.github+json" } },
+          { headers: { Accept: "application/vnd.github+json" } }
         );
         return {
           id: String(data.id),
@@ -132,7 +88,7 @@ instance.getPermittedUsers = async () => {
           avatarUrl: data.avatar_url || null,
           email: data.email || null,
         };
-      }),
+      })
     );
 
     return results

package/src/lib/Flow/core/Flow.jsx

@@ -14,6 +14,7 @@ export const Flow = ({
   onChange,
   height,
   initialZoom,
+  centered = false,
 }) => {
   const [floatingNodes, setFloatingNodes] = useState([]);
 
@@ -90,6 +91,7 @@ export const Flow = ({
         floatingNodes={floatingNodes}
         height={height}
         initialZoom={initialZoom}
+        centered={centered}
       />
     </Box>
   );

package/src/lib/Flow/core/FlowNode.jsx

@@ -18,6 +18,7 @@ const FlowNode = ({
   node,
   height,
   initialZoom,
+  centered,
   ...props
 }) => {
   if (!isRoot) {
@@ -52,6 +53,7 @@ const FlowNode = ({
         plugin={plugin}
         height={height}
         initialZoom={initialZoom}
+        centered={centered}
       >
         {node && (
           <FlowNodeView

package/src/lib/Flow/core/FlowViewport.jsx

@@ -18,6 +18,7 @@ const FlowViewport = ({
   plugin,
   height = "100vh",
   initialZoom = 1,
+  centered = false,
   sx = {},
   ...rest
 }) => {
@@ -45,6 +46,8 @@ const FlowViewport = ({
   } = useSelection();
 
   useEffect(() => {
+    if (centered) return;
+
     const container = containerRef.current;
     const inner = innerRef.current;
     if (!container || !inner) return;
@@ -64,7 +67,7 @@ const FlowViewport = ({
     observer.observe(container);
 
     return () => observer.disconnect();
-  }, []);
+  }, [centered]);
 
   useEffect(() => {
     const handleMouseMove = (e) => {
@@ -310,11 +313,11 @@ const FlowViewport = ({
           height: height,
           display: "flex",
           alignItems: "center",
-          justifyContent: shouldCenter ? "center" : "flex-start",
+          justifyContent: centered || shouldCenter ? "center" : "flex-start",
           transition: isDragging ? "none" : "transform 0.1s ease-out",
           pointerEvents: "auto",
           position: "relative",
-          pl: variant === "horizontal" ? 4 : 0,
+          pl: centered ? 0 : variant === "horizontal" ? 4 : 0,
         }}
       >
         {children}

package/vite/vite.js

@@ -51,7 +51,6 @@ async function vite() {
       include: [
         "@mui/material",
         "@nucleoidai/platform",
-        "axios-auth-refresh",
         "@emotion/react",
         "@emotion/styled",
         "@emotion/css",
@@ -67,7 +66,7 @@ async function vite() {
           find: /^src(.+)/,
           replacement: path.join(
             process.cwd(),
-            "/node_modules/@nucleoidai/platform/minimal/src/$1",
+            "/node_modules/@nucleoidai/platform/minimal/src/$1"
           ),
         },
       ],