Profile.tsx ➔ Profile - Code Metrics - Inspection of "Id 8" - FalkenDev/SparkRentals-Mobile-App - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Pull Request — dev (#9)

by Oscar

created 2023-01-08 17:00 UTC

Profile.tsx ➔ Profile C

↳ Parent: components/drawer/Profile.tsx

Complexity

Conditions

Size

Total Lines	145
Code Lines	122

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	122
dl	0
loc	145
rs	6.0666
c	0
b	0
f	0
cc	6

How to fix Long Method

import { stopLocationUpdatesAsync } from 'expo-location';
import React from 'react';
import { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Pressable, Modal, TextInput} from 'react-native';
import userModel from '../../models/user';
import authModel from '../../models/auth';
import Icon from 'react-native-vector-icons/Octicons';
import { showMessage, hideMessage } from "react-native-flash-message";
import DeleteModal from '../modals/DeleteModal';


export default function Profile({navigation, setIsLoggedIn}): any {
    const [balance, setBalance] = useState(null);
    const [modalVisible, setModalVisible] = useState(false);
    const [prepaid, setPrepaid] = useState(null);

    const [firstname, setFirstname] = useState(null);
    const [lastname, setLastname] = useState(null);
    const [email, setEmail] = useState(null);
    const [phonenumber, setPhonenumber] = useState(null);

    //Get profile data for logged in user
    useEffect(() => {
        async function getUser(): Promise<void> {
            const result = await userModel.getProfile();
            
            const profile = result['user'];

            setFirstname(profile['firstName']);
            setLastname(profile['lastName']);
            setEmail(profile['email']);
            setPhonenumber(profile['phoneNumber']);

        };
        getUser();
    }, []);

    function setFirstLastName(name: string): void {
        const userName = name.split(' ');
        
        const firstName = userName[0];
        const lastName = userName[1];        

        setFirstname(firstName);
        setLastname(lastName);
    };

    async function logout(): Promise<void> {        
        await authModel.logout();
        setIsLoggedIn(false);
        navigation.navigate('Auth');
    };

    async function save() {
        // Prepare user data object
        const userData = {
            firstname: firstname,
            lastname: lastname,
            email: email,
            phonenumber: phonenumber
        };        

        const result = await userModel.updateUser(userData);

        if (Object.prototype.hasOwnProperty.call(result, 'errors')) {
            showMessage({
                message: result['errors']['title'],
                type: 'danger'
            })

            return;
        };

        showMessage({
            message: result['message'],
            type: 'success'
        });
    };

    return (
        <View style={styles.container}>


            <View style={[styles.infoContainer]}>
                
                <View style={styles.titleContainer}>
                
                    <Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => navigation.navigate('Map')}>
                        <Icon 
                            name='x' 
                            size={25} 
                            color='black'
                        />
                    </Pressable>
                    
                    <Text style={styles.title}>Profile</Text>

                    <Pressable style={styles.saveButton} onPress={() => save()}>
                            <Text style={styles.saveText}>Save</Text>
                    </Pressable>

                </View>




                <View style={styles.inputContainer}>
                    

                    <TextInput
                        value={`${firstname} ${lastname}`}
                        style={styles.input}
                        onChangeText={(content: string) => {
                            setFirstLastName(content)
                        }}

                    />

                    <TextInput
                        value={email}
                        style={styles.input}
                        keyboardType="email-address"
                        onChangeText={(content: string) => {
                            setEmail(content);
                        }}
                    />


                    <TextInput
                        value={phonenumber}
                        style={styles.input}
                        keyboardType="phone-pad"
                        onChangeText={(content: string) => {
                            setPhonenumber(content);
                        }}
                    />
                </View>

                <View style={styles.buttonContainer}>
                    <Pressable style={styles.prepaidButton} onPress={logout}>
                        <Text>Logout</Text>
                    </Pressable>

                    <Pressable style={[styles.prepaidButton, {backgroundColor: 'tomato'}]} onPress={() => {
                        setModalVisible(!modalVisible);
                    }}>
                        <Text>Delete account</Text>
                    </Pressable>
                </View>
                
            </View>
            
            <DeleteModal navigation={navigation} modalVisible={modalVisible} setModalVisible={setModalVisible} setIsLoggedIn={setIsLoggedIn}></DeleteModal>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      height: '50%',
      width: '100%',
    //   position: 'absolute'

    },

    titleContainer: {
        // marginTop: 10,
        // backgroundColor: 'orange',
        width: '100%',
        flexDirection: 'row',
        height: 100,
        justifyContent: 'center',
        alignItems: 'center'
    },

    prepaidButton: {
        backgroundColor: 'cornflowerblue',
        width: '90%',
        height: 50,
        borderRadius: 50,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 30,
    },

    saveButton: {
        width: 60,
        height: 50,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    },

    saveText: {
        color: 'cornflowerblue',
        fontSize: 18,
        fontWeight: '500'
    },

    inputContainer: {
        width: '100%',
        height: '65%',
        alignItems: 'center'
    },

    infoContainer: {
        width: '100%',
        height: 900,
        alignItems: 'center',
        justifyContent: 'center',
    },

    buttonContainer: {
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center'
    },


    prepaidContainer: {
        width: '90%',
        height: '30%',
        alignItems: 'center',
        justifyContent: 'center',
        borderTopWidth: 1,
        borderBottomWidth: 1,
        borderColor: 'grey',
    },

    buttonText: {
        color: 'white'
    },

    backButton: {
        width: 40,
        height: 40, 
        backgroundColor: 'white',
        borderRadius: 25,
        borderWidth: 1,
        borderColor: 'gray',
        alignItems: 'center',
        justifyContent: 'center'
    },

    closeButton: {
        width: 25,
        height: 25, 
        backgroundColor: 'white',
        borderRadius: 25,
        borderWidth: 1,
        borderColor: 'gray',
        alignItems: 'center',
        justifyContent: 'center'
    },

    title: {
        fontWeight: 'bold',
        fontSize: 20,
        width: '70%',
        textAlign: 'center'
        // marginBottom: 30
    },

    balance: {
        fontWeight: 'bold',
        fontSize: 50
    },

    info: {
        fontSize: 15,
        width: '80%',
        color: 'gray',
        textAlign: 'center'
    },

    prepaidInfo: {
        fontWeight: 'bold',
        fontSize: 18
    },

    shadowProp: {
        elevation: 5,
        shadowColor: 'black'
      },

    modalContainer: {
        backgroundColor: 'rgba(220, 220, 220, 0.6)',
        width: '100%',
        height: '100%',
        flex: 1,
    },
    
    modalMessage: {
        backgroundColor: 'white',
        width: '100%',
        height: 200,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 25
    },

    input: {
        // backgroundColor: 'red',
        width: '90%',
        marginBottom: 30,
        borderRadius: 10,
        height: 50,
        padding: 10,
        borderBottomWidth: 2,
        borderColor: 'gray',
    },


});

