Commit 5ce68854 authored by Gijs Hendriksen's avatar Gijs Hendriksen Committed by Sébastiaan Versteeg
Browse files

Restyle Pizza component

parent 518e6b6c
......@@ -2,12 +2,14 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, Text, ScrollView, RefreshControl, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Moment from 'moment';
import 'moment/locale/nl';
import LoadingScreen from './LoadingScreen';
import { retrievePizzaInfo, cancelOrder, orderPizza } from '../actions/pizza';
import styles from './style/pizza';
import { colors } from '../style';
class Pizza extends Component {
constructor(props) {
......@@ -26,93 +28,98 @@ class Pizza extends Component {
return null;
};
getEventInfo = (title, subtitle) => (
<View style={styles.eventInfo}>
<Text style={styles.title}>Order pizza for {title}</Text>
<Text style={styles.subtitle}>{subtitle}</Text>
</View>
);
getOverview = (order, pizzaList) => {
if (order) {
const productInfo = this.getProductFromList(order.product, pizzaList);
return (
<View
style={[styles.overview, order.paid ? styles.greenBackground : styles.redBackground]}
>
<Text
style={styles.overviewText}
numberOfLines={3}
>{productInfo.name}</Text>
</View>
);
}
return <Text style={styles.header}>You did not place an order.</Text>;
};
getOrder = (order, pizzaList, hasEnded) => {
if (order) {
const productInfo = this.getProductFromList(order.product, pizzaList);
if (hasEnded) {
return (
<View>
<View
style={[
styles.currentOrder,
order.paid ? styles.greenBackground : styles.redBackground,
]}
>
<Text
style={order.paid ? styles.paidStatus : styles.notPaidStatus}
>The order has {order.paid || 'not yet '}been paid for.</Text>
<Text
style={[
styles.finalOrder,
order.paid ? styles.greenText : styles.whiteText,
]}
>{productInfo.name}</Text>
</View>
<Text style={styles.subtitle}>You can no longer cancel.</Text>
</View>
);
}
return (
<View style={styles.currentOrder}>
<Text
style={order.paid ? styles.paidStatus : styles.notPaidStatus}
>The order has {order.paid || 'not yet '}been paid for.</Text>
<View
style={styles.currentOrderInfo}
>
<View>
<Text style={styles.name}>{productInfo.name}</Text>
<Text style={styles.description}>{productInfo.description}</Text>
<Text style={styles.price}>{productInfo.price}</Text>
</View>
<View>
<TouchableOpacity
onPress={() => this.props.cancelOrder(this.props.token)}
style={[styles.button, order.paid && styles.disabled]}
disabled={order.paid}
>
<Text style={styles.buttonText}>CANCEL</Text>
</TouchableOpacity>
<View style={styles.section}>
<Text style={styles.header}>Current order</Text>
<View style={styles.card}>
<Text
style={[styles.orderStatus, order.paid ? styles.paidStatus : styles.notPaidStatus]}
>The order has {order.paid || 'not yet '}been paid for.</Text>
<View style={styles.pizzaContainer}>
<View style={styles.pizzaInfo}>
<Text style={styles.pizzaName}>{productInfo.name}</Text>
<Text style={styles.pizzaDescription}>{productInfo.description}</Text>
<Text style={styles.pizzaPrice}>{productInfo.price}</Text>
</View>
{(!order.paid && !hasEnded) && (
<TouchableOpacity
onPress={() => this.props.cancelOrder(this.props.token)}
style={styles.button}
>
<Icon
name="delete"
color={colors.white}
size={18}
/>
</TouchableOpacity>
)}
</View>
</View>
</View>
);
} else if (hasEnded) {
return <Text>You did not place an order.</Text>;
}
return null;
};
getPizzaList = (pizzaList, hasOrder) => [(
hasOrder && <Text
key="description"
style={styles.title}
>Changing your order</Text>
), (
<View key="content" style={styles.pizzaCard}>
{pizzaList.map(pizza => (
<View
key={pizza.pk}
style={styles.pizzaDetail}
>
<View>
<Text style={styles.name}>{pizza.name}</Text>
<Text style={styles.description}>{pizza.description}</Text>
<Text style={styles.price}>{pizza.price}</Text>
</View>
<View>
getPizzaList = (pizzaList, hasOrder) => (
<View style={styles.section}>
{hasOrder && (
<Text style={styles.header}>Changing your order</Text>
)}
<View style={styles.card}>
{pizzaList.map(pizza => (
<View
key={pizza.pk}
style={styles.pizzaContainer}
>
<View style={styles.pizzaInfo}>
<Text style={styles.pizzaName}>{pizza.name}</Text>
<Text style={styles.pizzaDescription}>{pizza.description}</Text>
<Text style={styles.pizzaPrice}>{pizza.price}</Text>
</View>
<TouchableOpacity
onPress={() => this.props.orderPizza(this.props.token, pizza.pk, hasOrder)}
style={styles.button}
>
<Text style={styles.buttonText}>{hasOrder ? 'MODIFY' : 'ORDER'}</Text>
<Icon
name="edit"
color={colors.white}
size={18}
/>
</TouchableOpacity>
</View>
</View>
))}
))}
</View>
</View>
)];
);
handleRefresh = () => {
this.setState({ refreshing: true });
......@@ -124,9 +131,6 @@ class Pizza extends Component {
if (!this.props.hasLoaded) {
return <LoadingScreen />;
} else if (!this.props.success) {
return <Text>Something went wrong.</Text>;
}
if (!this.props.event) {
return (
<ScrollView
refreshControl={
......@@ -136,9 +140,28 @@ class Pizza extends Component {
/>
}
>
<Text
style={styles.title}
>There is currently no event for which you can order food.</Text>
<View style={styles.content}>
<Text
style={styles.title}
>Something went wrong while retrieving pizza info.</Text>
</View>
</ScrollView>
);
} else if (!this.props.event) {
return (
<ScrollView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.handleRefresh}
/>
}
>
<View style={styles.content}>
<Text
style={styles.title}
>There is currently no event for which you can order food.</Text>
</View>
</ScrollView>
);
}
......@@ -169,8 +192,8 @@ class Pizza extends Component {
}
>
<View style={styles.content}>
<Text style={styles.title}>Order pizza for {this.props.event.title}</Text>
<Text style={styles.subtitle}>{subtitle}</Text>
{this.getEventInfo(this.props.event.title, subtitle)}
{hasEnded && this.getOverview(this.props.order, this.props.pizzaList)}
{this.getOrder(this.props.order, this.props.pizzaList, hasEnded)}
{inFuture || hasEnded || (this.props.order && this.props.order.paid) ||
this.getPizzaList(this.props.pizzaList, !!this.props.order)}
......
......@@ -5,113 +5,113 @@ import { colors } from '../../style';
const styles = StyleSheet.create({
content: {
flex: 1,
padding: 16,
padding: 8,
},
eventInfo: {
padding: 8,
},
title: {
color: colors.textColour,
fontFamily: 'sans-serif-medium',
color: colors.textColour,
fontSize: 20,
marginBottom: 8,
},
subtitle: {
color: colors.textColour,
fontFamily: 'sans-serif-medium',
fontSize: 16,
fontStyle: 'italic',
},
name: {
color: colors.textColour,
fontFamily: 'sans-serif-medium',
fontSize: 16,
fontSize: 14,
},
price: {
color: colors.textColour,
fontFamily: 'sans-serif-medium',
overview: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
elevation: 2,
borderRadius: 2,
padding: 8,
height: 100,
},
description: {
color: colors.textColour,
overviewText: {
fontFamily: 'sans-serif-medium',
fontStyle: 'italic',
color: colors.white,
fontSize: 32,
},
button: {
backgroundColor: colors.magenta,
borderRadius: 2,
elevation: 2,
greenBackground: {
backgroundColor: colors.lightGreen,
},
redBackground: {
backgroundColor: colors.lightRed,
},
section: {
marginTop: 8,
marginBottom: 8,
},
buttonText: {
header: {
fontFamily: 'sans-serif-medium',
color: colors.white,
padding: 10,
color: colors.textColour,
fontSize: 14,
paddingLeft: 10,
paddingTop: 6,
paddingBottom: 6,
},
pizzaCard: {
card: {
elevation: 2,
borderRadius: 2,
},
pizzaDetail: {
borderBottomColor: colors.lightGray,
borderBottomWidth: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
orderStatus: {
fontFamily: 'sans-serif-medium',
color: colors.white,
fontSize: 14,
padding: 16,
borderBottomWidth: 1,
borderTopRightRadius: 2,
borderTopLeftRadius: 2,
margin: 2,
},
currentOrder: {
elevation: 2,
borderRadius: 2,
padding: 16,
marginTop: 10,
marginBottom: 10,
paidStatus: {
backgroundColor: colors.lightGreen,
borderBottomColor: colors.darkGreen,
},
notPaidStatus: {
backgroundColor: colors.lightRed,
borderBottomColor: colors.darkRed,
},
currentOrderInfo: {
pizzaContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingLeft: 16,
paddingRight: 8,
paddingTop: 10,
paddingBottom: 10,
borderBottomWidth: 1,
borderBottomColor: colors.dividerGrey,
},
paidStatus: {
fontFamily: 'sans-serif-medium',
backgroundColor: colors.lightGreen,
borderWidth: 1,
borderColor: colors.darkGreen,
color: colors.darkGreen,
pizzaInfo: {
flex: 1,
flexDirection: 'row',
padding: 10,
fontSize: 16,
marginBottom: 10,
},
notPaidStatus: {
pizzaName: {
fontFamily: 'sans-serif-medium',
backgroundColor: colors.red,
borderWidth: 1,
borderColor: colors.white,
color: colors.white,
flex: 1,
flexDirection: 'row',
padding: 10,
fontSize: 16,
marginBottom: 10,
color: colors.black,
fontSize: 14,
},
finalOrder: {
flex: 1,
flexDirection: 'row',
textAlign: 'center',
pizzaDescription: {
fontFamily: 'sans-serif-medium',
color: colors.textColour,
fontSize: 40,
},
redBackground: {
backgroundColor: colors.red,
},
greenBackground: {
backgroundColor: colors.lightGreen,
},
whiteText: {
color: colors.white,
color: colors.gray,
fontSize: 14,
marginTop: 2,
marginBottom: 2,
},
greenText: {
color: colors.darkGreen,
pizzaPrice: {
fontFamily: 'sans-serif-medium',
color: colors.magenta,
fontSize: 14,
},
disabled: {
backgroundColor: colors.gray,
button: {
backgroundColor: colors.magenta,
padding: 8,
margin: 8,
borderRadius: 2,
elevation: 2,
},
});
......
......@@ -12,9 +12,10 @@ export const colors = {
darkGrey: '#373737',
dividerGrey: 'rgba(0, 0, 0, 0.12)',
transparent: 'transparent',
lightGreen: '#dff0d8',
darkGreen: '#468847',
red: '#e05c50',
lightGreen: '#8fcc74',
darkGreen: '#81b968',
lightRed: '#e05c50',
darkRed: '#d15348',
};
export function create(styles) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment