Skip to content

Commit 6266c1d

Browse files
letrungduong113letrungduong113
committed
UI todo app
1 parent c95dd20 commit 6266c1d

File tree

6 files changed

+146
-14
lines changed

6 files changed

+146
-14
lines changed

‎src/common/apis/home.api.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {AxiosResponse} from 'axios';
22
import unAuthorizedRequest from '../../services/api-service/unAuthorizedRequest';
33

44
class HomeApi {
5-
fetchData = (page: number, size: number): Promise<AxiosResponse<any>> => {
5+
fetchData = (page: number, size: number): Promise<any> => {
66
return unAuthorizedRequest
77
.get(`video/list?page=${page}&page_size=${size}`)
88
.then(res => res.data);

‎src/common/components/Header/Header.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import {StyleSheet, Text, View} from 'react-native';
33
import {NavigationService} from '../../../services/navigation-service/navigationService';
44
import {ColorDefault} from '../../themes/colors';
55
import {TouchableOpacity} from 'react-native-gesture-handler';
6-
import {IIconTypes} from './Header.props';
76
import {Ionicons} from '@expo/vector-icons';
7+
import {IIconTypes} from '../../models';
88

99
type HeaderProps = {
1010
leftIcon?: IIconTypes;

‎src/common/helpers/scale/index.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@ const [shortDimension, longDimension] =
55
//Guideline sizes are based on standard ~5" screen mobile device
66
const guidelineBaseWidth = 350;
77
const guidelineBaseHeight = 680;
8-
8+
// screen width
99
const scale = (size: number) => (shortDimension / guidelineBaseWidth) * size;
10+
// screen height
1011
const verticalScale = (size: number) =>
1112
(longDimension / guidelineBaseHeight) * size;
13+
// screen width
1214
const moderateScale = (size: number, factor = 0.5) =>
1315
size + (scale(size) - size) * factor;
14-
16+
// screen height
1517
const moderateVerticalScale = (size: number, factor = 0.5) =>
1618
size + (verticalScale(size) - size) * factor;
1719

‎src/common/components/Header/Header.props.ts renamed to ‎src/common/models/IIconTypes.ts

File renamed without changes.

‎src/common/models/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from './IErrorCode';
22
export * from './IThemes';
3+
export * from './IIconTypes';

‎src/views/HomeScreen/index.tsx

+139-10
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,163 @@
11
import React from 'react';
2-
import {StyleSheet, Text, TextBase, View} from 'react-native';
2+
import {
3+
FlatList,
4+
StyleSheet,
5+
Text,
6+
TextInput,
7+
TouchableOpacity,
8+
View,
9+
} from 'react-native';
310
import {SafeAreaView} from 'react-native-safe-area-context';
4-
import {Header} from '../../common/components/';
5-
import config from '../../config';
611
import {optimizeHeavyScreen} from 'react-navigation-heavy-screen';
712
import {useQuery} from 'react-query';
813
import {HomeApi} from '../../common/apis';
9-
14+
import {ColorDefault} from '../../common/themes/colors';
15+
import {MaterialCommunityIcons, MaterialIcons} from '@expo/vector-icons';
16+
import {scale, verticalScale} from '../../common/helpers';
1017
const HomeScreen = () => {
1118
const fetchDataList = () => HomeApi.fetchData(1, 10);
1219
const {isLoading, isError, data, error} = useQuery(
1320
'homeLists',
1421
fetchDataList,
1522
);
1623

24+
const ListItem = ({todo}: any) => {
25+
return (
26+
<View style={styles.listItem}>
27+
<View style={{flex: 1}}>
28+
<Text
29+
style={{
30+
fontWeight: 'bold',
31+
fontSize: 15,
32+
color: ColorDefault.primary,
33+
// textDecorationLine: todo?.completed ? 'line-through' : 'none',
34+
}}>
35+
{todo?.title}
36+
</Text>
37+
</View>
38+
{/* {!todo?.completed && ( */}
39+
<TouchableOpacity
40+
// onPress={() => markTodoComplete(todo.id)}
41+
>
42+
<View style={[styles.actionIcon, {backgroundColor: 'green'}]}>
43+
<MaterialIcons name="done" size={20} color="white" />
44+
</View>
45+
</TouchableOpacity>
46+
{/* )} */}
47+
<TouchableOpacity
48+
// onPress={() => deleteTodo(todo.id)}
49+
>
50+
<View style={styles.actionIcon}>
51+
<MaterialCommunityIcons name="delete" size={25} color="red" />
52+
</View>
53+
</TouchableOpacity>
54+
</View>
55+
);
56+
};
57+
if (isLoading) return <Text>'Loading...'</Text>;
58+
59+
if (error) return <Text>'An error has occurred: ' </Text>;
60+
1761
return (
18-
<SafeAreaView style={{flex: 1}}>
19-
<Header title="Header" backEnabled={true} />
20-
<View style={styles.container}>
21-
<Text>{config.BASE_URL}</Text>
62+
<SafeAreaView
63+
style={{
64+
flex: 1,
65+
backgroundColor: 'white',
66+
}}>
67+
<View style={styles.header}>
68+
<Text
69+
style={{
70+
fontWeight: 'bold',
71+
fontSize: 20,
72+
color: ColorDefault.primary,
73+
}}>
74+
TODO APP
75+
</Text>
76+
<MaterialCommunityIcons
77+
onPress={() => console.log('delete')}
78+
name="delete"
79+
size={25}
80+
color="red"
81+
/>
82+
</View>
83+
<View>
84+
<FlatList
85+
data={data.data.entries}
86+
renderItem={({item}) => <ListItem todo={item} />}
87+
/>
88+
</View>
89+
90+
<View style={styles.footer}>
91+
<View style={styles.inputContainer}>
92+
<TextInput
93+
// value={textInput}
94+
placeholder="Add Todo"
95+
// onChangeText={text => setTextInput(text)}
96+
/>
97+
</View>
98+
<TouchableOpacity>
99+
<View style={styles.iconContainer}>
100+
<MaterialIcons name="add" size={30} color="white" />
101+
</View>
102+
</TouchableOpacity>
22103
</View>
23104
</SafeAreaView>
24105
);
25106
};
26107
const styles = StyleSheet.create({
27-
container: {
108+
footer: {
109+
position: 'absolute',
110+
bottom: verticalScale(40),
111+
width: '100%',
112+
flexDirection: 'row',
113+
alignItems: 'center',
114+
paddingHorizontal: 20,
115+
backgroundColor: ColorDefault.navigationBar,
116+
},
117+
inputContainer: {
118+
height: verticalScale(50),
119+
paddingHorizontal: 20,
120+
elevation: 40,
121+
backgroundColor: ColorDefault.navigationBar,
28122
flex: 1,
29-
backgroundColor: '#81ecec',
123+
marginVertical: 20,
124+
marginRight: 20,
125+
borderRadius: 30,
126+
},
127+
iconContainer: {
128+
height: 50,
129+
width: 50,
130+
backgroundColor: ColorDefault.primary,
131+
elevation: 40,
132+
borderRadius: 25,
133+
justifyContent: 'center',
30134
alignItems: 'center',
135+
},
136+
137+
listItem: {
138+
padding: 20,
139+
backgroundColor: ColorDefault.navigationBar,
140+
flexDirection: 'row',
141+
elevation: 12,
142+
borderRadius: 7,
143+
marginVertical: 10,
144+
},
145+
actionIcon: {
146+
height: verticalScale(25),
147+
width: scale(25),
148+
backgroundColor: ColorDefault.navigationBar,
31149
justifyContent: 'center',
150+
alignItems: 'center',
151+
// backgroundColor: 'red',
152+
marginLeft: 5,
153+
borderRadius: 3,
154+
},
155+
header: {
156+
padding: 20,
157+
flexDirection: 'row',
158+
alignItems: 'center',
159+
justifyContent: 'space-between',
32160
},
33161
});
162+
34163
export default optimizeHeavyScreen(HomeScreen);

0 commit comments

Comments
 (0)