1			import { stopLocationUpdatesAsync } from 'expo-location';
2			import React from 'react';
3			import { useState, useEffect } from 'react';
4			import { StyleSheet, Text, View, Pressable, Modal, TextInput} from 'react-native';
5			import userModel from '../../models/user';
6			import authModel from '../../models/auth';
7			import Icon from 'react-native-vector-icons/Octicons';
8			import { showMessage, hideMessage } from "react-native-flash-message";
9			import DeleteModal from '../modals/DeleteModal';
10
11
12			export default function Profile({navigation, setIsLoggedIn}): any {
13			const [balance, setBalance] = useState(null);
14			const [modalVisible, setModalVisible] = useState(false);
15			const [prepaid, setPrepaid] = useState(null);
16
17			const [firstname, setFirstname] = useState(null);
18			const [lastname, setLastname] = useState(null);
19			const [email, setEmail] = useState(null);
20			const [phonenumber, setPhonenumber] = useState(null);
21
22			//Get profile data for logged in user
23			useEffect(() => {
24			async function getUser(): Promise<void> {
25			const result = await userModel.getProfile();
26
27			const profile = result['user'];
28
29			setFirstname(profile['firstName']);
30			setLastname(profile['lastName']);
31			setEmail(profile['email']);
32			setPhonenumber(profile['phoneNumber']);
33
34			};
35			getUser();
36			}, []);
37
38			function setFirstLastName(name: string): void {
39			const userName = name.split(' ');
40
41			const firstName = userName[0];
42			const lastName = userName[1];
43
44			setFirstname(firstName);
45			setLastname(lastName);
46			};
47
48			async function logout(): Promise<void> {
49			await authModel.logout();
50			setIsLoggedIn(false);
51			navigation.navigate('Auth');
52			};
53
54			async function save() {
55			// Prepare user data object
56			const userData = {
57			firstname: firstname,
58			lastname: lastname,
59			email: email,
60			phonenumber: phonenumber
61			};
62
63			const result = await userModel.updateUser(userData);
64
65			if (Object.prototype.hasOwnProperty.call(result, 'errors')) {
66			showMessage({
67			message: result['errors']['title'],
68			type: 'danger'
69			})
70
71			return;
72			};
73
74			showMessage({
75			message: result['message'],
76			type: 'success'
77			});
78			};
79
80			return (
81			<View style={styles.container}>
82
83
84			<View style={[styles.infoContainer]}>
85
86			<View style={styles.titleContainer}>
87
88			<Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => navigation.navigate('Map')}>
89			<Icon
90			name='x'
91			size={25}
92			color='black'
93			/>
94			</Pressable>
95
96			<Text style={styles.title}>Profile</Text>
97
98			<Pressable style={styles.saveButton} onPress={() => save()}>
99			<Text style={styles.saveText}>Save</Text>
100			</Pressable>
101
102			</View>
103
104
105
106
107			<View style={styles.inputContainer}>
108
109
110			<TextInput
111			value={`${firstname} ${lastname}`}
112			style={styles.input}
113			onChangeText={(content: string) => {
114			setFirstLastName(content)
115			}}
116
117			/>
118
119			<TextInput
120			value={email}
121			style={styles.input}
122			keyboardType="email-address"
123			onChangeText={(content: string) => {
124			setEmail(content);
125			}}
126			/>
127
128
129			<TextInput
130			value={phonenumber}
131			style={styles.input}
132			keyboardType="phone-pad"
133			onChangeText={(content: string) => {
134			setPhonenumber(content);
135			}}
136			/>
137			</View>
138
139			<View style={styles.buttonContainer}>
140			<Pressable style={styles.prepaidButton} onPress={logout}>
141			<Text>Logout</Text>
142			</Pressable>
143
144			<Pressable style={[styles.prepaidButton, {backgroundColor: 'tomato'}]} onPress={() => {
145			setModalVisible(!modalVisible);
146			}}>
147			<Text>Delete account</Text>
148			</Pressable>
149			</View>
150
151			</View>
152
153			<DeleteModal navigation={navigation} modalVisible={modalVisible} setModalVisible={setModalVisible} setIsLoggedIn={setIsLoggedIn}></DeleteModal>
154			</View>
155			)
156			}
157
158			const styles = StyleSheet.create({
159			container: {
160			flex: 1,
161			backgroundColor: '#fff',
162			alignItems: 'center',
163			height: '50%',
164			width: '100%',
165			// position: 'absolute'
166
167			},
168
169			titleContainer: {
170			// marginTop: 10,
171			// backgroundColor: 'orange',
172			width: '100%',
173			flexDirection: 'row',
174			height: 100,
175			justifyContent: 'center',
176			alignItems: 'center'
177			},
178
179			prepaidButton: {
180			backgroundColor: 'cornflowerblue',
181			width: '90%',
182			height: 50,
183			borderRadius: 50,
184			display: 'flex',
185			justifyContent: 'center',
186			alignItems: 'center',
187			marginTop: 30,
188			},
189
190			saveButton: {
191			width: 60,
192			height: 50,
193			display: 'flex',
194			justifyContent: 'center',
195			alignItems: 'center',
196			},
197
198			saveText: {
199			color: 'cornflowerblue',
200			fontSize: 18,
201			fontWeight: '500'
202			},
203
204			inputContainer: {
205			width: '100%',
206			height: '65%',
207			alignItems: 'center'
208			},
209
210			infoContainer: {
211			width: '100%',
212			height: 900,
213			alignItems: 'center',
214			justifyContent: 'center',
215			},
216
217			buttonContainer: {
218			width: '100%',
219			alignItems: 'center',
220			justifyContent: 'center'
221			},
222
223
224			prepaidContainer: {
225			width: '90%',
226			height: '30%',
227			alignItems: 'center',
228			justifyContent: 'center',
229			borderTopWidth: 1,
230			borderBottomWidth: 1,
231			borderColor: 'grey',
232			},
233
234			buttonText: {
235			color: 'white'
236			},
237
238			backButton: {
239			width: 40,
240			height: 40,
241			backgroundColor: 'white',
242			borderRadius: 25,
243			borderWidth: 1,
244			borderColor: 'gray',
245			alignItems: 'center',
246			justifyContent: 'center'
247			},
248
249			closeButton: {
250			width: 25,
251			height: 25,
252			backgroundColor: 'white',
253			borderRadius: 25,
254			borderWidth: 1,
255			borderColor: 'gray',
256			alignItems: 'center',
257			justifyContent: 'center'
258			},
259
260			title: {
261			fontWeight: 'bold',
262			fontSize: 20,
263			width: '70%',
264			textAlign: 'center'
265			// marginBottom: 30
266			},
267
268			balance: {
269			fontWeight: 'bold',
270			fontSize: 50
271			},
272
273			info: {
274			fontSize: 15,
275			width: '80%',
276			color: 'gray',
277			textAlign: 'center'
278			},
279
280			prepaidInfo: {
281			fontWeight: 'bold',
282			fontSize: 18
283			},
284
285			shadowProp: {
286			elevation: 5,
287			shadowColor: 'black'
288			},
289
290			modalContainer: {
291			backgroundColor: 'rgba(220, 220, 220, 0.6)',
292			width: '100%',
293			height: '100%',
294			flex: 1,
295			},
296
297			modalMessage: {
298			backgroundColor: 'white',
299			width: '100%',
300			height: 200,
301			justifyContent: 'center',
302			alignItems: 'center',
303			borderRadius: 25
304			},
305
306			input: {
307			// backgroundColor: 'red',
308			width: '90%',
309			marginBottom: 30,
310			borderRadius: 10,
311			height: 50,
312			padding: 10,
313			borderBottomWidth: 2,
314			borderColor: 'gray',
315			},
316
317
318			});

FalkenDev / SparkRentals-Mobile-App

Pull Request — dev (#9)

Profile.tsx ➔ Profile C

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like