Products List App example in Hexagonal Architecture - two features for the same UI adapter!

productsListApp.js

// Here are objects that provides use case and ports:
import ProcessingCustomerCart from "./ProcessingCustomerCart";
import RequestingCustomerCare from "./RequestingCustomerCare";

// Adapters:
import ProductsListUI from "./ProductsListUI";
import AppRouter from "./AppRouter";
import ErrorsUI from "./ErrorsUI";
import CartBackend from "./CartBackend";
import CustomerCareBackend from "./CustomerCareBackend"
import EventBus from "eventing-bus";

const ProductsListApp = () => {
  const cartUseCase = ProcessingCustomerCart.UseCase();
  const cartPorts = ProcessingCustomerCart.Ports(cartUseCase, ui, AppRouter, EventBus, ErrorsUI);
  const cartBackend = CartBackend();
  
  const careUseCase = RequestingCustomerCare.UseCase();
  const careBackend = CustomerCareBackend();
  const carePorts = RequestingCustomerCare.Ports(careUseCase, ui, careBackend);
  
  const ui = ProductsListUI(EventBus);

  return {
    start(domElement) {
      ui.render(domElement, () => {
        backend.load().then(items => {
          EventBus.publish('cartLoaded', items);
        });
      });
    }
  };
};