Skip to content

Commit 801f351

Browse files
compulimcompulim
committed
Move useSendBoxValue from Redux to React
1 parent 32f361f commit 801f351

27 files changed

Lines changed: 251 additions & 113 deletions

File tree

‎__tests__/hooks/useSendBoxValue.js‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎__tests__/html2/hooks/useSendBoxHooks/useSendBoxValue.getter.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
6+
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
7+
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
8+
<script crossorigin="anonymous" src="/test-harness.js"></script>
9+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
10+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
11+
</head>
12+
<body>
13+
<main id="webchat"></main>
14+
<script type="text/babel" data-presets="env,stage-3,react">
15+
const {
16+
testHelpers: { createDirectLineEmulator },
17+
WebChat: {
18+
Components: { BasicWebChat, Composer },
19+
hooks: { useSendBoxHooks }
20+
}
21+
} = window;
22+
23+
run(async function () {
24+
const { directLine, store } = createDirectLineEmulator();
25+
26+
const RunFunction = ({ fn }) => {
27+
fn();
28+
29+
return false;
30+
};
31+
32+
const renderWithFunction = fn =>
33+
new Promise(resolve =>
34+
ReactDOM.render(
35+
<Composer directLine={directLine} sendTypingIndicator={true} store={store}>
36+
<BasicWebChat />
37+
<RunFunction fn={() => resolve(fn && fn())} key={Date.now() + ''} />
38+
</Composer>,
39+
document.getElementById('webchat')
40+
)
41+
);
42+
43+
await renderWithFunction();
44+
45+
await pageConditions.webChatRendered();
46+
47+
// WHEN: At initial.
48+
await pageConditions.uiConnected();
49+
50+
// WHEN: Type "Hello, World!" without send.
51+
await pageObjects.typeInSendBox('Hello, World!');
52+
53+
// THEN: `useActiveTyping` should return "Hello, World!"
54+
await expect(renderWithFunction(() => useSendBoxHooks().useSendBoxValue()[0])).resolves.toBe('Hello, World!');
55+
});
56+
</script>
57+
</body>
58+
</html>

‎__tests__/html2/hooks/useSendBoxHooks/useSendBoxValue.setter.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
6+
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
7+
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
8+
<script crossorigin="anonymous" src="/test-harness.js"></script>
9+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
10+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
11+
</head>
12+
<body>
13+
<main id="webchat"></main>
14+
<script type="text/babel" data-presets="env,stage-3,react">
15+
const {
16+
testHelpers: { createDirectLineEmulator },
17+
WebChat: {
18+
Components: { BasicWebChat, Composer },
19+
hooks: { useSendBoxHooks },
20+
testIds
21+
}
22+
} = window;
23+
24+
run(async function () {
25+
const { directLine, store } = createDirectLineEmulator();
26+
27+
const RunFunction = ({ fn }) => {
28+
fn();
29+
30+
return false;
31+
};
32+
33+
const renderWithFunction = fn =>
34+
new Promise(resolve =>
35+
ReactDOM.render(
36+
<Composer directLine={directLine} sendTypingIndicator={true} store={store}>
37+
<BasicWebChat />
38+
<RunFunction fn={() => resolve(fn && fn())} key={Date.now() + ''} />
39+
</Composer>,
40+
document.getElementById('webchat')
41+
)
42+
);
43+
44+
await renderWithFunction();
45+
46+
await pageConditions.webChatRendered();
47+
48+
// WHEN: At initial.
49+
await pageConditions.uiConnected();
50+
51+
// WHEN: `useActiveTyping` to set the text box value.
52+
await renderWithFunction(() => useSendBoxHooks().useSendBoxValue()[1]('Hello, World!'));
53+
54+
// THEN: Send box should be "Hello, World!"
55+
expect(pageElements.byTestId(testIds.sendBoxTextBox)).toHaveProperty('value', 'Hello, World!');
56+
});
57+
</script>
58+
</body>
59+
</html>

‎packages/api/src/hooks/index.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,11 +72,7 @@ import useUserID from './useUserID';
7272
import useUsername from './useUsername';
7373
import useVoiceSelector from './useVoiceSelector';
7474

75-
export {
76-
useSendBoxAttachmentsHooks,
77-
useSuggestedActionsHooks,
78-
useWhileConnectedHooks
79-
} from 'botframework-webchat-redux-store';
75+
export { useSendBoxHooks, useSuggestedActionsHooks, useWhileConnectedHooks } from 'botframework-webchat-redux-store';
8076

