Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Orders #16

Merged
merged 2 commits into from
May 1, 2024
Merged

Orders #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
79aa4cc
added order history page
celineehusen Apr 27, 2024
68ca641
added notifications page
celineehusen Apr 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 113 additions & 18 deletions app/(tabs)/Orders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,128 @@
import { StyleSheet } from "react-native";
import {
Linking,
SafeAreaView,
ScrollView,
StyleSheet,
TouchableOpacity,
} from "react-native";

import { Text, View } from "@/components/Themed";
import { SB_COLOR_SCHEME } from "@/constants";
import { orders } from "@/mock_data";
import { router } from "expo-router";

export default function OrdersScreen() {
return (
<View style={styles.container}>
<Text style={styles.title}>Orders</Text>
<View
style={styles.separator}
lightColor="#eee"
darkColor="rgba(255,255,255,0.1)"
/>
</View>
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollView}>
<View style={styles.container}>
{/* current order */}
<View>
<View
style={{
backgroundColor: SB_COLOR_SCHEME.SB_SECONDARY,
padding: 10,
width: "30%",
borderRadius: 40,
}}
>
<Text
style={{
textAlign: "center",
fontWeight: "500",
color: SB_COLOR_SCHEME.SB_PRIMARY,
}}
>
Current
</Text>
</View>
<View style={{ marginTop: 20 }}>
{orders
.filter((order) => order.status == "accepted")
.map((item) => {
return (
<TouchableOpacity
key={item.id}
style={styles.item}
onPress={() => router.navigate("/delivery")}
>
<Text>{item.restaurant.name}</Text>
<Text>
{item.eta.toLocaleTimeString()} |{" "}
{item.deliveryPerson.name}
</Text>
</TouchableOpacity>
);
})}
</View>
</View>
{/* completed order */}
<View style={{ marginTop: 20 }}>
<View
style={{
backgroundColor: SB_COLOR_SCHEME.SB_PRIMARY,
padding: 10,
width: "35%",
borderRadius: 40,
}}
>
<Text
style={{
textAlign: "center",
fontWeight: "500",
color: SB_COLOR_SCHEME.SB_SECONDARY,
}}
>
Completed
</Text>
</View>
<View style={{ marginTop: 20 }}>
{orders
.filter((order) => order.status == "completed")
.map((item) => {
return (
<TouchableOpacity
key={item.id}
style={styles.item}
onPress={() =>
router.navigate({
pathname: "/orderHistory",
params: { id: item.id },
})
}
>
<Text>{item.restaurant.name}</Text>
<Text>
{item.eta.toLocaleDateString()}{" "}
{item.eta.toLocaleTimeString()} |{" "}
{item.deliveryPerson.name}
</Text>
</TouchableOpacity>
);
})}
</View>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}

const styles = StyleSheet.create({
container: {
padding: 32,
flex: 1,
alignItems: "center",
justifyContent: "center",
},
title: {
fontSize: 20,
fontWeight: "bold",
scrollView: {
backgroundColor: "white",
},
separator: {
marginVertical: 30,
height: 1,
width: "80%",
item: {
backgroundColor: "#F2F2F7",
borderRadius: 6,
padding: 15,
flex: 1,
flexDirection: "column",
gap: 8,
marginBottom: 8,
},
});
31 changes: 19 additions & 12 deletions app/(tabs)/_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,16 +48,11 @@ export default function TabLayout() {
<Pressable>
{({ pressed }) => (
<NotificationBadge style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}/>
// <Ionicons
// name="information-circle"
// size={25}
// color={Colors[colorScheme ?? "light"].text}
// style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
// />
)}
</Pressable>
</Link>
),

}}
/>
<Tabs.Screen
Expand All @@ -67,6 +62,15 @@ export default function TabLayout() {
tabBarIcon: ({ color }) => (
<TabBarIcon name="search-outline" color={color} />
),
headerRight: () => (
<Link href="/notifications" asChild>
<Pressable>
{({ pressed }) => (
<NotificationBadge style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}/>
)}
</Pressable>
</Link>
),
}}
/>
<Tabs.Screen
Expand All @@ -76,6 +80,15 @@ export default function TabLayout() {
tabBarIcon: ({ color }) => (
<TabBarIcon name="receipt-outline" color={color} />
),
headerRight: () => (
<Link href="/notifications" asChild>
<Pressable>
{({ pressed }) => (
<NotificationBadge style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}/>
)}
</Pressable>
</Link>
),
}}
/>
<Tabs.Screen
Expand All @@ -90,12 +103,6 @@ export default function TabLayout() {
<Pressable>
{({ pressed }) => (
<NotificationBadge style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}/>
// <Ionicons
// name="information-circle"
// size={25}
// color={Colors[colorScheme ?? "light"].text}
// style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
// />
)}
</Pressable>
</Link>
Expand Down
13 changes: 12 additions & 1 deletion app/_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,13 +93,24 @@ function RootLayoutNav() {
options={{
title: "Delivery",
headerTintColor: SB_COLOR_SCHEME.SB_PRIMARY,
headerBackVisible: false,
headerBackTitle: "Back",
gestureEnabled: false,
contentStyle: {
backgroundColor: "white",
},
}}
/>
<Stack.Screen
name="orderHistory"
options={{
title: "Order History",
headerTintColor: SB_COLOR_SCHEME.SB_PRIMARY,
headerBackTitle: "Back",
contentStyle: {
backgroundColor: "white",
},
}}
/>
<Stack.Screen name="notifications" options={{ presentation: "modal", headerTitle: 'Notifications' }} />
<Stack.Screen
name="success"
Expand Down
68 changes: 49 additions & 19 deletions app/notifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,65 @@
import { StatusBar } from 'expo-status-bar';
import { Platform, StyleSheet } from 'react-native';
import { StatusBar } from "expo-status-bar";
import { Platform, SafeAreaView, ScrollView, StyleSheet } from "react-native";

import EditScreenInfo from '@/components/EditScreenInfo';
import { Text, View } from '@/components/Themed';
import EditScreenInfo from "@/components/EditScreenInfo";
import { Text, View } from "@/components/Themed";
import { notifications } from "@/mock_data";
import IconBadge from "../assets/icons/icon-badge.svg";

export default function ModalScreen() {
return (
<View style={styles.container}>
<Text style={styles.title}>Notifications</Text>
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
<EditScreenInfo path="app/modal.tsx" />
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollView}>
<View style={styles.container}>
{notifications.sort().map((item) => {
return (
<View key={item.id} style={styles.item}>
<View
style={{
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<Text style={styles.title}>{item.title}</Text>
{item.isNew ? <IconBadge /> : null}
</View>

{/* Use a light status bar on iOS to account for the black space above the modal */}
<StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
</View>
<Text style={{ fontSize: 12 }}>{item.createdAt}</Text>
<Text style={{ paddingBottom: 8 }}>{item.description}</Text>
</View>
);
})}
</View>
</ScrollView>
</SafeAreaView>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 32,
paddingTop: 20,
width: "100%",
},
title: {
fontSize: 20,
fontWeight: 'bold',
fontSize: 15,
fontWeight: "500",
paddingBottom: 4,
},
separator: {
marginVertical: 30,
height: 1,
width: '80%',
item: {
borderRadius: 6,
padding: 15,
flex: 1,
flexDirection: "column",
gap: 8,
marginBottom: 8,
borderBottomWidth: 1,
borderBottomColor: "#F2F2F7",
},
scrollView: {
backgroundColor: "white",
},
});
Loading
Loading