Merge pull request redacademy#120 from redacademy/feature-singleevent

Conditionally render social media icons
soniasophia · Sep 20, 2017 · a5e98f6 · a5e98f6
2 parents 5f3f9fa + a18d0e4
commit a5e98f6
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 20 deletions.
diff --git a/js/scenes/Event/Event.js b/js/scenes/Event/Event.js
@@ -4,26 +4,19 @@ import {
   Text,
   Image,
   TouchableOpacity,
-  ScrollView,
-  Dimensions
+  ScrollView
 } from 'react-native';
 import PropTypes from 'prop-types';
 import Moment from 'moment';
-import LinearGradient from 'react-native-linear-gradient';
+import GradientWrapper from '../../components/GradientWrapper';
 import { goToSpeaker } from '../../navigation/navHelpers';
 import OutlinedButton from '../../components/OutlinedButton/';
 import { styles } from './styles';
-import { colors } from '../../config/styles';
 
 const SingleEvent = ({ eventData, eventDataSet, attendEvent }) => {
   return (
     <View style={styles.container}>
-      <LinearGradient
-        style={{ height: Dimensions.get('window').height }}
-        colors={[colors.lightGrey, colors.darkGrey]}
-        start={{ x: 0, y: 0 }}
-        end={{ x: 0, y: 0.8 }}
-      >
+      <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>
@@ -50,7 +43,7 @@ const SingleEvent = ({ eventData, eventDataSet, attendEvent }) => {
             onPress={() => attendEvent()}
           />
         </ScrollView>
-      </LinearGradient>
+      </GradientWrapper>
     </View>
   );
 }

diff --git a/js/scenes/Login/styles.js b/js/scenes/Login/styles.js
@@ -34,7 +34,7 @@ export const styles = StyleSheet.create({
     fontFamily: typography.titleHeading,
     fontSize: typography.norwester27,
     marginTop: 35,
-    width: '60%',
+    width: '50%',
     textAlign: 'center',
   },
   subTitle: {

diff --git a/js/scenes/Speaker/Speaker.js b/js/scenes/Speaker/Speaker.js
@@ -14,7 +14,6 @@ import {
   WarningModal,
   EventModal
 } from './SpeakerComponents';
-// import SpeakerAvatar from '../../components/SpeakerAvatar';
 
 const Speaker = ({ 
   speakerData, 
@@ -35,7 +34,7 @@ const Speaker = ({
         <View style={styles.speakerContainer}>
           <Image
             style={styles.speakerImage}
-            source={require('../../assets/images/derek-van-dam-profile.jpeg')}
+            source={{ uri: speakerData.speaker_id.imageUrl}}
           />
           <SpeakerContent speakerData={speakerData} />
         </View>

diff --git a/js/scenes/Speaker/SpeakerComponents.js b/js/scenes/Speaker/SpeakerComponents.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text, ScrollView } from 'react-native'
+import { View, Text, ScrollView, Linking } from 'react-native'
 import Modal from 'react-native-modal';
 import Icon from 'react-native-vector-icons/Ionicons';
 import { cStyles } from './cStyles';
@@ -57,10 +57,34 @@ export const SpeakerContent = ({ speakerData, styles }) => (
     <Text style={cStyles.speakerName}>{speakerData.speaker_id.fullName.toUpperCase()}</Text>
     <Text style={cStyles.speakerBio}>{speakerData.speaker_id.bio}</Text>
     <View style={cStyles.socialMedia}>
-      <Icon style={cStyles.speakerIcons} name='ios-mail' />
-      <Icon style={cStyles.speakerIcons} name='logo-linkedin' />
-      <Icon style={cStyles.speakerIcons} name='logo-facebook' />
-      <Icon style={cStyles.speakerIcons} name='logo-twitter' />
+      {(speakerData.speaker_id.email) &&
+      <Icon 
+        onPress={() => Linking.openURL(`mailto:${speakerData.speaker_id.email}`)}
+        style={cStyles.speakerIcons} 
+        name='ios-mail' 
+      />
+      }
+      {(speakerData.speaker_id.socialMediaUrls.linkedIn.length > 0) && 
+      <Icon 
+        onPress={() => Linking.openURL(`${speakerData.speaker_id.socialMediaUrls.linkedIn}`)} 
+        style={cStyles.speakerIcons} 
+        name='logo-linkedin' 
+      />
+      }
+      {(speakerData.speaker_id.socialMediaUrls.facebook.length > 0) && 
+      <Icon 
+        onPress={() => Linking.openURL(`${speakerData.speaker_id.socialMediaUrls.facebook}`)}
+        style={cStyles.speakerIcons} 
+        name='logo-facebook' 
+      />
+      }
+      {(speakerData.speaker_id.socialMediaUrls.twitter.length > 0) &&
+      <Icon 
+        onPress={() => Linking.openURL(`${speakerData.speaker_id.socialMediaUrls.twitter}`)}
+        style={cStyles.speakerIcons} 
+        name='logo-twitter' 
+      />
+      }
     </View>
   </ScrollView>
 )

diff --git a/js/scenes/Speaker/cStyles.js b/js/scenes/Speaker/cStyles.js
@@ -40,7 +40,7 @@ export const cStyles = StyleSheet.create({
   socialMedia: {
     flex: 1,
     flexDirection: 'row',
-    justifyContent: 'space-around',
+    justifyContent: 'space-between',
     paddingRight: 50,
   },
   speakerName: {