messages

const messages = (props: MessagesProps & RouteComponentProps<MessagesProps>) => {
  return (
    <Layout appName={props.appName || 'TOTO'}>
      <div className="messagesContainer_title">
        <h2># {props.match.params.channelId}</h2>
        </div>
        <div className="messagesContainer_messages">
          {Array(20).fill(1).map((_, index) => <DummyMessage key={index}/>)}          
      </div>
      <div className="messagesContainer_footer">
        <form>
          <div className="inputWrapper">
            <input type="text" placeholder="Ask a question on #Channel"/>
          </div>
        </form>
        <div className="messagesContainer_notifBar" />
      </div>
    </Layout>
  )   
}

const DummyMessage = () => {
  return (
    <div className="message">
    <div className="message_gutter">
      <div className="user_icon"> ^_^ </div>              
    </div>
    <div className="message_content">
      <div className="message_content_header">
        Toto
      </div>
      <div className="message_content_body">
        <div className="message_content_question"> 
          <div className="question_text">
            {loremIpsum({count: 30, units: 'words'})} ?
          </div>
        </div>
        <div className="message_content_answers">
          <DummyAnswer user="Coco" icon="^_^'"/>
          <DummyAnswer user="Tata" icon="<_<"/>
        </div>
      </div>
    </div>    
    <div className="message_buttons">
      <span className="message_buttons_points">4</span>
      <span className="message_buttons_addPoints">+1</span>
      <span className="question_buttons_answer">A</span>
    </div>
  </div>  
  )
}

const DummyAnswer = (props: {user: string, icon: string}) => {
  return (
    <div className="answer">
      <div className="answer_gutter">
        <div className="user_icon"> {props.icon} </div>
      </div>
      <div className="answer_content">
        <div className="answer_header">{props.user}</div>
        <div className="answer_text">
          {loremIpsum({count: 30, units: 'words'})}
        </div>
      </div>
      <div className="message_buttons">
        <span className="message_buttons_points">3</span>
        <span className="message_buttons_addPoints">+1</span>
      </div>
    </div>    
  )
}