frontend client for gemstone. decentralised workplace app
refactor: abstract channels query hook as well
+71
-13
+8
-13
src/components/Settings/ChannelSettings.tsx
+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
+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
+
};