added filter button highlighting for selected on events page

soniasophia · Sep 21, 2017 · 6e0c780 · 6e0c780
1 parent c93f057
commit 6e0c780
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 12 deletions.
diff --git a/js/scenes/Events/Events.js b/js/scenes/Events/Events.js
@@ -13,8 +13,16 @@ import { goToEvent } from '../../navigation/navHelpers';
 import { styles } from './styles';
 import { colors } from '../../config/styles';
 
-const Events = ({ eventsData, eventDate, eventTime, navigatorUID, displayAllEvents, displayPastEvents, displayUpcomingEvents, displayAttendedEvents }) => {
-
+const Events = ({ 
+  eventsData,
+  selected, 
+  eventDate, 
+  eventTime, 
+  navigatorUID, 
+  displayAllEvents, 
+  displayPastEvents, 
+  displayUpcomingEvents, 
+  displayAttendedEvents }) => {
   const filterData = [
     //TODO: Add filter methods
     { title: 'PAST', func: displayPastEvents, action: null },
@@ -23,11 +31,11 @@ const Events = ({ eventsData, eventDate, eventTime, navigatorUID, displayAllEven
     { title: 'ALL EVENTS', func: displayAllEvents, action: null }
   ];
 
-  const FilterButton = ({ data }) => {
+  const FilterButton = ({ data, selected }) => {
     const { title, func, action } = data;
     return (
       <TouchableOpacity onPress={() => func(action)}>
-        <View style={styles.eventsFilter}>
+        <View style={(selected === title) ? styles.filterSelected : styles.eventsFilter}>
           <Text style={styles.filterText}>{title}</Text>
         </View>
       </TouchableOpacity>
@@ -64,7 +72,11 @@ const Events = ({ eventsData, eventDate, eventTime, navigatorUID, displayAllEven
       <View style={styles.eventsHeaderWrapper}>
         {
           filterData.map(data => (
-            <FilterButton data={data} key={data.title} />
+            <FilterButton 
+              data={data} 
+              key={data.title}
+              selected={selected} 
+            />
           ))
         }
       </View>

diff --git a/js/scenes/Events/EventsContainer.js b/js/scenes/Events/EventsContainer.js
@@ -15,31 +15,32 @@ class EventsContainer extends Component {
       title: 'EVENTS',
     }  
   }
+
   componentWillMount() {
     this.displayAllEvents()
   }
   displayAllEvents = () => {
-    this.setState({events: this.props.eventsData.events})
+    this.setState({ events: this.props.eventsData.events, selected: 'ALL EVENTS' })
   }
   displayPastEvents = () => {
     const now = getTime();
     const pastEvents = this.props.eventsData.events.filter(event => {
       return event.date < now
     })
-    this.setState({events: pastEvents})
+    this.setState({ events: pastEvents, selected: 'PAST' })
   }
   displayUpcomingEvents = () => {
     const now = getTime();
     const upcomingEvents = this.props.eventsData.events.filter(event => {
       return event.date > now
     })
-    this.setState({events: upcomingEvents})
+    this.setState({events: upcomingEvents, selected: 'UPCOMING' })
   }
   displayAttendedEvents = () => {
     const attendedEvents = this.props.eventsData.events.filter(event =>{
       return event.attendees.includes(auth.currentUser.uid)
     })
-    this.setState({events: attendedEvents})
+    this.setState({events: attendedEvents, selected: 'ATTENDED' })
   }
 
   eventDate(date) {
@@ -61,10 +62,11 @@ class EventsContainer extends Component {
   }
 
   render() {
-    if(this.props.eventsData.loading) return (<Loader />)
+    if(this.props.eventsData.loading) return (<Loader />);
     return (
       <Events
         eventsData={this.withAttendeeData(this.state.events, this.props.userData.users)}
+        selected={this.state.selected}
         eventDate={this.eventDate}
         eventTime={this.eventTime}
         navigatorUID={'events'}

diff --git a/js/scenes/Events/styles.js b/js/scenes/Events/styles.js
@@ -15,11 +15,19 @@ export const styles = StyleSheet.create({
     borderRadius: 10,
     height: 25,
     width: 60,
-    backgroundColor: 'white'
+    backgroundColor: colors.white
+  },
+  filterSelected: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 10,
+    height: 25,
+    width: 60,
+    backgroundColor: colors.taxiYellow
   },
   filterText: {
     fontFamily: typography.titleHeading,
-    fontSize: typography.norwester12
+    fontSize: 11
   },
   eventsListWrapper: {
     height: '100%',