100 lines
2.2 KiB
JavaScript
Executable File
100 lines
2.2 KiB
JavaScript
Executable File
import React, { Component } from 'react';
|
|
import logo from './logo.svg';
|
|
import './App.css';
|
|
|
|
import ChatBubble from './react-chat-bubble/src/components/ChatBubble';
|
|
|
|
import axios from 'axios';
|
|
|
|
|
|
|
|
class App extends Component {
|
|
|
|
|
|
state = {
|
|
messages: [
|
|
{
|
|
type: 1,
|
|
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Default_profile_picture_%28male%29_on_Facebook.jpg/240px-Default_profile_picture_%28male%29_on_Facebook.jpg",
|
|
text: "Hello! Type something!"
|
|
}
|
|
],
|
|
disabled : false
|
|
};
|
|
|
|
handleNewMessage = async (text) =>
|
|
{
|
|
|
|
console.log("!!! handleNewMessage");
|
|
|
|
await this.setState({
|
|
messages: this.state.messages.concat([{
|
|
text: text,
|
|
type: 0,
|
|
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Default_profile_picture_%28male%29_on_Facebook.jpg/240px-Default_profile_picture_%28male%29_on_Facebook.jpg"
|
|
}])
|
|
|
|
});
|
|
|
|
try {
|
|
|
|
await this.setState({
|
|
messages: this.state.messages.concat([{
|
|
text : "Wait, I am processing...",
|
|
type: 1,
|
|
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Default_profile_picture_%28male%29_on_Facebook.jpg/240px-Default_profile_picture_%28male%29_on_Facebook.jpg"
|
|
}]),
|
|
disabled: true
|
|
});
|
|
|
|
|
|
|
|
let response = await axios.get('http://localhost:3001', {
|
|
params: {
|
|
phrase: text
|
|
},
|
|
responseType: 'text'
|
|
});
|
|
|
|
|
|
console.log("!!! RESPONSE");
|
|
console.log(response);
|
|
console.log(response.data);
|
|
|
|
await this.setState({
|
|
messages: this.state.messages.concat([{
|
|
text : response.data,
|
|
type: 1,
|
|
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Default_profile_picture_%28male%29_on_Facebook.jpg/240px-Default_profile_picture_%28male%29_on_Facebook.jpg"
|
|
}]),
|
|
disabled: false
|
|
|
|
});
|
|
|
|
|
|
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillMount(){
|
|
document.body.style.height = "100%";
|
|
}
|
|
|
|
componentWillUnmount(){
|
|
//document.body.style.backgroundColor = null;
|
|
}
|
|
|
|
|
|
render() {
|
|
return <ChatBubble messages={this.state.messages}
|
|
onNewMessage={this.handleNewMessage} disabled={this.state.disabled}/>
|
|
}
|
|
}
|
|
export default App;
|