import React, { Component } from 'react';
import PropTypes from 'prop-types';

import OneMeeting from './OneMeeting';

export default class MeetingsList extends Component {

  render(){

    return(
      <div class='timeline-body'>
        <div class='container'>

          <OneMeeting
              roomName={'Meeting Hall #1'}
              title={'Small Talk'}
              host={'Major'}
              timeStart={'9:00'}
              timeEnd={'10:00'}
              status={true}
              toggleMeetingStatus={this.props.toggleMeetingStatus}
              />

          <div class='date text-center'>
            <p>31 February</p>
          </div>

          <OneMeeting
              roomName={'Room #5'}
              title={'True meeting'}
              host={'Name Surname'}
              timeStart={'19:00'}
              timeEnd={'23:00'}
              status={false}
              toggleMeetingStatus={this.props.toggleMeetingStatus}
              />

        </div>
      </div>
    );
  }
}

MeetingsList.propTypes = {
  toggleMeetingStatus: PropTypes.func
};

@@ -70,16 +70,72 @@
 -types';
+%0Aimport axios from 'axios';%0Aimport moment from 'moment';
 %0A%0Aimport
@@ -226,166 +226,742 @@
 t %7B%0A
-%0A  render()%7B%0A%0A    return(%0A      %3Cdiv class='timeline-body'%3E%0A        %3Cdiv class='container'%3E%0A%0A          %3COneMeeting%0A              roomName=%7B'Meeting Hall #1'%7D%0A
+  state = %7B%0A    _roomId: '5908587aabe7f32113cc6b88',%0A    meetings: %5B%5D%0A  %7D%0A%0A  componentDidMount() %7B%0A    axios.get(%60http://localhost:8008/api/meetings/room/$%7Bthis.state._roomId%7D%60)%0A      .then(res =%3E this.setState(%7B meetings: res.data %7D));%0A  %7D%0A%0A  render()%7B%0A    const attending = true;%0A%0A    return(%0A      %3Cdiv class='timeline-body'%3E%0A        %3Cdiv class='container'%3E%0A%0A          %7B%0A            this.state.meetings.map((el, i) =%3E %7B%0A              return %3Cdiv key=%7B%60section-$%7Bi%7D%60%7D%3E%0A                %3Cdiv class='date text-center'%3E%0A                  %3Cp%3E%7Bmoment(el.startTime).format('MMMM Do')%7D%3C/p%3E%0A                %3C/div%3E%0A                %3COneMeeting%0A                      key=%7B%60meeting-$%7Bi%7D%60%7D%0A                      roomName=%7Bel.roomId.name%7D%0A        
     
@@ -981,20 +981,16 @@
 le=%7B
-'Small Talk'
+el.title
 %7D%0A  
@@ -1005,56 +1005,116 @@
     
-host=%7B'Major'%7D%0A              timeStart=%7B'9:00'%7D%0A
+        host=%7Bel.hostId.name%7D%0A                      timeStart=%7Bmoment(el.startTime).format('HH:mm')%7D%0A       
     
@@ -1115,32 +1115,33 @@
                 
+ 
 timeEnd=%7B'10:00'
@@ -1137,17 +1137,46 @@
 nd=%7B
-'10:00'%7D%0A
+moment(el.endTime).format('HH:mm')%7D%0A  
     
@@ -1185,24 +1185,30 @@
         
+      
 status=%7B
 true%7D%0A  
@@ -1203,14 +1203,27 @@
 us=%7B
-true%7D%0A
+attending%7D%0A        
     
@@ -1291,36 +1291,45 @@
 %7D%0A              
+        
 /%3E%0A
-%0A
+  
           %3Cdiv c
@@ -1327,68 +1327,29 @@
    %3C
+/
 div
- class='date text-center'%3E%0A            %3Cp%3E31 February%3C/p%3E
+%3E;%0A            %7D)
 %0A   
@@ -1355,22 +1355,19 @@
         
-%3C/div%3E
+%7D%0A%0A
 %0A%0A      

update MeetingsList component