Refactor data hooks to follow React hook rules

app/access-check.tsx

@@ -1,55 +1,38 @@
-// GuildPass Mobile: Pull in react-native, expo, or external state libraries.
 import { View, Text, ScrollView, TextInput } from "react-native";
-// GuildPass Mobile: Import package module dependencies.
 import React, { useEffect, useState } from "react";
 import { useLocalSearchParams, useRouter } from "expo-router";
-// GuildPass Mobile: Pull in react-native, expo, or external state libraries.
 import { useWallet } from "../src/features/wallet/useWallet";
-// GuildPass Mobile: Import package module dependencies.
-import { useAccessCheck } from "../src/features/access/useAccessCheck";
+import { useAccessCheckResult } from "../src/features/access/useAccessCheckResult";
 import type { ParsedAccessQrPayload } from "../src/features/access/qrPayload";
 import { parseAccessQrPayload } from "../src/features/access/qrPayload";
-// GuildPass Mobile: Pull in react-native, expo, or external state libraries.
 import { AppHeader } from "../src/components/AppHeader";
-// GuildPass Mobile: Import package module dependencies.
 import { Card } from "../src/components/Card";
-// GuildPass Mobile: Pull in react-native, expo, or external state libraries.
 import { Button } from "../src/components/Button";
-// GuildPass Mobile: Import package module dependencies.
 import { WalletInput } from "../src/components/WalletInput";
-// GuildPass Mobile: Pull in react-native, expo, or external state libraries.
 import { AccessStatusCard } from "../src/components/AccessStatusCard";
-// GuildPass Mobile: Import package module dependencies.
 import { LoadingState } from "../src/components/LoadingState";
 
-// GuildPass Mobile: Exposed interface structure for local navigation layouts.
 export default function AccessCheck() {
   const router = useRouter();
   const { qrPayload } = useLocalSearchParams<{ qrPayload?: string | string[] }>();
-  // GuildPass Mobile: Variable binding and property initialization.
   const { walletAddress: currentWallet } = useWallet();
-  // GuildPass Mobile: Local UI-scoped constant or state representation.
   const [address, setAddress] = useState(currentWallet || "");
-  // GuildPass Mobile: Variable binding and property initialization.
   const [guildId, setGuildId] = useState("");
-  // GuildPass Mobile: Local UI-scoped constant or state representation.
   const [resourceId, setResourceId] = useState("");
   const [scanError, setScanError] = useState<string | null>(null);
   const [scannedPayload, setScannedPayload] = useState<ParsedAccessQrPayload | null>(null);
-  // GuildPass Mobile: Variable binding and property initialization.
   const [checkParams, setCheckParams] = useState<{
     walletAddress: string;
     guildId: string;
     resourceId: string;
-    // GuildPass Mobile: Exit functional execution container scope block.
   } | null>(null);
 
-  const checkParamsNonNull = checkParams || { walletAddress: "", guildId: "", resourceId: "" };
+  const checkParamsNonNull = checkParams ?? { walletAddress: "", guildId: "", resourceId: "" };
   const {
     data: result,
     isLoading,
     error,
-  } = useAccessCheck(checkParamsNonNull);
+  } = useAccessCheckResult(checkParamsNonNull);
 
   useEffect(() => {
     const rawPayload = Array.isArray(qrPayload) ? qrPayload[0] : qrPayload;
@@ -73,17 +56,12 @@ export default function AccessCheck() {
     }
   }, [currentWallet, qrPayload]);
 
-  // GuildPass Mobile: Local UI-scoped constant or state representation.
   const handleCheck = () => {
-    // GuildPass Mobile: Evaluate branch condition check for UI guards.
     if (address && guildId && resourceId) {
       setCheckParams({ walletAddress: address, guildId, resourceId });
-      // GuildPass Mobile: Exit functional execution container scope block.
     }
-    // GuildPass Mobile: Exit functional execution container scope block.
   };
 
