aretherecookies-mobile/js/pages/List.js

// @flow
import React, { Component } from 'react';
import Food from './Food';
import Places from './Places';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import theme from '../ui-theme.js';
import { type RoutingContextFlowTypes, routingContextPropTypes } from '../routes';

const tabs = ['food', 'places'];

const getTabIndex = (tabName: string) => tabs.indexOf(tabName);

const getTabName = (index: number) => tabs[index];

type TabView = {
	goToPage: (page: number) => void,
};

type Props = {
	match: {
		params: {
			type?: string,
		},
	},
};

class List extends Component {
	static contextTypes = routingContextPropTypes;

	props: Props;

	context: RoutingContextFlowTypes;

	tabView: TabView;

	// TODO: find a more routing friendly tab component (or build one)
	// sync route changes into tab state (yuck)
	componentWillReceiveProps(newProps: Props) {
		const { match: { params: { type: newType } } } = newProps;
		const { match: { params: { type } } } = this.props;
		if (!!this.tabView && !!newType && type !== newType) {
			const page = getTabIndex(newType);
			this.tabView.goToPage(page);
		}
	}

	// sync tab state into route state (yuck)
	updateTabRoute = ({ i }: { i: number }) => {
		const type = getTabName(i);
		this.context.router.history.replace(`/list/${type}`);
	};

	setTabViewRef = (tabView: TabView) => (this.tabView = tabView);

	render() {
		const { match: { params: { type = '' } } } = this.props;
		const page = getTabIndex(type);
		return (
			<ScrollableTabView
				ref={this.setTabViewRef}
				tabBarBackgroundColor={theme.topTabs.backgroundColor}
				tabBarUnderlineStyle={theme.topTabs.selectedUnderlineStyle}
				tabBarActiveTextColor={theme.topTabs.textColor}
				tabBarInactiveTextColor={theme.topTabs.selectedTextColor}
				prerenderingSiblingsNumber={Infinity}
				onChangeTab={this.updateTabRoute}
				initialPage={page}
			>
				<Food tabLabel="FOOD" />
				<Places tabLabel="PLACES" />
			</ScrollableTabView>
		);
	}
}

export default List;