Merge pull request redacademy#123 from redacademy/feature-new-filterh…

…ighlite Feature new filterhighlite
soniasophia · Sep 21, 2017 · 3329c9b · 3329c9b
2 parents e03875d + e0e81ef
commit 3329c9b
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 64 deletions.
diff --git a/js/scenes/Event/Event.js b/js/scenes/Event/Event.js
@@ -4,49 +4,61 @@ import {
   Text,
   Image,
   TouchableOpacity,
-  ScrollView
+  ScrollView,
+  StyleSheet
 } from 'react-native';
 import PropTypes from 'prop-types';
 import Moment from 'moment';
-import GradientWrapper from '../../components/GradientWrapper';
+import LinearGradient from 'react-native-linear-gradient';
 import { goToSpeaker } from '../../navigation/navHelpers';
 import OutlinedButton from '../../components/OutlinedButton/';
+import { colors } from '../../config/styles';
 import { styles } from './styles';
 
+const EventItem = ({ item }) => (
+  <TouchableOpacity onPress={() => goToSpeaker({ item })}>
+    <View style={styles.talkBorder}>
+      <View style={styles.talkContainer}>
+        <Image style={styles.image} source={{ uri: item.speaker_id.imageUrl }} />
+        <View style={styles.talkDetails}>
+          <View style={styles.talkTitleContainer}>
+            <Text style={styles.talkTitle}>{item.title}</Text>
+          </View>
+          <Text style={styles.speaker}>{item.speaker_id.fullName}</Text>
+        </View>
+      </View>
+    </View>
+  </TouchableOpacity>
+);
+
 const SingleEvent = ({ eventData, eventDataSet, attendEvent }) => {
   return (
     <View style={styles.container}>
-      <GradientWrapper>
-        <View style={styles.eventContainer}>
-          <Text style={styles.eventTime}>Speakers</Text>
-          <Text style={styles.eventTime}>{Moment.unix(eventData.startTime).format('h:mmA')} to {Moment.unix(eventData.endTime).format('h:mmA')}</Text>
-        </View>
-        <ScrollView>
+      <LinearGradient
+        style={StyleSheet.absoluteFill}
+        colors={[colors.lightGrey, colors.darkGrey]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 0.8 }}
+      >
+        <ScrollView contentContainerStyle={styles.contentContainer}>
+          <View style={styles.eventContainer}>
+            <Text style={styles.eventTime}>Speakers</Text>
+            <Text style={styles.eventTime}>{Moment.unix(eventData.startTime).format('h:mmA')} to {Moment.unix(eventData.endTime).format('h:mmA')}</Text>
+          </View>
           {eventDataSet.map((item) => (
             <View key={item.talk_id}>
-              <TouchableOpacity onPress={() => goToSpeaker({ item })}>
-                <View style={styles.talkBorder} />
-                <View style={styles.talkContainer}>
-                  <Image style={styles.image} source={{ uri: item.speaker_id.imageUrl }} />
-                  <View style={styles.talkDetails}>
-                    <View style={styles.talkTitleContainer}>
-                      <Text style={styles.talkTitle}>{item.title}</Text>
-                    </View>
-                    <Text style={styles.speaker}>{item.speaker_id.fullName}</Text>
-                  </View>
-                </View>
-              </TouchableOpacity>
+              <EventItem item={item} />
             </View>
           ))}
           <OutlinedButton
             text="attend event"
             onPress={() => attendEvent()}
           />
         </ScrollView>
-      </GradientWrapper>
+      </LinearGradient>
     </View>
   );
