MyPage.js
4.26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import React, {useEffect, useState, useCallback} from 'react';
import {ScrollView, Text, Alert} from 'react-native';
import {useDispatch, useSelector} from "react-redux";
import {BUTTON_COLOR} from "../constant";
import SquareButtonComponent from "../components/Base/SquareButtonComponent";
import {logoutSaga, updateUserInfoSaga} from "../reducers/user";
import TextInputComponent from "../components/Base/TextInputComponent";
const MyPage = (props) => {
// 데이터
const {navigation} = props;
const {me} = useSelector(state => state.user);
const [nickName, setNickName] = useState(me.nickName);
// 함수
const dispatch = useDispatch();
const goToPay = () => {
Alert.alert('테스트 앱은 결제 기능 미지원');
};
const onChangeNickName = useCallback((text) => {
setNickName(text);
}, []);
const updateUserInfo = () => {
dispatch({type: updateUserInfoSaga, data: {nickName}});
};
const logout = () => {
dispatch({type: logoutSaga});
};
// 렌더링
useEffect(() => {
if (!me) {
navigation.navigate('지도');
}
}, [me]);
return (
<ScrollView>
<Text style={{
marginTop: 80,
marginBottom: 20,
fontSize: 24,
fontWeight: 'bold',
textAlign: 'center',
color: '#373737'
}}>
닉네임 {me.nickName}님
</Text>
<TextInputComponent
onChangeText={onChangeNickName}
value={nickName}
secureTextEntry={false}
placeholder={'닉네임을 업데이트하세요'}
rules={[
v => !!v || '닉네임 입력은 필수입니다',
v => (v && (v.trim() !== '')) || '닉네임 입력은 필수입니다',
v => (v && (v.length <= 10)) || '닉네임의 길이는 10자 이하입니다'
]}
style1={{
marginLeft: 20,
marginRight: 20,
marginTop: 10,
marginBottom: 10,
padding: 15,
}}
style2={{
marginLeft: 35,
marginRight: 35,
}}
/>
<SquareButtonComponent
onPress={updateUserInfo}
text={'닉네임 업데이트'}
style1={{
marginLeft: 20,
marginRight: 20,
marginTop: 10,
marginBottom: 10,
padding: 15,
borderRadius: 3,
backgroundColor: BUTTON_COLOR
}}
style2={{
fontSize: 16,
fontWeight: 'bold',
textAlign: 'center',
color: '#ffffff'
}}
/>
<SquareButtonComponent
onPress={logout}
text={'로그아웃'}
style1={{
marginLeft: 20,
marginRight: 20,
marginTop: 10,
marginBottom: 10,
padding: 15,
borderRadius: 3,
backgroundColor: BUTTON_COLOR
}}
style2={{
fontSize: 16,
fontWeight: 'bold',
textAlign: 'center',
color: '#ffffff'
}}
/>
<SquareButtonComponent
onPress={goToPay}
text={'대여 및 결제 페이지'}
style1={{
marginLeft: 20,
marginRight: 20,
marginTop: 10,
marginBottom: 10,
padding: 15,
borderRadius: 3,
backgroundColor: BUTTON_COLOR
}}
style2={{
fontSize: 16,
fontWeight: 'bold',
textAlign: 'center',
color: '#ffffff'
}}
/>
</ScrollView>
)
};
export default MyPage;