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

Passed

Push — dev ( 77c210...6b7bf7 )

by Kasper

created 2023-01-12 17:41 UTC

ScooterModal.tsx ➔ ScooterModal C

↳ Parent: components/modals/ScooterModal.tsx

Complexity

Conditions

Size

Total Lines	101
Code Lines	83

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	83
dl	0
loc	101
rs	6.623
c	0
b	0
f	0
cc	6

How to fix Long Method

import React from "react";
import { useState, useEffect } from 'react';
import { View, Text, Button, Pressable, StyleSheet, Image, Modal } from "react-native";
import GestureRecognizer from 'react-native-swipe-gestures';
import scooterModel from "../../models/scooter";
import { showMessage, hideMessage } from "react-native-flash-message";


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'
    }
};

export default function ScooterModal({navigation, scooter, modalVisible, setModalVisible, currentCity, setJourneyModal, setToggleTimer, position, setCurrentScooter}) {
    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 [scooterPosition, setScooterPosition] = useState(null);
    // const [currentScooter, setCurrentScooter] = useState(null);

    
    async function getScooterInfo(): Promise<void> {            
        if (scooter) {
            const title = scooter['name'].split('#');
            const getScooter = await scooterModel.getSpecificScooter(scooter['_id']);
            setScooterName(title[0]);
            setScooterNumber(title[1]);
            setBattery(getBattery(scooter['battery']));
            setScooterId(scooter['_id']);
            setScooterPosition(scooter['coordinates']);
            setFixedRate(currentCity['taxRates']['fixedRate']);
            setTimeRate(currentCity['taxRates']['timeRate']);
            setCurrentScooter(getScooter['scooter'])
        }
    }

    useEffect(() => {
        const interval = setInterval(() => {

            modalVisible ? getScooterInfo() : null;

        }, 100);
        return () => clearInterval(interval);
      });



    async function startJourney() {                
        const result = await scooterModel.startScooter(scooterId, position, scooterPosition);
        setToggleTimer(true);

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

            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();
                }}>
                    <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: {
        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,
    },

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

    scooterTitle: {
        fontWeight: 'bold',
        marginBottom: 10,
        fontSize: 16
    },
    
    battery: {
        marginLeft: 5,
    },

    scooterImage: {
        margin: 10
    },

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

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

FalkenDev / SparkRentals-Mobile-App

Push — dev ( 77c210...6b7bf7 )

ScooterModal.tsx ➔ ScooterModal C

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like