Fixes for new antd, and changes to get addConversation webhook working

README.md

@@ -18,6 +18,7 @@ The demo application can be configured and run in two ways:
 * Cloning this repo and running locally
   * Remember to copy the `.env.example` file to `.env` and replace the variables values with
   the ones from your account. By default `NODE_ENV` is set to `production`.
+  * Need to run `index.js` as a separate node server to get onConversationAdded webhook to work.
 
 
 # Replacing the Access Token

index.js

@@ -66,7 +66,8 @@ app.use((error, req, res, next) => {
 
 var ngrokOptions = {
   proto: 'http',
-  addr: config.port
+  addr: config.port,
+  configPath: '<PATH TO ngrok.yml>'
 };
 
 if (config.ngrokSubdomain) {

src/App.js

@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
 import ConversationsApp from './ConversationsApp';
 import './assets/App.css';
-import 'antd/dist/antd.css';
-
+import 'antd/dist/reset.css';
 
 class App extends Component {
   constructor(props) {

src/Conversation.js

@@ -3,7 +3,8 @@ import './assets/Conversation.css';
 import MessageBubble from './MessageBubble'
 import Dropzone from 'react-dropzone';
 import styles from './assets/Conversation.module.css'
-import {Button, Form, Icon, Input} from "antd";
+import {Button, Form, Input} from "antd";
+import Icon from '@ant-design/icons';
 import ConversationsMessages from "./ConversationsMessages";
 import PropTypes from "prop-types";
 
@@ -122,7 +123,7 @@ class Conversation extends Component {
                         messages={this.state.messages}/>
                   </div>
                   <div>
-                    <Form onSubmit={this.sendMessage}>
+                    <Form>
                       <Input.Group compact={true} style={{
                         width: "100%",
                         display: "flex",
@@ -139,7 +140,7 @@ class Conversation extends Component {
                             onChange={this.onMessageChanged}
                             value={this.state.newMessage}
                         />
-                        <Button icon="enter" htmlType="submit" type={"submit"}/>
+                        <Button onClick={this.sendMessage} icon="enter" htmlType="submit" type="submit"/>
                       </Input.Group>
                     </Form>
                   </div>

src/ConversationsApp.js

@@ -1,5 +1,6 @@
 import React from "react";
-import { Badge, Icon, Layout, Spin, Typography } from "antd";
+import { Badge, Layout, Spin, Typography } from "antd";
+import Icon from '@ant-design/icons';
 import { Client as ConversationsClient } from "@twilio/conversations";
 
 import "./assets/Conversation.css";

src/LoginPage.jsx

@@ -1,62 +1,55 @@
 import React from 'react';
-import { Layout, Button, Input, Icon, Form, Row, Col, Card } from 'antd';
+import { Layout, Button, Input, Form, Row, Col, Card } from 'antd';
+import Icon from '@ant-design/icons';
 import { ReactComponent as Logo } from './assets/twilio-mark-red.svg';
 
 const { Content } = Layout;
 
-export class LoginPage extends React.Component {
-    handleSubmit = e => {
-        e.preventDefault();
+const LoginPage = ({onSubmit}) => {
+    const [form] = Form.useForm();
 
-        const { form, onSubmit } = this.props;
+    const handleSubmit = e => {
+        e.preventDefault();
 
-        form.validateFields((err, values) => {
-            if (!err) {
+        form.validateFields()
+            .then(values => {
                 const { username } = values;
                 onSubmit(username);
-            }
-        });
+            })
+            .catch(err => {
+                // Handle form validation errors
+            });
     };
 
-    render() {
-        const { getFieldDecorator } = this.props.form;
-
-        const usernameFieldDecorator = getFieldDecorator('username', {
-            rules: [{ required: true, message: 'Please input your username!' }],
-        });
-
-        return (
-            <Layout>
-                <Content style={{ height: '100vh' }}>
-                    <Row type="flex" justify="space-around" align="middle" style={{ height: '100%' }}>
-                        <Col span={12} offset={6}>
-                            <Card style={{ maxWidth: '404px' }}>
-                                <Row type="flex" justify="center" align="middle" style={{ marginBottom: '30px' }}>
-                                    <Logo/>
-                                </Row>
-
-                                <Form onSubmit={this.handleSubmit}>
-                                    <Form.Item>
-                                        {usernameFieldDecorator(
-                                            <Input
-                                                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }}/>}
-                                                placeholder="Username"
-                                            />,
-                                        )}
-                                    </Form.Item>
-                                    <Form.Item>
-                                        <Button block type="primary" htmlType="submit">
-                                            Sign in
-                                        </Button>
-                                    </Form.Item>
-                                </Form>
-                            </Card>
-                        </Col>
-                    </Row>
-                </Content>
-            </Layout>
-        )
-    }
-}
-
-export default Form.create({ name: 'login' })(LoginPage);
+    return (
+        <Layout>
+            <Content style={{ height: '100vh' }}>
+                <Row type="flex" justify="space-around" align="middle" style={{ height: '100%' }}>
+                    <Col span={12} offset={6}>
+                        <Card style={{ maxWidth: '404px' }}>
+                            <Row type="flex" justify="center" align="middle" style={{ marginBottom: '30px' }}>
+                                <Logo />
+                            </Row>
+
+                            <Form form={form} onFinish={handleSubmit}>
+                                <Form.Item
+                                    name="username"
+                                    rules={[{ required: true, message: 'Please input your username!' }]}
+                                >
+                                    <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
+                                </Form.Item>
+                                <Form.Item>
+                                    <Button onSubmit={handleSubmit} block type="primary" htmlType="submit">
+                                        Sign in
+                                    </Button>
+                                </Form.Item>
+                            </Form>
+                        </Card>
+                    </Col>
+                </Row>
+            </Content>
+        </Layout>
+    );
+};
+
+export default LoginPage;

src/MessageBubble.js

@@ -1,7 +1,8 @@
 import React, { Component, PureComponent } from "react";
 import styles from "./assets/MessageBubble.module.css";
 import PropTypes from "prop-types";
-import { Spin, Modal, Icon } from "antd";
+import { Spin, Modal } from "antd";
+import Icon from '@ant-design/icons';
 import WhatsappIcon from "./WhatsappIcon";
 import ChatIcon from "./ChatIcon";