mfd-shell

Modules MicroFrontend

A Webpack Federation Module containing the modules and modals in React.

Usage

Inside the mfdModules

There is a component called BaseModal that has the basic structure for the Portal, making use of the basic structure of components from @cloudbeds/ui-library

import React from 'mfdCommon/react';
import { CbModal, CbModalOverlay, CbModalContent } from 'mfdCommon/@cloudbeds/ui-library';

export const BaseModal = ({ history, children, isCentered, ...props }) => {
  const navigateBack = () => history.back();

  return (
    <CbModal onClose={navigateBack} zIndex={10} isCentered={isCentered} isOpen closeOnEsc>
      <CbModalContent zIndex={10} {...props}>
        {children}
      </CbModalContent>
      <CbModalOverlay bg="rgba(0,0,0,.7)" backdropFilter="blur(5px)" zIndex={10} onClick={navigateBack} />
    </CbModal>
  );
};

Thus, any modal made must use the structure offered by BaseModal, applying the content as a child. Note that history always needs to be sent via prop to BaseModal. Only way for the onClickOutside feature to work properly.

import React from 'mfdCommon/react';
import { CbModalHeader, CbModalBody } from 'mfdCommon/@cloudbeds/ui-library';

import { BaseModal } from './BaseModal';

export const BasicModal = ({ history, ...props }) => (
  <BaseModal history={history} isCentered>
    <CbModalHeader>BasicModal Header</CbModalHeader>
    <CbModalBody {...props}>BasicModal Body</CbModalBody>
  </BaseModal>
);

Once created, you need to insert the modal into the array that will be imported by mfdCommon and injected into myfrontdesk-front

import React from 'mfdCommon/react';

import { BasicModal } from './BasicModal';

export const data = [
  {
    path: '/basic-modal',
    element: <BasicModal />,
  },
];

Note that it is only necessary to insert the route, which must contain the "/" and the component that will be loaded in that route.

Inside the mfdCommon

Inside mfdCommon it is not necessary to do anything, but it is important to know some features:

• Within the properties available in the loaded Microfrontend, there are methods related to the modal, whether to open or close, or to define the props that will be available.

• In the case of navigation, it is not necessary to open or close the modal by the methods, being possible to use the native navigation feature of the application, respecting only the url

const props: MicroFrontendProps = {
  ...microFrontend?.props,
  services: {
    monitoringManager: MonitoringManager,
  },
  modal: {
    open: path => navigate(path),
    close: () => navigate(-1),
    setProps: props => setModalProps(props),
  },
};

In the sequence it is possible to see how the modal array is loaded and how the routes are being injected into the application

...
useEffect(() => {
  ...
  loadRemoteModule(REMOTE_MODALS).then(response => setModals(response.data));
}, [])
...

<Routes>
  {modals?.map(modal => {
    const pathUrl = `${pathname.replace(modal.path, '')}${modal.path}`;
    return (
      <Route
        key={`${modal.path}-route`}
        path={pathUrl}
        element={
          <>
            {React.isValidElement(modal.element)
              ? React.cloneElement(modal.element, {...modalProps, history})
              : modal.element}
          </>
        }
      />
    );
  })}
</Routes>

Use within Microfrontend

In the sequence it is possible to see two ways of navigating to the modal, a first using the method offered via props and a second using the Microfrontend routing service itself.

openModal(path: string) {
  this.$store.props.modal.open(path)
}

or

navigateTo(path) {
  const baseUrl = String(window.location.hash).replace('#', '');
  this.$router.push({ path: `${baseUrl}${path}` });
}