muayjtp/react_native
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated index page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-07-27 17:58:20 -05:00
parent a179edeee5
commit f58b86c204
8 changed files with 166 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
donutshop/app/components/HomeCardItem.tsx Normal file
View file

@ -0,0 +1,59 @@
import { StyleSheet, Text, View, Pressable, Image} from 'react-native'
import React from 'react'
import { useNavigation } from '@react-navigation/native';
const HomeCardItem = () => {
const navigation = useNavigation();
return (
<View style={{padding: 5}}>
<View style={{shadowColor: '#B4B4B8', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.5, shadowRadius: 1,}}>
<Pressable>
<View style={{borderColor: '#EEEEEE', borderWidth: 1, borderRadius: 5}}>
<Image source={require('../../assets/images/menu/coming_soon.png')} style={{width: '100%', height: 200, borderTopLeftRadius: 5, borderTopRightRadius: 5}}/>
<View style={{padding: 10}}>
<Text style={{fontSize: 16, fontWeight: 600, letterSpacing: 0.5, marginBottom: 10}}>Pokémon Donuts<Text style={{fontSize: 12, color: '#DA7297'}}>(Coming soon)</Text></Text>
<Text>The limited-edition Pokémon Donuts is coming soon!</Text>
</View>
</View>
</Pressable>
</View>
<View style={{marginTop: 10, shadowColor: '#B4B4B8', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.5, shadowRadius: 1,}}>
<Pressable onPress={() => navigation.navigate('menu')}>
<View style={{borderColor: '#EEEEEE', borderWidth: 1, borderRadius: 5}}>
<Image source={require('../../assets/images/menu/new_special.jpg')} style={{width: '100%', height: 200, borderTopLeftRadius: 5, borderTopRightRadius: 5}}/>
<View style={{padding: 10}}>
<Text style={{fontSize: 16, fontWeight: 600, letterSpacing: 0.5, marginBottom: 10}}>Mothers Day Box for your mama</Text>
<Text>Lets show our appreciation for our moms by treating them with the special Mothers Day Box!</Text>
<Pressable onPress={() => navigation.navigate('menu')} style={{marginTop: 10, padding: 10, backgroundColor: '#DA7297', width: 100, borderRadius: 5, alignItems: 'center'}}>
<Text style={{color: 'white', fontWeight: 500}}>Order Now</Text>
</Pressable>
</View>
</View>
</Pressable>
</View>
<View style={{marginTop: 10, shadowColor: '#B4B4B8', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.5, shadowRadius: 1,}}>
<Pressable onPress={() => navigation.navigate('menu')}>
<View style={{borderColor: '#EEEEEE', borderWidth: 1, borderRadius: 5}}>
<Image source={require('../../assets/images/menu/new_drink.jpg')} style={{width: '100%', height: 200, borderTopLeftRadius: 5, borderTopRightRadius: 5}}/>
<View style={{padding: 10}}>
<Text style={{fontSize: 16, fontWeight: 600, letterSpacing: 0.5, marginBottom: 10}}>Colorful Smoothies are here</Text>
<Text>The colors are not due to artificial colorings, but rather from natural fruits and vegetables</Text>
<Pressable onPress={() => navigation.navigate('menu')} style={{marginTop: 10, padding: 10, backgroundColor: '#DA7297', width: 100, borderRadius: 5, alignItems: 'center'}}>
<Text style={{color: 'white', fontWeight: 500}}>Order Now</Text>
</Pressable>
</View>
</View>
</Pressable>
</View>
</View>
)
}
export default HomeCardItem
const styles = StyleSheet.create({})

18
donutshop/app/components/OrderReceiptCard.tsx
View file

@ -18,16 +18,9 @@ const OrderReceiptCard: React.FC<OrderHistoryCardProps> = ({
}) => {
return (
<View style={{gap: 10, borderColor: 'gray', borderWidth:1, marginBottom: 10}}>
<View style={{flexDirection: 'row', justifyContent: 'space-between', gap: 20, alignItems: 'center', padding: 10}}>
<View>
<Text>Order Time</Text>
<Text>{OrderDate}</Text>
</View>
<View style={{alignItems: 'flex-end'}}>
<Text>Total Amount</Text>
<Text>$ {CartListPrice}</Text>
</View>
<View style={{borderColor: 'gray', borderWidth:1, marginBottom: 10}}>
<View style={{justifyContent: 'flex-end', padding: 10, backgroundColor: '#EEEEEE'}}>
<Text style={{fontWeight: 600}}>{OrderDate}</Text>
</View>
<View style={{gap: 10}}>
@ -51,6 +44,11 @@ const OrderReceiptCard: React.FC<OrderHistoryCardProps> = ({
</Pressable>
))}
</View>
<View style={{borderColor: 'black', borderWidth: 0.5, borderStyle: 'dashed'}}/>
<View style={{flexDirection: 'row', justifyContent: 'space-between', gap: 20, alignItems: 'center', padding: 10}}>
<Text style={{fontWeight: 600}}>Total Amount</Text>
<Text style={{fontWeight: 600}}>$ {CartListPrice}</Text>
</View>
</View>
)
}

