Skip to content

refactor: full portal code refactor #538

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tumms2021389 merged 1 commit into from
Nov 20, 2024
Merged

refactor: full portal code refactor #538

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 48 additions & 79 deletions src/samples/FullPortal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-console */
import { useEffect, useMemo, useState } from 'react';
import ReactDOM from 'react-dom';
import { useLocation, useNavigate } from 'react-router-dom';
import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
Expand All @@ -23,10 +24,22 @@ function useQuery() {
return useMemo(() => new URLSearchParams(search), [search]);
}

function RootComponent(props) {
const PegaConnectObj = createPConnectComponent();
const thePConnObj = <PegaConnectObj {...props} />;

const contextValue = useMemo(() => {
return { store: PCore.getStore() };
}, []);

return <StoreContext.Provider value={contextValue}>{thePConnObj}</StoreContext.Provider>;
}

export default function FullPortal() {
const [portalSelectionScreen, setPortalSelectionScreen] = useState(false);
const [defaultPortalName, setDefaultPortalName] = useState('');
const [availablePortals, setAvailablePortals] = useState<string[]>([]);
const [rootComponentProps, setRootComponentProps] = useState<object | null>(null);

const navigate = useNavigate();
const query = useQuery();
Expand All @@ -39,71 +52,16 @@ export default function FullPortal() {
sessionStorage.setItem('rsdk_locale', localeOverride);
}

// const outlet = document.getElementById("outlet");

// from react_root.js with some modifications
// eslint-disable-next-line react/no-unstable-nested-components
function RootComponent(props) {
// const { portalTarget, styleSheetTarget } = props;
const PegaConnectObj = createPConnectComponent();

// remove from Provider to work around compiler error for now: context={StoreContext}
// return (
// <Provider store={PCore.getStore()} context={StoreContext} >
// <PegaConnectObj {...props} />
// </Provider>
// );

// const thePConnObj = <div>the RootComponent</div>;
const thePConnObj = <PegaConnectObj {...props} />;

return (
// eslint-disable-next-line react/jsx-no-constructed-context-values
<StoreContext.Provider value={{ store: PCore.getStore() }}>{thePConnObj}</StoreContext.Provider>
);
}

/**
* Callback from onPCoreReady that's called once the top-level render object
* is ready to be rendered
* @param inRenderObj the initial, top-level PConnect object to render
*/
function initialRender(inRenderObj) {
// modified from react_root.js render
const { props, domContainerID = null, componentName, portalTarget, styleSheetTarget } = inRenderObj;
let target: any = null;
if (domContainerID !== null) {
target = document.getElementById(domContainerID);
} else if (portalTarget !== null) {
target = portalTarget;
}
const Component: any = RootComponent;
if (componentName) {
Component.displayName = componentName;
}

// 1st arg was:
// <Component
// {...props}
// portalTarget={portalTarget}
// styleSheetTarget={styleSheetTarget}
// />,
const { props, portalTarget, styleSheetTarget } = inRenderObj;

// var theComponent = <div>the Component</div>;
const theComponent = (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<CssBaseline />
<Component {...props} portalTarget={portalTarget} styleSheetTarget={styleSheetTarget} />;
</ThemeProvider>
</StyledEngineProvider>
);

ReactDOM.render(
// was <Component
theComponent,
target || document.getElementById('pega-root') || document.getElementsByTagName(domContainerID)[0]
);
// set root components props
setRootComponentProps({ ...props, portalTarget, styleSheetTarget });
}

/**
Expand All @@ -118,7 +76,6 @@ export default function FullPortal() {
// Initialize the SdkComponentMap (local and pega-provided)
// eslint-disable-next-line @typescript-eslint/no-unused-vars
getSdkComponentMap(localSdkComponentMap).then((theComponentMap: any) => {
// eslint-disable-next-line no-console
console.log(`SdkComponentMap initialized`);

// Don't call initialRender until SdkComponentMap is fully initialized
Expand All @@ -137,15 +94,12 @@ export default function FullPortal() {
if (queryPortal) {
myLoadPortal('pega-root', queryPortal, []);
} else if (thePortal) {
// eslint-disable-next-line no-console
console.log(`Loading specified appPortal: ${thePortal}`);
myLoadPortal('pega-root', thePortal, []);
} else if (myLoadDefaultPortal && defaultPortal && !excludePortals.includes(defaultPortal)) {
// eslint-disable-next-line no-console
console.log(`Loading default portal`);
myLoadDefaultPortal('pega-root', []);
} else {
// eslint-disable-next-line no-console
console.log('Loading portal selection screen');
setPortalSelectionScreen(true);
setDefaultPortalName(defaultPortal);
Expand All @@ -162,39 +116,54 @@ export default function FullPortal() {
}

function doRedirectDone() {
navigate(window.location.pathname);
let localeOverride: any = sessionStorage.getItem('rsdk_locale');
if (!localeOverride) {
localeOverride = undefined;
}
const redirectUrl: any = sessionStorage.getItem('url');
navigate(redirectUrl);
sessionStorage.removeItem('url');

const locale: any = sessionStorage.getItem('rsdk_locale') || undefined;
// appName and mainRedirect params have to be same as earlier invocation
loginIfNecessary({ appName: 'portal', mainRedirect: true, locale: localeOverride });
loginIfNecessary({ appName: 'portal', mainRedirect: true, locale });
}

// One time (initialization)
useEffect(() => {
document.addEventListener('SdkConstellationReady', () => {
// start the portal
startPortal();
});
let localeOverride: any = sessionStorage.getItem('rsdk_locale');
if (!localeOverride) {
localeOverride = undefined;
document.addEventListener('SdkConstellationReady', handleSdkConstellationReady);

const locale: any = sessionStorage.getItem('rsdk_locale') || undefined;

const isLoggedIn = sessionStorage.getItem('isLoggedIn');
const redirected = sessionStorage.getItem('redirected');
if (isLoggedIn !== 'true' && redirected !== 'true') {
sessionStorage.setItem('url', window.location.pathname);
navigate('/portal');
}
sessionStorage.setItem('redirected', 'true');
// Login if needed, doing an initial main window redirect
loginIfNecessary({
appName: 'portal',
mainRedirect: true,
redirectDoneCB: doRedirectDone,
locale: localeOverride
locale
// semanticUrls: true //. enable this line for semantic urls
});
}, []);

const handleSdkConstellationReady = () => {
sessionStorage.setItem('isLoggedIn', 'true');
// start the portal
startPortal();
};

return portalSelectionScreen ? (
<InvalidPortal defaultPortal={defaultPortalName} portals={availablePortals} onSelect={loadSelectedPortal} />
) : (
<div>
<div id='pega-root' />
<div id='pega-root'>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<CssBaseline />
{rootComponentProps && <RootComponent {...rootComponentProps} />}
</ThemeProvider>
</StyledEngineProvider>
</div>
);
}
Loading