diff --git a/AppExamples/CleverDeal.React/README.md b/AppExamples/CleverDeal.React/README.md index a5f1a57..2bbe4cc 100644 --- a/AppExamples/CleverDeal.React/README.md +++ b/AppExamples/CleverDeal.React/README.md @@ -32,8 +32,14 @@ HTTPS=true yarn start ## Query params -- `ecpOrigin`: URL of the target pod to be loaded in ECP (supported values are `corporate.symphony.com` [default] and `st3.symphony.com`) +- `ecpOrigin`: URL of the target pod to be loaded in ECP (supported values are `corporate.symphony.com` [default], `st3.symphony.com` or `preview.symphony.com`) - `partnerId`: loads ECP with a given partnerId, useful if your environment has partnership configurations (use partnerId=3 to allow Symphony to be loaded on localhost) - `sdkPath`: used to target a specific version of ECP (supported values are `/embed/sdk.js` [default] and `/apps/embed/{tag}/sdk.js`) - +### Run against ECP (SFE-Lite) running locally + +```sh +HTTPS=true yarn start +``` + +- go to https://localhost:3000/?ecpOrigin=local-dev.symphony.com:9090&sdkPath=/client-bff/sdk.js diff --git a/AppExamples/CleverDeal.React/src/Components/CleverOperations/TradeExceptionDashboard/TradeExceptionDashboard.tsx b/AppExamples/CleverDeal.React/src/Components/CleverOperations/TradeExceptionDashboard/TradeExceptionDashboard.tsx index 3d4d106..e870ffe 100644 --- a/AppExamples/CleverDeal.React/src/Components/CleverOperations/TradeExceptionDashboard/TradeExceptionDashboard.tsx +++ b/AppExamples/CleverDeal.React/src/Components/CleverOperations/TradeExceptionDashboard/TradeExceptionDashboard.tsx @@ -1,5 +1,5 @@ /* eslint-disable react-hooks/exhaustive-deps */ -import { useEffect, useRef, useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import { INITIAL_TRADE_EXCEPTIONS, TRADE_EXCEPTION_REQUEST_INTENT, @@ -17,11 +17,12 @@ interface TradeExceptionDashboardProps { export const TradeExceptionDashboard = ( props: TradeExceptionDashboardProps ) => { + const { ecpOrigin } = props; const [tradeExceptions, setTradeExceptions] = useState([ ...INITIAL_TRADE_EXCEPTIONS, ]); const tradeExceptionsLatest = useRef(tradeExceptions); - + const dataListenersRef = useRef([]); const [selectedException, setSelectedException] = useState(); const updateTradeException = (newTradeException: TradeException) => { @@ -35,17 +36,49 @@ export const TradeExceptionDashboard = ( newTradeExceptions[tradeExceptionIndex] = newTradeException; setTradeExceptions(newTradeExceptions); - setSelectedException(newTradeException); + setSelectedException((currentSelection) => { + if (!currentSelection || currentSelection.streamId?.[ecpOrigin] === newTradeException.streamId?.[ecpOrigin]) { + return newTradeException + } + return currentSelection; + }); }; useEffect(() => { tradeExceptionsLatest.current = tradeExceptions; + tradeExceptions.forEach((tradeException: TradeException) => { + const streamId = tradeException.streamId?.[ecpOrigin]; + if (streamId && !dataListenersRef.current.includes(streamId)) { + dataListenersRef.current = [...dataListenersRef.current, streamId]; + (window as any).symphony.listen({ + type: 'DataNotifications', + params: { + type: TRADE_EXCEPTION_REQUEST_INTENT, + streamId + }, + callback: onReceivedData + }); + } + }) }, [tradeExceptions]); + const sendData = (tradeException: TradeException) => { + const streamId = tradeException.streamId?.[ecpOrigin]; + (window as any).symphony.sendData({ + type: TRADE_EXCEPTION_REQUEST_INTENT, + content: tradeException, + }, {streamId}); + }; + + const onReceivedData = useCallback(({content}: any) => { + updateTradeException(content); + }, [selectedException]); + useEffect(() => { (window as any).symphony.registerInterop((intent: any, context: any) => { if (intent === TRADE_EXCEPTION_REQUEST_INTENT) { updateTradeException(context.tradeException); + sendData(context.tradeException); } }); }, []); @@ -56,13 +89,13 @@ export const TradeExceptionDashboard = (
- +
@@ -71,8 +104,9 @@ export const TradeExceptionDashboard = (
)} diff --git a/AppExamples/CleverDeal.React/src/Components/CleverOperations/TradeExceptionDashboard/TradeExceptionDetails/TradeExceptionDetails.tsx b/AppExamples/CleverDeal.React/src/Components/CleverOperations/TradeExceptionDashboard/TradeExceptionDetails/TradeExceptionDetails.tsx index 31e5d81..fba7102 100644 --- a/AppExamples/CleverDeal.React/src/Components/CleverOperations/TradeExceptionDashboard/TradeExceptionDetails/TradeExceptionDetails.tsx +++ b/AppExamples/CleverDeal.React/src/Components/CleverOperations/TradeExceptionDashboard/TradeExceptionDetails/TradeExceptionDetails.tsx @@ -27,12 +27,14 @@ interface TraceExceptionDetailsProps { tradeException: TradeException; ecpOrigin: string; updateTradeExceptionHandler: (newTradeException: TradeException) => void; + sendData: (tradeException: TradeException) => void; } const TradeExceptionDetails = ({ updateTradeExceptionHandler, tradeException, ecpOrigin, + sendData }: TraceExceptionDetailsProps) => { const [loadedStreamId, setLoadedStreamId] = useState(); const [isStreamReady, setIsStreamReady] = useState(false); @@ -145,6 +147,7 @@ const TradeExceptionDetails = ({ .then((response: EcpApiResponse) => { if (response.messages) { updateTradeExceptionHandler(newTradeException); + sendData(newTradeException); } }); }; diff --git a/AppExamples/CleverDeal.React/src/Components/CleverOperations/TradeExceptionDashboard/TradeExceptionTable/TradeExceptionTable.tsx b/AppExamples/CleverDeal.React/src/Components/CleverOperations/TradeExceptionDashboard/TradeExceptionTable/TradeExceptionTable.tsx index 7b3c6dd..10e4381 100644 --- a/AppExamples/CleverDeal.React/src/Components/CleverOperations/TradeExceptionDashboard/TradeExceptionTable/TradeExceptionTable.tsx +++ b/AppExamples/CleverDeal.React/src/Components/CleverOperations/TradeExceptionDashboard/TradeExceptionTable/TradeExceptionTable.tsx @@ -36,9 +36,9 @@ const TradeExceptionTable = ({ - {tradeExceptions.map((tradeException) => ( + {tradeExceptions.map((tradeException, index: number) => (