Skip to content

Commit 473cd4f

Browse files
sreenarararajes2
sreenara
and
rarajes2
authored
fix(bundling): fixed the multiple React instance and useRef errors (#355)
Co-authored-by: Rajesh Kumar <rarajes2@cisco.com>
1 parent bb78855 commit 473cd4f

18 files changed

+2498
-1852
lines changed

‎docs/react-samples/package.json

+5-4
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
"version": "1.0.0",
44
"main": "dist/index.js",
55
"scripts": {
6+
"clean": "rm -rf dist && rm -rf node_modules",
7+
"clean:dist": "rm -rf dist",
68
"build": "tsc --project tsconfig.json",
7-
"build:src": "webpack && yarn run build",
9+
"build:src": "webpack",
810
"build:watch": "webpack --watch",
911
"serve": "webpack serve"
1012
},
@@ -17,9 +19,8 @@
1719
"babel-loader": "^9.2.1",
1820
"file-loader": "^6.2.0",
1921
"html-webpack-plugin": "^5.6.3",
20-
"mobx-react": "^9.1.1",
21-
"react": "^18.3.1",
22-
"react-dom": "^18.3.1",
22+
"react": "18.3.1",
23+
"react-dom": "18.3.1",
2324
"ts-loader": "^9.5.1",
2425
"typescript": "^5.6.3",
2526
"webpack": "^5.94.0",

‎docs/react-samples/webpack.config.js

-11
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,6 @@ module.exports = merge(baseConfig, {
1111
filename: 'bundle.js', // Output bundle file name
1212
clean: true, // Clean dist folder before each build
1313
},
14-
module: {
15-
rules: [
16-
{
17-
test: /\.(js|jsx)$/, // Match JS and JSX files
18-
exclude: /node_modules/,
19-
use: {
20-
loader: 'babel-loader', // Use Babel to transpile JavaScript and JSX
21-
},
22-
},
23-
],
24-
},
2514
plugins: [
2615
new HtmlWebpackPlugin({
2716
template: './public/index.html', // Template HTML file

‎docs/web-component-samples/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
"webpack-merge": "6.0.1"
1313
},
1414
"scripts": {
15+
"clean": "rm -rf dist && rm -rf node_modules",
16+
"clean:dist": "rm -rf dist",
1517
"serve": "open index.html",
1618
"build:src": "webpack"
1719
}

‎package.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -18,25 +18,31 @@
1818
"@semantic-release/github": "^11.0.1",
1919
"@testing-library/react-hooks": "^8.0.1",
2020
"crypto-browserify": "^3.12.1",
21+
"css-loader": "^7.1.2",
2122
"html-webpack-plugin": "^5.6.3",
2223
"jest": "29.7.0",
2324
"node-gyp": "^10.2.0",
2425
"os-browserify": "^0.3.0",
2526
"process": "^0.11.10",
2627
"querystring-es3": "^0.2.1",
28+
"sass": "^1.83.1",
29+
"sass-loader": "^16.0.4",
2730
"semantic-release": "^24.2.0",
2831
"stream-browserify": "^3.0.0",
32+
"style-loader": "^4.0.0",
2933
"typescript": "^5.6.3",
3034
"vm-browserify": "^1.1.2",
3135
"webpack": "^5.96.1",
3236
"webpack-cli": "^5.1.4",
3337
"webpack-dev-server": "^5.1.0"
3438
},
3539
"scripts": {
40+
"clean": "yarn workspaces foreach --all --topological --parallel run clean && rm -rf node_modules",
41+
"clean:dist": "yarn workspaces foreach --all --topological --parallel run clean:dist",
3642
"test:unit": "yarn run test:tooling && yarn run test:cc-widgets",
3743
"test:tooling": "jest --coverage",
3844
"test:cc-widgets": "yarn workspaces foreach --all --parallel --exclude webex-widgets --exclude @webex/web-component-samples-app --exclude @webex/react-samples-app run test:unit",
39-
"build": "yarn workspaces foreach --all --topological --parallel --exclude webex-widgets --exclude @webex/web-component-samples-app --exclude @webex/react-samples-app run build:src",
45+
"build": " yarn run clean:dist && yarn workspaces foreach --all --topological --parallel --exclude webex-widgets --exclude @webex/web-component-samples-app --exclude @webex/react-samples-app run build:src",
4046
"samples:build": "yarn workspace @webex/react-samples-app build:src && yarn workspace @webex/web-component-samples-app build:src",
4147
"samples:serve": "open docs/index.html && yarn workspace @webex/react-samples-app serve",
4248
"samples:serve-react": "yarn workspace @webex/react-samples-app serve",

‎packages/contact-center/cc-widgets/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,10 @@
1515
"./wc": "./dist/wc.js"
1616
},
1717
"scripts": {
18+
"clean": "rm -rf dist && rm -rf node_modules",
19+
"clean:dist": "rm -rf dist",
1820
"build": "yarn run -T tsc",
19-
"build:src": "webpack && yarn run build",
21+
"build:src": "webpack",
2022
"build:watch": "webpack --watch",
2123
"test:unit": "jest"
2224
},
@@ -47,8 +49,6 @@
4749
"os-browserify": "^0.3.0",
4850
"process": "^0.11.10",
4951
"querystring-es3": "^0.2.1",
50-
"react": "18.3.1",
51-
"react-dom": "18.3.1",
5252
"stream-browserify": "^3.0.0",
5353
"ts-loader": "9.5.1",
5454
"typescript": "5.6.3",

‎packages/contact-center/cc-widgets/webpack.config.js

+14-1
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,22 @@ const path = require('path');
44
const baseConfig = require('../../../webpack.config');
55

66
module.exports = merge(baseConfig, {
7+
entry: {
8+
wc: {
9+
import: './src/wc.ts',
10+
},
11+
index: {
12+
import: './src/index.ts',
13+
},
14+
},
715
output: {
816
path: path.resolve(__dirname, 'dist'),
9-
filename: 'index.js', // Set the output filename to index.js
17+
filename: '[name].js', // Set the output filename to index.js
1018
libraryTarget: 'commonjs2',
1119
},
20+
externals: {
21+
react: 'react',
22+
'react-dom': 'react-dom',
23+
'@webex/cc-store': '@webex/cc-store',
24+
}
1225
});

‎packages/contact-center/station-login/package.json

+8-4
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,16 @@
1111
"package.json"
1212
],
1313
"scripts": {
14+
"clean": "rm -rf dist && rm -rf node_modules",
15+
"clean:dist": "rm -rf dist",
1416
"build": "yarn run -T tsc",
15-
"build:src": "webpack && yarn run build",
17+
"build:src": "webpack",
1618
"build:watch": "webpack --watch",
1719
"test:unit": "jest"
1820
},
1921
"dependencies": {
2022
"@webex/cc-store": "workspace:*",
21-
"mobx-react": "9.1.1",
22-
"react": "18.3.1",
23-
"react-dom": "18.3.1"
23+
"mobx-react": "9.1.1"
2424
},
2525
"devDependencies": {
2626
"@babel/core": "7.25.2",
@@ -43,6 +43,10 @@
4343
"webpack-cli": "5.1.4",
4444
"webpack-merge": "6.0.1"
4545
},
46+
"peerDependencies": {
47+
"react": ">=18.3.1",
48+
"react-dom": ">=18.3.1"
49+
},
4650
"jest": {
4751
"testEnvironment": "jsdom",
4852
"testMatch": [

‎packages/contact-center/station-login/src/station-login/index.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ const StationLogin: React.FunctionComponent<StationLoginProps> = observer(({onLo
1010
const {cc, teams, loginOptions} = store;
1111
const result = useStationLogin({cc, onLogin, onLogout});
1212

13+
console.log('StationLogin: Teams >>', teams);
14+
console.log('StationLogin: Login Options >>', loginOptions);
15+
1316
const props = {
1417
...result,
1518
teams,

‎packages/contact-center/station-login/src/station-login/station-login.presentational.tsx

+15-71
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, {useEffect} from 'react';
22
import {StationLoginPresentationalProps} from './station-login.types';
33

4+
import './station-login.style.scss';
5+
46
const StationLoginPresentational: React.FunctionComponent<StationLoginPresentationalProps> = (props) => {
57
const {name, teams, loginOptions, login, logout, setDeviceType, setDialNumber, setTeam} = props; // TODO: Use the loginSuccess, loginFailure, logoutSuccess props returned fromthe API response via helper file to reflect UI changes
68

@@ -48,84 +50,26 @@ const StationLoginPresentational: React.FunctionComponent<StationLoginPresentati
4850
setDialNumber(dialNumber.value);
4951
}
5052

51-
const styles = {
52-
box: {
53-
backgroundColor: '#ffffff',
54-
borderRadius: '8px',
55-
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
56-
padding: '20px',
57-
maxWidth: '800px',
58-
margin: '0 auto'
59-
},
60-
61-
sectionBox: {
62-
padding: '10px',
63-
border: '1px solid #ddd',
64-
borderRadius: '8px'
65-
},
66-
67-
fieldset: {
68-
border: '1px solid #ccc',
69-
borderRadius: '5px',
70-
padding: '10px',
71-
marginBottom: '20px'
72-
},
73-
74-
legendBox: {
75-
fontWeight: 'bold',
76-
color: '#0052bf'
77-
},
78-
79-
btn: {
80-
padding: '10px 20px',
81-
backgroundColor: '#0052bf',
82-
color: 'white',
83-
border: 'none',
84-
borderRadius: '4px',
85-
cursor: 'pointer',
86-
transition: 'background-color 0.3s',
87-
marginRight: '8px'
88-
},
89-
90-
select: {
91-
width: '100%',
92-
padding: '8px',
93-
marginTop: '8px',
94-
marginBottom: '12px',
95-
border: '1px solid #ccc',
96-
borderRadius: '4px'
97-
},
98-
99-
input: {
100-
width: '97%',
101-
padding: '8px',
102-
marginTop: '8px',
103-
marginBottom: '12px',
104-
border: '1px solid #ccc',
105-
borderRadius: '4px'
106-
}
107-
}
108-
10953
return (
11054
<><h1 data-testid="station-login-heading">{name}</h1>
111-
<div style={styles.box}>
112-
<section style={styles.sectionBox}>
113-
<fieldset style={styles.fieldset}>
114-
<legend style={styles.legendBox}>Agent</legend>
55+
<div className='box'>
56+
<section className="section-box">
57+
<fieldset className='fieldset'>
58+
<legend className='legend-box'>Agent</legend>
11559
<div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
11660
<div style={{ display: 'flex', gap: '1rem' }}>
11761
<fieldset style={{border: '1px solid #ccc', borderRadius: '5px', padding: '10px', marginBottom: '20px', flex: 0.69 }}>
118-
<legend style={styles.legendBox}>Select Team</legend>
119-
<select id="teamsDropdown" style={styles.select}>Teams</select>
62+
<legend className='legend-box'>Select Team</legend>
63+
<select id="teamsDropdown" className='select'>Teams</select>
12064
</fieldset>
121-
<fieldset style={styles.fieldset}>
122-
<legend style={styles.legendBox}>Agent Login</legend>
123-
<select name="LoginOption" id="LoginOption" style={styles.select} onChange={selectLoginOption}>
124-
<option value="" selected hidden>Choose Agent Login Option...</option>
65+
<fieldset className='fieldset'>
66+
<legend className='legend-box'>Agent Login</legend>
67+
<select name="LoginOption" id="LoginOption" className='select' onChange={selectLoginOption}>
68+
<option value="" hidden>Choose Agent Login Option...</option>
12569
</select>
126-
<input style={styles.input} id="dialNumber" name="dialNumber" placeholder="Extension/Dial Number" type="text" onInput={updateDN} />
127-
<button id="AgentLogin" style={styles.btn} onClick={login}>Login</button>
128-
<button id="logoutAgent" style={styles.btn} onClick={logout}>Logout</button>
70+
<input className='input' id="dialNumber" name="dialNumber" placeholder="Extension/Dial Number" type="text" onInput={updateDN} />
71+
<button id="AgentLogin" className='btn' onClick={login}>Login</button>
72+
<button id="logoutAgent" className='btn' onClick={logout}>Logout</button>
12973
</fieldset>
13074
</div>
13175
</div>

‎packages/contact-center/station-login/src/station-login/station-login.style.scss

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
.box {
2+
background-color: #ffffff;
3+
border-radius: 8px;
4+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
5+
padding: 20px;
6+
max-width: 800px;
7+
margin: 0 auto;
8+
}
9+
10+
.section-box {
11+
padding: 10px;
12+
border: 1px solid #ddd;
13+
border-radius: 8px;
14+
}
15+
16+
.fieldset {
17+
border: 1px solid #ccc;
18+
border-radius: 5px;
19+
padding: 10px;
20+
margin-bottom: 20px;
21+
}
22+
23+
.legend-box {
24+
font-weight: bold;
25+
color: #0052bf;
26+
}
27+
28+
.btn {
29+
padding: 10px 20px;
30+
background-color: #0052bf;
31+
color: white;
32+
border: none;
33+
border-radius: 4px;
34+
cursor: pointer;
35+
transition: background-color 0.3s;
36+
margin-right: 8px;
37+
}
38+
39+
.select {
40+
width: 100%;
41+
padding: 8px;
42+
margin-top: 8px;
43+
margin-bottom: 12px;
44+
border: 1px solid #ccc;
45+
border-radius: 4px;
46+
}
47+
48+
.input {
49+
width: 97%;
50+
padding: 8px;
51+
margin-top: 8px;
52+
margin-bottom: 12px;
53+
border: 1px solid #ccc;
54+
border-radius: 4px;
55+
}

‎packages/contact-center/station-login/webpack.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,10 @@ module.exports = merge(baseConfig, {
88
path: path.resolve(__dirname, 'dist'),
99
filename: 'index.js', // Set the output filename to index.js
1010
libraryTarget: 'commonjs2',
11+
},
12+
externals: {
13+
react: 'react',
14+
'react-dom': 'react-dom',
15+
'@webex/cc-store': '@webex/cc-store',
1116
}
1217
});

‎packages/contact-center/store/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@
1212
"package.json"
1313
],
1414
"scripts": {
15+
"clean": "rm -rf dist && rm -rf node_modules",
16+
"clean:dist": "rm -rf dist",
1517
"build": "yarn run -T tsc",
16-
"build:src": "webpack && yarn run build",
18+
"build:src": "webpack",
1719
"build:watch": "webpack --watch",
1820
"test:unit": "jest"
1921
},
2022
"dependencies": {
2123
"mobx": "6.13.5",
22-
"react": "18.3.1",
23-
"react-dom": "18.3.1",
2424
"typescript": "5.6.3",
2525
"webex": "3.7.0-wxcc.5"
2626
},

‎packages/contact-center/store/src/store.ts

+12-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Webex from 'webex';
33
import {IContactCenter, Profile, Team, WithWebex, IdleCode, InitParams, IStore} from './store.types';
44

55
class Store implements IStore {
6+
private static instance: Store;
67
teams: Team[] = [];
78
loginOptions: string[] = [];
89
cc: IContactCenter;
@@ -14,6 +15,16 @@ class Store implements IStore {
1415
makeAutoObservable(this, {cc: observable.ref});
1516
}
1617

18+
public static getInstance(): Store {
19+
if (!Store.instance) {
20+
console.log('Creating new store instance');
21+
Store.instance = new Store();
22+
}
23+
24+
console.log('Returning store instance');
25+
return Store.instance;
26+
}
27+
1728
setSelectedLoginOption(option: string): void {
1829
this.selectedLoginOption = option;
1930
}
@@ -66,5 +77,5 @@ class Store implements IStore {
6677
}
6778
}
6879

69-
const store = new Store();
80+
const store = Store.getInstance();
7081
export default store;

0 commit comments

Comments
 (0)