@wasto/cms-components 1.5.10 → 1.5.12

package/src/components/notifications/NotificationsScreen.tsx

@@ -1,247 +1,247 @@
-import { useCallback, type ReactNode } from "react";
-import {
-    ActivityIndicator,
-    FlatList,
-    Pressable,
-    StyleSheet,
-    Text,
-    View,
-} from "react-native";
-import { useTheme } from "../../contexts/ThemeContext";
-import { resolveTheme, cardStyle } from "../../helpers/themeStyles";
-import { SPACE } from "../../helpers/layout";
-import {
-    useCityAnnouncements,
-    type CityAnnouncementItem,
-} from "../../hooks/useCityAnnouncements";
-import { Button } from "../button/Button";
-
-function formatSentAt(value?: string | null) {
-    if (!value) return null;
-    const d = new Date(value);
-    if (Number.isNaN(d.getTime())) return null;
-    return d.toLocaleDateString("fr-FR", {
-        day: "numeric",
-        month: "short",
-        year: "numeric",
-    });
-}
-
-function excerpt(body: string, max = 120) {
-    const t = body.trim().replace(/\s+/g, " ");
-    if (t.length <= max) return t;
-    return `${t.slice(0, max).trim()}…`;
-}
-
-/** Inbox list — detail uses the shared AnnouncementModal (WastoProvider). */
-export function NotificationsScreen(): ReactNode {
-    const { theme } = useTheme();
-    const t = resolveTheme(theme);
-    const {
-        items,
-        loading,
-        error,
-        hasMore,
-        loadMore,
-        reload,
-        openItem,
-        hasPlaceSelected,
-        totalCount,
-    } = useCityAnnouncements();
-
-    const renderItem = useCallback(
-        ({ item }: { item: CityAnnouncementItem }) => {
-            const dateLabel = formatSentAt(item.sentAt);
-            return (
-                <Pressable
-                    onPress={() => void openItem(item)}
-                    style={[
-                        styles.row,
-                        cardStyle(theme),
-                        { borderRadius: t.radii.md },
-                    ]}
-                    accessibilityRole="button"
-                    accessibilityLabel={item.title}
-                >
-                    <View style={styles.rowHeader}>
-                        <Text
-                            style={[styles.rowTitle, { color: theme.colors.onSurface }]}
-                            numberOfLines={2}
-                        >
-                            {item.title}
-                        </Text>
-                        {item.unread ? (
-                            <View
-                                style={[
-                                    styles.unreadDot,
-                                    { backgroundColor: theme.colors.primary },
-                                ]}
-                            />
-                        ) : null}
-                    </View>
-                    {dateLabel ? (
-                        <Text style={[styles.rowMeta, { color: t.colors.muted }]}>
-                            {dateLabel}
-                        </Text>
-                    ) : null}
-                    <Text
-                        style={[styles.rowBody, { color: t.colors.muted }]}
-                        numberOfLines={3}
-                    >
-                        {excerpt(item.body)}
-                    </Text>
-                </Pressable>
-            );
-        },
-        [openItem, t.colors.muted, t.radii.md, theme],
-    );
-
-    if (!hasPlaceSelected) {
-        return (
-            <View style={styles.center}>
-                <Text style={[styles.emptyTitle, { color: theme.colors.onSurface }]}>
-                    Aucun secteur sélectionné
-                </Text>
-                <Text style={[styles.emptyText, { color: t.colors.muted }]}>
-                    Choisissez votre rue pour voir les notifications de votre ville.
-                </Text>
-            </View>
-        );
-    }
-
-    if (loading && items.length === 0) {
-        return (
-            <View style={styles.center}>
-                <ActivityIndicator color={theme.colors.primary} />
-            </View>
-        );
-    }
-
-    if (error && items.length === 0) {
-        return (
-            <View style={styles.center}>
-                <Text style={[styles.emptyTitle, { color: theme.colors.error }]}>
-                    {error}
-                </Text>
-                <Button variant="secondary" onPress={() => void reload()} style={styles.retry}>
-                    Réessayer
-                </Button>
-            </View>
-        );
-    }
-
-    return (
-        <View style={styles.screen}>
-            <FlatList
-                data={items}
-                keyExtractor={(item) => item.id}
-                renderItem={renderItem}
-                contentContainerStyle={styles.list}
-                onEndReached={() => {
-                    if (hasMore) loadMore();
-                }}
-                onEndReachedThreshold={0.4}
-                ListEmptyComponent={
-                    <View style={styles.centerInline}>
-                        <Text style={[styles.emptyTitle, { color: theme.colors.onSurface }]}>
-                            Aucune notification
-                        </Text>
-                        <Text style={[styles.emptyText, { color: t.colors.muted }]}>
-                            Les annonces de votre ville apparaîtront ici.
-                        </Text>
-                    </View>
-                }
-                ListFooterComponent={
-                    hasMore ? (
-                        <Button
-                            variant="ghost"
-                            onPress={loadMore}
-                            style={styles.loadMore}
-                        >
-                            {`Voir plus (${items.length}/${totalCount})`}
-                        </Button>
-                    ) : items.length > 0 ? (
-                        <Text style={[styles.footerHint, { color: t.colors.muted }]}>
-                            {totalCount} notification{totalCount > 1 ? "s" : ""}
-                        </Text>
-                    ) : null
-                }
-            />
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    screen: {
-        flex: 1,
-    },
-    list: {
-        paddingHorizontal: SPACE.pageX,
-        paddingVertical: SPACE.sectionY,
-        gap: SPACE.stack,
-        flexGrow: 1,
-    },
-    row: {
-        padding: SPACE.cardPad,
-        gap: 6,
-    },
-    rowHeader: {
-        flexDirection: "row",
-        alignItems: "flex-start",
-        gap: 8,
-    },
-    rowTitle: {
-        flex: 1,
-        fontSize: 16,
-        fontWeight: "700",
-    },
-    unreadDot: {
-        width: 10,
-        height: 10,
-        borderRadius: 5,
-        marginTop: 5,
-    },
-    rowMeta: {
-        fontSize: 12,
-        fontWeight: "600",
-    },
-    rowBody: {
-        fontSize: 14,
-        lineHeight: 20,
-    },
-    center: {
-        flex: 1,
-        alignItems: "center",
-        justifyContent: "center",
-        padding: SPACE.pageX,
-        gap: 8,
-    },
-    centerInline: {
-        paddingVertical: 48,
-        alignItems: "center",
-        gap: 8,
-    },
-    emptyTitle: {
-        fontSize: 17,
-        fontWeight: "700",
-        textAlign: "center",
-    },
-    emptyText: {
-        fontSize: 14,
-        textAlign: "center",
-        lineHeight: 20,
-    },
-    retry: {
-        marginTop: 12,
-        alignSelf: "stretch",
-    },
-    loadMore: {
-        marginTop: 8,
-    },
-    footerHint: {
-        textAlign: "center",
-        fontSize: 12,
-        marginTop: 8,
-        marginBottom: 16,
-    },
-});
+import { useCallback, type ReactNode } from "react";
+import {
+    ActivityIndicator,
+    FlatList,
+    Pressable,
+    StyleSheet,
+    Text,
+    View,
+} from "react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { resolveTheme, cardStyle } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+import {
+    useCityAnnouncements,
+    type CityAnnouncementItem,
+} from "../../hooks/useCityAnnouncements";
+import { Button } from "../button/Button";
+
+function formatSentAt(value?: string | null) {
+    if (!value) return null;
+    const d = new Date(value);
+    if (Number.isNaN(d.getTime())) return null;
+    return d.toLocaleDateString("fr-FR", {
+        day: "numeric",
+        month: "short",
+        year: "numeric",
+    });
+}
+
+function excerpt(body: string, max = 120) {
+    const t = body.trim().replace(/\s+/g, " ");
+    if (t.length <= max) return t;
+    return `${t.slice(0, max).trim()}…`;
+}
+
+/** Inbox list — detail uses the shared AnnouncementModal (WastoProvider). */
+export function NotificationsScreen(): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const {
+        items,
+        loading,
+        error,
+        hasMore,
+        loadMore,
+        reload,
+        openItem,
+        hasPlaceSelected,
+        totalCount,
+    } = useCityAnnouncements();
+
+    const renderItem = useCallback(
+        ({ item }: { item: CityAnnouncementItem }) => {
+            const dateLabel = formatSentAt(item.sentAt);
+            return (
+                <Pressable
+                    onPress={() => void openItem(item)}
+                    style={[
+                        styles.row,
+                        cardStyle(theme),
+                        { borderRadius: t.radii.md },
+                    ]}
+                    accessibilityRole="button"
+                    accessibilityLabel={item.title}
+                >
+                    <View style={styles.rowHeader}>
+                        <Text
+                            style={[styles.rowTitle, { color: theme.colors.onSurface }]}
+                            numberOfLines={2}
+                        >
+                            {item.title}
+                        </Text>
+                        {item.unread ? (
+                            <View
+                                style={[
+                                    styles.unreadDot,
+                                    { backgroundColor: theme.colors.primary },
+                                ]}
+                            />
+                        ) : null}
+                    </View>
+                    {dateLabel ? (
+                        <Text style={[styles.rowMeta, { color: t.colors.muted }]}>
+                            {dateLabel}
+                        </Text>
+                    ) : null}
+                    <Text
+                        style={[styles.rowBody, { color: t.colors.muted }]}
+                        numberOfLines={3}
+                    >
+                        {excerpt(item.body)}
+                    </Text>
+                </Pressable>
+            );
+        },
+        [openItem, t.colors.muted, t.radii.md, theme],
+    );
+
+    if (!hasPlaceSelected) {
+        return (
+            <View style={styles.center}>
+                <Text style={[styles.emptyTitle, { color: theme.colors.onSurface }]}>
+                    Aucun secteur sélectionné
+                </Text>
+                <Text style={[styles.emptyText, { color: t.colors.muted }]}>
+                    Choisissez votre rue pour voir les notifications de votre ville.
+                </Text>
+            </View>
+        );
+    }
+
+    if (loading && items.length === 0) {
+        return (
+            <View style={styles.center}>
+                <ActivityIndicator color={theme.colors.primary} />
+            </View>
+        );
+    }
+
+    if (error && items.length === 0) {
+        return (
+            <View style={styles.center}>
+                <Text style={[styles.emptyTitle, { color: theme.colors.error }]}>
+                    {error}
+                </Text>
+                <Button variant="secondary" onPress={() => void reload()} style={styles.retry}>
+                    Réessayer
+                </Button>
+            </View>
+        );
+    }
+
+    return (
+        <View style={styles.screen}>
+            <FlatList
+                data={items}
+                keyExtractor={(item) => item.id}
+                renderItem={renderItem}
+                contentContainerStyle={styles.list}
+                onEndReached={() => {
+                    if (hasMore) loadMore();
+                }}
+                onEndReachedThreshold={0.4}
+                ListEmptyComponent={
+                    <View style={styles.centerInline}>
+                        <Text style={[styles.emptyTitle, { color: theme.colors.onSurface }]}>
+                            Aucune notification
+                        </Text>
+                        <Text style={[styles.emptyText, { color: t.colors.muted }]}>
+                            Les annonces de votre ville apparaîtront ici.
+                        </Text>
+                    </View>
+                }
+                ListFooterComponent={
+                    hasMore ? (
+                        <Button
+                            variant="ghost"
+                            onPress={loadMore}
+                            style={styles.loadMore}
+                        >
+                            {`Voir plus (${items.length}/${totalCount})`}
+                        </Button>
+                    ) : items.length > 0 ? (
+                        <Text style={[styles.footerHint, { color: t.colors.muted }]}>
+                            {totalCount} notification{totalCount > 1 ? "s" : ""}
+                        </Text>
+                    ) : null
+                }
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+    },
+    list: {
+        paddingHorizontal: SPACE.pageX,
+        paddingVertical: SPACE.sectionY,
+        gap: SPACE.stack,
+        flexGrow: 1,
+    },
+    row: {
+        padding: SPACE.cardPad,
+        gap: 6,
+    },
+    rowHeader: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 8,
+    },
+    rowTitle: {
+        flex: 1,
+        fontSize: 16,
+        fontWeight: "700",
+    },
+    unreadDot: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        marginTop: 5,
+    },
+    rowMeta: {
+        fontSize: 12,
+        fontWeight: "600",
+    },
+    rowBody: {
+        fontSize: 14,
+        lineHeight: 20,
+    },
+    center: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        padding: SPACE.pageX,
+        gap: 8,
+    },
+    centerInline: {
+        paddingVertical: 48,
+        alignItems: "center",
+        gap: 8,
+    },
+    emptyTitle: {
+        fontSize: 17,
+        fontWeight: "700",
+        textAlign: "center",
+    },
+    emptyText: {
+        fontSize: 14,
+        textAlign: "center",
+        lineHeight: 20,
+    },
+    retry: {
+        marginTop: 12,
+        alignSelf: "stretch",
+    },
+    loadMore: {
+        marginTop: 8,
+    },
+    footerHint: {
+        textAlign: "center",
+        fontSize: 12,
+        marginTop: 8,
+        marginBottom: 16,
+    },
+});

