components/drawer/Profile.tsx - Code Metrics - FalkenDev/SparkRentals-Mobile-App - Measure and Improve Code Quality continuously with Scrutinizer

components/drawer/Profile.tsx A
last analyzed 2023-01-12 17:40 UTC

↳ Parent: Project

Complexity

Total Complexity	6
Complexity/F	1.2

Size

Lines of Code	315
Function Count	5

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
wmc	6
eloc	265
mnd	1
bc	1
fnc	5
dl	0
loc	315
rs	10
bpm	0.2
cpm	1.2
noi	0
c	0
b	0
f	0

1 Function

Rating	Name	Duplication	Size	Complexity
C	Profile.tsx ➔ Profile	0	147	6

import React from 'react';
import { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Pressable, Modal, TextInput, Dimensions} 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';
const deviceHeight = Dimensions.get('window').height;


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',
                position: 'bottom'
            })

            return;
        };

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

    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%',

    },

    titleContainer: {
        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: deviceHeight ,
        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'
    },

    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: {
        width: '90%',
        marginBottom: 30,
        borderRadius: 10,
        height: 50,
        padding: 10,
        borderBottomWidth: 2,
        borderColor: 'gray',
    },


});

1			import React from 'react';
2			import { useState, useEffect } from 'react';
3			import { StyleSheet, Text, View, Pressable, Modal, TextInput, Dimensions} from 'react-native';
4			import userModel from '../../models/user';
5			import authModel from '../../models/auth';
6			import Icon from 'react-native-vector-icons/Octicons';
7			import { showMessage, hideMessage } from "react-native-flash-message";
8			import DeleteModal from '../modals/DeleteModal';
9			const deviceHeight = Dimensions.get('window').height;
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			position: 'bottom'
70			})
71
72			return;
73			};
74
75			showMessage({
76			message: result['message'],
77			type: 'success',
78			position: 'bottom'
79			});
80			};
81
82			return (
83			<View style={styles.container}>
84
85
86			<View style={[styles.infoContainer]}>
87
88			<View style={styles.titleContainer}>
89
90			<Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => navigation.navigate('Map')}>
91			<Icon
92			name='x'
93			size={25}
94			color='black'
95			/>
96			</Pressable>
97
98			<Text style={styles.title}>Profile</Text>
99
100			<Pressable style={styles.saveButton} onPress={() => save()}>
101			<Text style={styles.saveText}>Save</Text>
102			</Pressable>
103
104			</View>
105
106
107
108
109			<View style={styles.inputContainer}>
110
111
112			<TextInput
113			value={`${firstname} ${lastname}`}
114			style={styles.input}
115			onChangeText={(content: string) => {
116			setFirstLastName(content)
117			}}
118
119			/>
120
121			<TextInput
122			value={email}
123			style={styles.input}
124			keyboardType="email-address"
125			onChangeText={(content: string) => {
126			setEmail(content);
127			}}
128			/>
129
130
131			<TextInput
132			value={phonenumber}
133			style={styles.input}
134			keyboardType="phone-pad"
135			onChangeText={(content: string) => {
136			setPhonenumber(content);
137			}}
138			/>
139			</View>
140
141			<View style={styles.buttonContainer}>
142			<Pressable style={styles.prepaidButton} onPress={logout}>
143			<Text>Logout</Text>
144			</Pressable>
145
146			<Pressable style={[styles.prepaidButton, {backgroundColor: 'tomato'}]} onPress={() => {
147			setModalVisible(!modalVisible);
148			}}>
149			<Text>Delete account</Text>
150			</Pressable>
151			</View>
152
153			</View>
154
155			<DeleteModal navigation={navigation} modalVisible={modalVisible} setModalVisible={setModalVisible} setIsLoggedIn={setIsLoggedIn}></DeleteModal>
156			</View>
157			)
158			}
159
160			const styles = StyleSheet.create({
161			container: {
162			flex: 1,
163			backgroundColor: '#fff',
164			alignItems: 'center',
165			height: '50%',
166			width: '100%',
167
168			},
169
170			titleContainer: {
171			width: '100%',
172			flexDirection: 'row',
173			height: 100,
174			justifyContent: 'center',
175			alignItems: 'center'
176			},
177
178			prepaidButton: {
179			backgroundColor: 'cornflowerblue',
180			width: '90%',
181			height: 50,
182			borderRadius: 50,
183			display: 'flex',
184			justifyContent: 'center',
185			alignItems: 'center',
186			marginTop: 30,
187			},
188
189			saveButton: {
190			width: 60,
191			height: 50,
192			display: 'flex',
193			justifyContent: 'center',
194			alignItems: 'center',
195			},
196
197			saveText: {
198			color: 'cornflowerblue',
199			fontSize: 18,
200			fontWeight: '500'
201			},
202
203			inputContainer: {
204			width: '100%',
205			height: '65%',
206			alignItems: 'center'
207			},
208
209			infoContainer: {
210			width: '100%',
211			height: deviceHeight ,
212			alignItems: 'center',
213			justifyContent: 'center',
214			},
215
216			buttonContainer: {
217			width: '100%',
218			alignItems: 'center',
219			justifyContent: 'center'
220			},
221
222
223			prepaidContainer: {
224			width: '90%',
225			height: '30%',
226			alignItems: 'center',
227			justifyContent: 'center',
228			borderTopWidth: 1,
229			borderBottomWidth: 1,
230			borderColor: 'grey',
231			},
232
233			buttonText: {
234			color: 'white'
235			},
236
237			backButton: {
238			width: 40,
239			height: 40,
240			backgroundColor: 'white',
241			borderRadius: 25,
242			borderWidth: 1,
243			borderColor: 'gray',
244			alignItems: 'center',
245			justifyContent: 'center'
246			},
247
248			closeButton: {
249			width: 25,
250			height: 25,
251			backgroundColor: 'white',
252			borderRadius: 25,
253			borderWidth: 1,
254			borderColor: 'gray',
255			alignItems: 'center',
256			justifyContent: 'center'
257			},
258
259			title: {
260			fontWeight: 'bold',
261			fontSize: 20,
262			width: '70%',
263			textAlign: 'center'
264			},
265
266			balance: {
267			fontWeight: 'bold',
268			fontSize: 50
269			},
270
271			info: {
272			fontSize: 15,
273			width: '80%',
274			color: 'gray',
275			textAlign: 'center'
276			},
277
278			prepaidInfo: {
279			fontWeight: 'bold',
280			fontSize: 18
281			},
282
283			shadowProp: {
284			elevation: 5,
285			shadowColor: 'black'
286			},
287
288			modalContainer: {
289			backgroundColor: 'rgba(220, 220, 220, 0.6)',
290			width: '100%',
291			height: '100%',
292			flex: 1,
293			},
294
295			modalMessage: {
296			backgroundColor: 'white',
297			width: '100%',
298			height: 200,
299			justifyContent: 'center',
300			alignItems: 'center',
301			borderRadius: 25
302			},
303
304			input: {
305			width: '90%',
306			marginBottom: 30,
307			borderRadius: 10,
308			height: 50,
309			padding: 10,
310			borderBottomWidth: 2,
311			borderColor: 'gray',
312			},
313
314
315			});

FalkenDev / SparkRentals-Mobile-App

components/drawer/Profile.tsx A last analyzed 2023-01-12 17:40 UTC

Complexity

Size

Duplication

Importance

1 Function

Duplication Side-by-Side

Filter issues like

components/drawer/Profile.tsx A
last analyzed 2023-01-12 17:40 UTC