· 6 years ago · Oct 08, 2019, 04:02 PM
1import React, { Component } from 'react'
2
3import {
4 View,
5 Text,
6 Image,
7 AsyncStorage,
8 ScrollView,
9 TouchableOpacity
10} from 'react-native'
11import Icon from 'react-native-vector-icons/FontAwesome'
12import RNPickerSelect from 'react-native-picker-select'
13import ImagePicker from 'react-native-image-picker'
14
15import styles from './Profile.styles'
16import api from '../../services/api'
17
18export default class Profile extends Component {
19 static navigationOptions = {
20 title: 'Perfil',
21 drawerIcon: ({ focused }) => (
22 <Icon name="user" size={24} color={focused ? 'white' : 'black'} />
23 )
24 }
25
26 constructor() {
27 super()
28 this.state = {
29 dataProfile: null,
30 responsaveis: [],
31 filePath: {},
32 competidorId: null
33 }
34 }
35 //========================================================================================================================
36
37 upFoto = async () => {
38 const token = await AsyncStorage.getItem('@MySuperStore:token')
39
40 ImagePicker.showImagePicker({}, async upload => {
41 if (upload.error) {
42 console.log('ImagePicker error')
43 } else if (upload.didCancel) {
44 console.log('Canceled by user')
45 } else {
46 const data = new FormData()
47
48 const [prefix, suffix] = upload.fileName.split('.')
49 const ext = suffix.toLowerCase() === 'heic' ? 'jpg' : suffix
50 data.append('foto', {
51 uri: upload.uri,
52 type: upload.type,
53 name: `${prefix}.${ext}`
54 })
55 data.append('competidor', this.state.competidorId)
56
57 await api.post(`conta/update-competidor-foto/`, data, {
58 headers: {
59 Accept: 'application/json',
60 'Content-Type': 'multipart/form-data',
61 authorization: `Bearer ${token}`
62 }
63 })
64 this.getDataProfile(this.state.competidorId)
65 }
66 })
67 }
68 //========================================================================================================================
69 getDataProfile = async competidor_id => {
70 const token = await AsyncStorage.getItem('@MySuperStore:token')
71
72 const result = await api.get(
73 `conta/meu-competidor/?competidor=${this.state.competidorId}`,
74 {
75 headers: {
76 Authorization: `Bearer ${token}`
77 }
78 }
79 )
80 this.setState({ getDataProfile: result.data })
81 }
82
83 responsaveis = async () => {
84 const token = await AsyncStorage.getItem('@MySuperStore:token')
85
86 const result = await api.get(`conta/meus-competidores/`, {
87 headers: {
88 Authorization: `Bearer ${token}`
89 }
90 })
91
92 const responsaveis = result.data.map(item => ({
93 label: item.nome,
94 value: item.id
95 }))
96 this.setState({ responsaveis })
97 }
98
99 async componentDidMount() {
100 const competidor_id = await AsyncStorage.getItem(
101 '@MySuperStore:competidor_id'
102 )
103
104 this.setState({ competidorId: competidor_id })
105 this.getDataProfile(competidor_id)
106 this.responsaveis()
107 }
108
109 render() {
110 const { dataProfile, responsaveis } = this.state
111
112 return (
113 <View style={styles.primeiro}>
114 <ScrollView>
115 <View style={styles.menu}>
116 <Icon
117 name="bars"
118 size={24}
119 color="white"
120 onPress={() => this.props.navigation.openDrawer()}
121 />
122 </View>
123 <View style={styles.perfil}>
124 {dataProfile && dataProfile.modalidades.length
125 ? dataProfile.modalidades.map((item, key) => (
126 <View key={key}>
127 <View
128 style={{ alignItems: 'center', justifyContent: 'center' }}
129 >
130 <TouchableOpacity onPress={this.upFoto}>
131 <Image
132 source={{ uri: dataProfile.foto }}
133 style={{
134 borderRadius: 70,
135 marginTop: 30,
136 width: 150,
137 height: 150
138 }}
139 />
140 </TouchableOpacity>
141 </View>
142 <Text style={styles.nome}>{dataProfile.nome}</Text>
143 <Text style={styles.genero}>Gênero</Text>
144 <Text style={styles.sexo}>{dataProfile.sexo}</Text>
145 <Text style={styles.nascimento}>Nascimento</Text>
146 <Text style={styles.dataNascimento}>
147 {dataProfile.data_nascimento}
148 </Text>
149 <View style={styles.hairlineWidth}></View>
150 <Text style={styles.modalidade}>Modalidade</Text>
151 <Text style={styles.tipoModalidade}>{item.modalidade}</Text>
152 <Text style={styles.graduacao}>Graduação</Text>
153 {item.graduacao !== null ? (
154 <Text style={styles.tipoGraduacao}>{item.graduacao}</Text>
155 ) : (
156 <Text style={styles.tipoGraduacao}>Não registrado</Text>
157 )}
158 <Text style={styles.equipe}>Equipe</Text>
159 <Text style={styles.tipoEquipe}>{item.equipe}</Text>
160 <Text style={styles.professor}>Professor</Text>
161 <Text style={styles.tipoProfessor}>{item.professor}</Text>
162 </View>
163 ))
164 : dataProfile && (
165 <View>
166 <View
167 style={{ alignItems: 'center', justifyContent: 'center' }}
168 >
169 <Image
170 source={{ uri: dataProfile.foto }}
171 style={{
172 borderRadius: 70,
173 marginTop: 30,
174 width: 150,
175 height: 150
176 }}
177 />
178 </View>
179 <Text style={styles.nome}>{dataProfile.nome}</Text>
180 <Text style={styles.genero}>Gênero</Text>
181 <Text style={styles.sexo}>{dataProfile.sexo}</Text>
182 <Text style={styles.nascimento}>Nascimento</Text>
183 <Text style={styles.dataNascimento}>
184 {dataProfile.data_nascimento}
185 </Text>
186 </View>
187 )}
188 <View style={styles.flatListView}>
189 <View>
190 <View style={styles.hairlineWidth}>
191 <Text style={styles.descriptionResultsText}>
192 Meus atletas
193 </Text>
194 </View>
195 <RNPickerSelect
196 placeholder={{
197 label: 'Selecione um atleta',
198 value: null
199 }}
200 value={this.state.tipoAtleta}
201 items={responsaveis}
202 onValueChange={async value => {
203 await this.setState({
204 tipoAtleta: value
205 })
206 this.getDataProfile(value)
207 }}
208 style={{ ...pickerSelectStyles }}
209 />
210 </View>
211 </View>
212 </View>
213 </ScrollView>
214 </View>
215 )
216 }
217}
218
219const pickerSelectStyles = {
220 inputIOS: {
221 fontSize: 16,
222 paddingTop: 13,
223 paddingHorizontal: 10,
224 paddingBottom: 12,
225 borderRadius: 50,
226 backgroundColor: 'white',
227 color: 'black',
228 textAlign: 'center'
229 },
230 inputAndroid: {
231 fontSize: 16,
232 paddingTop: 13,
233 paddingHorizontal: 10,
234 paddingBottom: 12,
235 borderRadius: 50,
236 backgroundColor: 'white',
237 color: 'black',
238 textAlign: 'center'
239 },
240 placeholderColor: 'green',
241 underline: {
242 borderTopWidth: 0
243 },
244 icon: {
245 position: 'absolute',
246 backgroundColor: 'transparent',
247 borderTopWidth: 5,
248 borderTopColor: 'white',
249 borderRightWidth: 5,
250 borderRightColor: 'transparent',
251 borderLeftWidth: 5,
252 borderLeftColor: 'transparent',
253 width: 0,
254 height: 0,
255 top: 20,
256 right: 15
257 }
258}