chore: fix notif
This commit is contained in:
@@ -1,11 +1,23 @@
|
||||
import React from "react";
|
||||
import { TouchableOpacity, View } from "react-native";
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import {
|
||||
TouchableOpacity,
|
||||
View,
|
||||
Text,
|
||||
Modal,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
} from "react-native";
|
||||
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useAuth } from "../auth/AuthContext";
|
||||
import { useTheme } from "../context/ThemeContext";
|
||||
import { logoutAdmin } from "../api/api_admin";
|
||||
import { fontSize, spacing } from "../theme";
|
||||
import {
|
||||
getLivreurNotifications,
|
||||
markLivreurNotificationsRead,
|
||||
} from "../api/api_delivery";
|
||||
import type { LivreurNotification } from "../api/api_delivery";
|
||||
import { fontSize, spacing, borderRadius } from "../theme";
|
||||
import type { DeliveryTabParamList } from "./types";
|
||||
|
||||
import DashboardScreen from "../screens/delivery/DashboardScreen";
|
||||
@@ -14,99 +26,341 @@ import AlertsScreen from "../screens/delivery/AlertsScreen";
|
||||
|
||||
const Tab = createBottomTabNavigator<DeliveryTabParamList>();
|
||||
|
||||
function formatNotifTime(dateStr: string): string {
|
||||
try {
|
||||
const diffMs = Date.now() - new Date(dateStr).getTime();
|
||||
const diffMin = Math.floor(diffMs / 60000);
|
||||
if (diffMin < 1) return "À l'instant";
|
||||
if (diffMin < 60) return `Il y a ${diffMin} min`;
|
||||
const diffH = Math.floor(diffMin / 60);
|
||||
if (diffH < 24) return `Il y a ${diffH}h`;
|
||||
return `Il y a ${Math.floor(diffH / 24)} jours`;
|
||||
} catch {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
export default function DeliveryNavigator() {
|
||||
const { logout } = useAuth();
|
||||
const { colors, isDark, toggleTheme } = useTheme();
|
||||
|
||||
const [notifications, setNotifications] = useState<LivreurNotification[]>([]);
|
||||
const [unreadCount, setUnreadCount] = useState(0);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const seenIdsRef = useRef<Set<string>>(new Set());
|
||||
const isFirstLoad = useRef(true);
|
||||
|
||||
const fetchNotifications = useCallback(async () => {
|
||||
const res = await getLivreurNotifications();
|
||||
if (!res.success || !res.notifications) return;
|
||||
setNotifications(res.notifications);
|
||||
|
||||
if (!isFirstLoad.current) {
|
||||
let newUnread = 0;
|
||||
for (const n of res.notifications) {
|
||||
if (!n.read) {
|
||||
const key = `${n.command_id}-${n.type}-${n.created_at}`;
|
||||
if (!seenIdsRef.current.has(key)) {
|
||||
seenIdsRef.current.add(key);
|
||||
newUnread++;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (newUnread > 0) {
|
||||
setUnreadCount((prev) => prev + newUnread);
|
||||
}
|
||||
} else {
|
||||
for (const n of res.notifications) {
|
||||
const key = `${n.command_id}-${n.type}-${n.created_at}`;
|
||||
seenIdsRef.current.add(key);
|
||||
}
|
||||
setUnreadCount(res.unread_count ?? 0);
|
||||
isFirstLoad.current = false;
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchNotifications();
|
||||
const interval = setInterval(fetchNotifications, 15000);
|
||||
return () => clearInterval(interval);
|
||||
}, [fetchNotifications]);
|
||||
|
||||
const openModal = async () => {
|
||||
setShowModal(true);
|
||||
if (unreadCount > 0) {
|
||||
await markLivreurNotificationsRead();
|
||||
setUnreadCount(0);
|
||||
setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
await logoutAdmin();
|
||||
await logout();
|
||||
};
|
||||
|
||||
return (
|
||||
<Tab.Navigator
|
||||
screenOptions={{
|
||||
headerStyle: { backgroundColor: colors.bgSecondary },
|
||||
headerTintColor: colors.textWhite,
|
||||
headerRight: () => (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginRight: spacing.l,
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={toggleTheme}
|
||||
style={{ marginRight: spacing.m }}
|
||||
<>
|
||||
<Tab.Navigator
|
||||
screenOptions={{
|
||||
headerStyle: { backgroundColor: colors.bgSecondary },
|
||||
headerTintColor: colors.textWhite,
|
||||
headerRight: () => (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginRight: spacing.l,
|
||||
gap: spacing.m,
|
||||
}}
|
||||
>
|
||||
{/* Cloche notifications */}
|
||||
<TouchableOpacity
|
||||
onPress={openModal}
|
||||
style={{ position: "relative" }}
|
||||
>
|
||||
<Ionicons
|
||||
name="notifications-outline"
|
||||
size={24}
|
||||
color={colors.textSecondary}
|
||||
/>
|
||||
{unreadCount > 0 && (
|
||||
<View style={styles.badge}>
|
||||
<Text style={styles.badgeText}>
|
||||
{unreadCount > 9 ? "9+" : unreadCount}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity onPress={toggleTheme}>
|
||||
<Ionicons
|
||||
name={isDark ? "sunny-outline" : "moon-outline"}
|
||||
size={22}
|
||||
color={colors.textSecondary}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={handleLogout}>
|
||||
<Ionicons
|
||||
name="log-out-outline"
|
||||
size={24}
|
||||
color={colors.textSecondary}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
),
|
||||
tabBarStyle: {
|
||||
backgroundColor: colors.bgSecondary,
|
||||
borderTopColor: colors.border,
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
tabBarActiveTintColor: colors.success,
|
||||
tabBarInactiveTintColor: colors.textMuted,
|
||||
tabBarLabelStyle: { fontSize: fontSize.xs },
|
||||
}}
|
||||
>
|
||||
<Tab.Screen
|
||||
name="Dashboard"
|
||||
component={DashboardScreen}
|
||||
options={{
|
||||
title: "Livraisons",
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons
|
||||
name={isDark ? "sunny-outline" : "moon-outline"}
|
||||
size={22}
|
||||
color={colors.textSecondary}
|
||||
name="navigate-outline"
|
||||
size={size}
|
||||
color={color}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={handleLogout}>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Stats"
|
||||
component={StatsScreen}
|
||||
options={{
|
||||
title: "Stats",
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons
|
||||
name="log-out-outline"
|
||||
size={24}
|
||||
color={colors.textSecondary}
|
||||
name="stats-chart-outline"
|
||||
size={size}
|
||||
color={color}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Alerts"
|
||||
component={AlertsScreen}
|
||||
options={{
|
||||
title: "Alertes",
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons
|
||||
name="alert-circle-outline"
|
||||
size={size}
|
||||
color={color}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Tab.Navigator>
|
||||
|
||||
{/* Modal notifications */}
|
||||
<Modal
|
||||
visible={showModal}
|
||||
animationType="slide"
|
||||
transparent
|
||||
onRequestClose={() => setShowModal(false)}
|
||||
>
|
||||
<View style={styles.overlay}>
|
||||
<View
|
||||
style={[
|
||||
styles.modalContent,
|
||||
{ backgroundColor: colors.bgPrimary },
|
||||
]}
|
||||
>
|
||||
{/* Header modal */}
|
||||
<View
|
||||
style={[
|
||||
styles.modalHeader,
|
||||
{ borderBottomColor: colors.border },
|
||||
]}
|
||||
>
|
||||
<View style={styles.modalTitleRow}>
|
||||
<Ionicons
|
||||
name="notifications-outline"
|
||||
size={20}
|
||||
color={colors.success}
|
||||
/>
|
||||
<Text
|
||||
style={[
|
||||
styles.modalTitle,
|
||||
{ color: colors.textPrimary },
|
||||
]}
|
||||
>
|
||||
Notifications
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity onPress={() => setShowModal(false)}>
|
||||
<Ionicons
|
||||
name="close"
|
||||
size={24}
|
||||
color={colors.textSecondary}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Liste */}
|
||||
<ScrollView style={{ flex: 1 }}>
|
||||
{notifications.length === 0 ? (
|
||||
<Text
|
||||
style={[
|
||||
styles.emptyText,
|
||||
{ color: colors.textMuted },
|
||||
]}
|
||||
>
|
||||
Aucune notification
|
||||
</Text>
|
||||
) : (
|
||||
notifications.map((n, i) => (
|
||||
<View
|
||||
key={`${n.command_id}-${n.type}-${n.created_at}-${i}`}
|
||||
style={[
|
||||
styles.notifItem,
|
||||
{
|
||||
borderBottomColor: colors.border,
|
||||
borderLeftColor: n.read
|
||||
? "transparent"
|
||||
: colors.success,
|
||||
backgroundColor: n.read
|
||||
? "transparent"
|
||||
: colors.success + "10",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.notifMessage,
|
||||
{ color: colors.textPrimary },
|
||||
]}
|
||||
>
|
||||
{n.message}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.notifTime,
|
||||
{ color: colors.textMuted },
|
||||
]}
|
||||
>
|
||||
{formatNotifTime(n.created_at)}
|
||||
</Text>
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
),
|
||||
tabBarStyle: {
|
||||
backgroundColor: colors.bgSecondary,
|
||||
borderTopColor: colors.border,
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
tabBarActiveTintColor: colors.success,
|
||||
tabBarInactiveTintColor: colors.textMuted,
|
||||
tabBarLabelStyle: { fontSize: fontSize.xs },
|
||||
}}
|
||||
>
|
||||
<Tab.Screen
|
||||
name="Dashboard"
|
||||
component={DashboardScreen}
|
||||
options={{
|
||||
title: "Livraisons",
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons
|
||||
name="navigate-outline"
|
||||
size={size}
|
||||
color={color}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Stats"
|
||||
component={StatsScreen}
|
||||
options={{
|
||||
title: "Stats",
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons
|
||||
name="stats-chart-outline"
|
||||
size={size}
|
||||
color={color}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Alerts"
|
||||
component={AlertsScreen}
|
||||
options={{
|
||||
title: "Alertes",
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons
|
||||
name="alert-circle-outline"
|
||||
size={size}
|
||||
color={color}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Tab.Navigator>
|
||||
</View>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
badge: {
|
||||
position: "absolute",
|
||||
top: -4,
|
||||
right: -4,
|
||||
backgroundColor: "#ef4444",
|
||||
borderRadius: 10,
|
||||
minWidth: 18,
|
||||
height: 18,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
badgeText: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
overlay: {
|
||||
flex: 1,
|
||||
justifyContent: "flex-end",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
},
|
||||
modalContent: {
|
||||
height: "70%",
|
||||
borderTopLeftRadius: borderRadius.lg,
|
||||
borderTopRightRadius: borderRadius.lg,
|
||||
},
|
||||
modalHeader: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: spacing.l,
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
modalTitleRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: spacing.s,
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: fontSize.lg,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
emptyText: {
|
||||
textAlign: "center",
|
||||
marginTop: spacing.xl,
|
||||
fontSize: fontSize.sm,
|
||||
},
|
||||
notifItem: {
|
||||
padding: spacing.m,
|
||||
borderBottomWidth: 1,
|
||||
borderLeftWidth: 3,
|
||||
},
|
||||
notifMessage: {
|
||||
fontSize: fontSize.sm,
|
||||
marginBottom: spacing.xs,
|
||||
},
|
||||
notifTime: {
|
||||
fontSize: fontSize.xs,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user