Skip to content

Commit f8d0d04

Browse files
billbabillba
authored
Merge pull request #401 from billba/master
Roll back "cleanup"
2 parents b87bae7 + 93bffc3 commit f8d0d04

4 files changed

Lines changed: 88 additions & 36 deletions

File tree

‎src/Chat.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -186,8 +186,7 @@ export class Chat extends React.Component<ChatProps, {}> {
186186
export const doCardAction = (
187187
botConnection: IBotConnection,
188188
from: User,
189-
locale: string
190-
) => (
189+
locale: string,
191190
sendMessage: (value: string, user: User, locale: string) => void,
192191
) => (
193192
type: string,
@@ -216,6 +215,10 @@ export const doCardAction = (
216215
default:
217216
konsole.log("unknown button type", type);
218217
}
218+
219+
// HUGE HACK - set focus back to input after clicking on an action
220+
// React makes this hard to do well, so we just do an end run around them
221+
document.getElementById("wc-shellinput").focus();
219222
}
220223

221224
export const sendPostBack = (botConnection: IBotConnection, text: string, from: User, locale: string) => {

‎src/History.tsx‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,15 @@ export interface HistoryProps {
99
format: FormatState,
1010
size: SizeState,
1111
activities: Activity[],
12-
isFromMe: (activity: Activity) => boolean,
13-
isSelected: (activity: Activity) => boolean,
14-
doCardAction: (sendMessage: (text: string, from: User, locale: string) => void) => (type: string, value: string) => void;
12+
1513
sendMessage: (text: string, from: User, locale: string) => void,
16-
onClickActivity: (activity: Activity) => () => void,
1714
setMeasurements: (carouselMargin: number) => void,
18-
onClickRetry: (activity: Activity) => void
15+
onClickRetry: (activity: Activity) => void,
16+
17+
isFromMe: (activity: Activity) => boolean,
18+
isSelected: (activity: Activity) => boolean,
19+
onClickActivity: (activity: Activity) => React.MouseEventHandler<HTMLDivElement>,
20+
doCardAction: (type: string, value: string) => void
1921
}
2022

2123
export class HistoryView extends React.Component<HistoryProps, {}> {
@@ -114,7 +116,7 @@ export class HistoryView extends React.Component<HistoryProps, {}> {
114116
showTimestamp={ index === this.props.activities.length - 1 || (index + 1 < this.props.activities.length && suitableInterval(activity, this.props.activities[index + 1])) }
115117
selected={ this.props.isSelected(activity) }
116118
fromMe={ this.props.isFromMe(activity) }
117-
onCardAction={ this.props.doCardAction(this.props.sendMessage) }
119+
onCardAction={ this.props.doCardAction }
118120
onClickActivity={ this.props.onClickActivity(activity) }
119121
onClickRetry={ e => {
120122
// Since this is a click on an anchor, we need to stop it
@@ -140,19 +142,35 @@ export class HistoryView extends React.Component<HistoryProps, {}> {
140142
}
141143

142144
export const History = connect(
143-
(state: ChatState): Partial<HistoryProps> => ({
145+
(state: ChatState) => ({
146+
// passed down to HistoryView
144147
format: state.format,
145148
size: state.size,
146149
activities: state.history.activities,
147-
isFromMe: (activity: Activity) => activity.from.id === state.connection.user.id,
148-
isSelected: (activity: Activity) => activity === state.history.selectedActivity,
149-
onClickActivity: (activity: Activity) => state.connection.selectedActivity && (() => state.connection.selectedActivity.next({ activity })),
150-
doCardAction: doCardAction(state.connection.botConnection, state.connection.user, state.format.locale),
150+
// only used to create helper functions below
151+
connectionSelectedActivity: state.connection.selectedActivity,
152+
selectedActivity: state.history.selectedActivity,
153+
botConnection: state.connection.botConnection,
154+
user: state.connection.user
151155
}), {
152156
setMeasurements: (carouselMargin: number) => ({ type: 'Set_Measurements', carouselMargin }),
153157
onClickRetry: (activity: Activity) => ({ type: 'Send_Message_Retry', clientActivityId: activity.channelData.clientActivityId }),
158+
// only used to create helper functions below
154159
sendMessage
155-
}
160+
}, (stateProps: any, dispatchProps: any) => ({
161+
// from stateProps
162+
format: stateProps.format,
163+
size: stateProps.size,
164+
activities: stateProps.activities,
165+
// from dispatchProps
166+
setMeasurements: dispatchProps.setMeasurements,
167+
onClickRetry: dispatchProps.onClickRetry,
168+
// helper functions
169+
doCardAction: doCardAction(stateProps.botConnection, stateProps.user, stateProps.format.locale, dispatchProps.sendMessage),
170+
isFromMe: (activity: Activity) => activity.from.id === stateProps.user.id,
171+
isSelected: (activity: Activity) => activity === stateProps.selectedActivity,
172+
onClickActivity: (activity: Activity) => stateProps.connectionSelectedActivity && (() => stateProps.connectionSelectedActivity.next({ activity }))
173+
})
156174
)(HistoryView);
157175

158176
const getComputedStyleValues = (el: HTMLElement, stylePropertyNames: string[]) => {

‎src/MessagePane.tsx‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ import { konsole, classList, doCardAction, sendMessage } from './Chat';
77

88
export interface MessagePaneProps {
99
activityWithSuggestedActions: Message,
10+
1011
takeSuggestedAction: (message: Message) => any,
11-
doCardAction: (sendMessage: (text: string, from: User, locale: string) => void) => (type: string, value: string) => void,
12-
sendMessage: (value: string, user: User, locale: string) => void,
13-
children: React.ReactNode
12+
13+
children: React.ReactNode,
14+
15+
doCardAction: (type: string, value: string) => void
1416
}
1517

1618
const MessagePaneView = (props: MessagePaneProps) =>
@@ -32,7 +34,7 @@ class SuggestedActions extends React.Component<MessagePaneProps, {}> {
3234
if (!this.props.activityWithSuggestedActions) return;
3335

3436
this.props.takeSuggestedAction(this.props.activityWithSuggestedActions);
35-
this.props.doCardAction(this.props.sendMessage)(cardAction.type, cardAction.value);
37+
this.props.doCardAction(cardAction.type, cardAction.value);
3638
e.stopPropagation();
3739
}
3840

@@ -75,12 +77,25 @@ function activityWithSuggestedActions(activities: Activity[]) {
7577
}
7678

7779
export const MessagePane = connect(
78-
(state: ChatState): Partial<MessagePaneProps> => ({
80+
(state: ChatState) => ({
81+
// passed down to MessagePaneView
7982
activityWithSuggestedActions: activityWithSuggestedActions(state.history.activities),
80-
doCardAction: doCardAction(state.connection.botConnection, state.connection.user, state.format.locale),
81-
}),
82-
{
83+
// only used to create helper functions below
84+
botConnection: state.connection.botConnection,
85+
user: state.connection.user,
86+
locale: state.format.locale
87+
}), {
8388
takeSuggestedAction: (message: Message) => ({ type: 'Take_SuggestedAction', message } as ChatActions),
89+
// only used to create helper functions below
8490
sendMessage
85-
}
91+
}, (stateProps: any, dispatchProps: any, ownProps: any) => ({
92+
// from stateProps
93+
activityWithSuggestedActions: stateProps.activityWithSuggestedActions,
94+
// from dispatchProps
95+
takeSuggestedAction: dispatchProps.takeSuggestedAction,
96+
// from ownProps
97+
children: ownProps.children,
98+
// helper functions
99+
doCardAction: doCardAction(stateProps.botConnection, stateProps.user, stateProps.locale, dispatchProps.sendMessage),
100+
})
86101
)(MessagePaneView);

‎src/Shell.tsx‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@ import { ChatActions, ChatState, FormatState } from './Store';
33
import { User } from 'botframework-directlinejs';
44
import { sendMessage, sendFiles } from './Chat';
55
import { Dispatch, connect } from 'react-redux';
6+
import { Strings } from './Strings';
67

78
interface Props {
89
inputText: string,
9-
format: FormatState,
10-
user: User,
11-
sendMessage: (inputText: string, from: User, locale: string) => void,
12-
sendFiles: (files: FileList, from: User, locale: string) => void,
10+
strings: Strings,
11+
1312
onChangeText: (inputText: string) => void
13+
14+
sendMessage: (inputText: string) => void,
15+
sendFiles: (files: FileList) => void,
1416
}
1517

1618
class ShellContainer extends React.Component<Props, {}> {
@@ -23,7 +25,7 @@ class ShellContainer extends React.Component<Props, {}> {
2325

2426
private sendMessage() {
2527
if (this.props.inputText.trim().length > 0)
26-
this.props.sendMessage(this.props.inputText, this.props.user, this.props.format.locale);
28+
this.props.sendMessage(this.props.inputText);
2729
}
2830

2931
private onKeyPress(e) {
@@ -38,7 +40,7 @@ class ShellContainer extends React.Component<Props, {}> {
3840

3941
private onChangeFile() {
4042
this.textInput.focus();
41-
this.props.sendFiles(this.fileInput.files, this.props.user, this.props.format.locale);
43+
this.props.sendFiles(this.fileInput.files);
4244
this.fileInput.value = null;
4345
}
4446

@@ -57,12 +59,13 @@ class ShellContainer extends React.Component<Props, {}> {
5759
<div className="wc-textbox">
5860
<input
5961
type="text"
62+
id="wc-shellinput"
6063
ref={ input => this.textInput = input }
6164
autoFocus
6265
value={ this.props.inputText }
6366
onChange={ _ => this.props.onChangeText(this.textInput.value) }
6467
onKeyPress={ e => this.onKeyPress(e) }
65-
placeholder={ this.props.format.strings.consolePlaceholder }
68+
placeholder={ this.props.strings.consolePlaceholder }
6669
/>
6770
</div>
6871
<label className="wc-send" onClick={ () => this.onClickSend() } >
@@ -75,15 +78,28 @@ class ShellContainer extends React.Component<Props, {}> {
7578
}
7679
}
7780

78-
7981
export const Shell = connect(
80-
(state: ChatState): Partial<Props> => ({
82+
(state: ChatState) => ({
83+
// passed down to ShellContainer
8184
inputText: state.shell.input,
82-
format: state.format,
85+
strings: state.format.strings,
86+
// only used to create helper functions below
87+
locale: state.format.locale,
8388
user: state.connection.user,
8489
}), {
90+
// passed down to ShellContainer
91+
onChangeText: (input: string) => ({ type: 'Update_Input', input } as ChatActions),
92+
// only used to create helper functions below
8593
sendMessage,
86-
sendFiles,
87-
onChangeText: (input: string) => ({ type: 'Update_Input', input } as ChatActions)
88-
}
94+
sendFiles
95+
}, (stateProps: any, dispatchProps: any, ownProps: any) => ({
96+
// from stateProps
97+
inputText: stateProps.inputText,
98+
strings: stateProps.strings,
99+
// from dispatchProps
100+
onChangeText: dispatchProps.onChangeText,
101+
// helper functions
102+
sendMessage: (text: string) => dispatchProps.sendMessage(text, stateProps.user, stateProps.locale),
103+
sendFile: (files: FileList) => dispatchProps.sendFiles(files, stateProps.user, stateProps.locale)
104+
})
89105
)(ShellContainer);

0 commit comments

Comments
 (0)