frontend client for gemstone. decentralised workplace app
gmstn.systems
1import { ChannelPickerItem } from "@/components/Navigation/ChannelsPicker/ChannelPickerItem";
2import { Loading } from "@/components/primitives/Loading";
3import { Text } from "@/components/primitives/Text";
4import type { AtUri, Did } from "@/lib/types/atproto";
5import type { SystemsGmstnDevelopmentChannel } from "@/lib/types/lexicon/systems.gmstn.development.channel";
6import { getBskyProfile } from "@/queries/get-profile";
7import { useQuery } from "@tanstack/react-query";
8import { Image } from "expo-image";
9import { View } from "react-native";
10
11export const ChannelPickerSpace = ({
12 space,
13}: {
14 space: [
15 string,
16 Array<{
17 channel: SystemsGmstnDevelopmentChannel;
18 channelAtUri: AtUri;
19 }>,
20 ];
21}) => {
22 const spaceDid = space[0];
23
24 const { isLoading, data, error } = useQuery({
25 queryKey: ["profile", spaceDid],
26 queryFn: async () => {
27 return await getBskyProfile(spaceDid as Did);
28 },
29 staleTime: Infinity,
30 });
31
32 const channels = space[1];
33 return (
34 <>
35 {isLoading ? (
36 <Loading />
37 ) : error ? (
38 <Text>{error.message}</Text>
39 ) : (
40 <View style={{ paddingRight: 16 }}>
41 <View
42 style={{
43 display: "flex",
44 flexDirection: "row",
45 gap: 6,
46 alignItems: "center",
47 padding: 4,
48 }}
49 >
50 <Image
51 style={{
52 width: 42,
53 height: 42,
54 borderRadius: 2000000000,
55 }}
56 source={{ uri: data?.avatar ?? spaceDid }}
57 />
58 <Text>@{data?.handle ?? spaceDid}</Text>
59 </View>
60 <View
61 style={{
62 paddingLeft: 8,
63 display: "flex",
64 gap: 2,
65 paddingTop: 4,
66 paddingBottom: 4,
67 }}
68 >
69 {channels.map(({ channel, channelAtUri }, idx) => (
70 <ChannelPickerItem
71 channel={channel}
72 channelAtUri={channelAtUri}
73 key={idx}
74 />
75 ))}
76 </View>
77 </View>
78 )}
79 </>
80 );
81};