Merge pull request #401 from billba/master

Roll back "cleanup"

src/Chat.tsx

@@ -186,8 +186,7 @@ export class Chat extends React.Component<ChatProps, {}> {
 export const doCardAction = (
     botConnection: IBotConnection,
     from: User,
-    locale: string
-) => (
+    locale: string,
     sendMessage: (value: string, user: User, locale: string) => void,
 ) => (
     type: string,
@@ -216,6 +215,10 @@ export const doCardAction = (
         default:
             konsole.log("unknown button type", type);
         }
+
+    // HUGE HACK - set focus back to input after clicking on an action
+    // React makes this hard to do well, so we just do an end run around them
+    document.getElementById("wc-shellinput").focus();
 }
 
 export const sendPostBack = (botConnection: IBotConnection, text: string, from: User, locale: string) => {

src/History.tsx

@@ -9,13 +9,15 @@ export interface HistoryProps {
     format: FormatState,
     size: SizeState,
     activities: Activity[],
-    isFromMe: (activity: Activity) => boolean,
-    isSelected: (activity: Activity) => boolean,
-    doCardAction: (sendMessage: (text: string, from: User, locale: string) => void) => (type: string, value: string) => void;
+
     sendMessage: (text: string, from: User, locale: string) => void,
-    onClickActivity: (activity: Activity) => () => void,
     setMeasurements: (carouselMargin: number) => void,
-    onClickRetry: (activity: Activity) => void
+    onClickRetry: (activity: Activity) => void,
+
+    isFromMe: (activity: Activity) => boolean,
+    isSelected: (activity: Activity) => boolean,
+    onClickActivity: (activity: Activity) => React.MouseEventHandler<HTMLDivElement>,
+    doCardAction: (type: string, value: string) => void
 }
 
 export class HistoryView extends React.Component<HistoryProps, {}> {
@@ -114,7 +116,7 @@ export class HistoryView extends React.Component<HistoryProps, {}> {
                         showTimestamp={ index === this.props.activities.length - 1 || (index + 1 < this.props.activities.length && suitableInterval(activity, this.props.activities[index + 1])) }
                         selected={ this.props.isSelected(activity) }
                         fromMe={ this.props.isFromMe(activity) }
-                        onCardAction={ this.props.doCardAction(this.props.sendMessage) }
+                        onCardAction={ this.props.doCardAction }
                         onClickActivity={ this.props.onClickActivity(activity) }
                         onClickRetry={ e => {
                             // Since this is a click on an anchor, we need to stop it
@@ -140,19 +142,35 @@ export class HistoryView extends React.Component<HistoryProps, {}> {
 }
 
 export const History = connect(
-    (state: ChatState): Partial<HistoryProps> => ({
+    (state: ChatState) => ({
+        // passed down to HistoryView
         format: state.format,
         size: state.size,
         activities: state.history.activities,
-        isFromMe: (activity: Activity) => activity.from.id === state.connection.user.id,
-        isSelected: (activity: Activity) => activity === state.history.selectedActivity,
-        onClickActivity: (activity: Activity) => state.connection.selectedActivity && (() => state.connection.selectedActivity.next({ activity })),
-        doCardAction: doCardAction(state.connection.botConnection, state.connection.user, state.format.locale),
+        // only used to create helper functions below 
+        connectionSelectedActivity: state.connection.selectedActivity,
+        selectedActivity: state.history.selectedActivity,
+        botConnection: state.connection.botConnection,
+        user: state.connection.user
     }), {
         setMeasurements: (carouselMargin: number) => ({ type: 'Set_Measurements', carouselMargin }),
         onClickRetry: (activity: Activity) => ({ type: 'Send_Message_Retry', clientActivityId: activity.channelData.clientActivityId }),
+        // only used to create helper functions below 
         sendMessage
-    }
+    }, (stateProps: any, dispatchProps: any) => ({
+        // from stateProps
+        format: stateProps.format,
+        size: stateProps.size,
+        activities: stateProps.activities,
+        // from dispatchProps
+        setMeasurements: dispatchProps.setMeasurements,
+        onClickRetry: dispatchProps.onClickRetry,
+        // helper functions
+        doCardAction: doCardAction(stateProps.botConnection, stateProps.user, stateProps.format.locale, dispatchProps.sendMessage),
+        isFromMe: (activity: Activity) => activity.from.id === stateProps.user.id,
+        isSelected: (activity: Activity) => activity === stateProps.selectedActivity,
+        onClickActivity: (activity: Activity) => stateProps.connectionSelectedActivity && (() => stateProps.connectionSelectedActivity.next({ activity }))
+    })
 )(HistoryView);
 
 const getComputedStyleValues = (el: HTMLElement, stylePropertyNames: string[]) => {

src/MessagePane.tsx

@@ -7,10 +7,12 @@ import { konsole, classList, doCardAction, sendMessage } from './Chat';
 
 export interface MessagePaneProps {
     activityWithSuggestedActions: Message,
+
     takeSuggestedAction: (message: Message) => any,
-    doCardAction: (sendMessage: (text: string, from: User, locale: string) => void) => (type: string, value: string) => void,
-    sendMessage: (value: string, user: User, locale: string) => void,
-    children: React.ReactNode
+
+    children: React.ReactNode,
+
+    doCardAction: (type: string, value: string) => void
 }
 
 const MessagePaneView = (props: MessagePaneProps) =>
@@ -32,7 +34,7 @@ class SuggestedActions extends React.Component<MessagePaneProps, {}> {
         if (!this.props.activityWithSuggestedActions) return;
 
         this.props.takeSuggestedAction(this.props.activityWithSuggestedActions);
-        this.props.doCardAction(this.props.sendMessage)(cardAction.type, cardAction.value);
+        this.props.doCardAction(cardAction.type, cardAction.value);
         e.stopPropagation();
     }
 
@@ -75,12 +77,25 @@ function activityWithSuggestedActions(activities: Activity[]) {
 }
 
 export const MessagePane = connect(
-    (state: ChatState): Partial<MessagePaneProps> => ({
+    (state: ChatState) => ({
+        // passed down to MessagePaneView
         activityWithSuggestedActions: activityWithSuggestedActions(state.history.activities),
-        doCardAction: doCardAction(state.connection.botConnection, state.connection.user, state.format.locale),
-    }),
-    {
+        // only used to create helper functions below 
+        botConnection: state.connection.botConnection,
+        user: state.connection.user,
+        locale: state.format.locale
+    }), {
         takeSuggestedAction: (message: Message) => ({ type: 'Take_SuggestedAction', message } as ChatActions),
+        // only used to create helper functions below 
         sendMessage
-    }
+    }, (stateProps: any, dispatchProps: any, ownProps: any) => ({
+        // from stateProps
+        activityWithSuggestedActions: stateProps.activityWithSuggestedActions,
+        // from dispatchProps
+        takeSuggestedAction: dispatchProps.takeSuggestedAction,
+        // from ownProps
+        children: ownProps.children,
+        // helper functions
+        doCardAction: doCardAction(stateProps.botConnection, stateProps.user, stateProps.locale, dispatchProps.sendMessage),
+    })
 )(MessagePaneView);

src/Shell.tsx

@@ -3,14 +3,16 @@ import { ChatActions, ChatState, FormatState } from './Store';
 import { User } from 'botframework-directlinejs';
 import { sendMessage, sendFiles } from './Chat';
 import { Dispatch, connect } from 'react-redux';
+import { Strings } from './Strings';
 
 interface Props {
     inputText: string,
-    format: FormatState,
-    user: User,
-    sendMessage: (inputText: string, from: User, locale: string) => void,
-    sendFiles: (files: FileList, from: User, locale: string) => void,
+    strings: Strings,
+
     onChangeText: (inputText: string) => void
+
+    sendMessage: (inputText: string) => void,
+    sendFiles: (files: FileList) => void,
 }
 
 class ShellContainer extends React.Component<Props, {}> {
@@ -23,7 +25,7 @@ class ShellContainer extends React.Component<Props, {}> {
 
     private sendMessage() {
         if (this.props.inputText.trim().length > 0)
-            this.props.sendMessage(this.props.inputText, this.props.user, this.props.format.locale);
+            this.props.sendMessage(this.props.inputText);
     }
 
     private onKeyPress(e) {
@@ -38,7 +40,7 @@ class ShellContainer extends React.Component<Props, {}> {
 
     private onChangeFile() {
         this.textInput.focus();
-        this.props.sendFiles(this.fileInput.files, this.props.user, this.props.format.locale);
+        this.props.sendFiles(this.fileInput.files);
         this.fileInput.value = null;
     }
 
@@ -57,12 +59,13 @@ class ShellContainer extends React.Component<Props, {}> {
                 <div className="wc-textbox">
                     <input
                         type="text"
+                        id="wc-shellinput"
                         ref={ input => this.textInput = input }
                         autoFocus
                         value={ this.props.inputText }
                         onChange={ _ => this.props.onChangeText(this.textInput.value) }
                         onKeyPress={ e => this.onKeyPress(e) }
-                        placeholder={ this.props.format.strings.consolePlaceholder }
+                        placeholder={ this.props.strings.consolePlaceholder }
                     />
                 </div>
                 <label className="wc-send" onClick={ () => this.onClickSend() } >
@@ -75,15 +78,28 @@ class ShellContainer extends React.Component<Props, {}> {
     }
 }
 
-
 export const Shell = connect(
-    (state: ChatState): Partial<Props> => ({
+    (state: ChatState) => ({
+        // passed down to ShellContainer
         inputText: state.shell.input,
-        format: state.format,
+        strings: state.format.strings,
+        // only used to create helper functions below 
+        locale: state.format.locale,
         user: state.connection.user,
     }), {
+        // passed down to ShellContainer
+        onChangeText: (input: string) => ({ type: 'Update_Input', input } as ChatActions),
+        // only used to create helper functions below 
         sendMessage,
-        sendFiles,
-        onChangeText: (input: string) => ({ type: 'Update_Input', input } as ChatActions)
-    }
+        sendFiles
+    }, (stateProps: any, dispatchProps: any, ownProps: any) => ({
+        // from stateProps
+        inputText: stateProps.inputText,
+        strings: stateProps.strings,
+        // from dispatchProps
+        onChangeText: dispatchProps.onChangeText,
+        // helper functions
+        sendMessage: (text: string) => dispatchProps.sendMessage(text, stateProps.user, stateProps.locale),
+        sendFile: (files: FileList) => dispatchProps.sendFiles(files, stateProps.user, stateProps.locale)
+    })
 )(ShellContainer);