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

Passed

Pull Request — dev (#7)

by Oscar

created 2023-01-03 09:34 UTC

Wallet.tsx ➔ Wallet B

↳ Parent: components/drawer/Wallet.tsx

Complexity

Conditions

Size

Total Lines	89
Code Lines	77

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	77
dl	0
loc	89
rs	7.7527
c	0
b	0
f	0
cc	3

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 Icon from 'react-native-vector-icons/Octicons';

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

    //Get balance for logged in user
    useEffect(() => {
        async function getBalance(): Promise<void> {
            const result = await userModel.getBalance();
            setBalance(result);

        };
        getBalance();
    });

    async function addBalance() {
        setModalVisible(false);
        const result = await userModel.addFunds(prepaid);
        const updatedBalance = await userModel.getBalance();
        console.log(updatedBalance);
        
        setBalance(updatedBalance);
    };

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


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

                <Text style={styles.title}>Your Balance</Text>
                <Text style={styles.balance}>{balance} kr</Text>
                <Text style={styles.info}>You should have at least SEK 30 in your wallet to start the journey</Text>
            </View>
            
            <View style={styles.prepaidContainer}>
                <Text style={styles.prepaidInfo}>Use prepaid card to deposit money</Text>
                <Pressable style={[styles.prepaidButton, styles.shadowProp]} onPress={() => setModalVisible(true)}> 
                    <Text style={styles.buttonText} > Use prepaid card </Text> 
                </Pressable>
            </View>

            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => {
                setModalVisible(!modalVisible);
                }}
            >
                <View style={styles.modalContainer}></View>
                <View style={styles.modalMessage}>

                <View style={styles.modalCloseContainer}>

                    <Pressable style={[styles.closeButton, styles.shadowProp]} onPress={() => setModalVisible(false)}>
                        <Icon 
                            name='x' 
                            size={15} 
                            color='black'
                        />
                    </Pressable>

                </View>

                    <TextInput
                    placeholder="Enter prepaid card number"
                    style={styles.input}
                    keyboardType="email-address"
                    onChangeText={(content: string) => {
                        setPrepaid(content)
                    }}

                    onSubmitEditing={() => addBalance()
                    }
                    />
                </View>
            </Modal>
            

        </View>
    )
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
    //   backgroundColor: 'red',
      alignItems: 'center',
    //   justifyContent: 'space-evenly',
      height: '50%',
      width: '100%'
    },

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

    infoContainer: {
        width: '100%',
        height: '50%',
        alignItems: 'center',
        justifyContent: 'space-evenly',
        // backgroundColor: 'blue',

    },

    prepaidContainer: {
        width: '90%',
        height: '30%',
        alignItems: 'center',
        justifyContent: 'center',
        // padding: 20,
        // flex: 2,
        // backgroundColor: 'red',
        borderTopWidth: 1,
        borderBottomWidth: 1,
        borderColor: 'grey',
    },

    buttonText: {
        color: 'white'
    },

    backButton: {
        position: 'absolute',
        width: 40,
        height: 40, 
        left: 20,
        backgroundColor: 'white',
        top: 50,
        borderRadius: 25,
        borderWidth: 1,
        borderColor: 'gray',
        alignItems: 'center',
        justifyContent: 'center'
    },
    modalCloseContainer: {
        width: '90%',
        alignItems: 'flex-end',
    },

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

    title: {
        fontWeight: 'bold',
        fontSize: 20
    },

    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: '25%',
        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 Icon from 'react-native-vector-icons/Octicons';
