From 608c12b25c998c9ec8761337b7a48205f14a703f Mon Sep 17 00:00:00 2001
From: Paulo Martins <paulovmr@gmail.com>
Date: Tue, 23 Mar 2021 11:58:31 -0300
Subject: [PATCH] PingPongFactory as a parameter to EmbeddedDivPingPong (#29)

* PingPongFactory as a parameter to EmbeddedDivPingPong

* PingPongFactory as a parameter to EmbeddedDivPingPong

* PingPongFactory as a parameter to EmbeddedDivPingPong

* PingPongFactory as a parameter to EmbeddedDivPingPong
---
 .../ping-pong-view/src/embedded/div/EmbeddedDivPingPong.tsx | 6 +++---
 .../ping-pong-view/src/envelope/PingPongEnvelopeView.tsx    | 5 ++++-
 packages/webapp/src/Pages/PingPong/PingPongDivViewsPage.tsx | 6 ++++++
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/ping-pong-view/src/embedded/div/EmbeddedDivPingPong.tsx b/packages/ping-pong-view/src/embedded/div/EmbeddedDivPingPong.tsx
index 2419d458734..93734cba64b 100644
--- a/packages/ping-pong-view/src/embedded/div/EmbeddedDivPingPong.tsx
+++ b/packages/ping-pong-view/src/embedded/div/EmbeddedDivPingPong.tsx
@@ -20,9 +20,8 @@ import { PingPongApi, PingPongChannelApi, PingPongEnvelopeApi } from "../../api"
 import { EnvelopeServer } from "@kogito-tooling/envelope-bus/dist/channel";
 import { EmbeddedEnvelopeFactory } from "@kogito-tooling/envelope/dist/embedded";
 import { ContainerType } from "@kogito-tooling/envelope/dist/api";
-import { init } from "../../envelope";
+import { init, PingPongFactory } from "../../envelope";
 import { EnvelopeBusMessage } from "@kogito-tooling/envelope-bus/dist/api";
-import { PingPongReactImplFactory } from "ping-pong-view-react";
 
 export type Props = PingPongChannelApi & {
   mapping: {
@@ -30,6 +29,7 @@ export type Props = PingPongChannelApi & {
   };
   targetOrigin: string;
   name: string;
+  pingPongViewFactory: PingPongFactory;
 };
 
 export const EmbeddedDivPingPong = React.forwardRef((props: Props, forwardedRef: React.Ref<PingPongApi>) => {
@@ -48,7 +48,7 @@ export const EmbeddedDivPingPong = React.forwardRef((props: Props, forwardedRef:
             window.postMessage(message, "*", transfer);
           },
         },
-        pingPongViewFactory: new PingPongReactImplFactory(),
+        pingPongViewFactory: props.pingPongViewFactory,
       });
 
       return envelopeServer.envelopeApi.requests.pingPongView__init(
diff --git a/packages/ping-pong-view/src/envelope/PingPongEnvelopeView.tsx b/packages/ping-pong-view/src/envelope/PingPongEnvelopeView.tsx
index 71bd4b159d6..986fd02c74f 100644
--- a/packages/ping-pong-view/src/envelope/PingPongEnvelopeView.tsx
+++ b/packages/ping-pong-view/src/envelope/PingPongEnvelopeView.tsx
@@ -34,7 +34,10 @@ export const PingPongEnvelopeView = React.forwardRef((props, forwardedRef) => {
         <>
           <h2>This is an implementation of Ping-Pong View</h2>
 
-          <p className={"ping-pong-view--p-iframe"}> The {"<iframe>"} border is green </p>
+          <p className={"ping-pong-view--p-iframe"}>
+            {" "}
+            The envelope boundary border is green. It can be an iframe or a div.
+          </p>
           <p className={"ping-pong-view--p-ping-pong"}> The Ping-Pong View implementation border is red </p>
 
           <div id={"ping-pong-view-container"} className={"ping-pong-view--container"}>
diff --git a/packages/webapp/src/Pages/PingPong/PingPongDivViewsPage.tsx b/packages/webapp/src/Pages/PingPong/PingPongDivViewsPage.tsx
index d0b64fb7dec..9aa3244473b 100644
--- a/packages/webapp/src/Pages/PingPong/PingPongDivViewsPage.tsx
+++ b/packages/webapp/src/Pages/PingPong/PingPongDivViewsPage.tsx
@@ -20,6 +20,7 @@ import { Page, PageSection } from "@patternfly/react-core";
 import { EmbeddedDivPingPong } from "ping-pong-view/dist/embedded/div";
 import { PingPongChannelApi } from "ping-pong-view/dist/api";
 import { StatsSidebar } from "./StatsSidebar";
+import { PingPongReactImplFactory } from "ping-pong-view-react";
 
 let pings = 0;
 let pongs = 0;
@@ -41,6 +42,8 @@ export function PingPongDivViewsPage() {
     };
   }, [pings, pongs]);
 
+  const pingPongViewFactory = useMemo(() => new PingPongReactImplFactory(), []);
+
   return (
     <Page>
       <div className={"webapp--page-main-div"}>
@@ -52,6 +55,7 @@ export function PingPongDivViewsPage() {
               name={"React 1"}
               targetOrigin={window.location.origin}
               mapping={{ title: "Ping-Pong Page in React" }}
+              pingPongViewFactory={pingPongViewFactory}
             />
           </PageSection>
 
@@ -61,6 +65,7 @@ export function PingPongDivViewsPage() {
               name={"React 2"}
               targetOrigin={window.location.origin}
               mapping={{ title: "Ping-Pong Page in React" }}
+              pingPongViewFactory={pingPongViewFactory}
             />
           </PageSection>
 
@@ -70,6 +75,7 @@ export function PingPongDivViewsPage() {
               name={"React 3"}
               targetOrigin={window.location.origin}
               mapping={{ title: "Ping-Pong Page in React" }}
+              pingPongViewFactory={pingPongViewFactory}
             />
           </PageSection>
         </div>