frontend client for gemstone. decentralised workplace app
gmstn.systems
1import { ChannelPickerSpace } from "@/components/Navigation/ChannelsPicker/ChannelPickerSpace";
2import { Text } from "@/components/primitives/Text";
3import { useFacet } from "@/lib/facet";
4import type { AtUri } from "@/lib/types/atproto";
5import type { SystemsGmstnDevelopmentChannel } from "@/lib/types/lexicon/systems.gmstn.development.channel";
6import { useChannelRecords } from "@/providers/authed/ChannelsProvider";
7import { useCurrentPalette } from "@/providers/ThemeProvider";
8import { useMemo } from "react";
9import { View } from "react-native";
10
11export const ChannelsPicker = () => {
12 const { channels } = useChannelRecords();
13 const { semantic } = useCurrentPalette();
14 const { atoms } = useFacet();
15
16 // we consider a did to be a space.
17 const channelsBySpace = useMemo(
18 () =>
19 channels.reduce(
20 (map, channel) => {
21 const { authority } = channel.channelAtUri;
22 const group = map.get(authority) ?? [];
23 group.push(channel);
24 map.set(authority, group);
25 return map;
26 },
27 new Map<
28 string,
29 Array<{
30 channel: SystemsGmstnDevelopmentChannel;
31 channelAtUri: AtUri;
32 }>
33 >(),
34 ),
35 [channels],
36 );
37
38 const spaces = channelsBySpace.entries().toArray();
39
40 const shouldShowEmpty = spaces.length > 0;
41
42 return (
43 <View
44 style={{
45 backgroundColor: semantic.backgroundDarker,
46 padding: 12,
47 paddingTop: 6,
48 borderTopRightRadius: atoms.radii.xl,
49 minWidth: 250,
50 maxWidth: 250,
51 }}
52 >
53 {shouldShowEmpty ? (
54 spaces.map((space) => (
55 <ChannelPickerSpace key={space[0]} space={space} />
56 ))
57 ) : (
58 <View
59 style={{
60 height: "100%",
61 width: "100%",
62 justifyContent: "center",
63 alignItems: "center",
64 }}
65 >
66 <Text
67 style={{
68 color: semantic.border,
69 paddingBottom: 8,
70 textAlign: "center",
71 }}
72 >
73 No channels :(
74 </Text>
75 <Text
76 style={{
77 color: semantic.border,
78 textAlign: "center",
79 }}
80 >
81 Join a channel or register a Shard and Lattice to create
82 your own!
83 </Text>
84 </View>
85 )}
86 </View>
87 );
88};