1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
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 { router } from 'expo-router';
type Props = PropsWithChildren<{
token: string;
userId: string;
children: React.ReactNode;
}>;
export default function ParallaxScrollView({
token,
userId,
children,
}: Props) {
const theme = useColorScheme() ?? 'light';
const [notifications, setNotifications] = useState([]);
useEffect(() => {
const fetchNotifications = async () => {
if (!token || !userId) return;
try {
const response = await fetch(
`${process.env.EXPO_PUBLIC_API_URL}/graphql`,
{
method: 'POST',
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
query: `{ notifications(seen: false) { id, createdAt } }`,
}),
}
);
const data = await response.json();
if (data.data.notifications) {
setNotifications(data.data.notifications);
}
} catch (err) {
console.error('Fetch notifications:', err);
}
};
if (token && userId) {
const intervalId = setInterval(fetchNotifications, 2000);
return () => clearInterval(intervalId);
} else {
setNotifications([]);
}
}, [token, userId]);
return (
<ThemedView style={styles.container}>
<SafeAreaView style={{
backgroundColor: (theme === 'light' ? 'rgba(0, 0, 0, .5)' : 'rgba(100, 100, 100, .5)'),
}}>
<ThemedText type="title" style={{ color: 'white', paddingVertical: 10 }}>CAS4</ThemedText>
<SafeAreaView>
{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>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
nav: {
paddingTop: 50,
padding: 10,
},
header: {
height: 250,
overflow: 'hidden',
},
content: {
flex: 1,
padding: 32,
gap: 16,
overflow: 'hidden',
},
notificationWrapper: {
color: '#fff',
position: 'absolute',
bottom: 15,
right: 30,
},
notificationCircle: {
width: 20,
height: 20,
borderRadius: 100,
backgroundColor: '#EA2027',
position: 'absolute',
top: -5,
right: 0,
zIndex: 1,
},
notificationCircleText: {
color: 'white',
textAlign: 'center',
lineHeight: 20,
}
});
|