2
donutshop/app/components/OrderReceiptItem.tsx
View file

@ -27,7 +27,7 @@ const OrderReceiptItem: React.FC<OrderReceiptItemProps> = ({
<Image source={image_item} style={{width: 50, height: 50}} />
{prices.map((item: any, index: any) => (
<View key={index.toString()}>
<Text style={{width: 200}}>{name || donutname} <Text style={{}}>{item.size}</Text></Text>
<Text style={{width: 200}}>{name || donutname} <Text style={{fontWeight: 600}}>{item.size}</Text></Text>
</View>
))}
</View>

2
donutshop/app/screen/Detail.tsx
View file

@ -10,7 +10,7 @@ import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
const Detail = ({navigation, route}: any) => {
const ItemOfIndex = useStore((state: any) =>
route.params.type == 'Donut' ? state.AllDonutList2 : state.AllDrinkList2,
route.params.type == 'Donut' ? state.AllDonutMenu : state.AllDrinkMenu,
)[route.params.index];
const addToFavoriteList = useStore((state: any) => state.addToFavoriteList);

2
donutshop/app/screen/DetailDrink.tsx
View file

@ -9,7 +9,7 @@ import PaymentFooter from "../components/PaymentFooter";
const DetailDrink = ({navigation, route}: any) => {
const ItemOfIndex = useStore((state: any) =>
route.params.type == 'Donut' ? state.AllDonutList2 : state.AllDrinkList2,
route.params.type == 'Donut' ? state.AllDonutMenu : state.AllDrinkMenu,
)[route.params.index];
const addToFavoriteList = useStore((state: any) => state.addToFavoriteList);

4
donutshop/app/screen/Home.tsx
View file

@ -1,6 +1,7 @@
import { View, Text, ScrollView, StyleSheet } from 'react-native'
import { View, Text, ScrollView, StyleSheet, Image, Pressable } from 'react-native'
import React from 'react'
import HomeHeader from '../components/HomeHeader'
import HomeCardItem from '../components/HomeCardItem'
import { StatusBar } from 'expo-status-bar';
const Home = () => {
@ -10,6 +11,7 @@ const Home = () => {
<StatusBar style="dark"/>
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.ScrollViewFlex}>
<HomeHeader />
<HomeCardItem />
</ScrollView>
</View>
)

6
donutshop/app/screen/Menu.tsx
View file

@ -1,4 +1,4 @@
import { View, Text, ScrollView, StyleSheet, Pressable, Dimensions, ToastAndroid} from 'react-native'
import { View, Text, ScrollView, StyleSheet, Pressable, Dimensions} from 'react-native'
import React, { useState } from 'react'
import { useStore } from '../store/store';
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
@ -32,8 +32,8 @@ const getDonutList = (category: string, data: any) => {
const Menu = ({navigation}: any) => {
const DonutList = useStore((state: any) => state.AllDonutList2);
const DrinkList = useStore((state: any) => state.AllDrinkList2);
const DonutList = useStore((state: any) => state.AllDonutMenu);
const DrinkList = useStore((state: any) => state.AllDrinkMenu);
const [categories, setCategories] = useState(getCategoriesFromData(DonutList));
const [searchMenu, setSearchMenu] = useState('');

114
donutshop/app/store/store.ts
View file

@ -8,8 +8,8 @@ import DrinkData from "../data/DrinkData";
export const useStore = create(
persist(
(set, get) => ({
AllDonutList1: DonutData,
AllDrinkList: DrinkData,
AllDonutMenu: DonutData,
AllDrinkMenu: DrinkData,
CartPrice: 0,
FavoriteList: [],
CartList: [],
@ -68,25 +68,25 @@ export const useStore = create(
set(
produce(state => {
if(type == 'Donut'){
for(let i = 0; i < state.AllDonutList1.length; i++){
if(state.AllDonutList1[i].id == id){
if(state.AllDonutList1[i].favourite == false){
state.AllDonutList1[i].favourite = true;
state.FavoriteList.unshift(state.AllDonutList1[i]);
for(let i = 0; i < state.AllDonutMenu.length; i++){
if(state.AllDonutMenu[i].id == id){
if(state.AllDonutMenu[i].favourite == false){
state.AllDonutMenu[i].favourite = true;
state.FavoriteList.unshift(state.AllDonutMenu[i]);
} else{
state.AllDonutList1[i].favourite = false;
state.AllDonutMenu[i].favourite = false;
}
break;
}
}
} else if(type == 'Drink'){
for(let i = 0; i< state.AllDrinkList.length; i++){
if(state.AllDrinkList[i].id == id){
if(state.AllDrinkList[i].favourite == false){
state.AllDrinkList[i].favourite = true;
state.FavoriteList.unshift(state.AllDrinkList[i]);
for(let i = 0; i < state.AllDrinkMenu.length; i++){
if(state.AllDrinkMenu[i].id == id){
if(state.AllDrinkMenu[i].favourite == false){
state.AllDrinkMenu[i].favourite = true;
state.FavoriteList.unshift(state.AllDrinkMenu[i]);
} else{
state.AllDrinkList[i].favourite = false;
state.AllDrinkMenu[i].favourite = false;
}
break;
}
@ -98,23 +98,23 @@ export const useStore = create(
set(
produce(state => {
if(type = 'Donut'){
for(let i = 0; i < state.AllDonutList1.length; i++){
if(state.AllDonutList1[i].id == id){
if(state.AllDonutList1[i].favourite == true){
state.AllDonutList1[i].favourite = false;
for(let i = 0; i < state.AllDonutMenu.length; i++){
if(state.AllDonutMenu[i].id == id){
if(state.AllDonutMenu[i].favourite == true){
state.AllDonutMenu[i].favourite = false;
} else{
state.AllDonutList1[i].favourite = true;
state.AllDonutMenu[i].favourite = true;
}
break;
}
}
} else if(type = 'Drink'){
for(let i = 0; i < state.AllDrinkList.length; i++){
if(state.AllDrinkList[i].id == id){
if(state.AllDrinkList[i].favourite == true){
state.AllDrinkList[i].favourite = false;
for(let i = 0; i < state.AllDrinkMenu.length; i++){
if(state.AllDrinkMenu[i].id == id){
if(state.AllDrinkMenu[i].favourite == true){
state.AllDrinkMenu[i].favourite = false;
} else{
state.AllDrinkList[i].favourite = true;
state.AllDrinkMenu[i].favourite = true;
}
break;
}
@ -130,6 +130,72 @@ export const useStore = create(
state.FavoriteList.splice(spliceIndex, 1);
}),
),
addCartItemQuantity:(id: string, size: string) =>
set(
produce(state => {
for(let i = 0; i < state.CartList.length; i++){
if(state.CartList[i].id == id){
for (let j = 0; j < state.CartList[i].prices.length; j++) {
if (state.CartList[i].prices[j].size == size) {
state.CartList[i].prices[j].quantity++;
break;
}
}
}
}
}),
),
removeCartItemQuantity:(id: string, size: string) =>
set(
produce(state => {
for (let i = 0; i < state.CartList.length; i++) {
if(state.CartList[i].id == id){
for (let j = 0; j < state.CartList[i].prices.length; j++) {
if (state.CartList[i].prices[j].size == size) {
if(state.CartList[i].prices.length > 1){
if (state.CartList[i].prices[j].quantity > 1) {
state.CartList[i].prices[j].quantity--;
} else{
state.CartList[i].prices.splice(j, 1);
}
} else{
if (state.CartList[i].prices[j].quantity > 1) {
state.CartList[i].prices[j].quantity--;
} else {
state.CartList.splice(i, 1);
}
}
break
}
}
}
}
}),
),
addToReceiptList:() =>
set(
produce(state => {
let temp = state.CartList.reduce(
(accumulator: number, currentValue: any) =>
accumulator + parseFloat(currentValue.ItemPrice),
0,
);
if(state.ReceiptList.length > 0){
state.ReceiptList.unshift({
OrderDate: new Date().toDateString() + ' ' + new Date().toLocaleTimeString(),
CartList: state.CartList,
CartListPrice: temp.toFixed(2).toString(),
})
} else{
state.ReceiptList.push({
OrderDate: new Date().toDateString() + ' ' + new Date().toLocaleTimeString(),
CartList: state.CartList,
CartListPrice: temp.toFixed(2).toString(),
});
}
state.CartList = [];
}),
),
}),
{
name: 'donutshop',