frontend client for gemstone. decentralised workplace app
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

refactor: abstract query into own hook

serenity cbd3a9ff f943d117

+131 -110
+3 -55
src/components/Settings/LatticeSettings.tsx
··· 4 4 import { RegisterLatticeModalContent } from "@/components/Settings/RegisterLatticeModalContent"; 5 5 import { useFacet } from "@/lib/facet"; 6 6 import { fade, lighten } from "@/lib/facet/src/lib/colors"; 7 - import type { AtUri } from "@/lib/types/atproto"; 8 - import { stringToAtUri } from "@/lib/utils/atproto"; 9 7 import { useOAuthSessionGuaranteed } from "@/providers/OAuthProvider"; 10 8 import { useCurrentPalette } from "@/providers/ThemeProvider"; 11 - import { getUserLattices } from "@/queries/get-lattices-from-pds"; 12 - import type { OAuthSession } from "@atproto/oauth-client"; 13 - import { useQuery } from "@tanstack/react-query"; 9 + import { useLatticesQuery } from "@/queries/hooks/useLatticesQuery"; 14 10 import { Gem, Plus, Waypoints } from "lucide-react-native"; 15 11 import { useState } from "react"; 16 12 import { Modal, Pressable, View } from "react-native"; ··· 20 16 const { atoms, typography } = useFacet(); 21 17 const session = useOAuthSessionGuaranteed(); 22 18 const [showRegisterModal, setShowRegisterModal] = useState(false); 19 + const { useQuery } = useLatticesQuery(session) 23 20 24 - const { data: lattices, isLoading } = useQuery({ 25 - queryKey: ["lattice", session.did], 26 - queryFn: async () => { 27 - return await latticeQueryFn(session); 28 - }, 29 - }); 21 + const { data: lattices, isLoading } = useQuery() 30 22 31 23 return isLoading ? ( 32 24 <Loading /> ··· 167 159 </View> 168 160 ); 169 161 }; 170 - 171 - const latticeQueryFn = async (session: OAuthSession) => { 172 - const lattices = await getUserLattices({ 173 - pdsEndpoint: session.serverMetadata.issuer, 174 - did: session.did, 175 - }); 176 - 177 - if (!lattices.ok) { 178 - console.error("latticeQueryFn error.", lattices.error); 179 - throw new Error( 180 - `Something went wrong while getting the user's lattice records.}`, 181 - ); 182 - } 183 - 184 - const results = lattices.data 185 - .map((record) => { 186 - const convertResult = stringToAtUri(record.uri); 187 - if (!convertResult.ok) { 188 - console.error( 189 - "Could not convert", 190 - record, 191 - "into at:// URI object.", 192 - convertResult.error, 193 - ); 194 - return; 195 - } 196 - if (!convertResult.data.collection || !convertResult.data.rKey) { 197 - console.error( 198 - record, 199 - "did not convert to a full at:// URI with collection and rkey.", 200 - ); 201 - return; 202 - } 203 - const uri: Required<AtUri> = { 204 - authority: convertResult.data.authority, 205 - collection: convertResult.data.collection, 206 - rKey: convertResult.data.rKey, 207 - }; 208 - return { uri, value: record.value }; 209 - }) 210 - .filter((atUri) => atUri !== undefined); 211 - 212 - return results; 213 - };
+3 -55
src/components/Settings/ShardSettings.tsx
··· 4 4 import { ShardInfo } from "@/components/Settings/ShardInfo"; 5 5 import { useFacet } from "@/lib/facet"; 6 6 import { fade, lighten } from "@/lib/facet/src/lib/colors"; 7 - import type { AtUri } from "@/lib/types/atproto"; 8 - import { stringToAtUri } from "@/lib/utils/atproto"; 9 7 import { useOAuthSessionGuaranteed } from "@/providers/OAuthProvider"; 10 8 import { useCurrentPalette } from "@/providers/ThemeProvider"; 11 - import { getUserShards } from "@/queries/get-shards-from-pds"; 12 - import type { OAuthSession } from "@atproto/oauth-client"; 13 - import { useQuery } from "@tanstack/react-query"; 9 + import { useShardsQuery } from "@/queries/hooks/useShardsQuery"; 14 10 import { Gem, HardDrive, Plus } from "lucide-react-native"; 15 11 import { useState } from "react"; 16 12 import { Modal, Pressable, View } from "react-native"; ··· 20 16 const { atoms, typography } = useFacet(); 21 17 const session = useOAuthSessionGuaranteed(); 22 18 const [showRegisterModal, setShowRegisterModal] = useState(false); 19 + const { useQuery } = useShardsQuery(session) 23 20 24 - const { data: shards, isLoading } = useQuery({ 25 - queryKey: ["shard", session.did], 26 - queryFn: async () => { 27 - return await shardsQueryFn(session); 28 - }, 29 - }); 21 + const { data: shards, isLoading } = useQuery() 30 22 31 23 return isLoading ? ( 32 24 <Loading /> ··· 167 159 </View> 168 160 ); 169 161 }; 170 - 171 - const shardsQueryFn = async (session: OAuthSession) => { 172 - const shards = await getUserShards({ 173 - pdsEndpoint: session.serverMetadata.issuer, 174 - did: session.did, 175 - }); 176 - 177 - if (!shards.ok) { 178 - console.error("shardQueryFn error.", shards.error); 179 - throw new Error( 180 - `Something went wrong while getting the user's shard records.}`, 181 - ); 182 - } 183 - 184 - const results = shards.data 185 - .map((record) => { 186 - const convertResult = stringToAtUri(record.uri); 187 - if (!convertResult.ok) { 188 - console.error( 189 - "Could not convert", 190 - record, 191 - "into at:// URI object.", 192 - convertResult.error, 193 - ); 194 - return; 195 - } 196 - if (!convertResult.data.collection || !convertResult.data.rKey) { 197 - console.error( 198 - record, 199 - "did not convert to a full at:// URI with collection and rkey.", 200 - ); 201 - return; 202 - } 203 - const uri: Required<AtUri> = { 204 - authority: convertResult.data.authority, 205 - collection: convertResult.data.collection, 206 - rKey: convertResult.data.rKey, 207 - }; 208 - return { uri, value: record.value }; 209 - }) 210 - .filter((atUri) => atUri !== undefined); 211 - 212 - return results; 213 - };
+63
src/queries/hooks/useLatticesQuery.ts
··· 1 + import type { AtUri } from "@/lib/types/atproto"; 2 + import { stringToAtUri } from "@/lib/utils/atproto"; 3 + import { getUserLattices } from "@/queries/get-lattices-from-pds"; 4 + import type { OAuthSession } from "@atproto/oauth-client"; 5 + import { useQuery } from "@tanstack/react-query"; 6 + 7 + export const useLatticesQuery = (session: OAuthSession) => { 8 + const queryKey = ["lattice", session.did]; 9 + return { 10 + queryKey, 11 + useQuery: () => 12 + useQuery({ 13 + queryKey: queryKey, 14 + queryFn: async () => { 15 + return await latticeQueryFn(session); 16 + }, 17 + }), 18 + }; 19 + }; 20 + 21 + const latticeQueryFn = async (session: OAuthSession) => { 22 + const lattices = await getUserLattices({ 23 + pdsEndpoint: session.serverMetadata.issuer, 24 + did: session.did, 25 + }); 26 + 27 + if (!lattices.ok) { 28 + console.error("latticeQueryFn error.", lattices.error); 29 + throw new Error( 30 + `Something went wrong while getting the user's lattice records.}`, 31 + ); 32 + } 33 + 34 + const results = lattices.data 35 + .map((record) => { 36 + const convertResult = stringToAtUri(record.uri); 37 + if (!convertResult.ok) { 38 + console.error( 39 + "Could not convert", 40 + record, 41 + "into at:// URI object.", 42 + convertResult.error, 43 + ); 44 + return; 45 + } 46 + if (!convertResult.data.collection || !convertResult.data.rKey) { 47 + console.error( 48 + record, 49 + "did not convert to a full at:// URI with collection and rkey.", 50 + ); 51 + return; 52 + } 53 + const uri: Required<AtUri> = { 54 + authority: convertResult.data.authority, 55 + collection: convertResult.data.collection, 56 + rKey: convertResult.data.rKey, 57 + }; 58 + return { uri, value: record.value }; 59 + }) 60 + .filter((atUri) => atUri !== undefined); 61 + 62 + return results; 63 + };
+62
src/queries/hooks/useShardsQuery.ts
··· 1 + import type { AtUri } from "@/lib/types/atproto"; 2 + import { stringToAtUri } from "@/lib/utils/atproto"; 3 + import { getUserShards } from "@/queries/get-shards-from-pds"; 4 + import type { OAuthSession } from "@atproto/oauth-client"; 5 + import { useQuery } from "@tanstack/react-query"; 6 + 7 + export const useShardsQuery = (session: OAuthSession) => { 8 + const queryKey = ["shard", session.did]; 9 + return { 10 + queryKey, 11 + useQuery: () => useQuery({ 12 + queryKey: queryKey, 13 + queryFn: async () => { 14 + return await shardsQueryFn(session); 15 + }, 16 + }), 17 + }; 18 + }; 19 + 20 + const shardsQueryFn = async (session: OAuthSession) => { 21 + const shards = await getUserShards({ 22 + pdsEndpoint: session.serverMetadata.issuer, 23 + did: session.did, 24 + }); 25 + 26 + if (!shards.ok) { 27 + console.error("shardQueryFn error.", shards.error); 28 + throw new Error( 29 + `Something went wrong while getting the user's shard records.}`, 30 + ); 31 + } 32 + 33 + const results = shards.data 34 + .map((record) => { 35 + const convertResult = stringToAtUri(record.uri); 36 + if (!convertResult.ok) { 37 + console.error( 38 + "Could not convert", 39 + record, 40 + "into at:// URI object.", 41 + convertResult.error, 42 + ); 43 + return; 44 + } 45 + if (!convertResult.data.collection || !convertResult.data.rKey) { 46 + console.error( 47 + record, 48 + "did not convert to a full at:// URI with collection and rkey.", 49 + ); 50 + return; 51 + } 52 + const uri: Required<AtUri> = { 53 + authority: convertResult.data.authority, 54 + collection: convertResult.data.collection, 55 + rKey: convertResult.data.rKey, 56 + }; 57 + return { uri, value: record.value }; 58 + }) 59 + .filter((atUri) => atUri !== undefined); 60 + 61 + return results; 62 + };