Implement persistent offline cache for Guild Passes

app/guilds.tsx

@@ -1,7 +1,15 @@
-import { View, FlatList, TextInput, TouchableOpacity, Text, RefreshControl, useColorScheme } from "react-native";
+import {
+  View,
+  FlatList,
+  TextInput,
+  TouchableOpacity,
+  Text,
+  RefreshControl,
+  useColorScheme,
+} from "react-native";
 import { useRouter } from "expo-router";
 import { useWallet } from "../src/features/wallet/useWallet";
-import { useGuilds } from "../src/features/guilds/useGuilds";
+import { useGuilds, type GuildListItem } from "../src/features/guilds/useGuilds";
 import { AppHeader } from "../src/components/AppHeader";
 import { GuildCard } from "../src/components/GuildCard";
 import { GuildListSkeleton } from "../src/components/GuildCardSkeleton";
@@ -11,60 +19,149 @@ import { EmptyState } from "../src/components/EmptyState";
 import { WalletRequired } from "../src/components/WalletRequired";
 import { useDebouncedValue } from "../src/lib/useDebouncedValue";
 import React, { useState, useMemo, useCallback } from "react";
-import { useMembership } from "../src/features/membership/useMembership";
+import { useMembership, type EnrichedMembership } from "../src/features/membership/useMembership";
 import { StaleDataBanner } from "../src/components/StaleDataBanner";
-import { useStaleQuery } from "../src/features/offline/useStaleQuery";
+import { useCombinedStaleState } from "../src/features/offline/useStaleQuery";
 import { useQueryClient } from "@tanstack/react-query";
+import { queryKeys } from "../src/lib/queryKeys";
+
+type GuildListRow = {
+  guildId: string;
+  guildName: string;
+  isActive: boolean;
+  roleCount: number;
+  status?: EnrichedMembership["status"];
+};
+
+function rowsFromWalletGuilds(
+  guilds: GuildListItem[],
+  memberships: EnrichedMembership[],
+): GuildListRow[] {
+  const membershipsByGuildId = new Map(
+    memberships.map((membership) => [membership.guildId, membership]),
+  );
+
+  return guilds.map((guild) => {
+    const membership = membershipsByGuildId.get(guild.id);
+    return {
+      guildId: guild.id,
+      guildName: guild.name,
+      isActive: guild.isActive,
+      roleCount: guild.roleCount ?? membership?.roleCount ?? 0,
+      status: guild.status ?? membership?.status ?? (guild.isActive ? "active" : "inactive"),
+    };
+  });
+}
+
+function rowsFromMemberships(memberships: EnrichedMembership[]): GuildListRow[] {
+  return memberships.map((membership) => ({
+    guildId: membership.guildId,
+    guildName: membership.guildName,
+    isActive: membership.isActive,
+    roleCount: membership.roleCount,
+    status: membership.status,
+  }));
+}
 
 export default function Guilds() {
   const router = useRouter();
   const colorScheme = useColorScheme();
   const { walletAddress, disconnect } = useWallet();
-  const { useEnrichedMemberships } = useMembership(walletAddress);
-  const membershipsQuery = useEnrichedMemberships();
-  const { data: memberships, isLoading, error } = membershipsQuery;
-  const staleState = useStaleQuery(membershipsQuery);
-  const { walletAddress } = useWallet();
   const { useWalletGuilds } = useGuilds();
+  const { useEnrichedMemberships } = useMembership(walletAddress);
+  const queryClient = useQueryClient();
+
   const guildsQuery = useWalletGuilds(walletAddress);
+  const membershipsQuery = useEnrichedMemberships();
+  const memberships = membershipsQuery.data ?? [];
+  const staleState = useCombinedStaleState([guildsQuery, membershipsQuery]);
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isRefetching, setIsRefetching] = useState(false);
+  const debouncedQuery = useDebouncedValue(searchQuery, 300);
+
+  const listRows = useMemo(() => {
+    const guilds = guildsQuery.data ?? [];
+    return guilds.length > 0
+      ? rowsFromWalletGuilds(guilds, memberships)
+      : rowsFromMemberships(memberships);
+  }, [guildsQuery.data, memberships]);
+
+  const filteredGuilds = useMemo(() => {
+    const query = debouncedQuery.trim().toLowerCase();
+    if (!query) return listRows;
+    return listRows.filter((guild) => guild.guildName.toLowerCase().includes(query));
+  }, [listRows, debouncedQuery]);
+
+  const handleConnectDifferentWallet = async () => {
+    await disconnect();
+    router.replace("/profile");
+  };
+
+  const handleRefresh = useCallback(async () => {
+    if (!walletAddress) return;
+
+    setIsRefetching(true);
+    try {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: queryKeys.walletGuilds.byWallet(walletAddress) }),
+        queryClient.invalidateQueries({ queryKey: queryKeys.memberships.byWallet(walletAddress) }),
+        guildsQuery.refetch(),
+        membershipsQuery.refetch(),
+      ]);
+    } finally {
+      setIsRefetching(false);
+    }
+  }, [guildsQuery, membershipsQuery, queryClient, walletAddress]);
 
   if (!walletAddress) {
+    return (
+      <WalletRequired>
+        <View className="flex-1 bg-background dark:bg-slate-900" testID="guilds-screen">
+          <AppHeader title="My Guilds" showBack />
+          <EmptyState
+            title="Connect Wallet"
+            message="Connect a wallet to load your GuildPass guilds."
+          />
+        </View>
+      </WalletRequired>
+    );
+  }
+
+  if (guildsQuery.isLoading && membershipsQuery.isLoading && listRows.length === 0) {
     return (
       <WalletRequired>
         <View className="flex-1 bg-background dark:bg-slate-900" testID="guilds-screen">
           <AppHeader title="My Guilds" showBack />
           <GuildListSkeleton />
         </View>
       </WalletRequired>
-      <View className="flex-1 bg-background" testID="guilds-screen">
-        <AppHeader title="My Guilds" showBack />
-        <EmptyState
-          title="Connect Wallet"
-          message="Connect a wallet to load your GuildPass guilds."
-        />
-      </View>
     );
   }
 
