improve conversation view
Change-Id: I63189d0b61d45e659ac7618a977282f7b4500753
diff --git a/client/src/components/NewContactForm.js b/client/src/components/NewContactForm.js
index ef590c5..c98c9b4 100644
--- a/client/src/components/NewContactForm.js
+++ b/client/src/components/NewContactForm.js
@@ -1,17 +1,51 @@
import React from 'react'
+import SearchIcon from '@material-ui/icons/Search';
+import InputBase from '@material-ui/core/InputBase';
+import InputAdornment from '@material-ui/core/InputAdornment';
class NewContactForm extends React.Component {
+ constructor(props) {
+ super(props)
+ this.state = {value: ''}
+ this.controller = new AbortController()
+ this.handleChange = this.handleChange.bind(this)
+ this.handleSubmit = this.handleSubmit.bind(this)
+ }
+
+ componentDidMount() {
+ this.controller = new AbortController()
+ }
+
+ componentWillUnmount() {
+ this.controller.abort()
+ this.req = undefined
+ }
+
+ handleChange(event) {
+ this.setState({value: event.target.value})
+ this.props.onChange(event.target.value)
+ }
+
+ handleSubmit(event) {
+ event.preventDefault()
+ if (this.props.onSubmit)
+ this.props.onSubmit(this.state.value)
+ }
+
render() {
return (
- <div className="new-room-form">
- <form>
- <input
- type="text"
- placeholder="Ajouter un contact"
- required />
- <button id="create-room-btn" type="submit">+</button>
- </form>
- </div>
+ <form className="main-search" onSubmit={this.handleSubmit} noValidate autoComplete="off">
+ <InputBase
+ className="main-search-input"
+ type="search"
+ placeholder="Ajouter un contact"
+ onChange={this.handleChange}
+ startAdornment={
+ <InputAdornment position="start">
+ <SearchIcon />
+ </InputAdornment>
+ } />
+ </form>
)
}
}