chat: stateful send button in ChatInput

pkg/interface/src/views/apps/chat/components/ChatInput.tsx

@@ -9,9 +9,10 @@ import GlobalApi from '~/logic/api/global';
 import { Envelope } from '~/types/chat-update';
 import { StorageState } from '~/types';
 import { Contacts, Content } from '@urbit/api';
-import { Row, BaseImage, Box, Icon, LoadingSpinner, Text } from '@tlon/indigo-react';
+import { Row, BaseImage, Box, Icon, LoadingSpinner } from '@tlon/indigo-react';
 import withStorage from '~/views/components/withStorage';
 import { withLocalState } from '~/logic/state/local';
+import { MOBILE_BROWSER_REGEX } from "~/logic/lib/util";
 
 type ChatInputProps = IuseStorage & {
   api: GlobalApi;
@@ -30,6 +31,7 @@ interface ChatInputState {
   inCodeMode: boolean;
   submitFocus: boolean;
   uploadingPaste: boolean;
+  currentInput: string;
 }
 
 class ChatInput extends Component<ChatInputProps, ChatInputState> {
@@ -41,7 +43,8 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
     this.state = {
       inCodeMode: false,
       submitFocus: false,
-      uploadingPaste: false
+      uploadingPaste: false,
+      currentInput: props.message,
     };
 
     this.chatEditor = React.createRef();
@@ -50,6 +53,7 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
     this.toggleCode = this.toggleCode.bind(this);
     this.uploadSuccess = this.uploadSuccess.bind(this);
     this.uploadError = this.uploadError.bind(this);
+    this.eventHandler = this.eventHandler.bind(this);
   }
 
   toggleCode() {
@@ -61,6 +65,7 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
   submit(text) {
     const { props, state } = this;
     const [, , ship, name] = props.station.split('/');
+    this.setState({ currentInput: '' });
     if (state.inCodeMode) {
       this.setState(
         {
@@ -119,6 +124,14 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
         .catch(this.uploadError);
     });
   }
+  
+  toggleFocus(value) {
+    this.setState({ submitFocus: value });
+  }
+
+  eventHandler(value) {
+    this.setState({ currentInput: value });
+  }
 
   render() {
     const { props, state } = this;
@@ -180,6 +193,9 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
           onUnmount={props.onUnmount}
           message={props.message}
           onPaste={this.onPaste.bind(this)}
+          focusEvent={() => this.toggleFocus(true)}
+          blurEvent={() => this.toggleFocus(false)}
+          changeEvent={this.eventHandler}
           placeholder='Message...'
         />
         <Box mx='12px' flexShrink={0} height='16px' width='16px' flexBasis='16px'>
@@ -207,16 +223,26 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
             )
           ) : null}
         </Box>
-        <Box mx={3} flexShrink={0} height='16px'>
-          <Text
-              bold
-              color="blue"
-              cursor="pointer"
-              onClick={() => console.log(this.chatEditor.current.submit())}
-            >
-              Send
-            </Text>
-        </Box>
+        {(MOBILE_BROWSER_REGEX.test(navigator.userAgent) &&
+          state.submitFocus) ||
+        state.currentInput !== "" ? (
+          <Box
+            ml={2}
+            mr="12px"
+            flexShrink={0}
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+            width="24px"
+            height="24px"
+            borderRadius="50%"
+            backgroundColor={state.currentInput !== "" ? "blue" : "gray"}
+            cursor={state.currentInput !== "" ? "pointer" : "default"}
+            onClick={() => this.chatEditor.current.submit()}
+          >
+            <Icon icon="ArrowEast" color="white" />
+          </Box>
+        ) : null}
       </Row>
     );
   }

pkg/interface/src/views/apps/chat/components/chat-editor.js

@@ -162,6 +162,7 @@ export default class ChatEditor extends Component {
       editor.showHint(['test', 'foo']);
     }
     if (this.state.message !== '' && value == '') {
+      this.props.changeEvent(value);
       this.setState({
         message: value
       });
@@ -169,6 +170,7 @@ export default class ChatEditor extends Component {
     if (value == this.props.message || value == '' || value == ' ') {
       return;
     }
+    this.props.changeEvent(value);
     this.setState({
       message: value
     });
@@ -179,6 +181,8 @@ export default class ChatEditor extends Component {
       inCodeMode,
       placeholder,
       message,
+      focusEvent,
+      blurEvent,
       ...props
     } = this.props;
 
@@ -238,6 +242,8 @@ export default class ChatEditor extends Component {
               rows="1"
               style={{ width: '100%', background: 'transparent', color: 'currentColor' }}
               placeholder={inCodeMode ? "Code..." : "Message..."}
+              onFocus={focusEvent}
+              onBlur={blurEvent}
               onChange={event => {
                 this.messageChange(null, null, event.target.value);
               }}
@@ -265,6 +271,8 @@ export default class ChatEditor extends Component {
             this.editor = editor;
             editor.focus();
           }}
+          onFocus={focusEvent}
+          onBlur={blurEvent}
           {...props}
         />
         }