@@ -7,15 +7,6 @@ import { MAX_MESSAGE_TEXT_LENGTH } from "../../config";
77import "./styles.css" ;
88
99export const useText = initialText => {
10- // TODO: extract useState logic out of MessageForm
11-
12- return {
13- text,
14- handleChange
15- } ;
16- } ;
17-
18- export const MessageForm = ( { user} ) => {
1910const [ text , setText ] = React . useState ( "" ) ;
2011
2112const handleChange = event => {
@@ -24,20 +15,26 @@ export const MessageForm = ({ user }) => {
2415setText ( updatedText ) ;
2516} ;
2617
18+ return {
19+ text,
20+ handleChange
21+ } ;
22+ } ;
23+
24+ export const MessageForm = ( { user} ) => {
25+ const { text, handleChange} = useText ( "" ) ;
2726return (
2827< Card className = "MessageForm" profile_image = { user . profile_image } >
2928< Form >
30- < Form . Group >
31- < Form . Control
32- className = "MessageForm_TextArea"
33- aria-label = "message-form"
34- as = "textarea"
35- rows = "3"
36- placeholder = "What's happening?"
37- value = { text }
38- onChange = { handleChange }
39- />
40- </ Form . Group >
29+ < Form . Group
30+ className = "MessageForm_TextArea"
31+ aria-label = "message-form"
32+ as = "textarea"
33+ rows = "3"
34+ placeholder = "What's happening?"
35+ value = { text }
36+ onChange = { handleChange }
37+ > </ Form . Group >
4138< div className = "MessageForm_Options" >
4239< span className = "MessageForm_TextCount" title = "text-count" >
4340{ text . length } /{ MAX_MESSAGE_TEXT_LENGTH }