Skip to content

Commit e4250e4

Browse files
JamesBurnsidevhuseinova-msft
JamesBurnside
and
vhuseinova-msft
authored
Turn on no-getstate eslint rule and apply fixes (#5239)
Signed-off-by: James Burnside <2684369+JamesBurnside@users.noreply.github.com> Co-authored-by: vhuseinova-msft <98852890+vhuseinova-msft@users.noreply.github.com>
1 parent 25a4b5f commit e4250e4

23 files changed

Lines changed: 284 additions & 168 deletions

‎change/@azure-communication-react-dd7317f8-5a22-4eb5-accb-0f9de6a60bc2.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"type": "patch",
3+
"area": "fix",
4+
"workstream": "",
5+
"comment": "Ensure components re-render when adapter state changes by using useSelector instead of adapter.getState",
6+
"packageName": "@azure/communication-react",
7+
"email": "2684369+JamesBurnside@users.noreply.github.com",
8+
"dependentChangeType": "patch"
9+
}

‎common/config/rush/variants/stable/pnpm-lock.yaml‎

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

‎packages/react-composites/.eslintrc.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ module.exports = {
2424
sourceType: 'module'
2525
},
2626
rules: {
27-
'@internal/custom-rules/no-getstate': 'off', // TODO: CHANGE TO ERROR ONCE INSTANCES ARE FIXED
27+
'@internal/custom-rules/no-getstate': 'error',
2828
'@typescript-eslint/explicit-function-return-type': [
2929
'warn',
3030
{
@@ -109,7 +109,15 @@ module.exports = {
109109
}
110110
},
111111
{
112-
files: ['*.test.ts', 'AzureCommunicationCallAdapter.ts'],
112+
files: [
113+
'tests/**/*',
114+
'*.test.ts',
115+
'AzureCommunicationCallAdapter.ts',
116+
'AzureCommunicationCallWithChatAdapter.ts',
117+
'AzureCommunicationChatAdapter.ts',
118+
'useAdaptedSelector.ts',
119+
'useHandlers.ts'
120+
],
113121
rules: {
114122
'@internal/custom-rules/no-getstate': 'off'
115123
}

‎packages/react-composites/src/composites/CallComposite/CallComposite.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ import { CallPage } from './pages/CallPage';
2323
import { ConfigurationPage } from './pages/ConfigurationPage';
2424
import { NoticePage } from './pages/NoticePage';
2525
import { useSelector } from './hooks/useSelector';
26-
import { getEndedCall, getPage, getTargetCallees } from './selectors/baseSelectors';
26+
import { getAlternateCallerId, getEndedCall, getPage, getRole, getTargetCallees } from './selectors/baseSelectors';
27+
/* @conditional-compile-remove(unsupported-browser) */
28+
import { getEnvironmentInfo } from './selectors/baseSelectors';
2729
import { LobbyPage } from './pages/LobbyPage';
2830
import { TransferPage } from './pages/TransferPage';
2931
import {
@@ -362,11 +364,11 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
362364
const hasCameras = camerasCount > 0;
363365
const hasMicrophones = microphonesCount > 0;
364366

367+
const role = useSelector(getRole);
368+
365369
useEffect(() => {
366370
(async () => {
367-
const constrain = getQueryOptions({
368-
role: adapter.getState().call?.role
369-
});
371+
const constrain = getQueryOptions({ role });
370372
/* @conditional-compile-remove(call-readiness) */
371373
{
372374
constrain.audio = props.options?.deviceChecks?.microphone === 'doNotPrompt' ? false : constrain.audio;
@@ -379,6 +381,7 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
379381
})();
380382
}, [
381383
adapter,
384+
role,
382385
/* @conditional-compile-remove(call-readiness) */
383386
props.options?.deviceChecks,
384387
// Ensure we re-ask for permissions if the number of devices goes from 0 -> n during a call
@@ -527,7 +530,7 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
527530
const callees = useSelector(getTargetCallees) as StartCallIdentifier[];
528531
const locale = useLocale();
529532
const palette = useTheme().palette;
530-
const alternateCallerId = adapter.getState().alternateCallerId;
533+
const alternateCallerId = useSelector(getAlternateCallerId);
531534
const leavePageStyle = useMemo(() => leavingPageStyle(palette), [palette]);
532535
let pageElement: JSX.Element | undefined;
533536
const [pinnedParticipants, setPinnedParticipants] = useState<string[]>([]);
@@ -731,6 +734,9 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
731734

732735
useEndedCallConsoleErrors(endedCall);
733736

737+
/* @conditional-compile-remove(unsupported-browser) */
738+
const environmentInfo = useSelector(getEnvironmentInfo);
739+
734740
/* @conditional-compile-remove(unsupported-browser) */
735741
switch (page) {
736742
case 'unsupportedEnvironment':
@@ -740,7 +746,7 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
740746
/* @conditional-compile-remove(unsupported-browser) */
741747
<UnsupportedBrowserPage
742748
onTroubleshootingClick={props.options?.onEnvironmentInfoTroubleshootingClick}
743-
environmentInfo={adapter.getState().environmentInfo}
749+
environmentInfo={environmentInfo}
744750
/>
745751
}
746752
</>

‎packages/react-composites/src/composites/CallComposite/components/CallArrangement.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,14 @@ import { useSelector } from '../hooks/useSelector';
4545
import { callStatusSelector } from '../selectors/callStatusSelector';
4646
import { CallControlOptions } from '../types/CallControlOptions';
4747
import { PreparedMoreDrawer } from '../../common/Drawer/PreparedMoreDrawer';
48-
import { getIsTeamsMeeting, getRemoteParticipants } from '../selectors/baseSelectors';
48+
import {
49+
getCapabilites,
50+
getIsTeamsMeeting,
51+
getReactionResources,
52+
getRemoteParticipants,
53+
getRole,
54+
getVideoEffectsDependency
55+
} from '../selectors/baseSelectors';
4956
import { getPage } from '../selectors/baseSelectors';
5057
import { getCallStatus, getCaptionsStatus } from '../selectors/baseSelectors';
5158
import { drawerContainerStyles } from '../styles/CallComposite.styles';
@@ -210,7 +217,7 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
210217
);
211218

212219
const locale = useLocale();
213-
const role = adapter.getState().call?.role;
220+
const role = useSelector(getRole);
214221
const videoGalleryProps = usePropsFor(VideoGallery);
215222
/* @conditional-compile-remove(soft-mute) */
216223
const muteAllHandlers = useHandlers(MoreDrawer);
@@ -294,8 +301,7 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
294301
setPromptProps
295302
);
296303

297-
const canRemoveSpotlight =
298-
adapter.getState().call?.capabilitiesFeature?.capabilities.removeParticipantsSpotlight.isPresent;
304+
const canRemoveSpotlight = useSelector(getCapabilites)?.removeParticipantsSpotlight.isPresent;
299305
const stopAllSpotlight = useMemo(
300306
() => (canRemoveSpotlight ? () => adapter.stopAllSpotlight() : undefined),
301307
[canRemoveSpotlight, adapter]
@@ -393,7 +399,7 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
393399
};
394400
}, [isMobileWithActivePane, props.mobileView]);
395401

396-
const onResolveVideoEffectDependency = adapter.getState().onResolveVideoEffectDependency;
402+
const onResolveVideoEffectDependency = useSelector(getVideoEffectsDependency);
397403

398404
const { openVideoEffectsPane, isVideoEffectsPaneOpen } = useVideoEffectsPane(
399405
props.updateSidePaneRenderer,
@@ -495,6 +501,8 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
495501
? (latestNotifications ?? []).filter((notification) => notification.type !== 'assignedBreakoutRoomOpenedPromptJoin')
496502
: latestNotifications;
497503

504+
const reactionResources = useSelector(getReactionResources);
505+
498506
return (
499507
<div ref={containerRef} className={mergeStyles(containerDivStyles)} id={props.id}>
500508
<Stack verticalFill horizontalAlign="stretch" className={containerClassName} data-ui-id={props.dataUiId}>
@@ -573,7 +581,7 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
573581
userSetGalleryLayout={props.userSetGalleryLayout}
574582
onSetDialpadPage={props.onSetDialpadPage}
575583
dtmfDialerPresent={props.dtmfDialerPresent}
576-
reactionResources={adapter.getState().reactions}
584+
reactionResources={reactionResources}
577585
onClickMeetingPhoneInfo={onMeetingPhoneInfoClicked}
578586
/>
579587
</Stack>

‎packages/react-composites/src/composites/CallComposite/components/CallControls.tsx‎

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ import { useLocale } from '../../localization';
2323
import { MoreButton } from '../../common/MoreButton';
2424
import { usePropsFor } from '../hooks/usePropsFor';
2525
import { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';
26+
/* @conditional-compile-remove(DNS) */
2627
import { useAdapter } from '../adapter/CallAdapterProvider';
2728
import { isDisabled } from '../utils';
2829
import { callControlsContainerStyles } from '../styles/CallPage.styles';
29-
import { CommonCallAdapter } from '../adapter';
3030
import { RaiseHand } from './buttons/RaiseHand';
3131
import { RaiseHandButton, RaiseHandButtonProps } from '@internal/react-components';
3232
import { _generateDefaultDeviceMenuProps } from '@internal/react-components';
@@ -42,6 +42,15 @@ import { capabilitySelector } from '../../CallComposite/selectors/capabilitySele
4242
import { callStatusSelector } from '../../CallComposite/selectors/callStatusSelector';
4343
/* @conditional-compile-remove(DNS) */
4444
import { _isSafari } from '../../CallComposite/utils';
45+
import { getIsRoomsCall, getReactionResources, getRole } from '../selectors/baseSelectors';
46+
/* @conditional-compile-remove(calling-environment-info) */
47+
import { getEnvironmentInfo } from '../selectors/baseSelectors';
48+
/* @conditional-compile-remove(DNS) */
49+
import {
50+
getDeepNoiseSuppresionEffectsDependency,
51+
getDeepNoiseSuppresionIsOnByDefault,
52+
getHideDeepNoiseSupressionButton
53+
} from '../selectors/baseSelectors';
4554

4655
/**
4756
* @private
@@ -89,41 +98,43 @@ export const CallControls = (props: CallControlsProps & ContainerRectProps): JSX
8998
[props.isMobile, props.options]
9099
);
91100

92-
const adapter = useAdapter();
93-
94101
const localeStrings = useLocale();
95102

96103
/* @conditional-compile-remove(DNS) */
97104
const [isDeepNoiseSuppressionOn, setDeepNoiseSuppressionOn] = useState<boolean>(false);
98105

106+
/* @conditional-compile-remove(DNS) */
107+
const adapter = useAdapter();
99108
/* @conditional-compile-remove(DNS) */
100109
const startDeepNoiseSuppression = useCallback(async () => {
101110
await adapter.startNoiseSuppressionEffect();
102111
}, [adapter]);
103112

113+
/* @conditional-compile-remove(DNS) */
114+
const deepNoiseSuppresionEffectsDependency = useSelector(getDeepNoiseSuppresionEffectsDependency);
115+
/* @conditional-compile-remove(DNS) */
116+
const deepNoiseSuppressionOnByDefault = useSelector(getDeepNoiseSuppresionIsOnByDefault);
104117
/* @conditional-compile-remove(DNS) */
105118
useEffect(() => {
106-
if (
107-
adapter.getState().onResolveDeepNoiseSuppressionDependency &&
108-
adapter.getState().deepNoiseSuppressionOnByDefault
109-
) {
119+
if (deepNoiseSuppresionEffectsDependency && deepNoiseSuppressionOnByDefault) {
110120
startDeepNoiseSuppression();
111121
setDeepNoiseSuppressionOn(true);
112122
}
113-
}, [adapter, startDeepNoiseSuppression]);
123+
}, [deepNoiseSuppresionEffectsDependency, deepNoiseSuppressionOnByDefault, startDeepNoiseSuppression]);
114124

115125
/* @conditional-compile-remove(DNS) */
116-
const environmentInfo = adapter.getState().environmentInfo;
126+
const environmentInfo = useSelector(getEnvironmentInfo);
117127

118128
/* @conditional-compile-remove(DNS) */
119129
const isSafari = _isSafari(environmentInfo);
120130
/* @conditional-compile-remove(DNS) */
121-
const showNoiseSuppressionButton =
122-
adapter.getState().onResolveDeepNoiseSuppressionDependency &&
123-
!adapter.getState().hideDeepNoiseSuppressionButton &&
131+
const hideDeepNoiseSuppressionButton = useSelector(getHideDeepNoiseSupressionButton);
132+
/* @conditional-compile-remove(DNS) */
133+
const showNoiseSuppressionButton = !!(
134+
deepNoiseSuppresionEffectsDependency &&
135+
!hideDeepNoiseSuppressionButton &&
124136
!isSafari
125-
? true
126-
: false;
137+
);
127138

128139
/* @conditional-compile-remove(DNS) */
129140
const onClickNoiseSuppression = useCallback(async () => {
@@ -197,6 +208,8 @@ export const CallControls = (props: CallControlsProps & ContainerRectProps): JSX
197208
numberOfButtons++;
198209
}
199210

211+
const isRoomsCall = useSelector(getIsRoomsCall);
212+
200213
const moreButtonContextualMenuItems = (): IContextualMenuItem[] => {
201214
const items: IContextualMenuItem[] = [];
202215

@@ -218,7 +231,7 @@ export const CallControls = (props: CallControlsProps & ContainerRectProps): JSX
218231
});
219232
}
220233

221-
if (!isRoomsCallTrampoline(adapter)) {
234+
if (!isRoomsCall) {
222235
items.push({
223236
key: 'holdButtonKey',
224237
text: localeStrings.component.strings.holdButton.tooltipOffContent,
@@ -267,12 +280,11 @@ export const CallControls = (props: CallControlsProps & ContainerRectProps): JSX
267280
showMoreButton = isEnabled(options?.moreButton);
268281
}
269282

270-
const reactionResources = adapter.getState().reactions;
283+
const reactionResources = useSelector(getReactionResources);
271284
const raiseHandButtonIsEnabled = isEnabled(options?.raiseHandButton);
272285
let showRaiseHandButtonInControlBar = raiseHandButtonIsEnabled;
273-
const role = adapter.getState().call?.role;
274-
const hideRaiseHandButtonInRoomsCall =
275-
adapter.getState().isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);
286+
const role = useSelector(getRole);
287+
const hideRaiseHandButtonInRoomsCall = isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);
276288
if (showRaiseHandButtonInControlBar && (props.isMobile ? numberOfButtons < 5 : true)) {
277289
numberOfButtons++;
278290
} else {
@@ -470,8 +482,3 @@ export const CallControls = (props: CallControlsProps & ContainerRectProps): JSX
470482
};
471483

472484
const isEnabled = (option: unknown): boolean => option !== false;
473-
474-
/** @private */
475-
export const isRoomsCallTrampoline = (adapter: CommonCallAdapter): boolean => {
476-
return adapter.getState().isRoomsCall;
477-
};

0 commit comments

Comments
 (0)
⚡