Skip to content

Commit d560d53

Browse files
katsuhira02Danil
katsuhira02
and
Danil
authored
MyOrdersScreen add (#104)
Co-authored-by: Danil <[email protected]>
1 parent ec37a16 commit d560d53

8 files changed

Lines changed: 215 additions & 5 deletions

File tree

‎src/UI.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ function Home({ navigation, route }: HomeT) {
7979
const openFilterList = () => navigate('FiltersListScreen')
8080
const openMyProfile = () => navigate('MyProfileScreen')
8181
const openFiltersScreen = () => navigate('FiltersScreen')
82+
const openMyOrdersScreen = () => navigate('MyOrdersScreen')
8283

8384
return (
8485
<ScrollView style={container}>
@@ -307,8 +308,9 @@ function Home({ navigation, route }: HomeT) {
307308
<Space height={10} />
308309
<Button isOutline={false} isSmall={false} onPress={openFiltersScreen} title={'Open FiltersScreen!'} />
309310
<Space height={25} />
310-
<Text title="" h1 textStyle={textStyle} />
311+
<Text title="MyOrdersScreen" h1 textStyle={textStyle} />
311312
<Space height={10} />
313+
<Button onPress={openMyOrdersScreen} isSmall={false} isOutline={false} title={'Open MyOrdersScreen!'} />
312314
</View>
313315
</ScrollView>
314316
)

‎src/components/CardOrder/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { vs } from 'react-native-size-matters'
99
const styles = StyleSheet.create({
1010
container: {
1111
height: vs(160),
12-
width: winWidth * 0.8,
12+
width: winWidth * 0.87,
1313
borderRadius: vs(6),
1414
backgroundColor: DARK
1515
},

‎src/components/Header/SearchHeader.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react'
2+
import { StyleSheet, View, Pressable } from 'react-native'
3+
import { Text } from '..'
4+
import Ionicons from 'react-native-vector-icons/Ionicons'
5+
import { WHITE, winWidth } from '../../constants'
6+
import { vs } from 'react-native-size-matters'
7+
8+
const styles = StyleSheet.create({
9+
container: {
10+
alignItems: 'flex-start',
11+
width: '100%',
12+
paddingLeft: vs(16),
13+
justifyContent: 'flex-start',
14+
height: vs(90)
15+
},
16+
textStyle: {
17+
color: WHITE,
18+
paddingTop: vs(20)
19+
},
20+
iconsContainer: {
21+
flexDirection: 'row',
22+
justifyContent: 'center',
23+
paddingRight: vs(15)
24+
},
25+
chevronStyle: {
26+
alignSelf: 'flex-start',
27+
paddingRight: winWidth * 0.75
28+
},
29+
iconsContainerWidth: {
30+
alignSelf: 'flex-end'
31+
}
32+
})
33+
34+
interface BigTextHeaderT {
35+
title: string
36+
onPress: () => void
37+
onPressSearch: () => void
38+
}
39+
40+
function SearchHeader({ onPress, title = 'Example Title', onPressSearch }: BigTextHeaderT) {
41+
const { container, textStyle, iconsContainer, chevronStyle, iconsContainerWidth } = styles
42+
return (
43+
<View style={container}>
44+
<View style={iconsContainerWidth}>
45+
<View style={iconsContainer}>
46+
<Pressable onPress={onPress} style={({ pressed }) => [{ opacity: pressed ? 0.7 : 1 }, chevronStyle]}>
47+
<Ionicons name={'chevron-back'} size={vs(26)} color={WHITE} />
48+
</Pressable>
49+
<Pressable onPress={onPressSearch} style={({ pressed }) => [{ opacity: pressed ? 0.7 : 1 }]}>
50+
<Ionicons name={'search'} size={vs(26)} color={WHITE} />
51+
</Pressable>
52+
</View>
53+
</View>
54+
<Text title={title} textStyle={textStyle} h0 />
55+
</View>
56+
)
57+
}
58+
59+
export { SearchHeader }

‎src/components/Header/index.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Text } from '../'
55
import { IconHeader } from './IconHeader'
66
import { SmallTextHeader } from './SmallTextHeader'
77
import { BigTextHeader } from './BigTextHeader'
8+
import { SearchHeader } from './SearchHeader'
89

910
const styles = StyleSheet.create({
1011
textStyle: {
@@ -15,11 +16,13 @@ interface HeaderT {
1516
h0?: boolean
1617
h1?: boolean
1718
h2?: boolean
19+
search?: boolean
20+
onPressSearch?: () => void
1821
onPress: () => void
1922
title: string
2023
}
2124

22-
function Header({ h0, h1, h2, onPress, title }: HeaderT) {
25+
function Header({ h0, h1, h2, onPress, title, onPressSearch, search }: HeaderT) {
2326
const { textStyle } = styles
2427
if (h0 === true) {
2528
return <IconHeader onPress={onPress} />
@@ -30,6 +33,9 @@ function Header({ h0, h1, h2, onPress, title }: HeaderT) {
3033
if (h2 === true) {
3134
return <SmallTextHeader onPress={onPress} title={title} />
3235
}
36+
if (search === true) {
37+
return <SearchHeader onPress={onPress} title={title} onPressSearch={onPressSearch} />
38+
}
3339
return <Text title="BUG" h0 textStyle={textStyle} />
3440
}
3541

‎src/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import {
1010
PasswordScreen,
1111
FiltersListScreen,
1212
MyProfileScreen,
13-
FiltersScreen
13+
FiltersScreen,
14+
MyOrdersScreen
1415
} from './screens'
1516

1617
const Stack = createNativeStackNavigator()
@@ -32,6 +33,7 @@ function Navigation1() {
3233
<Stack.Screen component={FiltersListScreen} name={'FiltersListScreen'} options={{ animation: 'fade' }} />
3334
<Stack.Screen component={MyProfileScreen} name={'MyProfileScreen'} options={{ animation: 'fade' }} />
3435
<Stack.Screen component={FiltersScreen} name={'FiltersScreen'} options={{ animation: 'fade' }} />
36+
<Stack.Screen component={MyOrdersScreen} name={'MyOrdersScreen'} options={{ animation: 'fade' }} />
3537
</Stack.Navigator>
3638
</NavigationContainer>
3739
)

‎src/screens/FiltersListScreen/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ const brandArray = [
7676
{ name: 'nike', id: 'two' },
7777
{ name: 'puma', id: 'three' }
7878
]
79+
7980
let countCalls = 0
8081
function FiltersListScreen({ navigation }: FiltersListScreenT) {
8182
const {

‎src/screens/MyOrdersScreen/index.tsx‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import React, { useMemo, useState } from 'react'
2+
import { FlatList, StyleSheet, View } from 'react-native'
3+
import { SafeAreaView } from 'react-native-safe-area-context'
4+
import { vs } from 'react-native-size-matters'
5+
import { CardOrder, Space, Header, TagSmall } from '../../components'
6+
import { BLACK } from '../../constants'
7+
8+
const styles = StyleSheet.create({
9+
container: {
10+
width: '100%',
11+
height: vs(45),
12+
backgroundColor: BLACK,
13+
flexDirection: 'row',
14+
justifyContent: 'space-between',
15+
paddingLeft: vs(16),
16+
paddingRight: vs(16),
17+
paddingTop: vs(5)
18+
},
19+
safeAreaViewContainer: {
20+
backgroundColor: BLACK
21+
},
22+
flatListContainer: {
23+
backgroundColor: BLACK,
24+
height: '100%',
25+
alignSelf: 'center'
26+
},
27+
renderItemContainer: {
28+
backgroundColor: BLACK
29+
}
30+
})
31+
32+
const ordersArray = [
33+
{
34+
order: '1',
35+
orderId: '1',
36+
date: '00-00-0000',
37+
TN: '0000',
38+
quantity: '1',
39+
amount: '1',
40+
isDelivered: true,
41+
onDetails: () => {}
42+
},
43+
{
44+
order: '2',
45+
orderId: '2',
46+
date: '00-00-0000',
47+
TN: '0000',
48+
quantity: '1',
49+
amount: '1',
50+
isDelivered: false,
51+
onDetails: () => {}
52+
},
53+
{
54+
order: '3',
55+
orderId: '3',
56+
date: '00-00-0000',
57+
TN: '0000',
58+
quantity: '1',
59+
amount: '1',
60+
isDelivered: true,
61+
onDetails: () => {}
62+
},
63+
{
64+
order: '4',
65+
orderId: '4',
66+
date: '00-00-0000',
67+
TN: '0000',
68+
quantity: '1',
69+
amount: '1',
70+
isDelivered: false,
71+
onDetails: () => {}
72+
}
73+
]
74+
75+
let value = 0
76+
function MyOrdersScreen({ navigation }: any) {
77+
const { container, safeAreaViewContainer, flatListContainer } = styles
78+
79+
const [tagValueDelivered, setTagValueDelivered] = useState(true)
80+
const [tagValueUndelivered, setTagValueUndelivered] = useState(false)
81+
82+
// const startReload = () => RNRestart.Restart()
83+
const toggleTagDelivered = () => {
84+
return (
85+
setTagValueDelivered(prevState => !prevState),
86+
setTagValueUndelivered(prevState => !prevState),
87+
console.log((value += 1))
88+
)
89+
}
90+
const toggleTagUndelivered = () => {
91+
return (
92+
setTagValueUndelivered(prevState => !prevState),
93+
setTagValueDelivered(prevState => !prevState),
94+
console.log((value += 1))
95+
)
96+
}
97+
const renderItem = ({ item }: any) => {
98+
const { renderItemContainer } = styles
99+
return (
100+
<View style={renderItemContainer}>
101+
<CardOrder
102+
onDetails={item.onDetails}
103+
isDelivered={item.isDelivered}
104+
order={item.order}
105+
date={item.orderNum}
106+
amount={item.amount}
107+
quantity={item.quantity}
108+
TN={item.TN}
109+
/>
110+
<Space height={vs(18)} />
111+
</View>
112+
)
113+
}
114+
115+
const a = ordersArray.filter(i => (i.isDelivered === tagValueDelivered ? null : i))
116+
const renderData = useMemo(() => {
117+
console.log(a)
118+
return ordersArray.filter(i => (i.isDelivered === tagValueUndelivered ? null : i))
119+
}, [tagValueDelivered])
120+
121+
return (
122+
<SafeAreaView style={safeAreaViewContainer}>
123+
<Header search onPress={navigation.goBack} title={'My Orders'} />
124+
<View style={container}>
125+
<TagSmall title={'Delivered'} onToggle={toggleTagDelivered} isVisibleBorder={tagValueDelivered} />
126+
<TagSmall title={'Undelivered'} onToggle={toggleTagUndelivered} isVisibleBorder={tagValueUndelivered} />
127+
</View>
128+
<FlatList
129+
data={renderData}
130+
style={flatListContainer}
131+
renderItem={renderItem}
132+
keyExtractor={item => item.orderId}
133+
ListFooterComponent={<Space height={vs(110)} />}
134+
/>
135+
</SafeAreaView>
136+
)
137+
}
138+
139+
export { MyOrdersScreen }

‎src/screens/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ export * from './SuccessScreen'
44
export * from './AuthScreen'
55
export * from './FiltersListScreen'
66
export * from './MyProfileScreen'
7-
export * from './FiltersScreen'
7+
export * from './FiltersScreen'
8+
export * from './MyOrdersScreen'

0 commit comments

Comments
 (0)