frontend-plus-react 0.1.15 → 0.1.17

package/dist/index.d.ts

@@ -9,6 +9,7 @@ interface WScreenProps {
     screenName: string;
 }
 declare let wScreens: Record<string, React$1.FC<WScreenProps>>;
+declare const extendWScreens: (newWScreens: Record<string, React$1.FC<WScreenProps>>) => void;
 
 interface ClientSideProps extends RenderCellProps<any, any> {
     fieldDefinition: FieldDefinition;
@@ -25,18 +26,31 @@ type ResultComponentMap = {
     [key: string]: React$1.FC<ResultOkProps>;
 };
 declare let resultsOk: ResultComponentMap;
+declare const extendResultsOk: (newComponents: ResultComponentMap) => void;
 
-interface FrontendPlusReactRoutesProps {
+interface RoutesProps {
     myRoutes?: React$1.ReactNode;
-}
-declare function FrontendPlusReactRoutes({ myRoutes }: FrontendPlusReactRoutesProps): react_jsx_runtime.JSX.Element;
+    myUnloggedRoutes?: React$1.ReactNode;
+    layout?: React$1.ComponentType;
+    unloggedLayout?: React$1.ComponentType;
+}
+declare function FrontendPlusReactRoutes({ myRoutes, myUnloggedRoutes, layout: Layout, unloggedLayout: UnloggedLayout }: RoutesProps): react_jsx_runtime.JSX.Element;
+type WScreenMap = Record<string, React$1.FC<WScreenProps>>;
+type ClientSidesMap = Record<string, React$1.FC<ClientSideProps>>;
+type ResultsOksMap = Record<string, React$1.FC<ResultOkProps>>;
 interface AppProps {
     myRoutes?: React$1.ReactNode;
-    myWScreens?: Record<string, React$1.FC<WScreenProps>>;
-    myClientSides?: Record<string, React$1.FC<ClientSideProps>>;
-    myResultsOk?: Record<string, React$1.FC<ResultOkProps>>;
-}
-declare const App: ({ myRoutes, myWScreens, myClientSides, myResultsOk }: AppProps) => react_jsx_runtime.JSX.Element;
+    myUnloggedRoutes?: React$1.ReactNode;
+    unloggedLayout?: React$1.ComponentType;
+    myWScreens?: WScreenMap;
+    myClientSides?: ClientSidesMap;
+    myResultsOk?: ResultsOksMap;
+}
+declare const FrontendPlusProviders: React$1.FC<{
+    children: React$1.ReactNode;
+    publicPaths: string[];
+}>;
+declare const App: ({ myRoutes, myUnloggedRoutes, unloggedLayout, myWScreens, myClientSides, myResultsOk }: AppProps) => react_jsx_runtime.JSX.Element;
 
 interface CellFeedback {
     rowId: string;
@@ -107,9 +121,11 @@ interface AppContextType {
     checkSession: () => Promise<void>;
     showSessionExpiredMessage: boolean;
     setShowSessionExpiredMessage: (show: boolean) => void;
+    handleExpiredSessionRedirect: () => void;
 }
 interface AppProviderProps {
     children: ReactNode;
+    publicPaths?: string[];
 }
 interface PrivateRouteProps {
     children: ReactNode;
@@ -184,10 +200,12 @@ declare const useApp: () => {
     checkSession: () => Promise<void>;
     showSessionExpiredMessage: boolean;
     setShowSessionExpiredMessage: (show: boolean) => void;
+    handleExpiredSessionRedirect: () => void;
 };
 declare const AppProvider: React$1.FC<AppProviderProps>;
 
 declare const useApiCall: <T = any>() => UseApiCallResult<T>;
+declare const useApiCallWithoutSnackbar: <T = any>() => UseApiCallResult<T>;
 
 /**
  * Hook personalizado para manejar la lógica de cierre de sesión.
@@ -198,4 +216,4 @@ declare const useLogout: () => () => Promise<void>;
 
 declare const cambiarGuionesBajosPorEspacios: (texto: string) => string;
 
-export { App, type AppContextType, type AppProps, AppProvider, type AppProviderProps, type CellFeedback, type CellFeedbackMap, type ClientContextState, ConfirmDialog, type ConfirmDialogProps, type CustomCellProps, type CustomHeaderCellProps, type FetchApiOptions, type FilterRendererProps, type FixedField, FrontendPlusReactRoutes, GenericDataGrid, type GenericDataGridForDetailProps, type GenericDataGridProps$1 as GenericDataGridProps, type InputRendererProps, MainLayout, type MenuListItemProps, type MenuUiState, type PrivateRouteProps, type RouterState, type SideMenuProps, type SnackbarContextType, SnackbarProvider, type SnackbarProviderProps, type SnackbarState, type UseApiCallResult, cambiarGuionesBajosPorEspacios, clientSides, extendClientSides, resultsOk as resultComponents, useApiCall, useApp, useLogout, useSnackbar, wScreens };
+export { App, type AppContextType, type AppProps, AppProvider, type AppProviderProps, type CellFeedback, type CellFeedbackMap, type ClientContextState, type ClientSideProps, type ClientSidesMap, ConfirmDialog, type ConfirmDialogProps, type CustomCellProps, type CustomHeaderCellProps, type FetchApiOptions, type FilterRendererProps, type FixedField, FrontendPlusProviders, FrontendPlusReactRoutes, GenericDataGrid, type GenericDataGridForDetailProps, type GenericDataGridProps$1 as GenericDataGridProps, type InputRendererProps, MainLayout, type MenuListItemProps, type MenuUiState, type PrivateRouteProps, type ResultOkProps, type ResultsOksMap, type RouterState, type SideMenuProps, type SnackbarContextType, SnackbarProvider, type SnackbarProviderProps, type SnackbarState, type UseApiCallResult, type WScreenMap, type WScreenProps, cambiarGuionesBajosPorEspacios, clientSides, extendClientSides, extendResultsOk, extendWScreens, resultsOk as resultComponents, useApiCall, useApiCallWithoutSnackbar, useApp, useLogout, useSnackbar, wScreens };

package/dist/index.js

@@ -757,12 +757,9 @@ var useApiCall = () => {
   const { showSnackbar } = useSnackbar();
   const [loading, setLoading] = useState2(false);
   const [error, setError] = useState2(null);
-  const callApi = useCallback2(async (procedureName, params, opts) => {
+  const callApi = useCallback2(async (procedureName, params) => {
     setLoading(true);
     setError(null);
-    const defaultOpts = { ...{
-      reportOnSnackbar: true
-    }, ...opts };
     try {
       const result = await executeBackendProcedure(procedureName, params);
       return result === null ? void 0 : result;
@@ -774,9 +771,7 @@ var useApiCall = () => {
       } else if (err instanceof Error) {
         snackbarMessage = err.message;
       }
-      if (defaultOpts.reportOnSnackbar) {
-        showSnackbar(snackbarMessage, "error");
-      }
+      showSnackbar(snackbarMessage, "error");
       throw err;
     } finally {
       setLoading(false);
@@ -784,6 +779,25 @@ var useApiCall = () => {
   }, [showSnackbar]);
   return { callApi, loading, error };
 };
+var useApiCallWithoutSnackbar = () => {
+  const [loading, setLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  const callApi = useCallback2(async (procedureName, params) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await executeBackendProcedure(procedureName, params);
+      return result === null ? void 0 : result;
+    } catch (err) {
+      setError(err);
+      console.error(`Error en la llamada API (WithoutSnackbar) para ${procedureName}:`, err);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  return { callApi, loading, error };
+};
 
 // src/components/grid/GenericDataGrid.tsx
 import { CircularProgress as CircularProgress2, Typography as Typography5, Box as Box8, Alert, useTheme as useTheme3 } from "@mui/material";
@@ -2513,8 +2527,8 @@ var GenericDataGrid = ({
 var GenericDataGrid_default = GenericDataGrid;
 
 // src/App.tsx
-import React11, { useEffect as useEffect7 } from "react";
-import { BrowserRouter, Routes, Route, useLocation as useLocation4, Navigate as Navigate2 } from "react-router-dom";
+import React12, { useEffect as useEffect7 } from "react";
+import { BrowserRouter, Routes, Route, useLocation as useLocation5, Navigate as Navigate2, Outlet as Outlet2 } from "react-router-dom";
 
 // src/components/MainLayout.tsx
 import { useEffect as useEffect3 } from "react";
@@ -2533,8 +2547,8 @@ import {
 } from "@mui/material";
 
 // src/contexts/AppContext.tsx
-import { createContext as createContext2, useContext as useContext2, useState as useState6, useEffect as useEffect2, useCallback as useCallback5, useMemo as useMemo3 } from "react";
-import { useNavigate } from "react-router-dom";
+import { createContext as createContext2, useContext as useContext2, useState as useState6, useEffect as useEffect2, useCallback as useCallback5, useMemo as useMemo3, useRef as useRef2 } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 import { useSelector as useSelector2, useDispatch as useDispatch2 } from "react-redux";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var AuthContext = createContext2(void 0);
@@ -2546,16 +2560,33 @@ var useApp = () => {
   const clientContext = useSelector2((state) => state.clientContext);
   return { ...context, clientContext };
 };
-var AppProvider = ({ children }) => {
+var AppProvider = ({ children, publicPaths = [] }) => {
   console.log("AppProvider rendered/re-rendered");
   const [isLoggedIn, setIsLoggedIn] = useState6(false);
   const [showSessionExpiredMessage, setShowSessionExpiredMessage] = useState6(false);
+  const isRedirectingRef = useRef2(false);
   const dispatch = useDispatch2();
   const clientContext = useSelector2((state) => state.clientContext);
   const navigate = useNavigate();
+  const handleExpiredSessionRedirect = useCallback5(() => {
+    isRedirectingRef.current = true;
+    setShowSessionExpiredMessage(false);
+    setIsLoggedIn(false);
+    navigate("/login", { replace: true });
+    setTimeout(() => {
+      isRedirectingRef.current = false;
+    }, 2e3);
+  }, [navigate]);
+  const location = useLocation();
+  const isCurrentPathPublic = useCallback5(() => {
+    const current = location.pathname;
+    return publicPaths.some((path) => current === path || current.startsWith(`${path}/`));
+  }, [location.pathname, publicPaths]);
   const checkSession = useCallback5(async () => {
+    if (isRedirectingRef.current) return;
     try {
       const response = await fetchApi("/keep-alive.json", { method: "GET" });
+      if (isRedirectingRef.current) return;
       if (response.ok) {
         setIsLoggedIn(true);
         setShowSessionExpiredMessage(false);
@@ -2571,15 +2602,19 @@ var AppProvider = ({ children }) => {
       } else {
         setIsLoggedIn(false);
         dispatch(clearClientContext());
-        if (!showSessionExpiredMessage && window.location.pathname !== "/login") {
+        if (!showSessionExpiredMessage && !isCurrentPathPublic()) {
+          console.warn("Sesi\xF3n inv\xE1lida en ruta protegida. Mostrando modal.");
           setShowSessionExpiredMessage(true);
+        } else {
+          console.log("Sesi\xF3n inv\xE1lida, pero estamos en ruta p\xFAblica. Todo bien.");
         }
       }
     } catch (error) {
       console.error("Error checking session:", error);
       setIsLoggedIn(false);
       dispatch(clearClientContext());
-      if (!showSessionExpiredMessage && window.location.pathname !== "/login") {
+      const isPublic = publicPaths.some((p) => location.pathname === p || location.pathname.startsWith(p + "/"));
+      if (!showSessionExpiredMessage && !isCurrentPathPublic()) {
         setShowSessionExpiredMessage(true);
       }
     }
@@ -2596,13 +2631,15 @@ var AppProvider = ({ children }) => {
     setIsLoggedIn,
     checkSession,
     showSessionExpiredMessage,
-    setShowSessionExpiredMessage
+    setShowSessionExpiredMessage,
+    handleExpiredSessionRedirect
   }), [
     isLoggedIn,
     setIsLoggedIn,
     checkSession,
     showSessionExpiredMessage,
-    setShowSessionExpiredMessage
+    setShowSessionExpiredMessage,
+    handleExpiredSessionRedirect
   ]);
   return /* @__PURE__ */ jsx15(AuthContext.Provider, { value: authContextValue, children });
 };
@@ -2624,7 +2661,7 @@ import WarningAmberIcon3 from "@mui/icons-material/WarningAmber";
 import DesktopWindowsIcon from "@mui/icons-material/DesktopWindows";
 import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
 import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
-import { useNavigate as useNavigate2, useLocation } from "react-router-dom";
+import { useNavigate as useNavigate2, useLocation as useLocation2 } from "react-router-dom";
 import { blue, orange, teal, red, grey } from "@mui/material/colors";
 
 // src/pages/WScreens.tsx
@@ -2668,7 +2705,7 @@ var extendWScreens = (newWScreens) => {
 import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var MenuListItem = ({ item, level, onMenuItemClick }) => {
   const navigate = useNavigate2();
-  const location = useLocation();
+  const location = useLocation2();
   const open = useSubMenuOpenState(item.name);
   const dispatch = useAppDispatch();
   const handleClick = () => {
@@ -2756,7 +2793,7 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
 var SideMenu = ({ onMenuItemClick }) => {
   const { clientContext } = useApp();
   const navigate = useNavigate2();
-  const location = useLocation();
+  const location = useLocation2();
   const dispatch = useAppDispatch();
   const subMenuOpenStates = useAppSelector((state) => state.menuUi.subMenuOpenStates);
   const allSubMenusKeys = Object.keys(subMenuOpenStates);
@@ -2977,7 +3014,6 @@ var MainLayout_default = MainLayout;
 
 // src/components/SessionExpiredMessage.tsx
 import { Box as Box12, Typography as Typography9, Button as Button5, Modal } from "@mui/material";
-import { useNavigate as useNavigate4 } from "react-router-dom";
 import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 var style = {
   position: "absolute",
@@ -2993,12 +3029,9 @@ var style = {
   borderRadius: 2
 };
 var SessionExpiredMessage = () => {
-  const { showSessionExpiredMessage, setShowSessionExpiredMessage, setIsLoggedIn } = useApp();
-  const navigate = useNavigate4();
+  const { showSessionExpiredMessage, setShowSessionExpiredMessage, setIsLoggedIn, handleExpiredSessionRedirect } = useApp();
   const handleClose = () => {
-    setShowSessionExpiredMessage(false);
-    setIsLoggedIn(false);
-    navigate("/login", { replace: true });
+    handleExpiredSessionRedirect();
   };
   return /* @__PURE__ */ jsx19(
     Modal,
@@ -3071,7 +3104,7 @@ import { Button as Button6, TextField, Typography as Typography12, Alert as Aler
 import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
-import { useNavigate as useNavigate5 } from "react-router-dom";
+import { useNavigate as useNavigate4 } from "react-router-dom";
 import { useDispatch as useDispatch4 } from "react-redux";
 import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 var loginSchema = z.object({
@@ -3081,7 +3114,7 @@ var loginSchema = z.object({
   // Añadir validación básica
 });
 var LoginPage = () => {
-  const navigate = useNavigate5();
+  const navigate = useNavigate4();
   const [loginError, setLoginError] = useState7(null);
   const [isSubmitting, setIsSubmitting] = useState7(false);
   const { setIsLoggedIn, checkSession } = useApp();
@@ -3681,10 +3714,10 @@ import { PersistGate } from "redux-persist/integration/react";
 
 // src/components/PrivateRoute.tsx
 import { useEffect as useEffect5 } from "react";
-import { Navigate, useLocation as useLocation2 } from "react-router-dom";
+import { Navigate, useLocation as useLocation3 } from "react-router-dom";
 import { Fragment as Fragment4, jsx as jsx25 } from "react/jsx-runtime";
 var PrivateRoute = ({ children }) => {
-  const location = useLocation2();
+  const location = useLocation3();
   const dispatch = useAppDispatch();
   const clientContextStatus = useClientContextStatus();
   const isAuthenticated = clientContextStatus === "succeeded";
@@ -3719,10 +3752,10 @@ var PrivateRoute_default = PrivateRoute;
 
 // src/components/InitialRedirectHandler.tsx
 import { useEffect as useEffect6 } from "react";
-import { useLocation as useLocation3, useNavigate as useNavigate6 } from "react-router-dom";
+import { useLocation as useLocation4, useNavigate as useNavigate5 } from "react-router-dom";
 var InitialRedirectHandler = () => {
-  const location = useLocation3();
-  const navigate = useNavigate6();
+  const location = useLocation4();
+  const navigate = useNavigate5();
   const dispatch = useAppDispatch();
   const redirectPath = useRedirectPath();
   const clientContextStatus = useClientContextStatus();
@@ -3824,22 +3857,43 @@ var MenuTablePage_default = MenuTablePage;
 
 // src/App.tsx
 import { Box as Box20 } from "@mui/material";
+
+// src/utils/routeUtils.ts
+import { Children, isValidElement } from "react";
+var extractPathsFromRoutes = (node) => {
+  const paths = [];
+  Children.forEach(node, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.props.path) {
+      paths.push(child.props.path);
+    }
+    if (child.props.children) {
+      paths.push(...extractPathsFromRoutes(child.props.children));
+    }
+  });
+  return paths;
+};
+
+// src/App.tsx
 import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 var LocationTracker = () => {
-  const location = useLocation4();
+  const location = useLocation5();
   const dispatch = useAppDispatch();
   useEffect7(() => {
     dispatch(setCurrentPath(location.pathname + location.search));
   }, [location, dispatch]);
   return null;
 };
-function FrontendPlusReactRoutes({ myRoutes }) {
+function FrontendPlusReactRoutes({ myRoutes, myUnloggedRoutes, layout: Layout = MainLayout_default, unloggedLayout: UnloggedLayout }) {
   return /* @__PURE__ */ jsxs18(Routes, { children: [
-    /* @__PURE__ */ jsx28(Route, { path: "/login", element: /* @__PURE__ */ jsx28(LoginPage_default, {}) }),
-    /* @__PURE__ */ jsx28(Route, { path: "/logout", element: /* @__PURE__ */ jsx28(LogoutPage_default, {}) }),
+    /* @__PURE__ */ jsxs18(Route, { element: UnloggedLayout ? /* @__PURE__ */ jsx28(UnloggedLayout, {}) : /* @__PURE__ */ jsx28(Outlet2, {}), children: [
+      /* @__PURE__ */ jsx28(Route, { path: "/login", element: /* @__PURE__ */ jsx28(LoginPage_default, {}) }),
+      /* @__PURE__ */ jsx28(Route, { path: "/logout", element: /* @__PURE__ */ jsx28(LogoutPage_default, {}) }),
+      myUnloggedRoutes
+    ] }),
     /* @__PURE__ */ jsxs18(Route, { element: /* @__PURE__ */ jsxs18(PrivateRoute_default, { children: [
       /* @__PURE__ */ jsx28(InitialRedirectHandler_default, {}),
-      /* @__PURE__ */ jsx28(MainLayout_default, {})
+      /* @__PURE__ */ jsx28(Layout, {})
     ] }), children: [
       /* @__PURE__ */ jsx28(Route, { path: "/", element: /* @__PURE__ */ jsx28(HomePage_default, {}) }),
       /* @__PURE__ */ jsx28(Route, { path: "/home", element: /* @__PURE__ */ jsx28(HomePage_default, {}) }),
@@ -3850,12 +3904,12 @@ function FrontendPlusReactRoutes({ myRoutes }) {
         Route,
         {
           path: `/wScreens/${screenName}`,
-          element: React11.createElement(
+          element: React12.createElement(
             Box20,
             {
               sx: { pt: 3, pl: 4 }
             },
-            React11.createElement(wScreens[screenName], { screenName })
+            React12.createElement(wScreens[screenName], { screenName })
           )
         },
         screenName
@@ -3867,14 +3921,26 @@ function FrontendPlusReactRoutes({ myRoutes }) {
           element: /* @__PURE__ */ jsx28(Box20, { sx: { p: 3 }, children: /* @__PURE__ */ jsx28(FallbackWScreen, { screenName: ":screenName" }) })
         }
       ),
+      myRoutes,
       /* @__PURE__ */ jsx28(Route, { path: "*", element: /* @__PURE__ */ jsx28("div", { style: { marginTop: "20px", marginLeft: "10px" }, children: "404 - Recurso No Encontrado" }) })
     ] }),
-    myRoutes,
     /* @__PURE__ */ jsx28(Route, { path: "*", element: /* @__PURE__ */ jsx28(Navigate2, { to: "/", replace: true }) })
   ] });
 }
+var FrontendPlusProviders = ({ children, publicPaths }) => {
+  return /* @__PURE__ */ jsx28(Provider, { store, children: /* @__PURE__ */ jsx28(PersistGate, { loading: null, persistor, children: /* @__PURE__ */ jsxs18(BrowserRouter, { children: [
+    /* @__PURE__ */ jsx28(LocationTracker, {}),
+    " ",
+    /* @__PURE__ */ jsx28(AppProvider, { publicPaths, children: /* @__PURE__ */ jsxs18(SnackbarProvider, { children: [
+      children,
+      /* @__PURE__ */ jsx28(SessionExpiredMessage_default, {})
+    ] }) })
+  ] }) }) });
+};
 var App = ({
   myRoutes,
+  myUnloggedRoutes,
+  unloggedLayout,
   myWScreens,
   myClientSides,
   myResultsOk
@@ -3890,24 +3956,25 @@ var App = ({
       extendWScreens(myWScreens);
     }
   }, [myClientSides, myResultsOk, myWScreens]);
-  return /* @__PURE__ */ jsx28(Provider, { store, children: /* @__PURE__ */ jsx28(PersistGate, { loading: null, persistor, children: /* @__PURE__ */ jsxs18(BrowserRouter, { children: [
-    /* @__PURE__ */ jsx28(LocationTracker, {}),
-    /* @__PURE__ */ jsx28(AppProvider, { children: /* @__PURE__ */ jsxs18(SnackbarProvider, { children: [
-      /* @__PURE__ */ jsx28(
-        FrontendPlusReactRoutes,
-        {
-          myRoutes
-        }
-      ),
-      /* @__PURE__ */ jsx28(SessionExpiredMessage_default, {})
-    ] }) })
-  ] }) }) });
+  const safePaths = React12.useMemo(() => {
+    const extracted = extractPathsFromRoutes(myUnloggedRoutes);
+    return ["/login", "/logout", ...extracted];
+  }, [myUnloggedRoutes]);
+  return /* @__PURE__ */ jsx28(FrontendPlusProviders, { publicPaths: safePaths, children: /* @__PURE__ */ jsx28(
+    FrontendPlusReactRoutes,
+    {
+      myRoutes,
+      myUnloggedRoutes,
+      unloggedLayout
+    }
+  ) });
 };
 var App_default = App;
 export {
   App_default as App,
   AppProvider,
   ConfirmDialog,
+  FrontendPlusProviders,
   FrontendPlusReactRoutes,
   GenericDataGrid_default as GenericDataGrid,
   MainLayout_default as MainLayout,
@@ -3915,8 +3982,11 @@ export {
   cambiarGuionesBajosPorEspacios,
   clientSides,
   extendClientSides,
+  extendResultsOk,
+  extendWScreens,
   resultsOk as resultComponents,
   useApiCall,
+  useApiCallWithoutSnackbar,
   useApp,
   useLogout_default as useLogout,
   useSnackbar,