Passed
Pull Request — dev (#13)
by Oscar
02:55
created

HistoryMap.tsx ➔ HistoryMap   D

Complexity

Conditions 11

Size

Total Lines 111
Code Lines 88

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
eloc 88
dl 0
loc 111
rs 4.1727
c 0
b 0
f 0
cc 11

How to fix   Long Method    Complexity   

Long Method

Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.

For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.

Commonly applied refactorings include:

Complexity

Complex classes like HistoryMap.tsx ➔ HistoryMap often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.

Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.

1
import { useState, useEffect } from 'react';
2
import { ScrollView, Image, Text, View, StyleSheet, StatusBar, Button, Pressable, Modal } from 'react-native';
3
import MapView, { Marker, Circle, Polygon } from 'react-native-maps';
4
import * as Location from 'expo-location';
5
import React from 'react';
6
import mapModel from '../../models/map';
7
import {API_KEY} from "@env";
8
import config from '../../config/config.json';
9
import Icon from 'react-native-vector-icons/Octicons';
10
import { start } from 'react-native-compass-heading';
11
12
13
export default function HistoryMap({navigation, journey, modalVisible, setModalVisible}): any {
14
    const [startCoordinates, setStartCoordinates] = useState([]);
15
    const [endCoordinates, setEndCoordinates] = useState([]);
16
    const [journeyData, setJourneyData] = useState([]);
17
    const [startStop, setStartStop] = useState([]);
18
    // console.log(journey);
19
    
20
    useEffect(() => {
21
        function setCoordinates() {
22
            if (modalVisible) {
23
                setStartCoordinates(journey['startPosition']);
24
                setEndCoordinates(journey['endPosition']);
25
                setJourneyData(journey);
26
                console.log(startCoordinates);
27
28
                console.log(endCoordinates);
29
                
30
            }
31
            
32
        };
33
34
        setCoordinates();
35
    })
36
    
37
    return (
38
        <Modal
39
        animationType="slide"
40
        transparent={true}
41
        visible={modalVisible}
42
        onRequestClose={() => {
43
            setModalVisible(!modalVisible)
44
        }}
45
        >
46
            <View style={styles.container}>
47
     
48
                <MapView
49
                    style={styles.map}
50
                    region={{
51
                        latitude: startCoordinates['latitude']? startCoordinates['latitude'] : 0,
52
                        longitude: startCoordinates['longitude']? startCoordinates['longitude'] : 0,
53
                        latitudeDelta: 0.05,
54
                        longitudeDelta: 0.05,
55
                    }}
56
                    userInterfaceStyle={'dark'}
57
                >
58
59
            {startCoordinates ? 
60
                <Marker 
61
                coordinate={{latitude: startCoordinates['latitude']? startCoordinates['latitude'] : 0,
62
                longitude: startCoordinates['longitude']? startCoordinates['longitude'] : 0
63
            }}
64
                />
65
                : 
66
                <View></View>
67
            }    
68
69
            {endCoordinates ? 
70
                <Marker 
71
                coordinate={{latitude: endCoordinates['latitude']? endCoordinates['latitude'] : 0,
72
                longitude: endCoordinates['longitude']? endCoordinates['longitude'] : 0
73
            }}
74
                />
75
                : 
76
                <View></View>
77
            }  
78
79
80
            
81
82
                
83
84
                </MapView>
85
86
                <View style={styles.infoContainer}>
87
                <Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => setModalVisible(false)}>
88
                    <Icon 
89
                        name='arrow-left' 
90
                        size={25} 
91
                        color='black'
92
                    />
93
                </Pressable>
94
                    <View style={styles.info}>
95
96
                        <View style={styles.listInfo}>
97
                            <Text style={styles.infoTitle}>Journey started</Text>
98
                            <Text>{journeyData['date']}</Text>
99
                        </View>
100
101
                        <View style={styles.listInfo}>
102
                            <Text style={styles.infoTitle}>Information about the trip</Text>
103
                            <Text>{mapModel.calcDistance(startCoordinates[0], startCoordinates[1], endCoordinates[0], endCoordinates[1])} km / {journeyData['totalMin']} min </Text>
104
105
                            <Text> {journeyData['totalPrice']} kr</Text>
106
                        </View>
107
108
                        <View style={styles.listInfo}>
109
                            <Text style={styles.infoTitle}>ID</Text>
110
                            <Text>{journeyData['_id']}</Text>
111
                        </View>
112
113
                        <View style={styles.listInfo}>
114
                            <Text style={styles.infoTitle}>Vehicle</Text>
115
                            <Text>{journeyData['scooterName']}</Text>
116
                        </View>
117
118
                    </View>
119
                </View>
120
            </View>
121
        </Modal>
122
123
    )
124
}
125
126
const styles = StyleSheet.create({
127
    container: {
128
        // position: 'absolute',
129
        // flex: 1,
130
        height: '100%',
131
        alignItems: "center",
132
        width: '100%',
133
        // backgroundColor: 'white'
134
    },
135
136
    map: {
137
        position: 'absolute',
138
        top: 0,
139
        left: 0,
140
        bottom: 0,
141
        right: 0,
142
    },
143
    
144
    shadowProp: {
145
        elevation: 5,
146
        shadowColor: 'black'
147
      },
148
149
    infoContainer: {
150
        height: '100%',
151
        // flex: 1,
152
        // backgroundColor: 'red',
153
        justifyContent: 'flex-end',
154
        width: '100%'
155
    },
156
157
    info: {
158
        height: '45%',
159
        width: '100%',
160
        backgroundColor: 'white',
161
        justifyContent: 'space-around',
162
        alignItems: 'center'
163
    },
164
165
    listInfo: {
166
        // backgroundColor: 'red',
167
        height: '20%',
168
        borderBottomWidth: 1,
169
        width: '90%',
170
        flexDirection: 'row',
171
        justifyContent: 'space-between'
172
        // marginBottom: 10
173
    },
174
175
    infoTitle: {
176
        fontWeight: '600',
177
    },
178
179
    backButton: {
180
        position: 'absolute',
181
        width: 40,
182
        height: 40, 
183
        left: 20,
184
        backgroundColor: 'white',
185
        top: 5,
186
        borderRadius: 25,
187
        borderWidth: 1,
188
        borderColor: 'gray',
189
        alignItems: 'center',
190
        justifyContent: 'center'
191
    },
192
});
193
194