JourneyModal.tsx ➔ JourneyModal - 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

JourneyModal.tsx ➔ JourneyModal D

↳ Parent: components/modals/JourneyModal.tsx

Complexity

Conditions

Size

Total Lines	171
Code Lines	140

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	140
dl	0
loc	171
rs	4.1999
c	0
b	0
f	0
cc	10

How to fix Long Method Complexity

import React from "react";
import { useState, useEffect, useRef } from 'react';
import { View, Text, TextInput, Button, Pressable, StyleSheet, Image, StatusBar, Modal } from "react-native";
import GestureRecognizer from 'react-native-swipe-gestures';
import scooterModel from "../../models/scooter";
import { showMessage, hideMessage } from "react-native-flash-message";
import Icon from 'react-native-vector-icons/Octicons';
import { Stopwatch, Timer } from 'react-native-stopwatch-timer';
import MapView, { Marker, Circle, Polygon } from 'react-native-maps';


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

function getFormattedTime(time) {
    const currentTime = time;
    return currentTime;
};

export default function JourneyModal({navigation, scooter, journeyModal, setJourneyModal, toggleTimer, setToggleTimer}) {
    const [scooterName, setScooterName] = useState(null);
    const [scooterNumber, setScooterNumber] = useState(null);
    const [battery, setBattery] = useState(null);
    const [scooterPosition, setScooterPosition] = useState(null);
    const [scooterId, setScooterId] = useState(null);
    const markerRef = useRef(null);
    const [distance, setDistance] = useState(null);
    const [batteryPercentage, setBatteryPercentage] = useState(null);
    const [currentScooter, setCurrentScooter] = useState(null);



    async function getScooterInfo(): Promise<void> {            
        if (scooter) {            
            const title = scooter['name'].split('#');
            setScooterName(title[0]);
            setScooterNumber(title[1]);
            setBattery(getBattery(scooter['battery']));
            setScooterId(scooter['_id']);
            
            const getScooter = await scooterModel.getSpecificScooter(scooter['_id']);
            
            setCurrentScooter(getScooter);
            
            setScooterPosition(getScooter['scooter']['coordinates']);
            setBatteryPercentage(getScooter['scooter']['battery'].toFixed(1));                        
            setDistance(getScooter['scooter']['trip']['distance'].toFixed(2)); 
            
        }
    };

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

            journeyModal ? getScooterInfo() : null;

            if (markerRef.current) {
                markerRef.current.animateMarkerToCoordinate(scooterPosition, 100);
            };
            
            
        }, 100);
        return () => clearInterval(interval);
      });


    async function stopJourney() {
        const result = await scooterModel.stopScooter(scooterId);

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

        setJourneyModal(!journeyModal)
    };



    return (
        <GestureRecognizer
            style={{flex: 1}}
        >
        <Modal
        animationType="slide"
        transparent={true}
        visible={journeyModal}
        onRequestClose={() => {
        }}

        >
            <View style={styles.modalContainer}></View>
            
            <MapView
                // ref={mapRef}
                style={styles.map}
                region={{
                    latitude: scooterPosition? scooterPosition['latitude'] : 56.161013580817986,
                    longitude: scooterPosition? scooterPosition['longitude'] : 15.587742977884904,
                    latitudeDelta: 0.001,
                    longitudeDelta: 0.001,
                }}
                userInterfaceStyle={'dark'}
            >
                {scooterPosition ? 
                    <Marker
                        ref={markerRef}                        
                        coordinate={scooterPosition}
                        icon={require('../../assets/scooter_green.png')}
                        tappable={true}
                        onPress={() => {                           
                        }}
                        >
                    </Marker> 
                    : 
                    <View></View>
                }

            </MapView>

            <View style={[styles.modalMessage, styles.shadowProp]}>

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

                    <View style={styles.textContainer}>
                        <Text style={styles.scooterTitle}> {scooterName} {scooterNumber}</Text>


                        <View style={styles.travelInfoContainer}>
                            <View style={styles.travelInfo}>
                                <Icon 
                                    name='location' 
                                    size={30} 
                                    color='black'
                                />

                                <Text>{distance} km</Text>
                            </View>
   


                            <View style={styles.travelInfo}>
                                <Icon 
                                    name='clock' 
                                    size={30} 
                                    color='black'
                                />
                                <Stopwatch start={toggleTimer}
                                    options={styles.timer}
                                    getTime={(time) => {                                        
                                        getFormattedTime(time);
                                    }} 
                                />

                            </View>
                        
                            <View style={styles.travelInfo}>
                                <Image style={styles.battery} source={batteryImages[`${battery}`]}></Image>

                                <Text>{batteryPercentage}%</Text>
                            </View>
                    </View>

                    </View>

                </View>
 
                <Pressable style={styles.tourButton} onPress={() => {
                    stopJourney();
                    setToggleTimer(false);
                }}>
                    <Text style={{color: 'black'}}>Finish the ride</Text>
                </Pressable>
                
            </View>
        </Modal>
    </GestureRecognizer>
    )
}

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

    map: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        height: '65%',
    },


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

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

    textContainer: {
        width: '60%',
        marginBottom: 10,
        alignItems: 'center',
    },

    modalMessage: {
        backgroundColor: 'cornflowerblue',
        width: '100%',
        height: '35%',
        justifyContent: 'space-around',
        alignItems: 'center',
        paddingTop: 10,
    },

    scooterTitle: {
        fontWeight: 'bold',
        marginBottom: 10,
        fontSize: 26,
        color: 'white'
    },
    
    battery: {
        marginLeft: 5,
        marginBottom: 15
    },

    scooterImage: {
        margin: 10
    },

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

    timer: {
        backgroundColor: 'white',
    },

    travelInfoContainer: {
        flexDirection: 'row',
        backgroundColor: 'white',
        justifyContent: 'space-evenly',
        width: '100%',
        padding: 10,
        borderRadius: 25
    },

    travelInfo: {
        flexDirection: 'column',
        justifyContent: 'space-around',
        alignItems: 'center',
        height: 75
    },

    shadowProp: {
        elevation: 5,
        shadowColor: 'black'
      },


})

