Get all the three areas for an alert

3 files changed, 56 insertions, 35 deletions

diff --git a/app/(tabs)/alerts/[id].tsx b/app/(tabs)/alerts/[id].tsx
index 92856b3..554c1ed 100644
--- a/app/(tabs)/alerts/[id].tsx
+++ b/app/(tabs)/alerts/[id].tsx
@@ -20,8 +20,8 @@ interface AlertData {
   userId: string;
   createdAt: string;
   area: string;
-  extendedArea: string;
-  level: string;
+  areaLevel2: string;
+  areaLevel3: string;
 }
 
 interface PolygonCoordinates {
@@ -40,7 +40,8 @@ export default function AlertIdScreen() {
     longitudeDelta: 0.03,
   });
   const [polygon, setPolygon] = useState<PolygonCoordinates[]>([]);
-  const [extendedPolygon, setExtendedPolygon] = useState<PolygonCoordinates[]>([]);
+  const [level2Polygon, setLevel2Polygon] = useState<PolygonCoordinates[]>([]);
+  const [level3Polygon, setLevel3Polygon] = useState<PolygonCoordinates[]>([]);
   const mapRef = useRef<MapView | null>(null);
 
   const checkAuth = useCallback(async () => {
@@ -83,7 +84,7 @@ export default function AlertIdScreen() {
             'Content-Type': 'application/json',
           },
           body: JSON.stringify({
-            query: `{ alerts(id: ${id}) { id, userId, createdAt, area, extendedArea, level } }`,
+            query: `{ alerts(id: ${id}) { id, userId, createdAt, area, areaLevel2, areaLevel3 } }`,
           }),
         }
       );
@@ -103,8 +104,17 @@ export default function AlertIdScreen() {
             latitude: parseFloat(pair[1]),
           }));
 
