Skip to content

Commit 7251c7e

Browse files
AidanWZAidanWZ
authored
Merge pull request #943 from MyPureCloud/STREAM-599-address-CVE-2024-48948
STREAM-599: address snyk vulns and type insecurities in demo app
2 parents 089012d + 000e35a commit 7251c7e

17 files changed

Lines changed: 1494 additions & 899 deletions

‎react-demo-app/package-lock.json‎

Lines changed: 1325 additions & 829 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎react-demo-app/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,13 @@
1616
"genesys-spark-components": "^4.63.2",
1717
"genesys-spark-components-react": "^4.63.2",
1818
"normalize.css": "^8.0.1",
19-
"purecloud-platform-client-v2": "^195.0.0",
19+
"purecloud-platform-client-v2": "^230.0.0",
2020
"react": "^18.2.0",
2121
"react-dom": "^18.3.1",
2222
"react-redux": "^9.1.2",
2323
"uuid": "^10.0.0",
24-
"vite-plugin-node-polyfills": "^0.22.0"
24+
"vite-plugin-node-polyfills": "^0.24.0",
25+
"node-stdlib-browser": "^1.3.1"
2526
},
2627
"devDependencies": {
2728
"@types/react": "^18.2.66",

‎react-demo-app/src/components/ActiveConversationsTable.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,23 @@ import './ActiveConversationsTable.css';
44
import { GuxButton, GuxTable, GuxRadialLoading } from 'genesys-spark-components-react';
55
import { useSelector } from 'react-redux';
66
import Card from './Card';
7+
import { RootState } from '../types/store';
8+
import { IStoredConversationState } from 'genesys-cloud-webrtc-sdk';
79

810

911
export default function ActiveConversationsTable() {
10-
const conversations = useSelector(
11-
(state) => state.conversations.activeConversations
12+
const conversationsObj = useSelector(
13+
(state: RootState) => state.conversations.activeConversations
1214
);
15+
const conversations = Object.values(conversationsObj);
1316
const { endSession, toggleAudioMute, toggleHoldState } = useSdk();
1417
const [holdLabels, setHoldLabels ] = useState<Array<string | JSX.Element>>([]);
1518
const [muteLabels, setMuteLabels ] = useState<Array<string | JSX.Element>>([]);
1619

1720
useEffect(() => {
1821
if (conversations.length) {
19-
setHoldLabels(conversations.map((convo) => convo.mostRecentCallState.held ? 'Unhold' : 'Hold'));
20-
setMuteLabels(conversations.map((convo) => convo.mostRecentCallState.muted ? 'Unmute' : 'Mute'));
22+
setHoldLabels(conversations.map((convo: IStoredConversationState) => convo.mostRecentCallState?.held ? 'Unhold' : 'Hold'));
23+
setMuteLabels(conversations.map((convo: IStoredConversationState) => convo.mostRecentCallState?.muted ? 'Unmute' : 'Mute'));
2124
}
2225
}, [conversations]);
2326

@@ -26,8 +29,8 @@ export default function ActiveConversationsTable() {
2629
updatedHoldLabels[index] = <GuxRadialLoading context='input' screenreaderText='Loading...'></GuxRadialLoading>;
2730
setHoldLabels(updatedHoldLabels);
2831
try {
29-
await toggleHoldState(!conversations[index].mostRecentCallState.held, conversations[index].conversationId)
30-
updatedHoldLabels[index] = conversations[index].mostRecentCallState.held ? 'Unhold' : 'Hold';
32+
await toggleHoldState(!conversations[index].mostRecentCallState?.held, conversations[index].conversationId)
33+
updatedHoldLabels[index] = conversations[index].mostRecentCallState?.held ? 'Unhold' : 'Hold';
3134
setHoldLabels(updatedHoldLabels);
3235
} catch(err) {
3336
console.error(err);
@@ -39,8 +42,8 @@ export default function ActiveConversationsTable() {
3942
updatedMuteLabels[index] = <GuxRadialLoading context='input' screenreaderText='Loading...'></GuxRadialLoading>;
4043
setMuteLabels(updatedMuteLabels);
4144
try {
42-
await toggleAudioMute(!conversations[index].mostRecentCallState.muted, conversations[index].conversationId)
43-
updatedMuteLabels[index] = conversations[index].mostRecentCallState.muted ? 'Unmute' : 'Mute';
45+
await toggleAudioMute(!conversations[index].mostRecentCallState?.muted, conversations[index].conversationId)
46+
updatedMuteLabels[index] = conversations[index].mostRecentCallState?.muted ? 'Unmute' : 'Mute';
4447
setMuteLabels(updatedMuteLabels);
4548
} catch(err) {
4649
console.error(err);
@@ -69,14 +72,14 @@ export default function ActiveConversationsTable() {
6972
</tr>
7073
</thead>
7174
<tbody>
72-
{conversations.map((convo, index: number) => (
75+
{conversations.map((convo: IStoredConversationState, index: number) => (
7376
<tr key={convo.conversationId}>
7477
<td>{convo.conversationId}</td>
75-
<td>{convo.session.id}</td>
76-
<td>{convo.session.state}</td>
77-
<td>{convo.session.sessionType}</td>
78-
<td>{convo.mostRecentCallState.direction}</td>
79-
<td>{convo.session.connectionState}</td>
78+
<td>{convo.session?.id}</td>
79+
<td>{convo.session?.state}</td>
80+
<td>{convo.session?.sessionType}</td>
81+
<td>{convo.mostRecentCallState?.direction}</td>
82+
<td>{convo.session?.connectionState}</td>
8083
<td><GuxButton accent='secondary' onClick={async () => await toggleConversationHold(index)}>{holdLabels[index]}</GuxButton></td>
8184
<td><GuxButton accent='secondary' onClick={async () => await toggleConversationMute(index)}>{muteLabels[index]}</GuxButton></td>
8285
<td><GuxButton accent='danger' onClick={() => endSession(convo.conversationId)}>End</GuxButton></td>

‎react-demo-app/src/components/AudioDevices.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,19 @@ import { GuxDropdown, GuxListbox, GuxOption } from 'genesys-spark-components-rea
44
import useSdk from '../hooks/useSdk';
55
import { useSelector } from 'react-redux';
66
import Card from './Card';
7+
import { RootState } from '../types/store';
78

89
export default function AudioDevices() {
910
const { updateDefaultDevices, updateAudioVolume } = useSdk();
10-
const deviceState = useSelector((state) => state.devices.currentState);
11-
const sdk = useSelector(state => state.sdk.sdk);
11+
const deviceState = useSelector((state: RootState) => state.devices.currentState);
12+
const sdk = useSelector((state: RootState) => state.sdk.sdk);
1213
const [audioVolume, setAudioVolume] = useState(
13-
sdk._config.defaults.audioVolume
14+
sdk?._config?.defaults?.audioVolume || 50
1415
);
1516

1617
function updateVolume(volume: string) {
1718
updateAudioVolume(volume);
18-
setAudioVolume(volume);
19+
setAudioVolume(parseInt(volume));
1920
}
2021

2122
function displayAudioDevices() {
@@ -25,11 +26,11 @@ export default function AudioDevices() {
2526
<GuxDropdown
2627
value={deviceState.audioDevices[0].deviceId}
2728
onInput={(e) =>
28-
updateDefaultDevices({ audioDeviceId: e.target.value })
29+
updateDefaultDevices({ audioDeviceId: (e.target as HTMLSelectElement).value })
2930
}
3031
>
3132
<GuxListbox>
32-
{deviceState.audioDevices.map((device) => (
33+
{deviceState.audioDevices.map((device: MediaDeviceInfo) => (
3334
<GuxOption key={device.deviceId} value={device.deviceId}>
3435
{device.label}
3536
</GuxOption>

‎react-demo-app/src/components/Card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ interface CardProps {
66
className?: string;
77
}
88

9-
export default function Card<CardProps>({ children, className }) {
9+
export default function Card({ children, className }: CardProps) {
1010
return (
1111
<div className={`card ${className}`}>
1212
<div className="card-content">{children}</div>

‎react-demo-app/src/components/HandledPendingSessionsTable.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { GuxTable } from 'genesys-spark-components-react';
22
import { useSelector } from 'react-redux';
33
import Card from './Card';
4+
import { RootState } from '../types/store';
5+
import { IPendingSession } from 'genesys-cloud-webrtc-sdk';
46

57
export default function HandledPendingSessionsTable() {
68
const handledPendingSessions = useSelector(
7-
(state) => state.conversations.handledPendingSessions
9+
(state: RootState) => state.conversations.handledPendingSessions
810
);
911

1012
function generateHandledPendingSessionsTable() {
@@ -22,7 +24,7 @@ export default function HandledPendingSessionsTable() {
2224
</tr>
2325
</thead>
2426
<tbody>
25-
{handledPendingSessions.map((convo) => (
27+
{handledPendingSessions.map((convo: IPendingSession) => (
2628
<tr key={convo.conversationId}>
2729
<td>{convo.conversationId}</td>
2830
<td>{convo.sessionId}</td>

‎react-demo-app/src/components/MediaStateCounts.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { useSelector } from 'react-redux';
22
import Card from './Card';
3+
import { RootState } from '../types/store';
34

45
export default function MediaStateCounts() {
5-
const gumRequests = useSelector((state) => state.devices.gumRequests);
6-
const mediaStateChanges = useSelector((state) => state.devices.stateChanges);
6+
const gumRequests = useSelector((state: RootState) => state.devices.gumRequests);
7+
const mediaStateChanges = useSelector((state: RootState) => state.devices.stateChanges);
78

89
return (
910
<Card className='media-state-counts'>

‎react-demo-app/src/components/OutputDevices.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import { GuxDropdown, GuxListbox, GuxOption } from 'genesys-spark-components-rea
22
import useSdk from '../hooks/useSdk';
33
import { useSelector } from 'react-redux';
44
import Card from './Card';
5+
import { RootState } from '../types/store';
56

67
export default function OutputDevices() {
78
const { updateDefaultDevices } = useSdk();
8-
const deviceState = useSelector((state) => state.devices.currentState);
9+
const deviceState = useSelector((state: RootState) => state.devices.currentState);
910

1011
return (
1112
<>
@@ -15,11 +16,11 @@ export default function OutputDevices() {
1516
<GuxDropdown
1617
value={deviceState.outputDevices[0].deviceId}
1718
onInput={(e) =>
18-
updateDefaultDevices({ outputDeviceId: e.target.value })
19+
updateDefaultDevices({ outputDeviceId: (e.target as HTMLSelectElement).value })
1920
}
2021
>
2122
<GuxListbox>
22-
{deviceState.outputDevices.map((device) => (
23+
{deviceState.outputDevices.map((device: MediaDeviceInfo) => (
2324
<GuxOption key={device.deviceId} value={device.deviceId}>
2425
{device.label}
2526
</GuxOption>

‎react-demo-app/src/components/PendingSessionsTable.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,18 @@ import './PendingSessionsTable.css';
22
import { GuxTable, GuxButton } from 'genesys-spark-components-react';
33
import { useSelector } from 'react-redux';
44
import Card from './Card';
5+
import { RootState } from '../types/store';
6+
import { IPendingSession } from 'genesys-cloud-webrtc-sdk';
57

68
export default function PendingSessionsTable() {
79
const conversations = useSelector(
8-
(state) => state.conversations.pendingSessions
10+
(state: RootState) => state.conversations.pendingSessions
911
);
10-
const sdk = useSelector(state => state.sdk.sdk);
12+
const sdk = useSelector((state: RootState) => state.sdk.sdk);
1113

1214

1315
function handlePendingSession(accept: boolean, conversationId: string): void {
16+
if (!sdk) return;
1417
if (accept) {
1518
sdk.acceptPendingSession({ conversationId });
1619
} else {
@@ -39,7 +42,7 @@ export default function PendingSessionsTable() {
3942
</tr>
4043
</thead>
4144
<tbody>
42-
{conversations.map((convo) => (
45+
{conversations.map((convo: IPendingSession) => (
4346
<tr key={convo.conversationId}>
4447
<td>{convo.conversationId}</td>
4548
<td>{convo.sessionId}</td>

‎react-demo-app/src/components/Softphone.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@ import ActiveConversationsTable from "./ActiveConversationsTable";
88
import HandledPendingSessionsTable from "./HandledPendingSessionsTable";
99
import StationDetails from "./StationDetails";
1010
import { useSelector } from "react-redux";
11+
import { RootState } from '../types/store';
1112

1213
export default function Softphone() {
1314
const [phoneNumber, setPhoneNumber] = useState("*86");
1415
const [onQueueStatus, setOnQueueStatus] = useState(false);
1516
const { startSoftphoneSession, updateOnQueueStatus, disconnectPersistentConnection } = useSdk();
16-
const sdk = useSelector(state => state.sdk.sdk);
17-
const [persistentConnectionEnabled] = useState(sdk.station.webRtcPersistentEnabled);
17+
const sdk = useSelector((state: RootState) => state.sdk.sdk);
18+
const [persistentConnectionEnabled] = useState(sdk?.station?.webRtcPersistentEnabled || false);
1819

1920
function placeCall(event?: FormEvent<HTMLFormElement>) {
2021
if (event) {

0 commit comments

Comments
 (0)
⚡