1			import React from "react";
2			import { useState, useEffect, useRef } from 'react';
3			import { View, Text, TextInput, Button, Pressable, StyleSheet, Image, StatusBar, 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			import Icon from 'react-native-vector-icons/Octicons';
8			import { Stopwatch, Timer } from 'react-native-stopwatch-timer';
9			import MapView, { Marker, Circle, Polygon } from 'react-native-maps';
10
11
12			const batteryImages = {
13			'100': require('../../assets/battery_100.png'),
14			'75': require('../../assets/battery_75.png'),
15			'50': require('../../assets/battery_50.png'),
16			'25': require('../../assets/battery_25.png')
17			}
18
19			function getBattery(batteryPercentage) {
20			if (batteryPercentage >= 75) {
21			return '100'
22			} else if (batteryPercentage >= 50) {
23			return '75'
24			} else if (batteryPercentage >= 25) {
25			return '50'
26			} else {
27			return '25'
28			}
29			};
30
31			function getFormattedTime(time) {
32			const currentTime = time;
33			return currentTime;
34			};
35
36			export default function JourneyModal({navigation, scooter, journeyModal, setJourneyModal, toggleTimer, setToggleTimer}) {
37			const [scooterName, setScooterName] = useState(null);
38			const [scooterNumber, setScooterNumber] = useState(null);
39			const [battery, setBattery] = useState(null);
40			const [scooterPosition, setScooterPosition] = useState(null);
41			const [scooterId, setScooterId] = useState(null);
42			const markerRef = useRef(null);
43			const [distance, setDistance] = useState(null);
44			const [batteryPercentage, setBatteryPercentage] = useState(null);
45			const [currentScooter, setCurrentScooter] = useState(null);
46
47
48
49			async function getScooterInfo(): Promise<void> {
50			if (scooter) {
51			const title = scooter['name'].split('#');
52			setScooterName(title[0]);
53			setScooterNumber(title[1]);
54			setBattery(getBattery(scooter['battery']));
55			setScooterId(scooter['_id']);
56
57			const getScooter = await scooterModel.getSpecificScooter(scooter['_id']);
58
59			setCurrentScooter(getScooter);
60
61			setScooterPosition(getScooter['scooter']['coordinates']);
62			setBatteryPercentage(getScooter['scooter']['battery'].toFixed(1));
63			setDistance(getScooter['scooter']['trip']['distance'].toFixed(2));
64
65			}
66			};
67
68			useEffect(() => {
69			const interval = setInterval(() => {
70
71			journeyModal ? getScooterInfo() : null;
72
73			if (markerRef.current) {
74			markerRef.current.animateMarkerToCoordinate(scooterPosition, 100);
75			};
76
77
78			}, 100);
79			return () => clearInterval(interval);
80			});
81
82
83			async function stopJourney() {
84			const result = await scooterModel.stopScooter(scooterId);
85
86			if (Object.prototype.hasOwnProperty.call(result, 'errors')) {
87			showMessage({
88			message: result['errors']['title'],
89			type: 'danger',
90			position: 'bottom'
91			})
92
93			return;
94			};
95
96			showMessage({
97			message: result['message'],
98			type: 'success',
99			position: 'bottom'
100			});
101
102			setJourneyModal(!journeyModal)
103			};
104
105
106
107			return (
108			<GestureRecognizer
109			style={{flex: 1}}
110			>
111			<Modal
112			animationType="slide"
113			transparent={true}
114			visible={journeyModal}
115			onRequestClose={() => {
116			}}
117
118			>
119			<View style={styles.modalContainer}></View>
120
121			<MapView
122			// ref={mapRef}
123			style={styles.map}
124			region={{
125			latitude: scooterPosition? scooterPosition['latitude'] : 56.161013580817986,
126			longitude: scooterPosition? scooterPosition['longitude'] : 15.587742977884904,
127			latitudeDelta: 0.001,
128			longitudeDelta: 0.001,
129			}}
130			userInterfaceStyle={'dark'}
131			>
132			{scooterPosition ?
133			<Marker
134			ref={markerRef}
135			coordinate={scooterPosition}
136			icon={require('../../assets/scooter_green.png')}
137			tappable={true}
138			onPress={() => {
139			}}
140			>
141			</Marker>
142			:
143			<View></View>
144			}
145
146			</MapView>
147
148			<View style={[styles.modalMessage, styles.shadowProp]}>
149
150			<View style={styles.titleContainer}>
151			<Image style={styles.scooterImage} source={require('../../assets/scooter_large_white.png')}></Image>
152
153			<View style={styles.textContainer}>
154			<Text style={styles.scooterTitle}> {scooterName} {scooterNumber}</Text>
155
156
157			<View style={styles.travelInfoContainer}>
158			<View style={styles.travelInfo}>
159			<Icon
160			name='location'
161			size={30}
162			color='black'
163			/>
164
165			<Text>{distance} km</Text>
166			</View>
167
168
169
170			<View style={styles.travelInfo}>
171			<Icon
172			name='clock'
173			size={30}
174			color='black'
175			/>
176			<Stopwatch start={toggleTimer}
177			options={styles.timer}
178			getTime={(time) => {
179			getFormattedTime(time);
180			}}
181			/>
182
183			</View>
184
185			<View style={styles.travelInfo}>
186			<Image style={styles.battery} source={batteryImages[`${battery}`]}></Image>
187
188			<Text>{batteryPercentage}%</Text>
189			</View>
190			</View>
191
192			</View>
193
194			</View>
195
196			<Pressable style={styles.tourButton} onPress={() => {
197			stopJourney();
198			setToggleTimer(false);
199			}}>
200			<Text style={{color: 'black'}}>Finish the ride</Text>
201			</Pressable>
202
203			</View>
204			</Modal>
205			</GestureRecognizer>
206			)
207			}
208
209			const styles = StyleSheet.create({
210			modalContainer: {
211			backgroundColor: 'rgba(80, 80, 80, 0.6)',
212			width: '100%',
213			height: '100%',
214			flex: 1,
215			},
216
217			map: {
218			position: 'absolute',
219			top: 0,
220			left: 0,
221			bottom: 0,
222			right: 0,
223			height: '65%',
224			},
225
226
227			titleContainer: {
228			flexDirection: 'row',
229			alignItems: 'center',
230			marginBottom: 10,
231			marginTop: 30
232			},
233
234			swipeButton: {
235			width: '25%',
236			height: 5,
237			backgroundColor: 'lightgrey',
238			borderRadius: 25
239			},
240
241			textContainer: {
242			width: '60%',
243			marginBottom: 10,
244			alignItems: 'center',
245			},
246
247			modalMessage: {
248			backgroundColor: 'cornflowerblue',
249			width: '100%',
250			height: '35%',
251			justifyContent: 'space-around',
252			alignItems: 'center',
253			paddingTop: 10,
254			},
255
256			scooterTitle: {
257			fontWeight: 'bold',
258			marginBottom: 10,
259			fontSize: 26,
260			color: 'white'
261			},
262
263			battery: {
264			marginLeft: 5,
265			marginBottom: 15
266			},
267
268			scooterImage: {
269			margin: 10
270			},
271
272			tourButton: {
273			backgroundColor: 'white',
274			width: '80%',
275			height: 50,
276			borderRadius: 10,
277			justifyContent: 'center',
278			alignItems: 'center',
279			},
280
281			timer: {
282			backgroundColor: 'white',
283			},
284
285			travelInfoContainer: {
286			flexDirection: 'row',
287			backgroundColor: 'white',
288			justifyContent: 'space-evenly',
289			width: '100%',
290			padding: 10,
291			borderRadius: 25
292			},
293
294			travelInfo: {
295			flexDirection: 'column',
296			justifyContent: 'space-around',
297			alignItems: 'center',
298			height: 75
299			},
300
301			shadowProp: {
302			elevation: 5,
303			shadowColor: 'black'
304			},
305
306
307			})

FalkenDev / SparkRentals-Mobile-App

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

JourneyModal.tsx ➔ JourneyModal D

Complexity

Size

Duplication

Importance

How to fix Long Method Complexity

Long Method

Complexity

Duplication Side-by-Side

Filter issues like