1 files changed, 52 insertions, 62 deletions
diff --git a/src/Components/MapObjects.tsx b/src/Components/MapObjects.tsx
index 1d2fb12..af0afec 100644
--- a/src/Components/MapObjects.tsx
+++ b/src/Components/MapObjects.tsx
@@ -1,4 +1,4 @@
-import React, { ReactChild } from 'react';
+import React, { PureComponent } from 'react';
 import { View, StyleSheet, Text } from 'react-native';
 import { Polyline, Polygon, Marker, Region } from 'react-native-maps';
 import Icon from 'react-native-vector-icons/FontAwesome';
@@ -17,74 +17,64 @@ type Props = {
     links: { [guid: string]: Link }
     fields: { [guid: string]: Field }
     onPortalClick: Function
-    zoom: number
 }
 
-const MapObjects = (props: Props) => {
-    const renderPortal = Object.keys(props.portals).map(guid => drawPortal(guid, props.portals[guid], props.zoom, props.onPortalClick))
-    const renderField = Object.keys(props.fields).map(guid => drawField(guid, props.fields[guid]))
-    const renderLink = Object.keys(props.links).map(guid => drawLink(guid, props.links[guid]))
+class MapObjects extends PureComponent<Props> {
+    render() {
+        const props = this.props
+        const renderPortal = Object.keys(props.portals).map(guid => this.drawPortal(guid, props.portals[guid], props.onPortalClick))
+        const renderField = Object.keys(props.fields).map(guid => this.drawField(guid, props.fields[guid]))
+        const renderLink = Object.keys(props.links).map(guid => this.drawLink(guid, props.links[guid]))
 
-    if (props.zoom <= 14) {
-        return [...renderField, ...renderLink]
-    } else {
-        return [...renderField, ...renderLink, ...renderPortal]
+        if (props.zoom <= 14) {
+            return [...renderField, ...renderLink]
+        } else {
+            return [...renderField, ...renderLink, ...renderPortal]
+        }
+    }
+    drawPortal = (guid: string, entity: Portal, onPortalClick: Function) => {
+        const size = 20
+        return (<Marker
+            key={guid}
+            coordinate={entity.coords}
+            onPress={() => onPortalClick(guid, entity.coords)}
+        >
+            {/* <Icon name={entity.fraction == "N" ? "circle-o" : "circle"} color={fillPortalColor[entity.fraction]} size={size} /> */}
+            <View style={{
+                borderWidth: 2,
+                height: size,
+                width: size,
+                borderRadius: size / 2,
+                borderColor: COLORS_LVL[entity.level],
+                backgroundColor: fillPortalColor[entity.fraction],
+                justifyContent: 'center',
+                alignItems: 'center',
+            }}>
+                <Text style={{ fontWeight: 'bold' }}>{entity.level}</Text>
+            </View>
+        </Marker>);
+    }
+    drawField = (guid: string, entity: Field) => {
+        return <Polygon
+            key={guid}
+            coordinates={entity.coords}
+            fillColor={fieldColor[entity.fraction]}
+            strokeColor={fieldColor[entity.fraction]}
+            strokeWidth={StyleSheet.hairlineWidth}
+        />
+    }
+    drawLink = (guid: string, entity: Link) => {
+        return <Polyline
+            key={guid}
+            coordinates={entity.coords}
+            strokeColor={fractColor[entity.fraction]}
+            strokeWidth={1}
+        />
     }
-}
-const drawPortal = (guid: string, entity: Portal, zoom: number, onPortalClick: Function) => {
-    const size = (zoom) * 1.5
-    return (<Marker
-        key={guid}
-        coordinate={entity.coords}
-        onPress={() => onPortalClick(guid, entity.coords)}
-    >
-        {/* <Icon name={entity.fraction == "N" ? "circle-o" : "circle"} color={fillPortalColor[entity.fraction]} size={size} /> */}
-        <View style={{
-            borderWidth: 2,
-            height: size,
-            width: size,
-            borderRadius: size / 2,
-            borderColor: COLORS_LVL[entity.level],
-            backgroundColor: fillPortalColor[entity.fraction],
-            justifyContent: 'center',
-            alignItems: 'center',
-        }}>
-            <Text style={{ fontWeight: 'bold' }}>{entity.level}</Text>
-        </View>
-    </Marker>);
-}
-const drawField = (guid: string, entity: Field) => {
-    return <Polygon
-        key={guid}
-        coordinates={entity.coords}
-        fillColor={fieldColor[entity.fraction]}
-        strokeColor={fieldColor[entity.fraction]}
-        strokeWidth={StyleSheet.hairlineWidth}
-    />
-}
-const drawLink = (guid: string, entity: Link) => {
-    return <Polyline
-        key={guid}
-        coordinates={entity.coords}
-        strokeColor={fractColor[entity.fraction]}
-        strokeWidth={1}
-    />
 }
 
-
 const styles = StyleSheet.create({
 
 });
 
-export default connect((store) => {
-    const display = store.entities.display
-    const portals = {}
-    const fields = {}
-    const links = {}
-    display.portals.forEach(guid => { portals[guid] = store.entities.portals[guid] })
-    display.fields.forEach(guid => { fields[guid] = store.entities.fields[guid] })
-    display.links.forEach(guid => { links[guid] = store.entities.links[guid] })
-    return {
-        portals, fields, links
-    }
-}, {})(MapObjects)
-\ No newline at end of file
+export default connect((store) => ({ portals: store.entities.portals, fields: store.entities.fields, links: store.entities.links }), {})(MapObjects)
+\ No newline at end of file