@wasto/cms-components 1.5.10 → 1.5.11

package/src/contexts/AppDataContext.tsx

@@ -0,0 +1,458 @@
+import {
+    createContext,
+    PropsWithChildren,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+    type ReactNode,
+} from "react";
+import { ActivityIndicator, StyleSheet, View } from "react-native";
+import { Image } from "expo-image";
+import { createWastoClient, type CityAppPreload } from "@wasto/sdk";
+import { useLocal } from "./LocalContext";
+import { useTheme } from "./ThemeContext";
+import { resolveApiAssetUrl } from "../helpers/resolveApiAssetUrl";
+import {
+    computeMapCenter,
+    normalizeMapLocations,
+    type MapLocation,
+} from "../helpers/mapLocations";
+import {
+    APP_DATA_CACHE_TTL_MS,
+    readTtlCache,
+    writeTtlCache,
+} from "../helpers/ttlCache";
+import {
+    getCollectionsForDay,
+    type City,
+    type CollectionForDay,
+    type WasteCollectionPlace,
+    type WasteType,
+} from "../helpers/nextCollection";
+import { resolveTheme } from "../helpers/themeStyles";
+
+/** Fenêtre préchargée pour le carrousel « prochaines collectes ». */
+export const NEXT_EVENTS_DAY_RADIUS = 3;
+
+const CACHE_KEY_MAP = (cityId: string) => `wasto_cache_map_v1_${cityId}`;
+const CACHE_KEY_RECYCLING = (cityId: string) => `wasto_cache_recycling_v1_${cityId}`;
+
+export type AppDataContextType = {
+    /** True tant que events ±3j + mois calendrier ne sont pas prêts (loader post-splash). */
+    isBootstrapping: boolean;
+    city: City | null;
+    wasteTypes: WasteType[];
+    wasteCollectionPlaces: WasteCollectionPlace[];
+    /** Collectes précalculées pour offsets -3 … +3. */
+    nextEventsByOffset: Record<number, CollectionForDay[]>;
+    locations: MapLocation[];
+    mapCenter: { lat: number; lon: number };
+    isMapLoading: boolean;
+    isRecyclingLoading: boolean;
+    scheduleError: string | null;
+    mapError: string | null;
+    /**
+     * Force-refresh tri + carte (invalide le TTL).
+     * Utilisé par le pull-to-refresh.
+     */
+    refreshCachedData: () => Promise<void>;
+    /** Recharge events + calendrier (critique). */
+    refreshSchedule: () => Promise<void>;
+};
+
+export const AppDataContext = createContext<AppDataContextType | undefined>(undefined);
+
+function asArray(value: unknown): unknown[] {
+    return Array.isArray(value) ? value : [];
+}
+
+function cacheRecyclingPayload(wasteTypes: WasteType[]) {
+    return wasteTypes;
+}
+
+function buildNextEventsByOffset(
+    wasteTypes: WasteType[],
+    places: WasteCollectionPlace[],
+    placeId: string | null,
+): Record<number, CollectionForDay[]> {
+    const out: Record<number, CollectionForDay[]> = {};
+    for (let offset = -NEXT_EVENTS_DAY_RADIUS; offset <= NEXT_EVENTS_DAY_RADIUS; offset += 1) {
+        out[offset] = getCollectionsForDay(wasteTypes, places, offset, placeId);
+    }
+    return out;
+}
+
+function collectImageUris(
+    apiUrl: string,
+    byOffset: Record<number, CollectionForDay[]>,
+): string[] {
+    const uris = new Set<string>();
+    for (const items of Object.values(byOffset)) {
+        for (const item of items) {
+            const fromUrl = resolveApiAssetUrl(apiUrl, item.imageUrl);
+            if (fromUrl) {
+                uris.add(fromUrl);
+                continue;
+            }
+            if (
+                typeof item.icon === "string" &&
+                item.icon.trim() &&
+                /^https?:\/\//i.test(item.icon)
+            ) {
+                uris.add(item.icon.trim());
+            }
+        }
+    }
+    return Array.from(uris);
+}
+
+async function prefetchImages(uris: string[]): Promise<void> {
+    if (uris.length === 0) return;
+    await Promise.all(
+        uris.map(async (uri) => {
+            try {
+                await Image.prefetch(uri);
+            } catch {
+                // ignore prefetch failures
+            }
+        }),
+    );
+}
+
+async function fetchAllPages(
+    fetchPage: (params: { page: number; pageSize: number }) => Promise<unknown>,
+): Promise<unknown[]> {
+    const PAGE_SIZE = 100;
+    const first = await fetchPage({ page: 1, pageSize: PAGE_SIZE });
+    const meta = (first as { meta?: { totalPages?: number } })?.meta;
+    const data = asArray((first as { data?: unknown })?.data);
+    const totalPages =
+        typeof meta?.totalPages === "number" && meta.totalPages >= 1 ? meta.totalPages : 1;
+    const items = [...data];
+    for (let page = 2; page <= totalPages; page += 1) {
+        const res = await fetchPage({ page, pageSize: PAGE_SIZE });
+        items.push(...asArray((res as { data?: unknown })?.data));
+    }
+    return items;
+}
+
+export type AppDataProviderProps = PropsWithChildren & {
+    apiUrl: string;
+};
+
+export function AppDataProvider({ children, apiUrl }: AppDataProviderProps): ReactNode {
+    const { selectedCityId, selectedPlaceId, hasPlaceSelected, isLoading: localLoading } =
+        useLocal();
+    const client = useMemo(() => createWastoClient({ baseUrl: apiUrl }), [apiUrl]);
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+
+    const [isBootstrapping, setIsBootstrapping] = useState(false);
+    const [city, setCity] = useState<City | null>(null);
+    const [wasteTypes, setWasteTypes] = useState<WasteType[]>([]);
+    const [wasteCollectionPlaces, setWasteCollectionPlaces] = useState<WasteCollectionPlace[]>(
+        [],
+    );
+    const [nextEventsByOffset, setNextEventsByOffset] = useState<
+        Record<number, CollectionForDay[]>
+    >({});
+    const [locations, setLocations] = useState<MapLocation[]>([]);
+    const [isMapLoading, setIsMapLoading] = useState(false);
+    const [isRecyclingLoading, setIsRecyclingLoading] = useState(false);
+    const [scheduleError, setScheduleError] = useState<string | null>(null);
+    const [mapError, setMapError] = useState<string | null>(null);
+
+    const preloadRef = useRef<CityAppPreload | null>(null);
+    const cityIdRef = useRef<string | null>(null);
+
+    const applySchedule = useCallback(
+        (
+            nextCity: City | null,
+            types: WasteType[],
+            places: WasteCollectionPlace[],
+            placeId: string | null,
+        ) => {
+            setCity(nextCity);
+            setWasteTypes(types);
+            setWasteCollectionPlaces(places);
+            const byOffset = buildNextEventsByOffset(types, places, placeId);
+            setNextEventsByOffset(byOffset);
+            void prefetchImages(collectImageUris(apiUrl, byOffset));
+        },
+        [apiUrl],
+    );
+
+    const loadPreload = useCallback(
+        async (cityId: string): Promise<CityAppPreload> => {
+            try {
+                return await client.public.cities.getAppPreload(cityId);
+            } catch {
+                // Fallback si l’endpoint n’est pas encore déployé
+                const [cityRes, types, places, points] = await Promise.all([
+                    client.public.cities.getById(cityId),
+                    fetchAllPages((params) =>
+                        client.public.cities.getWasteTypes(cityId, params),
+                    ),
+                    fetchAllPages((params) =>
+                        client.public.cities.getWasteCollectionPlaces(cityId, params),
+                    ),
+                    fetchAllPages((params) =>
+                        client.public.cities.getRecyclingPoints(cityId, params),
+                    ),
+                ]);
+                return {
+                    city: cityRes,
+                    wasteTypes: types,
+                    wasteCollectionPlaces: places,
+                    recyclingPoints: points,
+                };
+            }
+        },
+        [client.public.cities],
+    );
+
+    const hydrateCachedLayers = useCallback(
+        async (
+            cityId: string,
+            preload: CityAppPreload,
+            force: boolean,
+        ): Promise<void> => {
+            setIsRecyclingLoading(true);
+            setIsMapLoading(true);
+            setMapError(null);
+
+            try {
+                const types = asArray(preload.wasteTypes) as WasteType[];
+
+                if (!force) {
+                    const cachedTypes = await readTtlCache<WasteType[]>(
+                        CACHE_KEY_RECYCLING(cityId),
+                        APP_DATA_CACHE_TTL_MS,
+                    );
+                    if (cachedTypes && cachedTypes.length > 0) {
+                        // Cache hit: conserve les types déjà appliqués au schedule ;
+                        // on réécrit seulement si le preload n’a pas encore hydraté.
+                        if (types.length === 0) {
+                            setWasteTypes(cachedTypes);
+                        }
+                    } else {
+                        await writeTtlCache(CACHE_KEY_RECYCLING(cityId), cacheRecyclingPayload(types));
+                    }
+                } else {
+                    await writeTtlCache(CACHE_KEY_RECYCLING(cityId), cacheRecyclingPayload(types));
+                }
+
+                let nextLocations: MapLocation[] | null = null;
+                if (!force) {
+                    nextLocations = await readTtlCache<MapLocation[]>(
+                        CACHE_KEY_MAP(cityId),
+                        APP_DATA_CACHE_TTL_MS,
+                    );
+                }
+
+                if (!nextLocations) {
+                    nextLocations = normalizeMapLocations(
+                        asArray(preload.recyclingPoints),
+                        asArray(preload.wasteCollectionPlaces),
+                    );
+                    await writeTtlCache(CACHE_KEY_MAP(cityId), nextLocations);
+                }
+
+                setLocations(nextLocations);
+            } catch (err) {
+                setMapError(
+                    err instanceof Error ? err.message : "Impossible de charger la carte / le tri",
+                );
+            } finally {
+                setIsRecyclingLoading(false);
+                setIsMapLoading(false);
+            }
+        },
+        [],
+    );
+
+    const bootstrap = useCallback(
+        async (forceCached = false) => {
+            const cityId = selectedCityId;
+            if (!cityId || !hasPlaceSelected) {
+                setIsBootstrapping(false);
+                setCity(null);
+                setWasteTypes([]);
+                setWasteCollectionPlaces([]);
+                setNextEventsByOffset({});
+                setLocations([]);
+                setScheduleError(null);
+                preloadRef.current = null;
+                cityIdRef.current = null;
+                return;
+            }
+
+            setIsBootstrapping(true);
+            setScheduleError(null);
+
+            // Hydrate carte / tri depuis le cache local pendant le fetch critique
+            if (!forceCached) {
+                const [cachedMap, cachedTypes] = await Promise.all([
+                    readTtlCache<MapLocation[]>(CACHE_KEY_MAP(cityId), APP_DATA_CACHE_TTL_MS),
+                    readTtlCache<WasteType[]>(CACHE_KEY_RECYCLING(cityId), APP_DATA_CACHE_TTL_MS),
+                ]);
+                if (cachedMap) setLocations(cachedMap);
+                if (cachedTypes && cachedTypes.length > 0) {
+                    // Soft fill — le preload réseau écrasera ensuite
+                    setWasteTypes((prev) => (prev.length > 0 ? prev : cachedTypes));
+                }
+            }
+
+            try {
+                const preload = await loadPreload(cityId);
+                preloadRef.current = preload;
+                cityIdRef.current = cityId;
+
+                const types = asArray(preload.wasteTypes) as WasteType[];
+                const places = asArray(preload.wasteCollectionPlaces) as WasteCollectionPlace[];
+                applySchedule((preload.city as City) ?? null, types, places, selectedPlaceId);
+
+                // Events ±3j + mois calendrier prêts → on peut afficher l’UI
+                setIsBootstrapping(false);
+
+                // Tri + carte : cache 1 semaine (ou force)
+                void hydrateCachedLayers(cityId, preload, forceCached);
+            } catch (err) {
+                setScheduleError(
+                    err instanceof Error ? err.message : "Impossible de précharger les données",
+                );
+                setIsBootstrapping(false);
+            }
+        },
+        [
+            applySchedule,
+            hasPlaceSelected,
+            hydrateCachedLayers,
+            loadPreload,
+            selectedCityId,
+            selectedPlaceId,
+        ],
+    );
+
+    useEffect(() => {
+        if (localLoading) return;
+        void bootstrap(false);
+    }, [localLoading, bootstrap]);
+
+    // Recalcule les events ±3j si le lieu change sans recharger l’API
+    useEffect(() => {
+        if (!wasteTypes.length && !wasteCollectionPlaces.length) return;
+        const byOffset = buildNextEventsByOffset(
+            wasteTypes,
+            wasteCollectionPlaces,
+            selectedPlaceId,
+        );
+        setNextEventsByOffset(byOffset);
+        void prefetchImages(collectImageUris(apiUrl, byOffset));
+    }, [apiUrl, selectedPlaceId, wasteCollectionPlaces, wasteTypes]);
+
+    const refreshSchedule = useCallback(async () => {
+        await bootstrap(false);
+    }, [bootstrap]);
+
+    const refreshCachedData = useCallback(async () => {
+        const cityId = selectedCityId ?? cityIdRef.current;
+        if (!cityId) return;
+
+        setIsRecyclingLoading(true);
+        setIsMapLoading(true);
+        try {
+            const preload = await loadPreload(cityId);
+            preloadRef.current = preload;
+            cityIdRef.current = cityId;
+
+            const types = asArray(preload.wasteTypes) as WasteType[];
+            const places = asArray(preload.wasteCollectionPlaces) as WasteCollectionPlace[];
+            applySchedule((preload.city as City) ?? null, types, places, selectedPlaceId);
+            await hydrateCachedLayers(cityId, preload, true);
+        } catch (err) {
+            setMapError(
+                err instanceof Error ? err.message : "Impossible de rafraîchir les données",
+            );
+            setIsRecyclingLoading(false);
+            setIsMapLoading(false);
+        }
+    }, [applySchedule, hydrateCachedLayers, loadPreload, selectedCityId, selectedPlaceId]);
+
+    const mapCenter = useMemo(() => computeMapCenter(locations), [locations]);
+
+    const value = useMemo<AppDataContextType>(
+        () => ({
+            isBootstrapping: localLoading || isBootstrapping,
+            city,
+            wasteTypes,
+            wasteCollectionPlaces,
+            nextEventsByOffset,
+            locations,
+            mapCenter,
+            isMapLoading,
+            isRecyclingLoading,
+            scheduleError,
+            mapError,
+            refreshCachedData,
+            refreshSchedule,
+        }),
+        [
+            city,
+            isBootstrapping,
+            isMapLoading,
+            isRecyclingLoading,
+            localLoading,
+            locations,
+            mapCenter,
+            mapError,
+            nextEventsByOffset,
+            refreshCachedData,
+            refreshSchedule,
+            scheduleError,
+            wasteCollectionPlaces,
+            wasteTypes,
+        ],
+    );
+
+    const showLoader = hasPlaceSelected && (localLoading || isBootstrapping);
+
+    return (
+        <AppDataContext value={value}>
+            {children}
+            {showLoader ? (
+                <View
+                    style={[styles.loader, { backgroundColor: theme.colors.background }]}
+                    pointerEvents="auto"
+                >
+                    <ActivityIndicator size="large" color={t.colors.primary} />
+                </View>
+            ) : null}
+        </AppDataContext>
+    );
+}
+
+export function useAppData(): AppDataContextType {
+    const ctx = useContext(AppDataContext);
+    if (!ctx) {
+        throw new Error("useAppData must be used within an AppDataProvider.");
+    }
+    return ctx;
+}
+
+/** Safe variant for hooks that may run outside (preview / tests). */
+export function useOptionalAppData(): AppDataContextType | null {
+    return useContext(AppDataContext) ?? null;
+}
+
+const styles = StyleSheet.create({
+    loader: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 1000,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});