From 93fad903a993a1adc7622a4e3091dd4cca84764a Mon Sep 17 00:00:00 2001
From: Santo Cariotti <santo@dcariotti.me>
Date: Sun, 8 Sep 2024 16:29:57 +0200
Subject: Notifications page

---
 components/ParallaxScrollView.tsx | 45 ++++++++++++++++++++-------------------
 1 file changed, 23 insertions(+), 22 deletions(-)

(limited to 'components')

diff --git a/components/ParallaxScrollView.tsx b/components/ParallaxScrollView.tsx
index 187730b..ae6be71 100644
--- a/components/ParallaxScrollView.tsx
+++ b/components/ParallaxScrollView.tsx
@@ -1,11 +1,10 @@
-import { useState, type PropsWithChildren, useCallback, useEffect, } from 'react';
-import { StyleSheet, SafeAreaView, useColorScheme, View, Text, Platform } from 'react-native';
+import { useState, type PropsWithChildren,  useEffect, } from 'react';
+import { StyleSheet, SafeAreaView, useColorScheme, View, Text, Pressable } from 'react-native';
 
 import { ThemedView } from '@/components/ThemedView';
 import { ThemedText } from './ThemedText';
 import { Ionicons } from '@expo/vector-icons';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { useFocusEffect } from 'expo-router';
+import { router } from 'expo-router';
 
 
 type Props = PropsWithChildren<{
@@ -53,7 +52,9 @@ export default function ParallaxScrollView({
     };
 
     if (token && userId) {
-      fetchNotifications();
+      const intervalId = setInterval(fetchNotifications, 2000);
+
+      return () => clearInterval(intervalId);
     } else {
       setNotifications([]);
     }
@@ -65,21 +66,21 @@ export default function ParallaxScrollView({
         backgroundColor: (theme === 'light' ? 'rgba(0, 0, 0, .5)' : 'rgba(100, 100, 100, .5)'),
       }}>
         <ThemedText type="title" style={{ color: 'white', paddingVertical: 10 }}>CAS4</ThemedText>
-        { notifications.length > 0 ? (
           <SafeAreaView>
-            <View style={styles.notificationCircle}>
-              <Text style={styles.notificationCircleText}>{ notifications.length }</Text>
-            </View>
-            <Ionicons
-              name="notifications-outline"
-              size={32}
-              style={styles.notification}
-            />
+            {token && userId ? (
+              <Pressable onPress={() => router.push('/notifications')} style={styles.notificationWrapper}>
+                {notifications.length > 0 && (
+                  <View style={styles.notificationCircle}>
+                    <Text style={styles.notificationCircleText}>{notifications.length}</Text>
+                  </View>
+                )}
+                <Ionicons name="notifications-outline" size={32} color="white" />
+              </Pressable>
+            ) : (
+              <>
+              </>
+            )}
           </SafeAreaView>
-        ) : (
-          <>
-          </>
-        )}
       </SafeAreaView>
       <ThemedView style={styles.content}>{children}</ThemedView>
     </ThemedView>
@@ -104,10 +105,10 @@ const styles = StyleSheet.create({
     gap: 16,
     overflow: 'hidden',
   },
-  notification: {
+  notificationWrapper: {
     color: '#fff',
     position: 'absolute',
-    bottom: 10,
+    bottom: 15,
     right: 30,
   },
   notificationCircle: {
@@ -116,8 +117,8 @@ const styles = StyleSheet.create({
     borderRadius: 100,
     backgroundColor: '#EA2027',
     position: 'absolute',
-    bottom: 30,
-    right: 30,
+    top: -5,
+    right: 0,
     zIndex: 1,
   },
   notificationCircleText: {
-- 
cgit v1.2.3-18-g5258