package/src/components/page/Page.tsx

@@ -1,64 +1,102 @@
-import { PropsWithChildren, type ReactNode } from "react";
-import { ScrollView, StyleSheet, View } from "react-native";
-import { useTheme } from "../../contexts/ThemeContext";
-import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
-import { SPACE } from "../../helpers/layout";
-import { Theme } from "../../types/Theme";
-
-export type PageProps = PropsWithChildren & {
-    /** When false, content fills the screen without scrolling (e.g. fullScreen map). Default true. */
-    scroll?: boolean;
-};
-
-/**
- * Page shell: top safe area + optional vertical scroll.
- * No global horizontal padding — each block uses ContentInset or is full-bleed
- * (map, calendar grid). Bottom inset is handled by BottomTab when using tabs.
- */
-export function Page({ children, scroll = true }: PageProps): ReactNode {
-    const { theme } = useTheme();
-    const themedStyles = createThemedStyles(theme);
-    const topInset = useSafeAreaPadding(["top"]);
-
-    return (
-        <View style={[styles.root, themedStyles.root, topInset]}>
-            {scroll ? (
-                <ScrollView
-                    style={styles.scroll}
-                    contentContainerStyle={styles.scrollContent}
-                    keyboardShouldPersistTaps="handled"
-                    showsVerticalScrollIndicator={false}
-                >
-                    {children}
-                </ScrollView>
-            ) : (
-                <View style={styles.fill}>{children}</View>
-            )}
-        </View>
-    );
-}
-
-const createThemedStyles = (theme: Theme) =>
-    StyleSheet.create({
-        root: {
-            backgroundColor: theme.colors.background,
-        },
-    });
-
-const styles = StyleSheet.create({
-    root: {
-        flex: 1,
-    },
-    scroll: {
-        flex: 1,
-    },
-    scrollContent: {
-        flexGrow: 1,
-        gap: SPACE.sectionY,
-        paddingBottom: 28,
-    },
-    fill: {
-        flex: 1,
-        gap: SPACE.sectionY,
-    },
-});
+import { PropsWithChildren, useCallback, useState, type ReactNode } from "react";
+import { RefreshControl, ScrollView, StyleSheet, View } from "react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useOptionalAppData } from "../../contexts/AppDataContext";
+import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
+import { SPACE } from "../../helpers/layout";
+import { Theme } from "../../types/Theme";
+import { resolveTheme } from "../../helpers/themeStyles";
+
+export type PageProps = PropsWithChildren & {
+    /** When false, content fills the screen without scrolling (e.g. fullScreen map). Default true. */
+    scroll?: boolean;
+    /**
+     * Pull-to-refresh : force refresh du cache tri + carte (TTL 1 semaine).
+     * Default true when scrollable.
+     */
+    pullToRefresh?: boolean;
+};
+
+/**
+ * Page shell: top safe area + optional vertical scroll.
+ * No global horizontal padding — each block uses ContentInset or is full-bleed
+ * (map, calendar grid). Bottom inset is handled by BottomTab when using tabs.
+ */
+export function Page({
+    children,
+    scroll = true,
+    pullToRefresh,
+}: PageProps): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const themedStyles = createThemedStyles(theme);
+    const topInset = useSafeAreaPadding(["top"]);
+    const appData = useOptionalAppData();
+    const [refreshing, setRefreshing] = useState(false);
+
+    const enableRefresh = pullToRefresh ?? scroll;
+
+    const onRefresh = useCallback(async () => {
+        if (!appData) return;
+        setRefreshing(true);
+        try {
+            await appData.refreshCachedData();
+        } finally {
+            setRefreshing(false);
+        }
+    }, [appData]);
+
+    return (
+        <View style={[styles.root, themedStyles.root, topInset]}>
+            {scroll ? (
+                <ScrollView
+                    style={styles.scroll}
+                    contentContainerStyle={styles.scrollContent}
+                    keyboardShouldPersistTaps="handled"
+                    showsVerticalScrollIndicator={false}
+                    refreshControl={
+                        enableRefresh && appData ? (
+                            <RefreshControl
+                                refreshing={refreshing}
+                                onRefresh={() => {
+                                    void onRefresh();
+                                }}
+                                tintColor={t.colors.primary}
+                                colors={[t.colors.primary]}
+                            />
+                        ) : undefined
+                    }
+                >
+                    {children}
+                </ScrollView>
+            ) : (
+                <View style={styles.fill}>{children}</View>
+            )}
+        </View>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        root: {
+            backgroundColor: theme.colors.background,
+        },
+    });
+
+const styles = StyleSheet.create({
+    root: {
+        flex: 1,
+    },
+    scroll: {
+        flex: 1,
+    },
+    scrollContent: {
+        flexGrow: 1,
+        gap: SPACE.sectionY,
+        paddingBottom: 28,
+    },
+    fill: {
+        flex: 1,
+        gap: SPACE.sectionY,
+    },
+});