Skip to content
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

refactor: full portal code refactor #428

Merged
merged 2 commits into from
Nov 19, 2024
Merged

refactor: full portal code refactor #428

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
add4ae8
refactor: full portal code refactor
tumms2021389 Nov 19, 2024
4d61f56
Merge branch 'master' into refactor/full_portal
tumms2021389 Nov 19, 2024
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
115 changes: 38 additions & 77 deletions packages/react-sdk-components/src/samples/FullPortal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +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 @@ -24,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<Element | null>(null);

const navigate = useNavigate();
const query = useQuery();
Expand All @@ -40,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}
// />,

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

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

/**
Expand Down Expand Up @@ -162,25 +119,18 @@ export default function FullPortal() {
const redirectUrl: any = sessionStorage.getItem('url');
navigate(redirectUrl);
sessionStorage.removeItem('url');
let localeOverride: any = sessionStorage.getItem('rsdk_locale');
if (!localeOverride) {
localeOverride = undefined;
}

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, enableSemanticUrls: true });
loginIfNecessary({ appName: 'portal', mainRedirect: true, locale });
}

// One time (initialization)
useEffect(() => {
document.addEventListener('SdkConstellationReady', () => {
// start the portal
sessionStorage.setItem('isLoggedIn', 'true');
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') {
Expand All @@ -193,16 +143,27 @@ export default function FullPortal() {
appName: 'portal',
mainRedirect: true,
redirectDoneCB: doRedirectDone,
locale: localeOverride,
enableSemanticUrls: true
locale
// semanticUrls: true
});
}, []);

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