mirror of
https://gitlab.com/wheres-the-tp/ui-mobile.git
synced 2026-01-25 07:24:56 -06:00
90 lines
2.6 KiB
JavaScript
90 lines
2.6 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import { View, Text, ScrollView, RefreshControl } from 'react-native';
|
|
import FoodItemTile from '../components/FoodItemTile';
|
|
import FoodItemList from '../components/FoodItemList';
|
|
import typeof FoodItemRecord from '../records/FoodItemRecord';
|
|
import FilterModal from '../modals/FilterModal';
|
|
import { withFoodItemsAsSeq } from '../enhancers/foodItemEnhancers';
|
|
import { type SetSeq } from 'immutable';
|
|
import { compose, pure, withState, withHandlers, lifecycle } from 'recompose';
|
|
import ActionsButton from '../components/ActionsButton';
|
|
import { withFilter } from '../enhancers/filterEnhancers';
|
|
import { withRouterContext } from '../enhancers/routeEnhancers';
|
|
import FullScreenMessage from '../components/FullScreenMessage';
|
|
|
|
type Props = {
|
|
isFilterModalOpen: boolean,
|
|
toggleFilterModal: () => void,
|
|
foodItemsSeq: SetSeq<FoodItemRecord>,
|
|
isRefreshing: boolean,
|
|
onRefresh: () => Promise<any>,
|
|
onPulldown: () => {},
|
|
isFilterDirty: boolean,
|
|
};
|
|
|
|
const FoodList = (props: Props) => {
|
|
const {
|
|
isFilterModalOpen,
|
|
foodItemsSeq,
|
|
isRefreshing,
|
|
onPulldown,
|
|
toggleFilterModal,
|
|
isFilterDirty,
|
|
} = props;
|
|
|
|
const refreshing = isRefreshing || !foodItemsSeq;
|
|
const showNoResults = !isRefreshing && isFilterDirty && foodItemsSeq && !foodItemsSeq.size;
|
|
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
{showNoResults && (
|
|
<FullScreenMessage>
|
|
<Text style={{ fontSize: 16 }}>No food matched your search.</Text>
|
|
<Text style={{ fontSize: 16 }}>Check your filters and try again</Text>
|
|
</FullScreenMessage>
|
|
)}
|
|
{!showNoResults && (
|
|
<ScrollView
|
|
style={{ flex: 1 }}
|
|
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onPulldown} />}>
|
|
<FoodItemList foodItemsSeq={foodItemsSeq}>
|
|
{(foodItem: FoodItemRecord) => <FoodItemTile key={foodItem.id} foodItem={foodItem} />}
|
|
</FoodItemList>
|
|
</ScrollView>
|
|
)}
|
|
<FilterModal isVisible={isFilterModalOpen} onClose={toggleFilterModal} />
|
|
<ActionsButton
|
|
toggleFilterModal={toggleFilterModal}
|
|
actions={['add-food', 'filter-modal', 'view-mode']}
|
|
icon="add"
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default compose(
|
|
pure,
|
|
withRouterContext,
|
|
withFoodItemsAsSeq,
|
|
withFilter,
|
|
withState('isRefreshing', 'setRefreshing', false),
|
|
withHandlers({
|
|
onPulldown: ({ setRefreshing, onRefresh, router }) => async () => {
|
|
try {
|
|
setRefreshing(true);
|
|
await onRefresh();
|
|
} catch (error) {
|
|
console.log(error); // eslint-disable-line no-console
|
|
router.history.push('/zipcode');
|
|
} finally {
|
|
setTimeout(() => setRefreshing(false), 1000);
|
|
}
|
|
},
|
|
}),
|
|
lifecycle({
|
|
componentDidMount() {
|
|
this.props.onPulldown();
|
|
},
|
|
})
|
|
)(FoodList);
|