-More!

app/components/AppHeader/HeaderTitle/EventTitle/EventTitle.container.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+
+import { getActiveEvent, getDefaultEvent } from '../selectors/events.js';
+
+import EventTitle from './EventTitle.js';
+
+const matchStateToProps = (state) => {
+  const event = hasActiveEvent(state) ? getActiveEvent(state) : getDefaultEvent(state);
+
+  return {
+    date: event.get('date'),
+    end: event.get('end'),
+    name: event.get('name'),
+    start: event.get('start'),
+  };
+};
+
+export default connect(matchStateToProps, null)(EventTitle);

app/components/AppHeader/HeaderTitle/EventTitle/EventTitle.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+    Text,
+    TouchableOpacity,
+    View,
+} from 'react-native';
+
+import styles from './EventTitle.styles.js';
+
+export default function EventTitle({
+  action,
+  date,
+  end,
+  name,
+  start,
+}) {
+   const _generateEventTitle = () => (
+    <View style={styles.eventInfo}>
+      <Text style={styles.eventName}>{name}</Text>
+      <Text style={styles.eventDate}>{`${date} | ${start} - ${end}`}</Text>
+    </View>
+  );
+
+  if (action) {
+    return <TouchableOpacity onPress={action}>{_generateEventTitle()}</TouchableOpacity>;
+  }
+
+  return _generateEventTitle();
+}
+
+EventTitle.propTypes = {
+  action: PropTypes.func,
+  date: PropTypes.string.isRequired,
+  end: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  start: PropTypes.string.isRequired,
+};
+
+EventTitle.defaultProps = {
+  action: null,
+};

app/components/AppHeader/HeaderTitle/EventTitle/EventTitle.styles.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+
+export default const styles = StyleSheet.create({
+  eventInfo: {
+    flexDirection: 'row',
+  },
+  eventName: {
+    flex: 1,
+    fontWeight: 'bold',
+  },
+  eventDate: {
+    flex: 1,
+  },
+});
+

app/components/AppHeader/HeaderTitle/HeaderTitle.container.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+
+import { hasActiveEvent } from '../selectors/activeEvent.js';
+import { hasMultipleEvents } from '../selectors/events.js';
+
+import HeaderTitle from './HeaderTitle.js';
+
+const matchStateToProps = (state, ownProps) => {
+  const { routeName } = ownProps.navigation.state;
+
+  return {
+    activeRoute: routeName,
+    hasActiveEvent: hasActiveEvent(state),
+    hasMultipleEvents: hasMultipleEvents(state),
+  };
+};
+
+export default connect(matchStateToProps, null)(HeaderTitle);

app/components/AppHeader/HeaderTitle/HeaderTitle.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+    Text,
+    TouchableOpacity,
+    View,
+} from 'react-native';
+
+import EventTitle from './EventTitle/EventTitle.container.js';
+
+import styles from './TitleBar.styles.js';
+
+export default function HeaderTitle({
+  activeRoute,
+  hasActiveEvent,
+  hasMultipleEvents,
+  navigation,
+}) {
+
+  const _goBack = () => {
+    if (hasActiveEvent) {
+      navigation.goBack();
+      return false;
+    }
+
+    console.log('nowhere to go...');
+  };
+
+  const _showEvents = () => {
+    navigation.navigate('Events');
+    return false;
+  };
+
+
+  if (activeRoute === 'Events') {
+    return (
+      <TouchableOpacity onPress={_goBack}>
+        <Text style={styles.screenHeader}>Profile</Text>
+      </TouchableOpacity>
+    );
+  }
+
+  if (activeRoute === 'Profile') {
+    return <Text style={styles.screenHeader}>Profile</Text>;
+  }
+
+  return <EventTitle action={hasMultipleEvents ? _showEvents : null} />
+}
+
+HeaderTitle.propTypes = {
+  activeRoute: PropTypes.string.isRequired,
+  hasActiveEvent: PropTypes.bool,
+  hasMultipleEvents: PropTypes.bool.isRequired,
+  navigation: PropTypes.func.isRequired,
+};
+
+HeaderTitle.defaultProps = {
+  hasActiveEvent: false,
+};

app/components/AppHeader/HeaderTitle/HeaderTitle.styles.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+
+export default const styles = StyleSheet.create({
+  filterBar: {
+    backgroundColor: '#0F0',
+    flexDirection: 'row',
+  },
+  filter: {
+    flex: 2,
+  },
+  view: {
+    flex: 2,
+  },
+});
+