History.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

History.tsx ➔ Wallet B

↳ Parent: components/drawer/History.tsx

Complexity

Conditions

Size

Total Lines	60
Code Lines	53

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	53
dl	0
loc	60
rs	8.5381
c	0
b	0
f	0
cc	2

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, ScrollView} from 'react-native';
import userModel from '../../models/user';
import Icon from 'react-native-vector-icons/Octicons';
import mapModel from '../../models/map';
import HistoryMap from './HistoryMap';

export default function Wallet({navigation}): any {
    const [history, setHistory] = useState([]);
    const [modalVisible, setModalVisible] = useState(false);
    const [currentJourney, setCurrentJourney] = useState(null);

        // Get balance for logged in user
        useEffect(() => {
            async function getHistory(): Promise<void> {
                const result = await userModel.getHistory();
                setHistory(result);
                
            };
            getHistory();
        }, []);

    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}>Ride History</Text>
            </View>
            
            <ScrollView style={styles.prepaidContainer}>
                {history.map((h, index) => (
                <Pressable onPress={() => {
                    setCurrentJourney(h)
                    setModalVisible(true)
                }}
                key={index}
                >
                <View style={styles.rideHistory}>

                    <View style={styles.primaryInfo}>
                        <Text style={styles.textDistance}>
                            {mapModel.calcDistance(h.startPosition[0], h.startPosition[1], h.endPosition[0], h.endPosition[1])} km / {h.totalMin} min 
                        </Text>
                        <Text style={styles.textCost}>{h.totalPrice} kr</Text>
                    </View>
                    
                    <View style={styles.secondaryInfo}>
                        <Text style={styles.textDate}>{h.date}</Text>
                    </View>
                </View>
                </Pressable>
                ))}
            </ScrollView>
            

                <HistoryMap navigation={navigation} journey={currentJourney} modalVisible={modalVisible} setModalVisible={setModalVisible}></HistoryMap>
                
        </View>
    )
}

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

    rideHistory: {
        // backgroundColor: 'red',
        width: '100%',
        flexDirection: 'column',
        marginBottom: 20,
        borderBottomWidth: 1,
        padding: 5,
        borderBottomColor: 'grey',
        // height: '100%'
        // justifyContent: 'space-around'
    },

    textDistance: {
        textAlign: 'left',
        fontWeight: '600',
        fontSize: 16,
    },

    textCost: {
        textAlign: 'right',
        fontWeight: '600',
        fontSize: 16
    },

    textDate: {
        width: '100%',
        color: 'grey'
    },



    primaryInfo: {
        justifyContent: 'space-between',
        width: '100%',
        flexDirection: 'row'
    },

    secondaryInfo: {
        justifyContent: 'flex-start',
        width: '100%',
        marginBottom: 10
    },


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

    },

    prepaidContainer: {
        width: '90%',
        height: '90%',
        // backgroundColor: 'red'
        // 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, ScrollView} from 'react-native';
5			import userModel from '../../models/user';
6			import Icon from 'react-native-vector-icons/Octicons';
7			import mapModel from '../../models/map';
8			import HistoryMap from './HistoryMap';
9
10			export default function Wallet({navigation}): any {
11			const [history, setHistory] = useState([]);
12			const [modalVisible, setModalVisible] = useState(false);
13			const [currentJourney, setCurrentJourney] = useState(null);
14
15			// Get balance for logged in user
16			useEffect(() => {
17			async function getHistory(): Promise<void> {
18			const result = await userModel.getHistory();
19			setHistory(result);
20
21			};
22			getHistory();
23			}, []);
24
25			return (
26			<View style={styles.container}>
27
28			<View style={[styles.infoContainer]}>
29			<Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => navigation.navigate('Map')}>
30			<Icon
31			name='x'
32			size={25}
33			color='black'
34			/>
35			</Pressable>
36
37			<Text style={styles.title}>Ride History</Text>
38			</View>
39
40			<ScrollView style={styles.prepaidContainer}>
41			{history.map((h, index) => (
42			<Pressable onPress={() => {
43			setCurrentJourney(h)
44			setModalVisible(true)
45			}}
46			key={index}
47			>
48			<View style={styles.rideHistory}>
49
50			<View style={styles.primaryInfo}>
51			<Text style={styles.textDistance}>
52			{mapModel.calcDistance(h.startPosition[0], h.startPosition[1], h.endPosition[0], h.endPosition[1])} km / {h.totalMin} min
53			</Text>
54			<Text style={styles.textCost}>{h.totalPrice} kr</Text>
55			</View>
56
57			<View style={styles.secondaryInfo}>
58			<Text style={styles.textDate}>{h.date}</Text>
59			</View>
60			</View>
61			</Pressable>
62			))}
63			</ScrollView>
64
65
66			<HistoryMap navigation={navigation} journey={currentJourney} modalVisible={modalVisible} setModalVisible={setModalVisible}></HistoryMap>
67
68			</View>
69			)
70			}
71
72			const styles = StyleSheet.create({
73			container: {
74			flex: 1,
75			backgroundColor: '#fff',
76			// backgroundColor: 'red',
77			alignItems: 'center',
78			// justifyContent: 'space-evenly',
79			height: '50%',
80			width: '100%'
81			},
82
83			rideHistory: {
84			// backgroundColor: 'red',
85			width: '100%',
86			flexDirection: 'column',
87			marginBottom: 20,
88			borderBottomWidth: 1,
89			padding: 5,
90			borderBottomColor: 'grey',
91			// height: '100%'
92			// justifyContent: 'space-around'
93			},
94
95			textDistance: {
96			textAlign: 'left',
97			fontWeight: '600',
98			fontSize: 16,
99			},
100
101			textCost: {
102			textAlign: 'right',
103			fontWeight: '600',
104			fontSize: 16
105			},
106
107			textDate: {
108			width: '100%',
109			color: 'grey'
110			},
111
112
113
114			primaryInfo: {
115			justifyContent: 'space-between',
116			width: '100%',
117			flexDirection: 'row'
118			},
119
120			secondaryInfo: {
121			justifyContent: 'flex-start',
122			width: '100%',
123			marginBottom: 10
124			},
125
126
127			infoContainer: {
128			width: '100%',
129			height: '20%',
130			alignItems: 'center',
131			justifyContent: 'space-evenly',
132			// backgroundColor: 'blue',
133
134			},
135
136			prepaidContainer: {
137			width: '90%',
138			height: '90%',
139			// backgroundColor: 'red'
140			// alignItems: 'center',
141			// justifyContent: 'center',
142			// padding: 20,
143			// flex: 2,
144			// backgroundColor: 'red',
145			// borderTopWidth: 1,
146			// borderBottomWidth: 1,
147			// borderColor: 'grey',
148			},
149
150			buttonText: {
151			color: 'white'
152			},
153
154			backButton: {
155			position: 'absolute',
156			width: 40,
157			height: 40,
158			left: 20,
159			backgroundColor: 'white',
160			top: 50,
161			borderRadius: 25,
162			borderWidth: 1,
163			borderColor: 'gray',
164			alignItems: 'center',
165			justifyContent: 'center'
166			},
167			modalCloseContainer: {
168			width: '90%',
169			alignItems: 'flex-end',
170			},
171
172			closeButton: {
173			width: 25,
174			height: 25,
175			backgroundColor: 'white',
176			borderRadius: 25,
177			borderWidth: 1,
178			borderColor: 'gray',
179			alignItems: 'center',
180			justifyContent: 'center'
181			},
182
183			title: {
184			fontWeight: 'bold',
185			fontSize: 20
186			},
187
188			balance: {
189			fontWeight: 'bold',
190			fontSize: 50
191			},
192
193			info: {
194			fontSize: 15,
195			width: '80%',
196			color: 'gray',
197			textAlign: 'center'
198			},
199
200			prepaidInfo: {
201			fontWeight: 'bold',
202			fontSize: 18
203			},
204
205			shadowProp: {
206			elevation: 5,
207			shadowColor: 'black'
208			},
209
210			modalContainer: {
211			backgroundColor: 'rgba(220, 220, 220, 0.6)',
212			width: '100%',
213			height: '100%',
214			flex: 1,
215			},
216
217			modalMessage: {
218			backgroundColor: 'white',
219			width: '100%',
220			height: '25%',
221			justifyContent: 'center',
222			alignItems: 'center',
223			borderRadius: 25
224			},
225
226			input: {
227			// backgroundColor: 'red',
228			width: '90%',
229			marginBottom: 30,
230			borderRadius: 10,
231			height: 50,
232			padding: 10,
233			borderBottomWidth: 2,
234			borderColor: 'gray'
235			},
236			});

FalkenDev / SparkRentals-Mobile-App

Pull Request — dev (#7)

History.tsx ➔ Wallet B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like