7
8			export default function Wallet({navigation}): any {
9			const [balance, setBalance] = useState(null);
10			const [modalVisible, setModalVisible] = useState(false);
11			const [prepaid, setPrepaid] = useState(null);
12
13			//Get balance for logged in user
14			useEffect(() => {
15			async function getBalance(): Promise<void> {
16			const result = await userModel.getBalance();
17			setBalance(result);
18
19			};
20			getBalance();
21			});
22
23			async function addBalance() {
24			setModalVisible(false);
25			const result = await userModel.addFunds(prepaid);
26			const updatedBalance = await userModel.getBalance();
27			console.log(updatedBalance);
28
29			setBalance(updatedBalance);
30			};
31
32			return (
33			<View style={styles.container}>
34
35
36			<View style={[styles.infoContainer]}>
37			<Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => navigation.navigate('Map')}>
38			<Icon
39			name='x'
40			size={25}
41			color='black'
42			/>
43			</Pressable>
44
45			<Text style={styles.title}>Your Balance</Text>
46			<Text style={styles.balance}>{balance} kr</Text>
47			<Text style={styles.info}>You should have at least SEK 30 in your wallet to start the journey</Text>
48			</View>
49
50			<View style={styles.prepaidContainer}>
51			<Text style={styles.prepaidInfo}>Use prepaid card to deposit money</Text>
52			<Pressable style={[styles.prepaidButton, styles.shadowProp]} onPress={() => setModalVisible(true)}>
53			<Text style={styles.buttonText} > Use prepaid card </Text>
54			</Pressable>
55			</View>
56
57			<Modal
58			animationType="slide"
59			transparent={true}
60			visible={modalVisible}
61			onRequestClose={() => {
62			setModalVisible(!modalVisible);
63			}}
64			>
65			<View style={styles.modalContainer}></View>
66			<View style={styles.modalMessage}>
67
68			<View style={styles.modalCloseContainer}>
69
70			<Pressable style={[styles.closeButton, styles.shadowProp]} onPress={() => setModalVisible(false)}>
71			<Icon
72			name='x'
73			size={15}
74			color='black'
75			/>
76			</Pressable>
77
78			</View>
79
80			<TextInput
81			placeholder="Enter prepaid card number"
82			style={styles.input}
83			keyboardType="email-address"
84			onChangeText={(content: string) => {
85			setPrepaid(content)
86			}}
87
88			onSubmitEditing={() => addBalance()
89			}
90			/>
91			</View>
92			</Modal>
93
94
95			</View>
96			)
97			}
98
99			const styles = StyleSheet.create({
100			container: {
101			flex: 1,
102			backgroundColor: '#fff',
103			// backgroundColor: 'red',
104			alignItems: 'center',
105			// justifyContent: 'space-evenly',
106			height: '50%',
107			width: '100%'
108			},
109
110			prepaidButton: {
111			backgroundColor: 'cornflowerblue',
112			width: '90%',
113			height: 50,
114			borderRadius: 50,
115			display: 'flex',
116			justifyContent: 'center',
117			alignItems: 'center',
118			marginTop: 30,
119			},
120
121			infoContainer: {
122			width: '100%',
123			height: '50%',
124			alignItems: 'center',
125			justifyContent: 'space-evenly',
126			// backgroundColor: 'blue',
127
128			},
129
130			prepaidContainer: {
131			width: '90%',
132			height: '30%',
133			alignItems: 'center',
134			justifyContent: 'center',
135			// padding: 20,
136			// flex: 2,
137			// backgroundColor: 'red',
138			borderTopWidth: 1,
139			borderBottomWidth: 1,
140			borderColor: 'grey',
141			},
142
143			buttonText: {
144			color: 'white'
145			},
146
147			backButton: {
148			position: 'absolute',
149			width: 40,
150			height: 40,
151			left: 20,
152			backgroundColor: 'white',
153			top: 50,
154			borderRadius: 25,
155			borderWidth: 1,
156			borderColor: 'gray',
157			alignItems: 'center',
158			justifyContent: 'center'
159			},
160			modalCloseContainer: {
161			width: '90%',
162			alignItems: 'flex-end',
163			},
164
165			closeButton: {
166			width: 25,
167			height: 25,
168			backgroundColor: 'white',
169			borderRadius: 25,
170			borderWidth: 1,
171			borderColor: 'gray',
172			alignItems: 'center',
173			justifyContent: 'center'
174			},
175
176			title: {
177			fontWeight: 'bold',
178			fontSize: 20
179			},
180
181			balance: {
182			fontWeight: 'bold',
183			fontSize: 50
184			},
185
186			info: {
187			fontSize: 15,
188			width: '80%',
189			color: 'gray',
190			textAlign: 'center'
191			},
192
193			prepaidInfo: {
194			fontWeight: 'bold',
195			fontSize: 18
196			},
197
198			shadowProp: {
199			elevation: 5,
200			shadowColor: 'black'
201			},
202
203			modalContainer: {
204			backgroundColor: 'rgba(220, 220, 220, 0.6)',
205			width: '100%',
206			height: '100%',
207			flex: 1,
208			},
209
210			modalMessage: {
211			backgroundColor: 'white',
212			width: '100%',
213			height: '25%',
214			justifyContent: 'center',
215			alignItems: 'center',
216			borderRadius: 25
217			},
218
219			input: {
220			// backgroundColor: 'red',
221			width: '90%',
222			marginBottom: 30,
223			borderRadius: 10,
224			height: 50,
225			padding: 10,
226			borderBottomWidth: 2,
227			borderColor: 'gray'
228			},
229			});

FalkenDev / SparkRentals-Mobile-App

Pull Request — dev (#7)

Wallet.tsx ➔ Wallet B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like