-  // GuildPass Mobile: Terminate block execution context and send back value.
   return (
     <View className="flex-1 bg-background">
       <AppHeader title="Access Check" showBack />
@@ -92,7 +70,6 @@ export default function AccessCheck() {
           <WalletInput
             value={address}
             onChangeText={setAddress}
-            // GuildPass Mobile: Variable binding and property initialization.
             placeholder="Wallet address (0x...)"
           />
 
@@ -177,7 +154,11 @@ export default function AccessCheck() {
         )}
 
         {error && (
-          <Card className="border-error bg-error/5" accessibilityRole="alert" accessibilityLabel="Error checking access. Please verify your inputs and try again.">
+          <Card
+            className="border-error bg-error/5"
+            accessibilityRole="alert"
+            accessibilityLabel="Error checking access. Please verify your inputs and try again."
+          >
             <Text className="text-error font-bold">Error checking access</Text>
             <Text className="text-error/80 text-sm mt-1">
               Please verify your inputs and try again.
@@ -187,5 +168,4 @@ export default function AccessCheck() {
       </ScrollView>
     </View>
   );
-  // GuildPass Mobile: Exit functional execution container scope block.
 }

app/guilds.tsx

@@ -2,11 +2,6 @@
 import { View, FlatList } from "react-native";
 // GuildPass Mobile: Pull in react-native, expo, or external state libraries.
 import { useRouter } from "expo-router";
-// GuildPass Mobile: Import package module dependencies.
-import { useWallet } from "../src/features/wallet/useWallet";
-// GuildPass Mobile: Pull in react-native, expo, or external state libraries.
-import { useMembership } from "../src/features/membership/useMembership";
-// GuildPass Mobile: Import package module dependencies.
 import { AppHeader } from "../src/components/AppHeader";
 // GuildPass Mobile: Pull in react-native, expo, or external state libraries.
 import { GuildCard } from "../src/components/GuildCard";
@@ -23,10 +18,6 @@ import React from "react";
 export default function Guilds() {
   // GuildPass Mobile: Variable binding and property initialization.
   const router = useRouter();
-  // GuildPass Mobile: Local UI-scoped constant or state representation.
-  const { walletAddress } = useWallet();
-  // GuildPass Mobile: Variable binding and property initialization.
-  const { getMembership } = useMembership(walletAddress);
 
   // In a real app, you would fetch all guilds.
   // For MVP, we'll show a few example guilds that the user can explore.

app/guilds/[guildId].tsx

@@ -5,8 +5,10 @@ import { useLocalSearchParams } from "expo-router";
 // GuildPass Mobile: Pull in react-native, expo, or external state libraries.
 import { useWallet } from "../../src/features/wallet/useWallet";
 // GuildPass Mobile: Import package module dependencies.
-import { useGuilds } from "../../src/features/guilds/useGuilds";
+import { useGuild } from "../../src/features/guilds/useGuild";
 // GuildPass Mobile: Pull in react-native, expo, or external state libraries.
+import { useGuildRoles } from "../../src/features/guilds/useGuildRoles";
+// GuildPass Mobile: Import package module dependencies.
 import { useMembership } from "../../src/features/membership/useMembership";
 // GuildPass Mobile: Import package module dependencies.
 import { AppHeader } from "../../src/components/AppHeader";
@@ -23,37 +25,28 @@ import React from "react";
 
 // GuildPass Mobile: Core mobile screen or hook export definition.
 export default function GuildDetail() {
-  // GuildPass Mobile: Local UI-scoped constant or state representation.
   const { guildId } = useLocalSearchParams<{ guildId: string }>();
-  // GuildPass Mobile: Variable binding and property initialization.
   const { walletAddress } = useWallet();
-  // GuildPass Mobile: Local UI-scoped constant or state representation.
-  const { getGuild, getRoles } = useGuilds();
-  // GuildPass Mobile: Variable binding and property initialization.
-  const { getMembership } = useMembership(walletAddress);
 
-  // GuildPass Mobile: Local UI-scoped constant or state representation.
-  const { data: guild, isLoading: guildLoading, error: guildError } = getGuild(guildId);
-  // GuildPass Mobile: Variable binding and property initialization.
-  const { data: membership, isLoading: memLoading } = getMembership(guildId);
-  // GuildPass Mobile: Local UI-scoped constant or state representation.
-  const { data: roles, isLoading: rolesLoading } = getRoles(guildId);
+  const {
+    data: guild,
+    isLoading: guildLoading,
+    error: guildError,
+  } = useGuild(guildId ?? "");
+  const { data: membership, isLoading: memLoading } = useMembership(
+    walletAddress,
+    guildId ?? "",
+  );
+  const { data: roles, isLoading: rolesLoading } = useGuildRoles(guildId ?? "");
 
-  // GuildPass Mobile: Validate screen variables or params before routing.
   if (guildLoading || memLoading || rolesLoading) {
-    // GuildPass Mobile: Return evaluated JSX layout or callback response.
     return <LoadingState message="Fetching guild details..." />;
-    // GuildPass Mobile: Exit functional execution container scope block.
   }
 
-  // GuildPass Mobile: Evaluate branch condition check for UI guards.
   if (guildError || !guild) {
-    // GuildPass Mobile: Terminate block execution context and send back value.
     return <ErrorState message="Failed to load guild details" />;
-    // GuildPass Mobile: Exit functional execution container scope block.
   }
 
-  // GuildPass Mobile: Return evaluated JSX layout or callback response.
   return (
     <View className="flex-1 bg-background">
       <AppHeader title={guild.name} showBack />
@@ -80,7 +73,10 @@ export default function GuildDetail() {
 
         <View className="mb-6">
           <Text className="text-lg font-bold text-text mb-3">Your Membership</Text>
-          <Card className={membership?.isActive ? "border-success/30" : ""} accessibilityLabel={`Membership status: ${membership?.isActive ? "Active Member" : "Not a Member"}`}>
+          <Card
+            className={membership?.isActive ? "border-success/30" : ""}
+            accessibilityLabel={`Membership status: ${membership?.isActive ? "Active Member" : "Not a Member"}`}
+          >
             <View className="flex-row justify-between items-center">
               <Text className="text-text font-medium">Status</Text>
               <Text
@@ -105,5 +101,4 @@ export default function GuildDetail() {
       </ScrollView>
     </View>
   );
-  // GuildPass Mobile: Exit functional execution container scope block.
 }

src/features/access/useAccessCheckResult.ts

@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+import { guildPassClient } from "../../lib/guildpassClient";
+import { accessCheckKeys, type AccessCheckParams } from "../../lib/queryKeys";
+
+export function useAccessCheckResult(params: AccessCheckParams) {
+  return useQuery({
+    queryKey: accessCheckKeys.detail(params),
+    queryFn: () => guildPassClient.access.checkAccess(params),
+    enabled: !!params.walletAddress && !!params.guildId && !!params.resourceId,
+  });
+}

src/features/guilds/useGuild.ts

@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+import { guildPassClient } from "../../lib/guildpassClient";
+import { guildKeys } from "../../lib/queryKeys";
+
+export function createGuildQueryOptions(guildId: string) {
+  return {
+    queryKey: guildKeys.detail(guildId),
+    queryFn: () => guildPassClient.guilds.getGuild({ guildId }),
+    enabled: !!guildId,
+  } as const;
+}
+
+export function useGuild(guildId: string) {
+  return useQuery(createGuildQueryOptions(guildId));
+}

src/features/guilds/useGuildConfig.ts

@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+import { guildPassClient } from "../../lib/guildpassClient";
+import { guildKeys } from "../../lib/queryKeys";
+
+export function useGuildConfig(guildId: string) {
+  return useQuery({
+    queryKey: guildKeys.config(guildId),
+    queryFn: () => guildPassClient.guilds.getGuildConfig({ guildId }),
+    enabled: !!guildId,
+  });
+}

src/features/guilds/useGuildRoles.ts

@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+import { guildPassClient } from "../../lib/guildpassClient";
+import { guildKeys } from "../../lib/queryKeys";
+
+export function useGuildRoles(guildId: string) {
+  return useQuery({
+    queryKey: guildKeys.roles(guildId),
+    queryFn: () => guildPassClient.roles.getRoles({ guildId }),
+    enabled: !!guildId,
+  });
+}

src/features/membership/useMembership.ts

@@ -1,51 +1,15 @@
-// GuildPass Mobile: Pull in react-native, expo, or external state libraries.
 import { useQuery } from "@tanstack/react-query";
-// GuildPass Mobile: Import package module dependencies.
 import { guildPassClient } from "../../lib/guildpassClient";
+import { membershipKeys } from "../../lib/queryKeys";
 
-// GuildPass Mobile: Exported screen, component definition, or state hooks.
-export const useMembership = (walletAddress: string | null) => {
-  // GuildPass Mobile: Variable binding and property initialization.
-  const getMembership = (guildId: string) => {
-    // GuildPass Mobile: Terminate block execution context and send back value.
-    return useQuery({
-      queryKey: ["membership", walletAddress, guildId],
-      queryFn: () =>
-        // GuildPass Mobile: Enter functional execution container scope block.
-        guildPassClient.membership.getMembership({
-          walletAddress: walletAddress!,
-          guildId,
-          // GuildPass Mobile: Exit functional execution container scope block.
-        }),
-      enabled: !!walletAddress && !!guildId,
-      // GuildPass Mobile: Exit functional execution container scope block.
-    });
-    // GuildPass Mobile: Exit functional execution container scope block.
-  };
-
-  // GuildPass Mobile: Local UI-scoped constant or state representation.
-  const getUserRoles = (guildId: string) => {
-    // GuildPass Mobile: Return evaluated JSX layout or callback response.
-    return useQuery({
-      queryKey: ["user-roles", walletAddress, guildId],
-      queryFn: () =>
-        // GuildPass Mobile: Enter functional execution container scope block.
-        guildPassClient.roles.getUserRoles({
-          walletAddress: walletAddress!,
-          guildId,
-          // GuildPass Mobile: Exit functional execution container scope block.
-        }),
-      enabled: !!walletAddress && !!guildId,
-      // GuildPass Mobile: Exit functional execution container scope block.
-    });
-    // GuildPass Mobile: Exit functional execution container scope block.
-  };
-
-  // GuildPass Mobile: Terminate block execution context and send back value.
-  return {
-    getMembership,
-    getUserRoles,
-    // GuildPass Mobile: Exit functional execution container scope block.
-  };
-  // GuildPass Mobile: Exit functional execution container scope block.
-};
+export function useMembership(walletAddress: string | null, guildId: string) {
+  return useQuery({
+    queryKey: membershipKeys.detail(walletAddress, guildId),
+    queryFn: () =>
+      guildPassClient.membership.getMembership({
+        walletAddress: walletAddress!,
+        guildId,
+      }),
+    enabled: !!walletAddress && !!guildId,
+  });
+}