From 49fc86e18a3d1726ae48845fcafecba9a5a47b9d Mon Sep 17 00:00:00 2001
From: Donald Wu <yeukfei02@gmail.com>
Date: Sun, 2 Oct 2022 12:37:54 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20fix=20renderBusServiceRou?=
 =?UTF-8?q?tesList=20logic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../busServiceRoutes/BusServiceRoutes.tsx     | 212 ++++++++----------
 1 file changed, 90 insertions(+), 122 deletions(-)

diff --git a/src/components/busServiceRoutes/BusServiceRoutes.tsx b/src/components/busServiceRoutes/BusServiceRoutes.tsx
index 478e737..326c233 100644
--- a/src/components/busServiceRoutes/BusServiceRoutes.tsx
+++ b/src/components/busServiceRoutes/BusServiceRoutes.tsx
@@ -298,68 +298,52 @@ function BusServiceRoutes(props: any): JSX.Element {
           let view = null;
 
           if (item.busStop) {
-            if (
-              _.inRange(latitude, item.busStop.latitude - 0.0015, item.busStop.latitude + 0.0015) &&
-              _.inRange(longitude, item.busStop.longitude - 0.0015, item.busStop.longitude + 0.0015)
-            ) {
-              view = (
-                <View key={i}>
-                  <TouchableOpacity onPress={() => handleBusStopCodeClick(item.busStop.busStopCode)}>
-                    <View style={styles.busServiceRoutesContainer}>
-                      {/* <Text style={{ fontSize: 20, fontWeight: 'bold', marginVertical: 8 }}>{item.stopSequence}</Text> */}
-                      <Text style={{ fontSize: 16, color: 'red', fontWeight: 'bold', marginVertical: 6 }}>
-                        {item.busStop.description}
+            view = (
+              <View key={i}>
+                <TouchableOpacity onPress={() => handleBusStopCodeClick(item.busStop.busStopCode)}>
+                  <View style={styles.busServiceRoutesContainer}>
+                    {/* <Text style={{ fontSize: 20, fontWeight: 'bold', marginVertical: 8 }}>{item.stopSequence}</Text> */}
+                    <Text
+                      style={{
+                        fontSize: 16,
+                        color:
+                          _.inRange(latitude, item.busStop.latitude - 0.0015, item.busStop.latitude + 0.0015) &&
+                          _.inRange(longitude, item.busStop.longitude - 0.0015, item.busStop.longitude + 0.0015)
+                            ? 'red'
+                            : 'black',
+                        fontWeight: 'bold',
+                        marginVertical: 6,
+                      }}
+                    >
+                      {item.busStop.description}
+                    </Text>
+                    <Text
+                      style={{
+                        fontSize: 14,
+                        color:
+                          _.inRange(latitude, item.busStop.latitude - 0.0015, item.busStop.latitude + 0.0015) &&
+                          _.inRange(longitude, item.busStop.longitude - 0.0015, item.busStop.longitude + 0.0015)
+                            ? 'red'
+                            : 'black',
+                        fontWeight: 'bold',
+                        marginVertical: 6,
+                        textDecorationLine: 'underline',
+                      }}
+                    >
+                      {item.busStop.busStopCode}
+                    </Text>
+                    <TouchableOpacity
+                      onPress={() => handleCheckBusStopInMap(item.busStop.latitude, item.busStop.longitude)}
+                    >
+                      <Text style={{ color: 'blue', textDecorationLine: 'underline', marginVertical: 5 }}>
+                        Check bus stop in map
                       </Text>
-                      <Text
-                        style={{
-                          fontSize: 14,
-                          color: 'red',
-                          fontWeight: 'bold',
-                          marginVertical: 6,
-                          textDecorationLine: 'underline',
-                        }}
-                      >
-                        {item.busStop.busStopCode}
-                      </Text>
-                      <TouchableOpacity
-                        onPress={() => handleCheckBusStopInMap(item.busStop.latitude, item.busStop.longitude)}
-                      >
-                        <Text style={{ color: 'blue', textDecorationLine: 'underline', marginVertical: 5 }}>
-                          Check bus stop in map
-                        </Text>
-                      </TouchableOpacity>
-                    </View>
-                  </TouchableOpacity>
-                  {renderArrowDownIcon(inboundList, i)}
-                </View>
-              );
-            } else {
-              view = (
-                <View key={i}>
-                  <TouchableOpacity onPress={() => handleBusStopCodeClick(item.busStop.busStopCode)}>
-                    <View style={styles.busServiceRoutesContainer}>
-                      {/* <Text style={{ fontSize: 20, fontWeight: 'bold', marginVertical: 8 }}>{item.stopSequence}</Text> */}
-                      <Text style={{ fontSize: 16, fontWeight: 'bold', marginVertical: 6 }}>
-                        {item.busStop.description}
-                      </Text>
-                      <Text
-                        style={{ fontSize: 14, fontWeight: 'bold', marginVertical: 6, textDecorationLine: 'underline' }}
-                      >
-                        {item.busStop.busStopCode}
-                      </Text>
-                      <TouchableOpacity
-                        onPress={() => handleCheckBusStopInMap(item.busStop.latitude, item.busStop.longitude)}
-                      >
-                        <Text style={{ color: 'blue', textDecorationLine: 'underline', marginVertical: 5 }}>
-                          Check bus stop in map
-                        </Text>
-                      </TouchableOpacity>
-                    </View>
-                  </TouchableOpacity>
-                  {renderArrowDownIcon(inboundList, i)}
-                </View>
-              );
-            }
+                    </TouchableOpacity>
+                  </View>
+                </TouchableOpacity>
+                {renderArrowDownIcon(inboundList, i)}
+              </View>
+            );
 
             return view;
           }
@@ -371,68 +355,52 @@ function BusServiceRoutes(props: any): JSX.Element {
           let view = null;
 
           if (item.busStop) {
-            if (
-              _.inRange(latitude, item.busStop.latitude - 0.0015, item.busStop.latitude + 0.0015) &&
-              _.inRange(longitude, item.busStop.longitude - 0.0015, item.busStop.longitude + 0.0015)
-            ) {
-              view = (
-                <View key={i}>
-                  <TouchableOpacity onPress={() => handleBusStopCodeClick(item.busStop.busStopCode)}>
-                    <View style={styles.busServiceRoutesContainer}>
-                      {/* <Text style={{ fontSize: 20, fontWeight: 'bold', marginVertical: 8 }}>{item.stopSequence}</Text> */}
-                      <Text style={{ fontSize: 16, color: 'red', fontWeight: 'bold', marginVertical: 6 }}>
-                        {item.busStop.description}
+            view = (
+              <View key={i}>
+                <TouchableOpacity onPress={() => handleBusStopCodeClick(item.busStop.busStopCode)}>
+                  <View style={styles.busServiceRoutesContainer}>
+                    {/* <Text style={{ fontSize: 20, fontWeight: 'bold', marginVertical: 8 }}>{item.stopSequence}</Text> */}
+                    <Text
+                      style={{
+                        fontSize: 16,
+                        color:
+                          _.inRange(latitude, item.busStop.latitude - 0.0015, item.busStop.latitude + 0.0015) &&
+                          _.inRange(longitude, item.busStop.longitude - 0.0015, item.busStop.longitude + 0.0015)
+                            ? 'red'
+                            : 'black',
+                        fontWeight: 'bold',
+                        marginVertical: 6,
+                      }}
+                    >
+                      {item.busStop.description}
+                    </Text>
+                    <Text
+                      style={{
+                        fontSize: 14,
+                        color:
+                          _.inRange(latitude, item.busStop.latitude - 0.0015, item.busStop.latitude + 0.0015) &&
+                          _.inRange(longitude, item.busStop.longitude - 0.0015, item.busStop.longitude + 0.0015)
+                            ? 'red'
+                            : 'black',
+                        fontWeight: 'bold',
+                        marginVertical: 6,
+                        textDecorationLine: 'underline',
+                      }}
+                    >
+                      {item.busStop.busStopCode}
+                    </Text>
+                    <TouchableOpacity
+                      onPress={() => handleCheckBusStopInMap(item.busStop.latitude, item.busStop.longitude)}
+                    >
+                      <Text style={{ color: 'blue', textDecorationLine: 'underline', marginVertical: 5 }}>
+                        Check bus stop in map
                       </Text>
-                      <Text
-                        style={{
-                          fontSize: 14,
-                          color: 'red',
-                          fontWeight: 'bold',
-                          marginVertical: 6,
-                          textDecorationLine: 'underline',
-                        }}
-                      >
-                        {item.busStop.busStopCode}
-                      </Text>
-                      <TouchableOpacity
-                        onPress={() => handleCheckBusStopInMap(item.busStop.latitude, item.busStop.longitude)}
-                      >
-                        <Text style={{ color: 'blue', textDecorationLine: 'underline', marginVertical: 5 }}>
-                          Check bus stop in map
-                        </Text>
-                      </TouchableOpacity>
-                    </View>
-                  </TouchableOpacity>
-                  {renderArrowDownIcon(outboundList, i)}
-                </View>
-              );
-            } else {
-              view = (
-                <View key={i}>
-                  <TouchableOpacity onPress={() => handleBusStopCodeClick(item.busStop.busStopCode)}>
-                    <View style={styles.busServiceRoutesContainer}>
-                      {/* <Text style={{ fontSize: 20, fontWeight: 'bold', marginVertical: 8 }}>{item.stopSequence}</Text> */}
-                      <Text style={{ fontSize: 16, fontWeight: 'bold', marginVertical: 6 }}>
-                        {item.busStop.description}
-                      </Text>
-                      <Text
-                        style={{ fontSize: 14, fontWeight: 'bold', marginVertical: 6, textDecorationLine: 'underline' }}
-                      >
-                        {item.busStop.busStopCode}
-                      </Text>
-                      <TouchableOpacity
-                        onPress={() => handleCheckBusStopInMap(item.busStop.latitude, item.busStop.longitude)}
-                      >
-                        <Text style={{ color: 'blue', textDecorationLine: 'underline', marginVertical: 5 }}>
-                          Check bus stop in map
-                        </Text>
-                      </TouchableOpacity>
-                    </View>
-                  </TouchableOpacity>
-                  {renderArrowDownIcon(outboundList, i)}
-                </View>
-              );
-            }
+                    </TouchableOpacity>
+                  </View>
+                </TouchableOpacity>
+                {renderArrowDownIcon(outboundList, i)}
+              </View>
+            );
 
             return view;
           }