-}
+};
 
 SingleEvent.propTypes = {
   eventData: PropTypes.shape({

diff --git a/js/scenes/Event/styles.js b/js/scenes/Event/styles.js
@@ -3,7 +3,8 @@ import { colors, typography } from '../../config/styles';
 
 export const styles = StyleSheet.create({
   container: {
-    flex: 1
+    flex: 1,
+    flexDirection: 'column'
   },
 
   eventContainer: {
@@ -24,54 +25,68 @@ export const styles = StyleSheet.create({
     backgroundColor: 'transparent'
   },
 
+  contentContainer: {
+    justifyContent: "flex-start",
+    width: Dimensions.get('window').width,
+  },
+
   talkContainer: {
     flexDirection: 'row',
-    marginBottom: 10,
-    width: '50%'
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    // borderColor: 'red',
+    // borderWidth: 2,
+    right: 17.5,
+    height: 50,
+    width: Dimensions.get('window').width,
   },
 
   talkBorder: {
     backgroundColor: colors.darkGrey,
+    flexDirection: 'row',
     borderTopLeftRadius: 8,
     borderBottomLeftRadius: 8,
-    marginLeft: 30,
-    height: 90,
-    width: '100%'
+    height: 75,
+    alignItems: 'center',
+    width: Dimensions.get('window').width / 1.05,
+    alignSelf: 'flex-end',
+    marginTop: 2.5,
+    marginBottom: 2.5,
+    // borderColor: 'green',
+    // borderWidth: 2
   },
 
   talkDetails: {
     flexDirection: 'column',
-    position: 'absolute',
-    bottom: 25,
-    left: 90,
-    backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
+    // borderColor: 'yellow',
+    // borderWidth: 2,
+    maxWidth: Dimensions.get('window').width / 1.35
   },
 
   talkTitleContainer: {
-    width: '80%'
+    flexWrap: 'wrap'
   },
 
   talkTitle: {
     fontFamily: typography.fontMainBold,
-    fontSize: typography.robotoRegular14,
+    fontSize: typography.robotoRegular12,
     color: colors.white,
     margin: 5
   },
-  
+
   speaker: {
     fontFamily: typography.fontMainRegular,
-    fontSize: typography.robotoRegular14,
+    fontSize: typography.robotoRegular12,
     color: colors.white,
     margin: 5
   },
 
   image: {
-    height: 70,
-    width: 70,
+    height: 60,
+    width: 60,
     borderRadius: 10,
-    margin: 10,
-    position: 'absolute',
-    bottom: 0
+    margin: 10
   }
 
 });
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}>
+      <TouchableOpacity onPress={() => func(title, action)}>
+        <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()
+    this.displayAllEvents('ALL EVENTS')
   }
-  displayAllEvents = () => {
-    this.setState({events: this.props.eventsData.events})
+  displayAllEvents = (title) => {
+    this.setState({ events: this.props.eventsData.events, selected: title })
   }
-  displayPastEvents = () => {
+  displayPastEvents = (title) => {
     const now = getTime();
     const pastEvents = this.props.eventsData.events.filter(event => {
       return event.date < now
     })
-    this.setState({events: pastEvents})
+    this.setState({ events: pastEvents, selected: title })
   }
-  displayUpcomingEvents = () => {
+  displayUpcomingEvents = (title) => {
     const now = getTime();
     const upcomingEvents = this.props.eventsData.events.filter(event => {
       return event.date > now
     })
-    this.setState({events: upcomingEvents})
+    this.setState({events: upcomingEvents, selected: title })
   }
-  displayAttendedEvents = () => {
+  displayAttendedEvents = (title) => {
     const attendedEvents = this.props.eventsData.events.filter(event =>{
       return event.attendees.includes(auth.currentUser.uid)
     })
-    this.setState({events: attendedEvents})
+    this.setState({events: attendedEvents, selected: title })
   }
 
   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%',

diff --git a/js/scenes/Speaker/SpeakerComponents.js b/js/scenes/Speaker/SpeakerComponents.js
@@ -44,9 +44,9 @@ export const WarningModal = ({ modalState, onPress }) => (
 export const SpeakerHeader = ({ speakerData, styles }) => (
   <View style={cStyles.speakerHeader}>
     <Text style={cStyles.quoteContainer}>
-      <Text style={cStyles.headerQuote}>"</Text>
+      <Text style={cStyles.headerQuote}>“</Text>
       <Text style={cStyles.titleText}>{speakerData.title}</Text>
-      <Text style={cStyles.headerQuote}>"</Text>
+      <Text style={cStyles.headerQuote}>”</Text>
     </Text>
   </View>
 )
@@ -93,7 +93,7 @@ export const GoalsList = ({ speakerData }) => (
 
   <ScrollView style={cStyles.goalsContainer}>
     {Object.keys(speakerData.speaker_id.goals).map((key, index) => (
-      speakerData.speaker_id.goals[key].length && <Text key={index} style={cStyles.goalItem}> - {speakerData.speaker_id.goals[key]}</Text>
+      (speakerData.speaker_id.goals[key].length > 0) && <Text key={index} style={cStyles.goalItem}> - {speakerData.speaker_id.goals[key]}</Text>
     )
     )}
   </ScrollView>

diff --git a/js/scenes/Speaker/cStyles.js b/js/scenes/Speaker/cStyles.js
@@ -28,7 +28,7 @@ export const cStyles = StyleSheet.create({
     textAlign: 'center',
     color: colors.black,
     fontFamily: typography.fontMainBold,
-    fontSize: typography.robotoBold24,
+    fontSize: typography.robotoBold20,
     fontWeight: 'bold',
     paddingTop: 10,
     paddingBottom: 10,

diff --git a/js/scenes/Speaker/styles.js b/js/scenes/Speaker/styles.js
@@ -31,7 +31,7 @@ export const styles = StyleSheet.create({
     textAlign: 'center',
     color: colors.black,
     fontFamily: typography.fontMainBold,
-    fontSize: typography.robotoBold24,
+    fontSize: typography.robotoBold20,
     fontWeight: 'bold',
     paddingTop: 10,
     paddingBottom: 10,