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 channels query hook as well

serenity b22da76c 02039883

+71 -13
+8 -13
src/components/Settings/ChannelSettings.tsx
··· 2 2 import { Text } from "@/components/primitives/Text"; 3 3 import { ChannelInfo } from "@/components/Settings/ChannelInfo"; 4 4 import { useFacet } from "@/lib/facet"; 5 - import type { AtUri } from "@/lib/types/atproto"; 6 - import { stringToAtUri } from "@/lib/utils/atproto"; 5 + import { fade, lighten } from "@/lib/facet/src/lib/colors"; 7 6 import { useOAuthSessionGuaranteed } from "@/providers/OAuthProvider"; 8 7 import { useCurrentPalette } from "@/providers/ThemeProvider"; 9 - import { getChannelRecordsFromPds } from "@/queries/get-channels-from-pds"; 10 - import type { OAuthSession } from "@atproto/oauth-client"; 11 - import { useQuery } from "@tanstack/react-query"; 12 - import { MessagesSquare } from "lucide-react-native"; 13 - import { View } from "react-native"; 8 + import { useChannelsQuery } from "@/queries/hooks/useChannelsQuery"; 9 + import { MessagesSquare, Plus } from "lucide-react-native"; 10 + import { useState } from "react"; 11 + import { Modal, Pressable, View } from "react-native"; 14 12 15 13 export const ChannelSettings = () => { 16 14 const { atoms, typography } = useFacet(); 17 15 const { semantic } = useCurrentPalette(); 18 16 const session = useOAuthSessionGuaranteed(); 17 + const [showAddModal, setShowAddModal] = useState(false); 18 + const { useQuery } = useChannelsQuery(session); 19 19 20 - const { isLoading, data: channels } = useQuery({ 21 - queryKey: ["channels", session.did], 22 - queryFn: async () => { 23 - return await channelsQueryFn(session); 24 - }, 25 - }); 20 + const { isLoading, data: channels } = useQuery(); 26 21 27 22 return isLoading ? ( 28 23 <Loading />
+63
src/queries/hooks/useChannelsQuery.ts
··· 1 + import type { AtUri } from "@/lib/types/atproto"; 2 + import { stringToAtUri } from "@/lib/utils/atproto"; 3 + import { getChannelRecordsFromPds } from "@/queries/get-channels-from-pds"; 4 + import type { OAuthSession } from "@atproto/oauth-client"; 5 + import { useQuery } from "@tanstack/react-query"; 6 + 7 + export const useChannelsQuery = (session: OAuthSession) => { 8 + const queryKey = ["channels", session.did]; 9 + return { 10 + queryKey, 11 + useQuery: () => 12 + useQuery({ 13 + queryKey, 14 + queryFn: async () => { 15 + return await channelsQueryFn(session); 16 + }, 17 + }), 18 + }; 19 + }; 20 + 21 + const channelsQueryFn = async (session: OAuthSession) => { 22 + const channels = await getChannelRecordsFromPds({ 23 + pdsEndpoint: session.serverMetadata.issuer, 24 + did: session.did, 25 + }); 26 + 27 + if (!channels.ok) { 28 + console.error("channelsQueryFn error.", channels.error); 29 + throw new Error( 30 + `Something went wrong while getting the user's channel records.}`, 31 + ); 32 + } 33 + 34 + const results = channels.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 { cid: record.cid, uri, value: record.value }; 59 + }) 60 + .filter((atUri) => atUri !== undefined); 61 + 62 + return results; 63 + };