Advertisement
Guest User

Untitled

a guest
Mar 3rd, 2019
537
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState, useEffect } from "react";
  2. import Chat from "twilio-chat";
  3. import { Chat as ChatUI } from "@progress/kendo-react-conversational-ui";
  4.  
  5. const ChatApp = props => {
  6.   const [error, setError] = useState(null);
  7.   const [isLoading, setIsLoading] = useState(true);
  8.   const [messages, setMessages] = useState([]);
  9.   const [client, setClient] = useState(null);
  10.   const [channel, setChannel] = useState(null);
  11.  
  12.   const user = {
  13.     id: props.username,
  14.     name: props.username
  15.   };
  16.  
  17.   const handleError = error => setError("Could not load chat.");
  18.  
  19.   const twilioMessageToKendoMessage = message => ({
  20.     text: message.body,
  21.     author: { id: message.author, name: message.author },
  22.     timestamp: message.timestamp
  23.   });
  24.  
  25.   const messagesLoaded = messagePage =>
  26.     setMessages(messagePage.items.map(twilioMessageToKendoMessage));
  27.  
  28.   const messageAdded = message =>
  29.     setMessages([...messages, twilioMessageToKendoMessage(message)]);
  30.  
  31.   const sendMessage = event => channel.sendMessage(event.message.text);
  32.  
  33.   const setupChatClient = _client => {
  34.     setClient(_client);
  35.   };
  36.  
  37.   useEffect(() => {
  38.     if (channel)
  39.       channel
  40.         .join()
  41.         .catch(() => {})
  42.         .then(() => {
  43.           setIsLoading(false);
  44.           channel.getMessages().then(messagesLoaded);
  45.           channel.on("messageAdded", messageAdded);
  46.         })
  47.         .catch(handleError);
  48.   }, [channel]);
  49.  
  50.   useEffect(() => {
  51.     if (client) {
  52.       // To effect
  53.       client
  54.         .getChannelByUniqueName("general")
  55.         .then(_channel => _channel)
  56.         .catch(error => {
  57.           if (error.body.code === 50300) {
  58.             return client.createChannel({ uniqueName: "general" });
  59.           } else {
  60.             handleError(error);
  61.           }
  62.         })
  63.         .then(_channel => {
  64.           setChannel(_channel);
  65.         });
  66.     }
  67.   }, [client]);
  68.  
  69.   useEffect(() => {
  70.     fetch("/chat/token", {
  71.       headers: { "Content-Type": "application/x-www-form-urlencoded" },
  72.       method: "POST",
  73.       body: `identity=${encodeURIComponent(props.username)}`
  74.     })
  75.       .then(res => res.json())
  76.       .then(data => Chat.create(data.token))
  77.       .then(setupChatClient)
  78.       .catch(handleError);
  79.     return () => {
  80.       client.shutdown();
  81.     };
  82.   }, []);
  83.  
  84.   if (error) {
  85.     return <p>{error}</p>;
  86.   } else if (isLoading) {
  87.     return <p>Loading chat...</p>;
  88.   }
  89.   return (
  90.     <ChatUI
  91.       user={user}
  92.       messages={messages}
  93.       onMessageSend={sendMessage}
  94.       width={500}
  95.     />
  96.   );
  97. };
  98.  
  99. export default ChatApp;
Advertisement
RAW Paste Data Copied
Advertisement