diff --git a/components/application/index.jsx b/components/application/index.jsx index 85c747491..ed5fa247b 100644 --- a/components/application/index.jsx +++ b/components/application/index.jsx @@ -12,14 +12,15 @@ const Application = ({ children, dataProvider, pathname, + variant = 'public', // 'public' or 'internal' isAuthenticated = false, ...restProps }) => ( <> - + - + {isAuthenticated ? ( <> {dataProvider && } @@ -27,22 +28,24 @@ const Application = ({ ) : null} - -

Navigate your data

- {dataProvider && ( - - {activities.routes - .filter((activity) => activity.parent == null) - .map(({ path, test }) => ( - - ))} - - )} - + {variant === 'internal' && ( + +

Navigate your data

+ {dataProvider && ( + + {activities.routes + .filter((activity) => activity.parent == null) + .map(({ path, test }) => ( + + ))} + + )} + + )} {children &&
{children}
} diff --git a/components/forms/iframe-form.jsx b/components/forms/iframe-form.jsx index d3f246628..261100df4 100644 --- a/components/forms/iframe-form.jsx +++ b/components/forms/iframe-form.jsx @@ -7,20 +7,27 @@ import { Card } from 'design' const IframeForm = ({ className, title, ...passProps }) => { const ref = useRef(null) - const observer = useRef(null) const resize = useCallback(() => { ref.current.style.height = `${ref.current.contentWindow.document.body.offsetHeight}px` }, []) - useEffect(() => { - observer.current = new ResizeObserver(resize) - return () => observer.current.disconnect() - }, []) + const observer = useRef(new ResizeObserver(resize)) const handleOnLoad = useCallback(() => { - observer.current.observe(ref.current.contentWindow.document.body) - resize() + if (ref.current.contentWindow.document.body) { + observer.current.unobserve(ref.current.contentWindow.document.body) + observer.current.observe(ref.current.contentWindow.document.body) + resize() + } + }, []) + + useEffect(() => { + // onLoad event may be fired before the JS is completely loaded + // ensure the element gets observed + // https://github.com/facebook/react/issues/15446 + handleOnLoad() + return () => observer.current.disconnect() }, []) return ( diff --git a/components/layout/container.jsx b/components/layout/container.jsx index e91fffb73..56e7a0c79 100644 --- a/components/layout/container.jsx +++ b/components/layout/container.jsx @@ -4,7 +4,13 @@ import { classNames } from '@oacore/design/lib/utils' import { Provider as LayoutContext } from './context' import styles from './styles.module.css' -const Container = ({ children, className, tag: Tag = 'div', ...restProps }) => { +const Container = ({ + children, + className, + variant, + tag: Tag = 'div', + ...restProps +}) => { const [state, update] = useState({ sidebarId: 'sidebar', sidebarExpanded: false, @@ -13,7 +19,8 @@ const Container = ({ children, className, tag: Tag = 'div', ...restProps }) => { return ( diff --git a/components/layout/main.jsx b/components/layout/main.jsx index bd8bfcb0b..73fcd0b89 100644 --- a/components/layout/main.jsx +++ b/components/layout/main.jsx @@ -7,7 +7,7 @@ const Main = ({ children }) => { const child = React.Children.only(children) const { className, tag } = child.props return React.cloneElement(child, { - className: classNames.use(styles.main).join(className), + className: classNames.use(styles.main).join(className).toString(), tag: tag || 'main', }) } diff --git a/components/layout/styles.module.css b/components/layout/styles.module.css index d09073a8f..fa2f24a47 100644 --- a/components/layout/styles.module.css +++ b/components/layout/styles.module.css @@ -10,8 +10,10 @@ min-height: 100%; padding-top: var(--app-bar-skip); background: var(--gray-200); +} - @media (--screen-at-least-desktop) { +@media (--screen-at-least-desktop) { + .internal.container { padding-left: var(--side-bar-width); } } diff --git a/pages/_app/index.jsx b/pages/_app/index.jsx index 58dc0949b..3f513fcfa 100644 --- a/pages/_app/index.jsx +++ b/pages/_app/index.jsx @@ -23,7 +23,7 @@ process.on('uncaughtException', (err) => { const ROUTES_WITHOUT_STORE = ['/login', '/reset', '/invitation'] const isRouteWithoutStore = (pathname) => - ROUTES_WITHOUT_STORE.find((prefix) => pathname.startsWith(prefix)) + ROUTES_WITHOUT_STORE.some((prefix) => pathname.startsWith(prefix)) export async function getStaticProps({ res }) { res.setHeader( @@ -170,16 +170,19 @@ class App extends NextApp { const { store } = this const { Component, pageProps, router } = this.props const { isAuthorized } = this.state - const pathname = this.props.router.asPath + const pathname = router.asPath + const variant = + isAuthorized && !isRouteWithoutStore(pathname) ? 'internal' : 'public' if (!isAuthorized) { return ( - <> - - {isRouteWithoutStore(router.asPath) ? ( - - ) : null} - + + {isRouteWithoutStore(pathname) ? : null} + ) } @@ -187,6 +190,7 @@ class App extends NextApp { diff --git a/pages/invitation.jsx b/pages/invitation.jsx index 84977510d..058145eec 100644 --- a/pages/invitation.jsx +++ b/pages/invitation.jsx @@ -10,7 +10,7 @@ import { InvitationRegister } from 'components/forms' const Invitation = ({ className, router, ...restProps }) => (