-        const extendedCoordinatesString = alertData.extendedArea.substring(9, alertData.extendedArea.length - 2);
-        const extendedCoordinates = extendedCoordinatesString
+        const level2CoordinatesString = alertData.areaLevel2.substring(9, alertData.areaLevel2.length - 2);
+        const level2Coordinates = level2CoordinatesString
+          .split(',')
+          .map((coord: string) => coord.trim().split(' '))
+          .map((pair: string[]) => ({
+            longitude: parseFloat(pair[0]),
+            latitude: parseFloat(pair[1]),
+          }));
+
+        const level3CoordinatesString = alertData.areaLevel3.substring(9, alertData.areaLevel3.length - 2);
+        const level3Coordinates = level3CoordinatesString
           .split(',')
           .map((coord: string) => coord.trim().split(' '))
           .map((pair: string[]) => ({
@@ -114,7 +124,8 @@ export default function AlertIdScreen() {
 
         setAlert(alertData);
         setPolygon(coordinates);
-        setExtendedPolygon(extendedCoordinates);
+        setLevel2Polygon(level2Coordinates);
+        setLevel3Polygon(level3Coordinates);
         setRegion({
           latitude: coordinates[0]?.latitude || region.latitude,
           longitude: coordinates[0]?.longitude || region.longitude,
@@ -188,7 +199,12 @@ export default function AlertIdScreen() {
                 fillColor="rgba(192, 57, 43, 0.4)"
               />
               <Polygon
-                coordinates={extendedPolygon}
+                coordinates={level2Polygon}
+                strokeColor="#c0392b"
+                fillColor="rgba(192, 57, 43, 0.4)"
+              />
+              <Polygon
+                coordinates={level3Polygon}
                 strokeColor="#c0392b"
                 fillColor="rgba(192, 57, 43, 0.4)"
               />
@@ -210,7 +226,6 @@ export default function AlertIdScreen() {
               color={theme === 'light' ? Colors.light.text : Colors.dark.text}
               style={styles.icon}
             />
-            <ThemedText>{alert.level}</ThemedText>
           </ThemedView>
         </>
       )}
diff --git a/app/(tabs)/alerts/index.tsx b/app/(tabs)/alerts/index.tsx
index 9ba2cce..214839e 100644
--- a/app/(tabs)/alerts/index.tsx
+++ b/app/(tabs)/alerts/index.tsx
@@ -19,8 +19,6 @@ interface AlertData {
   id: string;
   userId: string;
   createdAt: string;
-  area: string;
-  level: string;
 }
 
 export default function AlertsScreen() {
@@ -42,7 +40,7 @@ export default function AlertsScreen() {
             'Content-Type': 'application/json',
           },
           body: JSON.stringify({
-            query: `{ alerts { id, userId, createdAt, area, level } }`,
+            query: `{ alerts { id, userId, createdAt } }`,
           }),
         }
       );
@@ -115,18 +113,7 @@ export default function AlertsScreen() {
 
   const renderAlert = ({ item }: { item: AlertData }) => (
     <ThemedView style={styles.alertContainer}>
-      <View
-        style={[
-          styles.alertBox,
-          {
-            backgroundColor: item.level === 'ONE'
-              ? '#27ae60'
-              : item.level === 'TWO'
-              ? '#e67e22'
-              : '#c0392b',
-          },
-        ]}
-      >
+      <View style={styles.alertBox}>
         <Link
           href={`/alerts/${item.id}`}
           style={{ width: '100%' }}
@@ -135,7 +122,6 @@ export default function AlertsScreen() {
             <Ionicons
               name="calendar-outline"
               size={18}
-              color="white"
               style={styles.icon}
             />
             <ThemedText style={styles.dateText}>
@@ -190,6 +176,7 @@ const styles = StyleSheet.create({
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.1,
     shadowRadius: 4,
+    backgroundColor: '#fff'
   },
   dateRow: {
     flexDirection: 'row',
@@ -199,7 +186,7 @@ const styles = StyleSheet.create({
     marginRight: 8,
   },
   dateText: {
-    color: '#fff',
+    color: '#000',
   },
   listContent: {
     paddingBottom: 32,
diff --git a/app/(tabs)/notifications/[id].tsx b/app/(tabs)/notifications/[id].tsx
index e2d39ba..4ec6f1a 100644
--- a/app/(tabs)/notifications/[id].tsx
+++ b/app/(tabs)/notifications/[id].tsx
@@ -20,8 +20,8 @@ interface AlertData {
   userId: string;
   createdAt: string;
   area: string;
-  extendedArea: string;
-  level: string;
+  areaLevel2: string;
+  areaLevel3: string;
 }
 
 interface PositionData {
@@ -38,6 +38,7 @@ interface NotificationData {
   alert: AlertData;
   position: PositionData;
   seen: boolean;
+  level: string;
   createdAt: string;
 }
 
@@ -58,7 +59,8 @@ export default function NotificationIdScreen() {
   });
   const [coordinates, setCoordinates] = useState({ latitude: 44.49738301084014, longitude: 11.356121722966094 });
   const [polygon, setPolygon] = useState<PolygonCoordinates[]>([]);
-  const [extendedPolygon, setExtendedPolygon] = useState<PolygonCoordinates[]>([]);
+  const [level2Polygon, setLevel2Polygon] = useState<PolygonCoordinates[]>([]);
+  const [level3Polygon, setLevel3Polygon] = useState<PolygonCoordinates[]>([]);
   const mapRef = useRef<MapView | null>(null);
 
   const checkAuth = useCallback(async () => {
@@ -130,9 +132,10 @@ export default function NotificationIdScreen() {
           body: JSON.stringify({
             query: `{ notifications(id: ${id}) {
              id,
-             alert { id, userId, createdAt, area, extendedArea, level, reachedUsers },
+             alert { id, userId, createdAt, area, areaLevel2, areaLevel3, reachedUsers },
              position {id, userId, createdAt, latitude, longitude, movingActivity},
              seen,
+             level,
              createdAt
             } }`,
           }),
@@ -154,8 +157,17 @@ export default function NotificationIdScreen() {
             latitude: parseFloat(pair[1]),
           }));
 
-        const extendedCoordinatesString = notificationData.alert.extendedArea.substring(9, notificationData.alert.extendedArea.length - 2);
-        const extendedCoordinates = extendedCoordinatesString
+        const level2CoordinatesString = notificationData.alert.areaLevel2.substring(9, notificationData.alert.areaLevel2.length - 2);
+        const level2Coordinates = level2CoordinatesString
+          .split(',')
+          .map((coord: string) => coord.trim().split(' '))
+          .map((pair: string[]) => ({
+            longitude: parseFloat(pair[0]),
+            latitude: parseFloat(pair[1]),
+          }));
+
+        const level3CoordinatesString = notificationData.alert.areaLevel3.substring(9, notificationData.alert.areaLevel3.length - 2);
+        const level3Coordinates = level3CoordinatesString
           .split(',')
           .map((coord: string) => coord.trim().split(' '))
           .map((pair: string[]) => ({
@@ -163,10 +175,12 @@ export default function NotificationIdScreen() {
             latitude: parseFloat(pair[1]),
           }));
 
+
         setCoordinates({ latitude: notificationData.position.latitude, longitude: notificationData.position.longitude });
         setNotification(notificationData);
         setPolygon(coordinates);
-        setExtendedPolygon(extendedCoordinates);
+        setLevel2Polygon(level2Coordinates);
+        setLevel3Polygon(level3Coordinates);
         setRegion({
           latitude: coordinates[0]?.latitude || region.latitude,
           longitude: coordinates[0]?.longitude || region.longitude,
@@ -248,7 +262,12 @@ export default function NotificationIdScreen() {
                 fillColor="rgba(192, 57, 43, 0.4)"
               />
               <Polygon
-                coordinates={extendedPolygon}
+                coordinates={level2Polygon}
+                strokeColor="#c0392b"
+                fillColor="rgba(192, 57, 43, 0.4)"
+              />
+              <Polygon
+                coordinates={level3Polygon}
                 strokeColor="#c0392b"
                 fillColor="rgba(192, 57, 43, 0.4)"
               />
@@ -279,7 +298,7 @@ export default function NotificationIdScreen() {
               color={theme === 'light' ? Colors.light.text : Colors.dark.text}
               style={styles.icon}
             />
-            <ThemedText>Level of alert: {notification.alert.level}</ThemedText>
+            <ThemedText>Level of alert: {notification.level}</ThemedText>
           </ThemedView>
         </>
       )}