showing location of talks

Author: Jhonny Michel

src/js/schedule-app/Store.js

@@ -143,13 +143,23 @@ class Store extends React.Component {
   }
 
   filterEvents(acc, { date, events }) {
-    const rooms = ['Sala Tapioca', 'Sala Rapadura', 'Sala Macaxeira', 'Sala Jerimum'];
+    const rooms = ['Sala Tapioca', 'Sala Rapadura', 'Sala Macaxeira', 'Sala Jerimum']
+      .reverse();
     const filteredEvents = events.filter(event => (
       this.state.typeFilter.includes(event.details.eventType)
         && (!event.details.category || this.state.categoryFilter.includes(event.details.category))
         && (!this.state.searchFilter || this.checkSearchMatch(event))
-    )).sort((a, b) => {
-      const room = indexOf()
+    ));
+
+    filteredEvents.sort((a, b) => {
+      const roomA = rooms.indexOf(a.location);
+      const roomB = rooms.indexOf(b.location);
+
+      if (roomA === roomB) {
+        return 0;
+      }
+
+      return roomA > roomB ? 1 : -1;
     })
     if (filteredEvents.length)
       return [ ...acc, { date, events: filteredEvents } ];

src/js/schedule-app/components/Events.js

@@ -22,8 +22,8 @@ const EventTypes = (event) => ({
       <h4 className="schedule_office">
         {event.details.title}
       </h4>
-      <h4 className="schedule_office">
-        {event.location}
+      <h4 className="schedule_location">
+        <i className="material-icons">location_on</i>{event.location}
       </h4>
     </React.Fragment>
   ),
@@ -41,8 +41,8 @@ const EventTypes = (event) => ({
       <h4 className="schedule_office">
         {event.details.title}
       </h4>
-      <h4 className="schedule_office">
-        {event.location}
+      <h4 className="schedule_location">
+        <i className="material-icons">location_on</i>{event.location}
       </h4>
     </React.Fragment>
   ),
@@ -62,8 +62,8 @@ const EventTypes = (event) => ({
       <h4 className="schedule_office">
         {event.details.title}
       </h4>
-      <h4 className="schedule_office">
-        {event.location}
+      <h4 className="schedule_location">
+        <i className="material-icons">location_on</i>{event.location}
       </h4>
     </React.Fragment>
   ),
@@ -75,8 +75,8 @@ const EventTypes = (event) => ({
       <h3 className="schedule_speaker">
         {event.details.description}
       </h3>
-      <h4 className="schedule_office">
-        {event.location}
+      <h4 className="schedule_location">
+        <i className="material-icons">location_on</i>{event.location}
       </h4>
     </React.Fragment>
   ),

src/scss/intern-pages/_schedule.scss

@@ -326,6 +326,16 @@
     color: rgba($background-light, 0.6);
   }
 
+  .schedule_location {
+    @extend .schedule_office;
+    @extend .d-flex;
+    @extend .align-items-center;
+    .material-icons {
+      font-size: inherit;
+      margin-right: 5px;
+    }
+  }
+
   .schedule_speaker {
     font-size: 14px;
     font-weight: 400;