@genesislcap/blank-app-seed 5.1.2-prerelease.2 → 5.1.2-prerelease.3

package/.genx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed-config",
   "description": "Genesis Blank App Seed Configuration",
-  "version": "5.1.2-prerelease.2",
+  "version": "5.1.2-prerelease.3",
   "license": "Apache-2.0",
   "scripts": {
     "lint": "eslint .",

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [5.1.2-prerelease.3](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v5.1.2-prerelease.2...v5.1.2-prerelease.3) (2025-05-30)
+
+
+### Bug Fixes
+
+* react router fixes b6d4754
+* react router fixes (#469) 12e9d1e
+
 ## [5.1.2-prerelease.2](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v5.1.2-prerelease.1...v5.1.2-prerelease.2) (2025-05-26)
 
 

package/client-tmp/react/package.json

@@ -51,6 +51,7 @@
     "@genesislcap/foundation-shell": "{{versions.UI}}",
     "@genesislcap/foundation-ui": "{{versions.UI}}",
     "@genesislcap/foundation-utils": "{{versions.UI}}",
+    "@genesislcap/foundation-zero-grid-tabulator": "{{versions.UI}}",
     "@genesislcap/rapid-design-system": "{{versions.UI}}",
     "@genesislcap/rapid-grid-pro": "{{versions.UI}}",
     "@genesislcap/rapid-grid-tabulator": "{{versions.UI}}",
@@ -61,7 +62,7 @@
     "history": "^5.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router": "^7.1.3",
+    "react-router-dom": "^7.1.3",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {

package/client-tmp/react/src/App.tsx

@@ -1,56 +1,19 @@
 import { useEffect, useState } from 'react';
-import {Routes, Route, useLocation, BrowserRouter} from 'react-router';
+import { BrowserRouter as Router } from 'react-router-dom';
 import {
   setApiHost,
-  getLayoutNameByRoute,
   {{#if FDC3.channels.length~}}
   listenToChannel,
   onFDC3Ready,
   {{/if}}
 } from './utils';
 import { customEventFactory, registerStylesTarget } from '@/pbc/utils';
-import LayoutWrapper from './layouts/LayoutWrapper';
-import LayoutName from '@/types/LayoutName';
-import { AUTH_PATH, routeLayouts } from './config';
-import { AuthProvider } from './store/AuthContext';
-import { RoutesProvider, useRoutesContext } from './store/RoutesContext';
-import AuthPage from './pages/AuthPage/AuthPage';
+import { RoutesProvider } from './store/RoutesContext';
 import { registerComponents as genesisRegisterComponents } from './share/genesis-components';
-import ProtectedGuard from './guards/ProtectedGuard';
 import { storeService } from '@/services/store.service';
+import AppRoutes from './components/routes/AppRoutes';
+import NotFoundPage from "@/pages/NotFoundPage/NotFoundPage.tsx";
 
-const DynamicLayout = () => {
-  const location = useLocation();
-  const [layoutName, setLayoutName] = useState<LayoutName>(routeLayouts[location.pathname]  || 'default');
-  const handleRouteChange = (location: any) => {
-    setLayoutName(getLayoutNameByRoute(location.pathname));
-  };
-  const route = useRoutesContext().find((r) => r.path === location.pathname);
-  let pageComponent;
-  let content;
-
-  useEffect(() => {
-    handleRouteChange(location);
-
-    return () => {
-    }
-  }, [location]);
-
-  if (route) {
-    pageComponent = route.element;
-  } else {
-    pageComponent = <AuthPage />;
-  }
-
-  if (location.pathname === `/${AUTH_PATH}` || location.pathname === '/') {
-    content = pageComponent;
-  } else {
-    content = <ProtectedGuard>{pageComponent}</ProtectedGuard>
-  }
-
-  return <LayoutWrapper layout={layoutName}>{content}</LayoutWrapper>
-
-};
 
 interface AppProps {
   rootElement: HTMLElement;
@@ -103,15 +66,11 @@ const App: React.FC<AppProps> = ({ rootElement }) => {
   const basePath = baseElement?.getAttribute('href') || '';
 
   return (
-    <AuthProvider>
-      <RoutesProvider>
-        <BrowserRouter basename={basePath}>
-          <Routes>
-            <Route path="*" element={<DynamicLayout />} />
-          </Routes>
-        </BrowserRouter>
-      </RoutesProvider>
-    </AuthProvider>
+    <RoutesProvider>
+        <Router basename={basePath}>
+          <AppRoutes />
+        </Router>
+    </RoutesProvider>
   );
 };
 

package/client-tmp/react/src/components/routes/AppRoutes.tsx

@@ -0,0 +1,35 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import AuthPage from '../../pages/AuthPage/AuthPage';
+import Home from '../../pages/Home/Home';
+import DefaultLayout from '../../layouts/default/DefaultLayout';
+import ProtectedRoute from './ProtectedRoute';
+import { useRoutesContext } from '@/store/RoutesContext';
+import PBCContainer from '@/pbc/container';
+import NotFoundPage from '@/pages/NotFoundPage/NotFoundPage.tsx';
+
+const AppRoutes = () => {
+  const routes = useRoutesContext();
+  return (
+    <Routes>
+      <Route path="/login" element={<AuthPage />} />
+      <Route path="/" element={<Navigate to="/{{kebabCase routes.[0].name}}" replace />} />
+      <Route element={<DefaultLayout />}>
+        <Route path="/" element={<Home />} />
+        {routes.map(route => (<Route
+            key={route.path}
+            path={route.path}
+            element={
+            <ProtectedRoute>
+              {route.data?.pbcElement ? <PBCContainer /> : route.element}
+            </ProtectedRoute>
+            }
+            />))}
+      </Route>
+      
+      <Route path="*" element={<NotFoundPage />} />
+    </Routes>
+  );
+};
+
+export default AppRoutes; 
+

package/client-tmp/react/src/components/routes/ProtectedRoute.tsx

@@ -0,0 +1,17 @@
+import { Navigate, useLocation } from 'react-router-dom';
+import { getUser } from '@genesislcap/foundation-user';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+function ProtectedRoute({ children }: ProtectedRouteProps) {
+  if (!getUser().isAuthenticated) {
+    const location = useLocation();
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  return <>{children}</>;
+}
+
+export default ProtectedRoute;

package/client-tmp/react/src/layouts/default/DefaultLayout.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode, useEffect, useRef } from 'react';
-import { RouteObject, useNavigate } from 'react-router';
+import React, { useEffect, useRef } from 'react';
+import { RouteObject, useNavigate, Outlet } from 'react-router-dom';
 import { configureDesignSystem, getNavItems } from '@genesislcap/foundation-ui';
 import {
   baseLayerLuminance,
@@ -10,10 +10,9 @@ import PBCElementsRenderer from '@/pbc/elementsRenderer';
 import * as designTokens from '@/styles/design-tokens.json';
 import { useRoutesContext } from '@/store/RoutesContext';
 import { AUTH_PATH } from '@/config';
+import { LOGOUT_URL } from '@genesislcap/foundation-utils';
 
-interface DefaultLayoutProps {
-  children: ReactNode;
-}
+interface DefaultLayoutProps {}
 
 type ExtendedRouteObject = RouteObject & {
   data?: {
@@ -22,7 +21,7 @@ type ExtendedRouteObject = RouteObject & {
   path: string;
 }
 
-const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
+const DefaultLayout: React.FC<DefaultLayoutProps> = () => {
   const navigate = useNavigate();
   const designSystemProviderRef = useRef<HTMLElement>(null);
   const routes = useRoutesContext() as ExtendedRouteObject[];
@@ -59,7 +58,10 @@ const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
       <PBCElementsRenderer target={['layout-start']} />
       <foundation-header
         onluminance-icon-clicked={onLuminanceToggle}
-        onlogout-clicked={() => navigate(`/${AUTH_PATH}`)}
+        logout={async () => {
+          await fetch(LOGOUT_URL);
+          window.location.reload()
+        }}
         show-luminance-toggle-button
         show-misc-toggle-button
         routeNavItems={navItems}
@@ -68,7 +70,7 @@ const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
       </foundation-header>
       <section className={styles['content']}>
         <PBCElementsRenderer target={['content-start']} />
-        {children}
+        <Outlet />
         <PBCElementsRenderer target={['content', 'content-end']} />
       </section>
       <PBCElementsRenderer target={['layout', 'layout-end']} />

package/client-tmp/react/src/pages/AuthPage/AuthPage.tsx

@@ -1,13 +1,14 @@
 import React, {useEffect} from 'react';
 import './AuthPage.css';
 import { configureFoundationLogin } from "@/share/foundation-login.ts";
-import { useNavigate } from 'react-router';
+import { useNavigate, useLocation } from 'react-router-dom';
 
 const AuthPage: React.FC = () => {
     const navigate = useNavigate();
+    const location = useLocation();
 
     useEffect(() => {
-        configureFoundationLogin({ navigate });
+        configureFoundationLogin({ navigate, location });
     }, []);
 
     return (

package/client-tmp/react/src/pbc/container.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useRef, RouteObject } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { deriveElementTag } from './utils';
 import { useRoutesContext } from '@/store/RoutesContext';
-import { useLocation } from 'react-router';
+import { useLocation, RouteObject } from 'react-router-dom';
 
 type ExtendedRouteObject = RouteObject & {
   data?: {

package/client-tmp/react/src/share/foundation-login.ts

@@ -3,12 +3,18 @@ import { AUTH_PATH } from '@/config';
 import { environment } from "@/environments/environment.ts";
 import { Connect } from '@genesislcap/foundation-comms';
 import { DI } from '@genesislcap/web-core';
-import type { NavigateFunction } from 'react-router';
+import type { NavigateFunction, Location as RouterLocation } from 'react-router-dom';
+
+interface LocationState {
+  from?: {
+    pathname: string;
+  };
+}
 
 /**
  * Configure the micro frontend
  */
-export const configureFoundationLogin = ({navigate}: { navigate: NavigateFunction}) => {
+export const configureFoundationLogin = ({navigate, location}: { navigate: NavigateFunction, location: RouterLocation<LocationState>}) => {
   const baseElement = document.querySelector('base');
   const basePath = baseElement?.getAttribute('href') || '';
   const connect = DI.getOrCreateDOMContainer().get(Connect);
@@ -27,9 +33,8 @@ export const configureFoundationLogin = ({navigate}: { navigate: NavigateFunctio
     postLoginRedirect: async () => {
       const url = environment.API_HOST;
       await connect.connect(url);
-
-      const redirectUrl = '/{{kebabCase routes.[0].name}}';
-      navigate(redirectUrl);
+      const from = location.state?.from?.pathname || '/';
+      navigate(from, { replace: true });
     },
   })
 }

package/client-tmp/react/src/share/genesis-components.ts

@@ -2,7 +2,6 @@ import { EntityManagement } from '@genesislcap/foundation-entity-management';
 import { Form } from '@genesislcap/foundation-forms';
 import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
 import { getApp } from '@genesislcap/foundation-shell/app';
-import * as zeroDesignSystem from '@genesislcap/foundation-zero';
 import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
 import * as rapidDesignSystem from '@genesislcap/rapid-design-system';
 import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';
@@ -49,10 +48,4 @@ export async function registerComponents() {
     },
   });
 
-  /**
-   * May be still required while we transition all PBCs to rapid. Remove when complete.
-   */
-  zeroDesignSystem
-    .provideDesignSystem()
-    .register(zeroDesignSystem.baseComponents, g2plotChartsComponents, foundationLayoutComponents);
 }

package/client-tmp/react/src/store/RoutesContext.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, ReactNode } from 'react';
-import { RouteObject, Navigate } from 'react-router';
+import { RouteObject, Navigate } from 'react-router-dom';
 import { getApp } from '@genesislcap/foundation-shell/app';
 import AuthPage from '@/pages/AuthPage/AuthPage';
 import NotFoundPage from '@/pages/NotFoundPage/NotFoundPage';

package/client-tmp/react/webpack.config.js

@@ -75,6 +75,7 @@ module.exports = (env, argv) => {
       new Dotenv(),
       new webpack.DefinePlugin({
         BUILDER: JSON.stringify('webpack'),
+        PUBLIC_PATH: JSON.stringify(publicPath),
       }),
     ],
     devServer: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed",
   "description": "Genesis Blank App Seed",
-  "version": "5.1.2-prerelease.2",
+  "version": "5.1.2-prerelease.3",
   "license": "Apache-2.0",
   "scripts": {
     "release": "semantic-release"

package/client-tmp/react/src/guards/ProtectedGuard.tsx

@@ -1,61 +0,0 @@
-import { useEffect, ReactNode, useState } from 'react';
-import {RouteObject, useNavigate} from 'react-router';
-import hasPermissionHelper from '@/helpers/hasPermissionHelper';
-import { useRoutesContext } from '@/store/RoutesContext';
-import { NOT_PERMITTED_PATH, AUTH_PATH } from '@/config';
-import { getUser } from '@genesislcap/foundation-user';
-
-enum PermissionState {
-  ALLOWED = 'allowed',
-  DENIED = 'denied',
-  UNKNOWN = 'unknown',
-}
-
-const redirectUrlByPermissionState: { [key in Partial<PermissionState>]?: string } = {
-  [PermissionState.DENIED]: NOT_PERMITTED_PATH,
-  [PermissionState.UNKNOWN]: AUTH_PATH,
-};
-
-type ExtendedRouteObject = RouteObject & {
-  data?: {
-    permissionCode?: string;
-  };
-  path: string;
-}
-
-const ProtectedGuard: React.FC<{ children: ReactNode }> = ({ children }: { children: ReactNode }) => {
-  const routes = useRoutesContext() as ExtendedRouteObject[];
-  const [isConnected, setIsConnected] = useState<boolean | null>(null);
-  const isAuthenticated: boolean | null = null;
-  const route = routes.find(({ path }) => path === location.pathname);
-  const hasPermission = route?.data?.permissionCode ? hasPermissionHelper(route.data?.permissionCode) : true;
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    if (!getUser().isAuthenticated){
-        getUser().trackPath();
-        navigate('/login')
-    }
-  }, []);
-
-  useEffect((): void  => {
-
-    const isAuthenticated = getUser().isAuthenticated;
-    let permissionState;
-
-    if (!isAuthenticated) {
-      permissionState = PermissionState.UNKNOWN;
-    } else if (hasPermission === false) {
-      permissionState = PermissionState.DENIED;
-    }
-
-    if (permissionState) {
-      const redirect = `${redirectUrlByPermissionState[permissionState]}`;
-      navigate(`${redirect}`);
-    }
-  }, [routes, isAuthenticated, hasPermission]);
-
-  return children;
-};
-
-export default ProtectedGuard;