import React, { Component } from 'react';
import Card from '../card/NewCard';

class Schedule extends Component {
  render() {
    return (
      <main className="mdl-layout__content">
        {this.props.schedules.map((schedule, index) => {
          return (
            <section key={index}
                     id={`scroll-tab-${index}`}
                     className={`mdl-layout__tab-panel ${(index === 0 ? 'is-active' : '')}`}>
              <div className="page-content">
                {schedule.areas.map((area, index) => {
                  return <Card key={index} schedule={schedule} area={area} onFavorite={this.props.favoriteHandler} />
                })}
              </div>
            </section>
          )
        })}
      </main>
    )
  }
}

export default Schedule;

@@ -70,16 +70,45 @@
 ewCard';
+%0Aimport moment from 'moment';
 %0A%0Aclass 
@@ -142,75 +142,2330 @@
 %7B%0A  
-render() %7B%0A    return (%0A      %3Cmain className=%22mdl-layout__content%22
+componentWillMount() %7B%0A    // shame on me. :(%0A    this.favorites = %5B%5D;%0A    this.props.schedules.map((schedule) =%3E %7B%0A      schedule.areas.map((area) =%3E %7B%0A        area.items.map((item) =%3E %7B%0A          if (item.favorite) %7B%0A            this.favorites.push(item);%0A          %7D%0A        %7D);%0A      %7D);%0A    %7D);%0A  %7D%0A%0A  render() %7B%0A    return (%0A      %3Cmain className=%22mdl-layout__content%22%3E%0A        %3Csection className=%7B%60mdl-layout__tab-panel $%7B(this.isFavoriteTab === true ? 'is-active' : '')%7D%60%7D id=%22scroll-tab-favorites%22%3E%0A          %3Cdiv className=%22page-content%22%3E%0A            %3Cdiv className=%22mdl-card mdl-shadow--2dp%22%3E%0A              %3Cdiv className=%22mdl-card__title%22%3E%0A                %3Ch2 className=%22mdl-card__title-text%22%3EAlertas%3C/h2%3E%0A              %3C/div%3E%0A%0A              %3Cdiv className=%22mdl-card__supporting-text%22%3E%0A                %3Cul className=%22demo-list-three mdl-list%22%3E%0A                  %7Bthis.favorites.map((item, index) =%3E %7B%0A                    return (%0A                      %3Cli key=%7B%60card-$%7Bitem.identifier%7D%60%7D className=%7B%60mdl-list__item mdl-list__item--three-line $%7B(item.image ? 'mdl-list__item--with-image' : '')%7D%60%7D%3E%0A                        %3Cspan className=%22mdl-list__item-primary-content%22%3E%0A                          %7Bitem.image &&%0A                            %3Ci className=%22material-icons mdl-list__item-avatar%22%3Eperson%3C/i%3E%0A                          %7D%0A%0A                          %3Cspan%3E%7Bmoment(item.time, 'hh:mm').format('HH:mm')%7D%3C/span%3E%0A                          %3Cspan className=%22mdl-list__item-text-body%22%3E%0A                            %7Bitem.name%7D%0A                          %3C/span%3E%0A                        %3C/span%3E%0A                        %3Cspan className=%22mdl-list__item-secondary-action mdl-list__item-secondary-content%22%3E%0A                          %3Cspan className=%22mdl-list__item-secondary-info%22%3EAdicionar%3C/span%3E%0A                          %3Clabel className=%22mdl-switch mdl-js-switch mdl-js-ripple-effect%22 htmlFor=%7Bitem.identifier%7D%3E%0A                            %3Cinput type=%22checkbox%22 id=%7Bitem.identifier%7D className=%22mdl-switch__input%22 checked=%7Bitem.favorite%7D onChange=%7Bthis.props.favoriteHandler%7D/%3E%0A                          %3C/label%3E%0A                        %3C/span%3E%0A                      %3C/li%3E%0A                    )%0A                  %7D)%7D%0A                %3C/ul%3E%0A              %3C/div%3E%0A            %3C/div%3E%0A          %3C/div%3E%0A        %3C/section
 %3E%0A  

Add alerts page