ScooterModal.tsx ➔ ScooterModal - Code Metrics - Inspection of "Merge pull request #8 from FalkenDev/9" - FalkenDev/SparkRentals-Mobile-App - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — dev ( 960b6d...f9a638 )

by Kasper

created 2023-01-06 19:01 UTC

ScooterModal.tsx ➔ ScooterModal D

↳ Parent: components/modals/ScooterModal.tsx

Complexity

Conditions

Size

Total Lines	108
Code Lines	93

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	93
dl	0
loc	108
rs	4.8957
c	0
b	0
f	0
cc	9

How to fix Long Method

import { stopLocationUpdatesAsync } from "expo-location";
import React from "react";
import { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, Pressable, StyleSheet, Image, StatusBar, Modal } from "react-native";
import mapModel from "../../models/map";
import GestureRecognizer from 'react-native-swipe-gestures';
import scooterModel from "../../models/scooter";
import { start } from "react-native-compass-heading";
import { showMessage, hideMessage } from "react-native-flash-message";

export default function ScooterModal({navigation, scooter, modalVisible, setModalVisible, currentCity, setJourneyModal, setToggleTimer}) {
    const [scooterName, setScooterName] = useState(null);
    const [scooterNumber, setScooterNumber] = useState(null);
    const [battery, setBattery] = useState(null);
    const [fixedRate, setFixedRate] = useState(null);
    const [timeRate, setTimeRate] = useState(null);
    const [scooterId, setScooterId] = useState(null);

    const batteryImages = {
        '100': require('../../assets/battery_100.png'),
        '75': require('../../assets/battery_75.png'),
        '50': require('../../assets/battery_50.png'),
        '25': require('../../assets/battery_25.png')
    }

    function getBattery(batteryPercentage) {
        if (batteryPercentage >= 75) {
            return '100'
        } else if (batteryPercentage >= 50) {
            return '75'
        } else if (batteryPercentage >= 25) {
            return '50'
        } else {
            return '25'
        }
    };

    useEffect(() => {
        function getScooterInfo(): void {            
            if (scooter) {
                const title = scooter['name'].split('#');
                setScooterName(title[0]);
                setScooterNumber(title[1]);
                setBattery(getBattery(scooter['battery']));
                setScooterId(scooter['_id']);

                setFixedRate(currentCity['taxRates']['fixedRate']);
                setTimeRate(currentCity['taxRates']['timeRate']);                
            }
        }
        getScooterInfo();
    });


    async function startJourney() {
        const result = await scooterModel.startScooter(scooterId);

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

            return;
        };

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

        setModalVisible(!modalVisible);
        setJourneyModal(true);
    };

    return (
        <GestureRecognizer
            style={{flex: 1}}
            onSwipeDown={ () => setModalVisible(false) }
        >
        <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
            setModalVisible(!modalVisible)
        }}

        >
            <View style={styles.modalContainer}></View>


            <View style={styles.modalMessage}>
            <View style={styles.swipeButton}></View>

                <View style={styles.titleContainer}>
                    <Image style={styles.scooterImage} source={require('../../assets/scooter2.png')}></Image>

                    <View style={styles.textContainer}>
                        <Text style={styles.scooterTitle}> {scooterName} {scooterNumber}</Text>
                        <Image style={styles.battery} source={batteryImages[`${battery}`]}></Image>
                    </View>

                </View>
 
                <Pressable style={styles.tourButton} onPress={() => {
                    startJourney();
                    setToggleTimer(true);
                }}>
                    <Text style={{color: 'white'}}>Start tour</Text>
                </Pressable>

                <Text style={{color: 'grey'}}> {fixedRate} kr unlocking + {timeRate} kr / min. </Text>
                
            </View>
        </Modal>
    </GestureRecognizer>
    )
}

const styles = StyleSheet.create({
    modalContainer: {
        // backgroundColor: 'rgba(80, 80, 80, 0.6)',
        width: '100%',
        height: '100%',
        flex: 1,
    },

    titleContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
        marginTop: 30
    },

    swipeButton: {
        width: '25%',
        height: 5,
        backgroundColor: 'lightgrey',
        borderRadius: 25
    },

    textContainer: {
        width: '45%',
        marginBottom: 10,
        // padding: 0
        // alignItems: 'center'
        // flexDirection: 'row'
    },

    modalMessage: {
        backgroundColor: 'white',
        width: '100%',
        height: '30%',
        justifyContent: 'flex-start',
        alignItems: 'center',
        paddingTop: 10,
        // flexDirection: 'row'
        borderTopLeftRadius: 25,
        borderTopRightRadius: 25
    },

    scooterTitle: {
        fontWeight: 'bold',
        marginBottom: 10,
        fontSize: 16
    },
    
    battery: {
        marginLeft: 5,
        // width: 15,
        // height: 28
    },

    scooterImage: {
        margin: 10
    },

    tourButton: {
        backgroundColor: 'cornflowerblue',
        width: '80%',
        height: 50,
        borderRadius: 10,
        // display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 10
        // marginTop: 120,
    },
})