-  if (guildsQuery.isLoading) {
+  if (guildsQuery.isError && membershipsQuery.error && listRows.length === 0) {
     return (
       <WalletRequired>
         <View className="flex-1 bg-background dark:bg-slate-900" testID="guilds-screen">
           <AppHeader title="My Guilds" showBack />
           {staleState.isOffline ? (
             <StaleDataBanner reason="offline" lastSyncedAt={staleState.lastSyncedAt} />
           ) : null}
-          <ErrorState message="Failed to load memberships" />
+          <ErrorState
+            message={
+              guildsQuery.error instanceof Error
+                ? guildsQuery.error.message
+                : "Unable to load your guilds."
+            }
+            onRetry={handleRefresh}
+            isRetrying={isRefetching || guildsQuery.isFetching || membershipsQuery.isFetching}
+          />
         </View>
       </WalletRequired>
-      <View className="flex-1 bg-background" testID="guilds-screen">
-        <AppHeader title="My Guilds" showBack />
-        <LoadingState message="Loading your guilds..." />
-      </View>
     );
   }
 
-  if (guildsQuery.isError) {
+  if (listRows.length === 0) {
     return (
       <WalletRequired>
         <View className="flex-1 bg-background dark:bg-slate-900" testID="guilds-screen">
@@ -93,49 +190,14 @@ export default function Guilds() {
           <TextInput
             className="flex-1 text-text dark:text-slate-100 text-base"
             placeholder="Search guilds..."
-            placeholderTextColor={colorScheme === 'dark' ? '#94a3b8' : '#9ca3af'}
+            placeholderTextColor={colorScheme === "dark" ? "#94a3b8" : "#9ca3af"}
             value={searchQuery}
             onChangeText={setSearchQuery}
             autoCapitalize="none"
             autoCorrect={false}
             clearButtonMode="while-editing"
             testID="guild-search-input"
             accessibilityLabel="Search guilds by name"
-      <View className="flex-1 bg-background" testID="guilds-screen">
-        <AppHeader title="My Guilds" showBack />
-        <ErrorState
-          message={
-            guildsQuery.error instanceof Error
-              ? guildsQuery.error.message
-              : "Unable to load your guilds."
-          }
-          onRetry={() => void guildsQuery.refetch()}
-        />
-      </View>
-    );
-  }
-
-  return (
-    <View className="flex-1 bg-background" testID="guilds-screen">
-      <AppHeader title="My Guilds" showBack />
-      <FlatList
-        data={guildsQuery.data ?? []}
-        keyExtractor={(item) => item.id}
-        contentContainerStyle={{ padding: 16 }}
-        testID="guilds-list"
-        renderItem={({ item }) => (
-          <GuildCard
-            name={item.name}
-            id={item.id}
-            isActive={item.isActive}
-            roleCount={item.roleCount ?? 0}
-            onPress={() => router.push(`/guilds/${item.id}`)}
-          />
-        )}
-        ListEmptyComponent={
-          <EmptyState
-            title="No Guilds Found"
-            message="This wallet is not a member of any guilds yet."
           />
           {searchQuery.length > 0 && (
             <TouchableOpacity
@@ -152,14 +214,15 @@ export default function Guilds() {
     </View>
   );
 
-  const isRefreshing = isRefetching || membershipsQuery.isRefetching;
+  const isRefreshing = isRefetching || guildsQuery.isRefetching || membershipsQuery.isRefetching;
+  const isShowingOfflineCache = staleState.isOffline && filteredGuilds.length > 0;
 
   return (
     <WalletRequired>
       <View className="flex-1 bg-background dark:bg-slate-900" testID="guilds-screen">
         <AppHeader title="My Guilds" showBack />
         <FlatList
-          data={filteredMemberships}
+          data={filteredGuilds}
           keyExtractor={(item) => item.guildId}
           contentContainerStyle={{ padding: 16 }}
           testID="guilds-list"
@@ -171,6 +234,8 @@ export default function Guilds() {
               id={item.guildId}
               isActive={item.isActive}
               roleCount={item.roleCount}
+              status={item.status}
+              offlineCached={isShowingOfflineCache}
               onPress={() => router.push(`/guilds/${item.guildId}`)}
             />
           )}
@@ -184,4 +249,4 @@ export default function Guilds() {
       </View>
     </WalletRequired>
   );
-}
+}