8177
export {
8278
useActiveTyping,

‎packages/api/src/hooks/useSendBoxAttachments.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { type SendBoxAttachment } from 'botframework-webchat-core';
2-
import { useSendBoxAttachmentsHooks } from 'botframework-webchat-redux-store';
2+
import { useSendBoxHooks } from 'botframework-webchat-redux-store';
33
import { type Dispatch, type SetStateAction } from 'react';
44

55
/**
6-
* @deprecated Use `useSendBoxAttachmentsHooks().useSendBoxAttachments()` instead. This hook will be removed on or after 2027-05-30.
6+
* @deprecated Use `useSendBoxHooks().useSendBoxAttachments()` instead. This hook will be removed on or after 2027-05-30.
77
*/
88
export default function useSendBoxAttachments(): readonly [
99
readonly SendBoxAttachment[],
1010
Dispatch<SetStateAction<readonly SendBoxAttachment[]>>
1111
] {
1212
// Provides a path for backward compatibility during deprecation.
1313
// eslint-disable-next-line local-rules/forbid-use-hook-producer
14-
return useSendBoxAttachmentsHooks().useSendBoxAttachments();
14+
return useSendBoxHooks().useSendBoxAttachments();
1515
}

‎packages/api/src/hooks/useSendBoxValue.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1-
import { useSelector } from './internal/WebChatReduxContext';
2-
import useWebChatAPIContext from './internal/useWebChatAPIContext';
1+
import { useSendBoxHooks } from 'botframework-webchat-redux-store';
2+
import { type Dispatch, type SetStateAction } from 'react';
33

4-
export default function useSendBoxValue(): [string, (value: string) => void] {
5-
return [useSelector(({ sendBoxValue }) => sendBoxValue), useWebChatAPIContext().setSendBox];
4+
/**
5+
* @deprecated Use `useSendBoxHooks().useSendBoxValue()` instead. This hook will be removed on or after 2027-05-30.
6+
*/
7+
export default function useSendBoxValue(): readonly [string, Dispatch<SetStateAction<string>>] {
8+
// Provides a path for backward compatibility during deprecation.
9+
// eslint-disable-next-line local-rules/forbid-use-hook-producer
10+
return useSendBoxHooks().useSendBoxValue();
611
}

‎packages/api/src/hooks/useSubmitSendBox.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { useCallback } from 'react';
22
import { useRefFrom } from 'use-ref-from';
33

4-
import { useSendBoxAttachmentsHooks } from './index';
4+
import { useSendBoxHooks } from './index';
55
import useWebChatAPIContext from './internal/useWebChatAPIContext';
66
import useTrackEvent from './useTrackEvent';
77

88
export default function useSubmitSendBox(): (method?: string, { channelData }?: { channelData: any }) => void {
99
// TODO: Move the logic into APIContext.submitSendBox.
1010
// eslint-disable-next-line local-rules/forbid-use-hook-producer
11-
const [sendBoxAttachments] = useSendBoxAttachmentsHooks().useSendBoxAttachments();
11+
const [sendBoxAttachments] = useSendBoxHooks().useSendBoxAttachments();
1212
const { submitSendBox } = useWebChatAPIContext();
1313
const trackEvent = useTrackEvent();
1414

‎packages/component/src/Dictation.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const {
1515
useDictateState,
1616
useEmitTypingIndicator,
1717
useLanguage,
18-
useSendBoxValue,
18+
useSendBoxHooks,
1919
useSendTypingIndicator,
2020
useShouldSpeakIncomingActivity,
2121
useStopDictate,
@@ -31,7 +31,7 @@ const {
3131
const Dictation = ({ onError }) => {
3232
const [, setDictateAbortable] = useSettableDictateAbortable();
3333
const [, setDictateInterims] = useDictateInterims();
34-
const [, setSendBox] = useSendBoxValue();
34+
const [, setSendBox] = useSendBoxHooks().useSendBoxValue();
3535
const [, setShouldSpeakIncomingActivity] = useShouldSpeakIncomingActivity();
3636
const [{ SpeechGrammarList, SpeechRecognition } = {}] = useWebSpeechPonyfill();
3737
const [{ speechRecognitionContinuous }] = useStyleOptions();

‎packages/component/src/SendBox/AttachmentBar/AttachmentBar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import testIds from '../../testIds';
1010
import styles from './AttachmentBar.module.css';
1111
import AttachmentBarItem from './AttachmentBarItem';
1212

13-
const { useSendBoxAttachmentsHooks, useStyleOptions } = hooks;
13+
const { useSendBoxHooks, useStyleOptions } = hooks;
1414

1515
const sendBoxAttachmentBarPropsSchema = pipe(
1616
object({
@@ -24,7 +24,7 @@ type SendBoxAttachmentBarProps = InferInput<typeof sendBoxAttachmentBarPropsSche
2424
function SendBoxAttachmentBar(props: SendBoxAttachmentBarProps) {
2525
const { className } = validateProps(sendBoxAttachmentBarPropsSchema, props);
2626

27-
const [sendBoxAttachments, setSendBoxAttachments] = useSendBoxAttachmentsHooks().useSendBoxAttachments();
27+
const [sendBoxAttachments, setSendBoxAttachments] = useSendBoxHooks().useSendBoxAttachments();
2828
const classNames = useStyles(styles);
2929
const [{ sendBoxAttachmentBarMaxThumbnail }] = useStyleOptions();
3030

‎packages/component/src/SendBox/MicrophoneButton.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const {
2121
useDictateInterims,
2222
useDictateState,
2323
useLocalizer,
24-
useSendBoxValue,
24+
useSendBoxHooks,
2525
useShouldSpeakIncomingActivity,
2626
useStartDictate,
2727
useStopDictate,
@@ -46,7 +46,9 @@ const ROOT_STYLE = {
4646
};
4747

4848
function useMicrophoneButtonClick(): () => void {
49-
const [, setSendBox] = useSendBoxValue();
49+
// TODO: Move useMicrophoneButtonClick() into useSendBoxHooks().
50+
// eslint-disable-next-line local-rules/forbid-use-hook-producer
51+
const [, setSendBox] = useSendBoxHooks().useSendBoxValue();
5052
const [, setShouldSpeakIncomingActivity] = useShouldSpeakIncomingActivity();
5153
const [dictateInterims] = useDictateInterims();
5254
const [dictateState] = useDictateState();

0 commit comments

Comments
 (0)