1			import { stopLocationUpdatesAsync } from "expo-location";
2			import React from "react";
3			import { useState, useEffect } from 'react';
4			import { View, Text, TextInput, Button, Pressable, StyleSheet, Image, StatusBar, Modal } from "react-native";
5			import mapModel from "../../models/map";
6			import GestureRecognizer from 'react-native-swipe-gestures';
7			import scooterModel from "../../models/scooter";
8			import { start } from "react-native-compass-heading";
9			import { showMessage, hideMessage } from "react-native-flash-message";
10
11			export default function ScooterModal({navigation, scooter, modalVisible, setModalVisible, currentCity, setJourneyModal, setToggleTimer}) {
12			const [scooterName, setScooterName] = useState(null);
13			const [scooterNumber, setScooterNumber] = useState(null);
14			const [battery, setBattery] = useState(null);
15			const [fixedRate, setFixedRate] = useState(null);
16			const [timeRate, setTimeRate] = useState(null);
17			const [scooterId, setScooterId] = useState(null);
18
19			const batteryImages = {
20			'100': require('../../assets/battery_100.png'),
21			'75': require('../../assets/battery_75.png'),
22			'50': require('../../assets/battery_50.png'),
23			'25': require('../../assets/battery_25.png')
24			}
25
26			function getBattery(batteryPercentage) {
27			if (batteryPercentage >= 75) {
28			return '100'
29			} else if (batteryPercentage >= 50) {
30			return '75'
31			} else if (batteryPercentage >= 25) {
32			return '50'
33			} else {
34			return '25'
35			}
36			};
37
38			useEffect(() => {
39			function getScooterInfo(): void {
40			if (scooter) {
41			const title = scooter['name'].split('#');
42			setScooterName(title[0]);
43			setScooterNumber(title[1]);
44			setBattery(getBattery(scooter['battery']));
45			setScooterId(scooter['_id']);
46
47			setFixedRate(currentCity['taxRates']['fixedRate']);
48			setTimeRate(currentCity['taxRates']['timeRate']);
49			}
50			}
51			getScooterInfo();
52			});
53
54
55			async function startJourney() {
56			const result = await scooterModel.startScooter(scooterId);
57
58			if (Object.prototype.hasOwnProperty.call(result, 'errors')) {
59			showMessage({
60			message: result['errors']['title'],
61			type: 'danger'
62			})
63
64			return;
65			};
66
67			showMessage({
68			message: result['message'],
69			type: 'success'
70			});
71
72			setModalVisible(!modalVisible);
73			setJourneyModal(true);
74			};
75
76			return (
77			<GestureRecognizer
78			style={{flex: 1}}
79			onSwipeDown={ () => setModalVisible(false) }
80			>
81			<Modal
82			animationType="slide"
83			transparent={true}
84			visible={modalVisible}
85			onRequestClose={() => {
86			setModalVisible(!modalVisible)
87			}}
88
89			>
90			<View style={styles.modalContainer}></View>
91
92
93			<View style={styles.modalMessage}>
94			<View style={styles.swipeButton}></View>
95
96			<View style={styles.titleContainer}>
97			<Image style={styles.scooterImage} source={require('../../assets/scooter2.png')}></Image>
98
99			<View style={styles.textContainer}>
100			<Text style={styles.scooterTitle}> {scooterName} {scooterNumber}</Text>
101			<Image style={styles.battery} source={batteryImages[`${battery}`]}></Image>
102			</View>
103
104			</View>
105
106			<Pressable style={styles.tourButton} onPress={() => {
107			startJourney();
108			setToggleTimer(true);
109			}}>
110			<Text style={{color: 'white'}}>Start tour</Text>
111			</Pressable>
112
113			<Text style={{color: 'grey'}}> {fixedRate} kr unlocking + {timeRate} kr / min. </Text>
114
115			</View>
116			</Modal>
117			</GestureRecognizer>
118			)
119			}
120
121			const styles = StyleSheet.create({
122			modalContainer: {
123			// backgroundColor: 'rgba(80, 80, 80, 0.6)',
124			width: '100%',
125			height: '100%',
126			flex: 1,
127			},
128
129			titleContainer: {
130			flexDirection: 'row',
131			alignItems: 'center',
132			marginBottom: 10,
133			marginTop: 30
134			},
135
136			swipeButton: {
137			width: '25%',
138			height: 5,
139			backgroundColor: 'lightgrey',
140			borderRadius: 25
141			},
142
143			textContainer: {
144			width: '45%',
145			marginBottom: 10,
146			// padding: 0
147			// alignItems: 'center'
148			// flexDirection: 'row'
149			},
150
151			modalMessage: {
152			backgroundColor: 'white',
153			width: '100%',
154			height: '30%',
155			justifyContent: 'flex-start',
156			alignItems: 'center',
157			paddingTop: 10,
158			// flexDirection: 'row'
159			borderTopLeftRadius: 25,
160			borderTopRightRadius: 25
161			},
162
163			scooterTitle: {
164			fontWeight: 'bold',
165			marginBottom: 10,
166			fontSize: 16
167			},
168
169			battery: {
170			marginLeft: 5,
171			// width: 15,
172			// height: 28
173			},
174
175			scooterImage: {
176			margin: 10
177			},
178
179			tourButton: {
180			backgroundColor: 'cornflowerblue',
181			width: '80%',
182			height: 50,
183			borderRadius: 10,
184			// display: 'flex',
185			justifyContent: 'center',
186			alignItems: 'center',
187			marginBottom: 10
188			// marginTop: 120,
189			},
190			})

FalkenDev / SparkRentals-Mobile-App

Push — dev ( 960b6d...f9a638 )

ScooterModal.tsx ➔ ScooterModal D

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like